ag-admin/OpenSlides
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve user menu

Browse Source
This commit is contained in:
Sean Engelhardt 2018-08-03 11:05:21 +02:00 committed by FinnStutzenstein
parent a6ba1b92dc
commit c5b38cc430
2 changed files with 66 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
client/src/app/site/site.component.html
View File

@ -14,9 +14,40 @@
<!-- Get the username from operator --> <!-- Get the username from operator -->
{{username}} {{username}}
</mat-expansion-panel-header> </mat-expansion-panel-header>
<mat-action-row> <mat-nav-list>
<button (click)='logOutButton()' mat-button>Logout</button> <!-- <mat-list-item> -->
</mat-action-row>
<a (click)='logOutButton()' mat-list-item>
<fa-icon icon='user-cog'></fa-icon>
<span translate>Edit Profile</span>
</a>
<a (click)='logOutButton()' mat-list-item>
<fa-icon icon='key'></fa-icon>
<span translate>Change Password</span>
</a>
<mat-divider></mat-divider>
<a (click)='logOutButton()' mat-list-item>
<fa-icon icon='sign-out-alt'></fa-icon>
<span translate>Logout</span>
</a>
<!-- <button (click)='logOutButton()' mat-button>
<fa-icon icon='user-cog'></fa-icon> Edit Profile</button> -->
<!-- </mat-list-item>
<mat-list-item>
<button (click)='logOutButton()' mat-button>
<fa-icon icon='key'></fa-icon> Change Password</button>
</mat-list-item>
<mat-list-item>
<button (click)='logOutButton()' mat-button>
<fa-icon icon='sign-out-alt'> </fa-icon>Logout</button>
</mat-list-item> -->
</mat-nav-list>
<!-- TODO translate -->
</mat-expansion-panel> </mat-expansion-panel>
<!-- navigation --> <!-- navigation -->

36
client/src/app/site/site.component.scss-theme.scss
View File

@ -8,7 +8,19 @@
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);
$background: map-get($theme, background); $background: map-get($theme, background);
/** the name of the selector */
app-site { app-site {
mat-sidenav-container {
/** nav panel on the left */
mat-sidenav {
/** rules for icons in the whole site-view */
.ng-fa-icon {
min-width: 20px; //puts the text to the right on the same level
margin-right: 10px; // the distance from the icon to the text
}
}
}
/** adjust the color of the main container to our theme */ /** adjust the color of the main container to our theme */
.main-container { .main-container {
background-color: mat-color($background, background); background-color: mat-color($background, background);
@ -16,14 +28,32 @@
/** change the nav-toolbar to the darker nuance of the current theme*/ /** change the nav-toolbar to the darker nuance of the current theme*/
.nav-toolbar { .nav-toolbar {
height: 80px;
background-color: mat-color($primary, darker); background-color: mat-color($primary, darker);
mat-toolbar-row {
height: 80px;
}
} }
/** make the .user-menu expansion panel look like the nav-toolbar above */ /** make the .user-menu expansion panel look like the nav-toolbar above */
.user-menu { .user-menu {
background-color: mat-color($primary, darker); background-color: mat-color($primary, darker);
color: mat-color($background, raised-button); color: mat-color($background, raised-button);
min-height: 64px; min-height: 48px;
/** color of the divider just above the log out button */
mat-divider {
border-top-color: rgba(255, 255, 255, 0.25);
}
fa-icon {
color: mat-color($background, raised-button);
}
span {
color: mat-color($background, raised-button);
}
.mat-expansion-indicator:after { .mat-expansion-indicator:after {
color: mat-color($background, raised-button); color: mat-color($background, raised-button);
@ -32,10 +62,8 @@
/** style and align the nav icons the icons*/ /** style and align the nav icons the icons*/
.main-nav { .main-nav {
.ng-fa-icon { fa-icon {
color: mat-color($foreground, icon); color: mat-color($foreground, icon);
min-width: 20px; //puts the text to the right on the same leve
margin-right: 10px; // the distance from the icon to the text
} }
span { span {
font-weight: bold; font-weight: bold;