0.3 #146
4
kdb-web/.prettierrc
Normal file
4
kdb-web/.prettierrc
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"tabWidth": 4,
|
||||
"useTabs": false
|
||||
}
|
@ -1,3 +1,3 @@
|
||||
<div class="menu">
|
||||
<p-menu [model]="menuItems"></p-menu>
|
||||
<p-panelMenu [model]="menuItems"></p-panelMenu>
|
||||
</div>
|
@ -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();
|
||||
});
|
||||
|
@ -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,
|
||||
|
@ -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;
|
||||
|
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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 !! */
|
||||
}
|
||||
|
@ -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 {
|
||||
|
Loading…
Reference in New Issue
Block a user