Mirrors/super-productivity
1
0
Fork 0
mirror of https://github.com/johannesjo/super-productivity.git synced 2026-07-21 02:20:12 +00:00
Code Issues Projects Releases Wiki Activity

refactor(taskSidebar): replace drawer with sidenav

Browse source
This commit is contained in:
Johannes Millan 2019-12-06 14:50:09 +01:00
parent 66ada14823
commit 67eeffbf81
2 changed files with 60 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

53
src/app/app.component.html
View file

@ -10,42 +10,29 @@
@fade
class="backdrop"></div>
<mat-drawer-container>
<header class="header-wrapper"
[class.isNotScrolled]="!(layoutService.isScrolled$|async)">
<main-header></main-header>
<bookmark-bar></bookmark-bar>
<banner></banner>
</header>
<div [@warpRoute]="getPage(o)"
#routeWrapper
class="route-wrapper">
<router-outlet #o="outlet"></router-outlet>
</div>
<mat-drawer (closedStart)="layoutService.hideSideNav()"
[mode]="(layoutService.isNavOver$|async) ? 'over' : 'side'"
[opened]="(layoutService.isShowSideNav$|async)"
position="start">
<mat-sidenav-container>
<mat-sidenav (closedStart)="layoutService.hideSideNav()"
[mode]="(layoutService.isNavOver$|async) ? 'over' : 'side'"
[opened]="(layoutService.isShowSideNav$|async)"
position="start">
<side-nav></side-nav>
<hr>
<notes></notes>
</mat-sidenav>
</mat-drawer>
<!-- <mat-drawer (closedStart)="layoutService.hideNotes()"-->
<!-- [mode]="(layoutService.isNotesOver$|async) ? 'over' : 'side'"-->
<!-- [opened]="layoutService.isShowNotes$|async"-->
<!-- position="end">-->
<!-- </mat-drawer>-->
<!-- <mat-drawer (closedStart)="taskService.setSelectedId(null)"-->
<!-- [mode]="(layoutService.isNotesOver$|async) ? 'over' : 'side'"-->
<!-- [opened]="taskService.selectedTask$|async"-->
<!-- position="end">-->
<!-- <div class="additional-info-panel">-->
<!-- <task-additional-info *ngIf="taskService.selectedTask$|async"-->
<!-- [task]="taskService.selectedTask$|async"></task-additional-info>-->
<!-- </div>-->
<!-- </mat-drawer>-->
<mat-sidenav-content>
<header class="header-wrapper"
[class.isNotScrolled]="!(layoutService.isScrolled$|async)">
<main-header></main-header>
<bookmark-bar></bookmark-bar>
<banner></banner>
</header>
</mat-drawer-container>
<div [@warpRoute]="getPage(o)"
#routeWrapper
class="route-wrapper">
<router-outlet #o="outlet"></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
</ng-container>

77
src/app/app.component.scss
View file

@ -1,12 +1,8 @@
@import '../_variables.scss';
mat-drawer-container {
background: transparent !important;
}
mat-drawer-container,
mat-sidenav-container {
height: 100%;
:host {
display: flex;
flex-direction: column;
}
.header-wrapper {
@ -28,36 +24,6 @@ mat-sidenav-container {
}
}
// sidebars
mat-drawer ::ng-deep .mat-drawer-inner-container {
@include scrollYImportant();
@include lightTheme() {
background: $light-theme-bg-darker;
}
@include darkTheme {
background: $dark-theme-sidebar-bg;
}
}
mat-drawer {
z-index: 3;
//box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
//border-left: 0 !important;
}
:host {
display: flex;
flex-direction: column;
}
:host ::ng-deep .mat-drawer-content {
overflow: hidden;
display: flex;
flex-direction: column;
}
.route-wrapper {
flex-grow: 1;
position: relative;
@ -114,3 +80,40 @@ bookmark-bar {
}
}
}
// SIDENAV
// -------
:host ::ng-deep .mat-drawer-content {
overflow: hidden;
display: flex;
flex-direction: column;
}
mat-sidenav-container {
background: transparent !important;
}
mat-sidenav,
mat-sidenav-container {
height: 100%;
}
// sidebars
mat-sidenav ::ng-deep .mat-drawer-inner-container {
@include scrollYImportant();
@include lightTheme() {
background: $light-theme-bg-darker;
}
@include darkTheme {
background: $dark-theme-sidebar-bg;
}
}
mat-sidenav {
z-index: 3;
}