Merge pull request #4842 from GabrielInTheWorld/headbar

Removes the second row for the headbar
This commit is contained in:
Sean 2019-07-16 11:26:46 +02:00 committed by GitHub
commit 4de1c526e9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 72 additions and 23 deletions

View File

@ -1,9 +1,3 @@
<mat-toolbar color="primary" [ngClass]="multiSelectMode ? 'multi-select' : ''" *ngIf="!vp.isMobile">
<!-- Nav menu -->
<button mat-icon-button *ngIf="!multiSelectMode" (click)="clickHamburgerMenu()">
<mat-icon>menu</mat-icon>
</button>
</mat-toolbar>
<mat-toolbar color="primary" [ngClass]="multiSelectMode ? 'multi-select' : ''" class="sticky-toolbar"> <mat-toolbar color="primary" [ngClass]="multiSelectMode ? 'multi-select' : ''" class="sticky-toolbar">
<div class="toolbar-left"> <div class="toolbar-left">
<!-- Nav menu --> <!-- Nav menu -->
@ -36,9 +30,7 @@
<div class="toolbar-right"> <div class="toolbar-right">
<!-- Extra controls slot --> <!-- Extra controls slot -->
<div class="extra-controls-wrapper"> <ng-content select=".extra-controls-slot"></ng-content>
<ng-content select=".extra-controls-slot"></ng-content>
</div>
<!-- Main action button - desktop --> <!-- Main action button - desktop -->
<button <button

View File

@ -6,17 +6,16 @@
} }
.sticky-toolbar { .sticky-toolbar {
position: -webkit-sticky; top: 0;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
top: 0px;
z-index: 5; z-index: 5;
position: sticky;
} }
.toolbar-left { .toolbar-left {
display: contents; display: flex;
button {
margin: 12px 0;
}
.toolbar-left-text { .toolbar-left-text {
margin-left: 10px; margin-left: 10px;
width: 100%; width: 100%;
@ -24,6 +23,7 @@
::ng-deep .title-slot { ::ng-deep .title-slot {
h2 { h2 {
margin: 16px 0;
display: block; display: block;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -38,11 +38,7 @@
} }
.toolbar-right { .toolbar-right {
display: contents; display: flex;
}
.extra-controls-wrapper {
display: contents;
::ng-deep .extra-controls-slot { ::ng-deep .extra-controls-slot {
display: flex; display: flex;
} }

View File

@ -133,9 +133,22 @@
<div class="os-footer-logo-container"> <div class="os-footer-logo-container">
<os-logo [footer]="true"></os-logo> <os-logo [footer]="true"></os-logo>
</div> </div>
</mat-nav-list> </mat-nav-list>
<!-- Toggle-button -->
<div class="nav-toggle-button-container" *ngIf="!vp.isMobile">
<button *ngIf="sideNav.opened" mat-raised-button (click)="toggleSideNav()" class="nav-toggle-button left">
<mat-icon>arrow_back_ios</mat-icon>
</button>
</div>
</mat-sidenav> </mat-sidenav>
<mat-sidenav-content> <mat-sidenav-content>
<!-- Toggle-button -->
<div class="nav-toggle-button-container" *ngIf="!vp.isMobile">
<button *ngIf="!sideNav.opened" mat-raised-button (click)="toggleSideNav()" class="nav-toggle-button right">
<mat-icon>arrow_forward_ios</mat-icon>
</button>
</div>
<div (touchstart)="swipe($event, 'start')" (touchend)="swipe($event, 'end')" class="content"> <div (touchstart)="swipe($event, 'start')" (touchend)="swipe($event, 'end')" class="content">
<main [@pageTransition]="o.isActivated ? o.activatedRoute : ''"> <main [@pageTransition]="o.isActivated ? o.activatedRoute : ''">
<router-outlet #o="outlet"></router-outlet> <router-outlet #o="outlet"></router-outlet>

View File

@ -7,6 +7,7 @@ mat-sidenav-container {
border: 0; border: 0;
box-shadow: 3px 0px 10px 0px rgba(0, 0, 0, 0.2); box-shadow: 3px 0px 10px 0px rgba(0, 0, 0, 0.2);
width: 260px; width: 260px;
overflow-x: hidden;
mat-toolbar, mat-toolbar,
mat-toolbar-row { mat-toolbar-row {
@ -47,6 +48,48 @@ mat-sidenav-container {
height: 80px; height: 80px;
align-items: center; align-items: center;
} }
// CSS for the toggle button
.nav-toggle-button-container {
position: fixed;
z-index: 99;
bottom: 24px;
& > div {
position: relative;
}
.nav-toggle-button {
bottom: 0;
position: absolute;
visibility: visible;
transform: none;
width: 24px;
min-width: 24px;
height: 48px;
padding: 0 0 2px;
&.left {
left: 236px;
padding-left: 8px;
border-radius: 50px 0 0 50px;
}
&.right {
left: 0;
padding-right: 8px;
border-radius: 0 50px 50px 0;
}
mat-icon {
$size: 18px;
height: $size;
width: $size;
font-size: $size;
}
}
}
/* The top logo container can contain any logo with any size. /* The top logo container can contain any logo with any size.
It needs to always fit.*/ It needs to always fit.*/
.os-logo-container { .os-logo-container {

View File

@ -17,6 +17,11 @@
background-color: mat-color($background, card); //TODO background-color: mat-color($background, card); //TODO
} }
.nav-toggle-button {
background: mat-color($background, background);
color: mat-color($foreground, icon);
}
/* seperator */ /* seperator */
mat-nav-list.main-nav, mat-nav-list.main-nav,
mat-divider { mat-divider {

View File

@ -630,7 +630,7 @@ button.mat-menu-item.selected {
* from 100vh * from 100vh
*/ */
.virtual-scroll-full-page { .virtual-scroll-full-page {
height: calc(100vh - 128px); height: calc(100vh - 64px);
} }
/** css hacks https://codepen.io/edge0703/pen/iHJuA */ /** css hacks https://codepen.io/edge0703/pen/iHJuA */
@ -640,7 +640,7 @@ button.mat-menu-item.selected {
} }
.virtual-scroll-with-head-bar { .virtual-scroll-with-head-bar {
height: calc(100vh - 189px); height: calc(100vh - 125px);
// For some reason, hiding the table header adds an empty meta bar. // For some reason, hiding the table header adds an empty meta bar.
.pbl-ngrid-container { .pbl-ngrid-container {