Skip to content

Commit d8f4101

Browse files
committed
fixed sidebar and tabs related bugs
1 parent 2b245bd commit d8f4101

File tree

4 files changed

+41
-24
lines changed

4 files changed

+41
-24
lines changed

client/mysql-gui-client/src/app/lib/components/sidebar/sidebar.component.html

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="h-screen overflow-hidden bg-gray-400">
22
<div class="ml-2 text-sm">Navigator</div>
3-
<div class="h-[calc(100vh-3.5rem)] overflow-y-auto overflow-x-hidden bg-gray-100 dark:bg-gray-900">
3+
<div class="h-[calc(100%-2rem)] bg-gray-100 dark:bg-gray-900">
44
<div class="mb-1 flex items-center justify-between p-2 text-sm font-semibold">
55
<span>SCHEMAS</span>
66
<span
@@ -9,22 +9,22 @@
99
(click)="refresh()"
1010
></span>
1111
</div>
12+
<div class="p-2">
13+
<span
14+
class="text-md mr-2"
15+
[ngClass]="'icon-[fa--search]'"
16+
></span>
17+
<input
18+
class="mb-4 h-8 rounded border focus:border-blue-300 focus:outline-none focus:ring"
19+
type="text"
20+
placeholder="Filter objects"
21+
/>
22+
<ng-template #loading>
23+
<div>Loading...</div>
24+
</ng-template>
25+
</div>
1226

13-
<div>
14-
<div class="p-2">
15-
<span
16-
class="text-md mr-2"
17-
[ngClass]="'icon-[fa--search]'"
18-
></span>
19-
<input
20-
class="mb-4 h-8 rounded border focus:border-blue-300 focus:outline-none focus:ring"
21-
type="text"
22-
placeholder="Filter objects"
23-
/>
24-
<ng-template #loading>
25-
<div>Loading...</div>
26-
</ng-template>
27-
</div>
27+
<div class="h-[80vh] overflow-auto">
2828
<div
2929
class="pb-2 pl-2 scrollbar-thin scrollbar-track-gray-200 scrollbar-thumb-gray-500"
3030
*ngIf="databases['databases']; else loading"

client/mysql-gui-client/src/app/pages/home/home.component.html

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,12 @@
22
<div class="flex h-2/5 flex-col border-b border-gray-300">
33
<div
44
*ngIf="tabs.length > 0"
5-
class="border-2 border-b border-gray-200 bg-gray-400 text-center text-sm font-medium text-gray-500"
5+
class="h-[36px] overflow-x-auto border-2 border-b border-gray-200 bg-gray-400 text-center text-sm font-medium text-gray-500 [&::-webkit-scrollbar]:hidden"
66
>
7-
<ul class="flex flex-wrap">
7+
<ul
8+
#tabContainer
9+
class="flex overflow-x-auto whitespace-nowrap [&::-webkit-scrollbar]:hidden"
10+
>
811
<li
912
*ngFor="let tab of tabs; let i = index"
1013
class="flex items-center text-black"

client/mysql-gui-client/src/app/pages/home/home.component.ts

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import {
22
AfterViewChecked,
33
AfterViewInit,
4+
ChangeDetectionStrategy,
5+
ChangeDetectorRef,
46
Component,
57
ElementRef,
68
Input,
@@ -27,6 +29,7 @@ import { BackendService } from '@lib/services';
2729
export class HomeComponent implements OnChanges, AfterViewInit, AfterViewChecked {
2830
@Input() tabData!: newTabData;
2931
@ViewChild('editor', { static: false }) editor: ElementRef;
32+
@ViewChild('tabContainer', { static: false }) tabContainer: ElementRef;
3033
tabs = [];
3134
selectedTab = -1;
3235
tabContent: string[] = [];
@@ -37,7 +40,7 @@ export class HomeComponent implements OnChanges, AfterViewInit, AfterViewChecked
3740
selectedDB: string = '';
3841
currentTabId: string = '';
3942

40-
constructor() {}
43+
constructor(private cdr: ChangeDetectorRef) {}
4144

4245
ngOnChanges(changes: SimpleChanges): void {
4346
if (changes['tabData'] && this.tabData?.dbName && this.tabData?.tableName) {
@@ -124,6 +127,9 @@ export class HomeComponent implements OnChanges, AfterViewInit, AfterViewChecked
124127
this.selectedDB = dbName;
125128
this.currentTabId = id;
126129
}
130+
131+
this.cdr.detectChanges();
132+
this.scrollTabIntoView(this.tabs.length - 1);
127133
}
128134

129135
selectTab(tabIndex: number) {
@@ -140,6 +146,17 @@ export class HomeComponent implements OnChanges, AfterViewInit, AfterViewChecked
140146
this.editorInstance.setValue(this.tabContent[tabIndex]);
141147
}
142148
this.executeTriggered = false;
149+
this.cdr.detectChanges();
150+
this.scrollTabIntoView(tabIndex);
151+
}
152+
153+
scrollTabIntoView(tabIndex: number) {
154+
if (this.tabContainer && this.tabContainer.nativeElement) {
155+
const tabElement = this.tabContainer.nativeElement.children[tabIndex];
156+
if (tabElement) {
157+
tabElement.scrollIntoView({ behavior: 'smooth', inline: 'center' });
158+
}
159+
}
143160
}
144161

145162
closeTab(tabIndex: number) {

client/mysql-gui-client/src/app/pages/resultgrid/resultgrid.component.html

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,9 @@
22
*ngIf="tabsData.size > 0"
33
class="relative m-2 rounded-lg border-2 shadow-lg"
44
>
5-
<!-- Tools section fixed at the top -->
65
<div
76
class="sticky top-0 z-20 flex items-center justify-between bg-gray-200 p-1 text-sm font-semibold text-gray-700 dark:bg-gray-800 dark:text-gray-300"
87
>
9-
<!-- Total Rows Display on the Left -->
108
<div class="flex items-center rounded-lg bg-gray-100 px-2 py-1 shadow-sm">
119
<span
1210
class="mr-2 text-gray-600"
@@ -16,7 +14,6 @@
1614
<span class="ml-2 font-bold">{{ totalRows }}</span>
1715
</div>
1816

19-
<!-- Pagination Controls in the Center -->
2017
<div class="flex items-center">
2118
<button
2219
(click)="changePage(currentPage - 1)"
@@ -58,7 +55,7 @@
5855
<tr class="border-b border-gray-300">
5956
<th
6057
*ngFor="let header of headers"
61-
class="border border-gray-300 px-2 py-2 text-left font-bold uppercase text-gray-700"
58+
class="border border-gray-300 px-1 py-1 text-left font-bold uppercase text-gray-800"
6259
>
6360
{{ header }}
6461
</th>
@@ -71,7 +68,7 @@
7168
>
7269
<td
7370
*ngFor="let header of headers; let rowIndex = index"
74-
class="relative cursor-pointer text-ellipsis whitespace-nowrap border border-gray-300 px-3 py-2 text-gray-700"
71+
class="relative cursor-pointer text-ellipsis whitespace-nowrap border border-gray-300 px-1 py-1 text-gray-800"
7572
[attr.title]="row[header]"
7673
>
7774
<span

0 commit comments

Comments
 (0)