sh-edraft.de/sh_discord_bot
4
1
Fork 1
Code Issues 21 Pull Requests Actions Packages Projects 3 Releases 27 Wiki Activity

Improved design of menu to handle servers #72

Browse Source
This commit is contained in:
Sven Heidemann 2022-10-18 13:44:13 +02:00
parent c094a3efae
commit 1055d5c2e1
8 changed files with 79 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
kdb-web/.prettierrc Normal file
View File

@ -0,0 +1,4 @@
{
"tabWidth": 4,
"useTabs": false
}

2
kdb-web/src/app/components/sidebar/sidebar.component.html
View File

@ -1,3 +1,3 @@
<div class="menu">
<p-menu [model]="menuItems"></p-menu>
<p-panelMenu [model]="menuItems"></p-panelMenu>
</div>

16
kdb-web/src/app/components/sidebar/sidebar.component.ts
View File

@ -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();
});

5
kdb-web/src/app/modules/shared/shared.module.ts
View File

@ -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,

2
kdb-web/src/app/services/theme/theme.service.ts
View File

@ -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;

25
kdb-web/src/assets/i18n/de.json
View File

@ -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"
}
}
}

32
kdb-web/src/styles/primeng-fixes.scss
View File

@ -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 !! */
}

25
kdb-web/src/styles/themes/sh-edraft-dark-theme.scss
View File

@ -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 {