From 1055d5c2e19f632da0916618158498c05426712f Mon Sep 17 00:00:00 2001 From: Sven Heidemann Date: Tue, 18 Oct 2022 13:44:13 +0200 Subject: [PATCH] Improved design of menu to handle servers #72 --- kdb-web/.prettierrc | 4 +++ .../components/sidebar/sidebar.component.html | 2 +- .../components/sidebar/sidebar.component.ts | 16 ++++++++-- .../src/app/modules/shared/shared.module.ts | 5 ++- .../src/app/services/theme/theme.service.ts | 2 +- kdb-web/src/assets/i18n/de.json | 25 ++++----------- kdb-web/src/styles/primeng-fixes.scss | 32 +++++++++++++++++-- .../styles/themes/sh-edraft-dark-theme.scss | 25 ++++++++++++--- 8 files changed, 79 insertions(+), 32 deletions(-) create mode 100644 kdb-web/.prettierrc diff --git a/kdb-web/.prettierrc b/kdb-web/.prettierrc new file mode 100644 index 0000000000..5a938ce18e --- /dev/null +++ b/kdb-web/.prettierrc @@ -0,0 +1,4 @@ +{ + "tabWidth": 4, + "useTabs": false +} diff --git a/kdb-web/src/app/components/sidebar/sidebar.component.html b/kdb-web/src/app/components/sidebar/sidebar.component.html index b3bb4f3ba9..6f72d17e6c 100644 --- a/kdb-web/src/app/components/sidebar/sidebar.component.html +++ b/kdb-web/src/app/components/sidebar/sidebar.component.html @@ -1,3 +1,3 @@
- +
\ No newline at end of file diff --git a/kdb-web/src/app/components/sidebar/sidebar.component.ts b/kdb-web/src/app/components/sidebar/sidebar.component.ts index cbf13c6f7c..f7815fbdcb 100644 --- a/kdb-web/src/app/components/sidebar/sidebar.component.ts +++ b/kdb-web/src/app/components/sidebar/sidebar.component.ts @@ -40,6 +40,13 @@ export class SidebarComponent implements OnInit { this.menuItems = []; this.menuItems = [ { label: this.isSidebarOpen ? this.translateService.instant('sidebar.dashboard') : '', icon: 'pi pi-th-large', routerLink: 'dashboard' }, + + { + label: this.isSidebarOpen ? this.translateService.instant('sidebar.server') : '', icon: 'pi pi-server', items: [ + { label: this.isSidebarOpen ? this.translateService.instant('sidebar.settings') : '', icon: 'pi pi-cog', routerLink: 'server/id/settings' }, + { label: this.isSidebarOpen ? this.translateService.instant('sidebar.members') : '', icon: 'pi pi-user-edit', routerLink: 'server/id/members' }, + ] + }, ]; if (!hasPermission) { @@ -47,9 +54,12 @@ export class SidebarComponent implements OnInit { } this.menuItems.push( - { separator: true }, - { label: this.isSidebarOpen ? this.translateService.instant('sidebar.config') : '', icon: 'pi pi-cog', routerLink: '/admin/settings' }, - { label: this.isSidebarOpen ? this.translateService.instant('sidebar.auth_user_list') : '', icon: 'pi pi-user-edit', routerLink: '/admin/users' }, + { + label: this.isSidebarOpen ? this.translateService.instant('sidebar.administration') : '', icon: 'pi pi-cog', items: [ + { label: this.isSidebarOpen ? this.translateService.instant('sidebar.config') : '', icon: 'pi pi-cog', routerLink: '/admin/settings' }, + { label: this.isSidebarOpen ? this.translateService.instant('sidebar.auth_user_list') : '', icon: 'pi pi-user-edit', routerLink: '/admin/users' }, + ] + }, ); this.menuItems = this.menuItems.slice(); }); diff --git a/kdb-web/src/app/modules/shared/shared.module.ts b/kdb-web/src/app/modules/shared/shared.module.ts index 9a77a513cc..59c0d0ef06 100644 --- a/kdb-web/src/app/modules/shared/shared.module.ts +++ b/kdb-web/src/app/modules/shared/shared.module.ts @@ -18,6 +18,7 @@ import { ToastModule } from 'primeng/toast'; import { AuthRolePipe } from './pipes/auth-role.pipe'; import { IpAddressPipe } from './pipes/ip-address.pipe'; import { BoolPipe } from './pipes/bool.pipe'; +import { PanelMenuModule } from 'primeng/panelmenu'; @@ -44,7 +45,8 @@ import { BoolPipe } from './pipes/bool.pipe'; CheckboxModule, DropdownModule, TranslateModule, - DynamicDialogModule + DynamicDialogModule, + PanelMenuModule, ], exports: [ ButtonModule, @@ -63,6 +65,7 @@ import { BoolPipe } from './pipes/bool.pipe'; DropdownModule, TranslateModule, DynamicDialogModule, + PanelMenuModule, AuthRolePipe, IpAddressPipe, BoolPipe, diff --git a/kdb-web/src/app/services/theme/theme.service.ts b/kdb-web/src/app/services/theme/theme.service.ts index 914ba774ef..6dc3410ab2 100644 --- a/kdb-web/src/app/services/theme/theme.service.ts +++ b/kdb-web/src/app/services/theme/theme.service.ts @@ -27,7 +27,7 @@ export class ThemeService { }); this.isSidebarOpen$.subscribe(isSidebarOpen => { this.isSidebarOpen = isSidebarOpen; - this.sidebarWidth$.next(isSidebarOpen ? '150px' : '50px'); + this.sidebarWidth$.next(isSidebarOpen ? '175px' : '75px'); }); this.sidebarWidth$.subscribe(sidebarWidth => { this.sidebarWidth = sidebarWidth; diff --git a/kdb-web/src/assets/i18n/de.json b/kdb-web/src/assets/i18n/de.json index 96fa7213ee..9eec0bf3a4 100644 --- a/kdb-web/src/assets/i18n/de.json +++ b/kdb-web/src/assets/i18n/de.json @@ -9,6 +9,9 @@ "dashboard": "Dashboard", "server": "Server", "server_empty": "Kein Server ausgewählt", + "settings": "Einstellungen", + "members": "Mitglieder", + "administration": "Administration", "config": "Konfiguration", "auth_user_list": "Benutzer" }, @@ -212,24 +215,8 @@ "Freitag", "Samstag" ], - "dayNamesShort": [ - "Son", - "Mon", - "Die", - "Mit", - "Don", - "Fre", - "Sam" - ], - "dayNamesMin": [ - "So", - "Mo", - "Di", - "Mi", - "Do", - "Fr", - "Sa" - ], + "dayNamesShort": ["Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam"], + "dayNamesMin": ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"], "monthNames": [ "Januar", "Februar", @@ -267,4 +254,4 @@ "emptyMessage": "Keine Ergebnisse gefunden", "emptyFilterMessage": "Keine Ergebnisse gefunden" } -} \ No newline at end of file +} diff --git a/kdb-web/src/styles/primeng-fixes.scss b/kdb-web/src/styles/primeng-fixes.scss index 560ad4e34c..5bad03ee8e 100644 --- a/kdb-web/src/styles/primeng-fixes.scss +++ b/kdb-web/src/styles/primeng-fixes.scss @@ -6,14 +6,17 @@ } } -.p-menu { +.p-menu, +.p-panelmenu { background: none !important; border: none !important; width: auto !important; border-radius: 0px !important; padding: 0 !important; - .p-menuitem-link { + .p-menuitem-link, + .p-panelmenu-header > a, + .p-panelmenu-content .p-menuitem .p-menuitem-link { $distance: 10px; padding: $distance 0px $distance $distance !important; margin: 4px 0px 4px 6px !important; @@ -24,6 +27,31 @@ top: $headerHeight !important; } +.p-panelmenu { + .p-panelmenu-icon { + order: 1; // to be the first item on right side. + } + .p-menuitem-text { + flex-grow: 1; // to fill the whole space and push the icon to the end + } + + .p-panelmenu-header > a { + border: none !important; + border-radius: none !important; + font-weight: none !important; + transition: none !important; + } + + .p-panelmenu-content { + border: none !important; + background: none !important; + } + + .p-menuitem-text { + line-height: normal !important; + } +} + ui-menu .ui-menu-parent .ui-menu-child { width: 400px; /* exagerated !! */ } diff --git a/kdb-web/src/styles/themes/sh-edraft-dark-theme.scss b/kdb-web/src/styles/themes/sh-edraft-dark-theme.scss index 8fa192f1f0..6e0d8eb0d6 100644 --- a/kdb-web/src/styles/themes/sh-edraft-dark-theme.scss +++ b/kdb-web/src/styles/themes/sh-edraft-dark-theme.scss @@ -252,28 +252,43 @@ stroke: $primaryHeaderColor !important; } - .p-menu { + .p-menu, + .p-panelmenu { color: $primaryTextColor !important; .p-menuitem-link .p-menuitem-text, - .p-menuitem-link .p-menuitem-icon { + .p-menuitem-link .p-menuitem-icon, + .p-panelmenu-header > a { color: $primaryTextColor !important; + background: transparent !important; + font-size: 1rem !important; + font-weight: normal !important; } - .p-menuitem-link:focus { + .p-menuitem-link:focus, + .p-panelmenu-header > a:focus, + .p-panelmenu-content .p-menuitem .p-menuitem-link:focus { box-shadow: none !important; } - .p-menuitem-link:hover { + .p-menuitem-link:hover, + .p-panelmenu-header > a:hover, + .p-panelmenu-content .p-menuitem .p-menuitem-link:hover { background-color: $secondaryBackgroundColor !important; $border-radius: 20px; border-radius: $border-radius 0px 0px $border-radius; .p-menuitem-text, - .p-menuitem-icon { + .p-menuitem-icon, + .p-menuitem-text, + .p-panelmenu-icon { color: $primaryHeaderColor !important; } } + + .p-panelmenu-content { + margin: 5px 0px 5px 10px; + } } .p-menu-overlay {