mirror of
https://github.com/block-core/blockcore-notes.git
synced 2024-09-29 06:20:42 +00:00
Refactor the main layout code
- Improve toolbar height with a fix when display in flex mode. - Ensure scrollbar is in the content and correctly filled out. - Improve the scrollbar on menu to become overlayed. - Always display menu on desktop size screens.
This commit is contained in:
SondreB
parent
7fbfb3a0f9
commit
b9273ab510
@ -2,45 +2,20 @@
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
|
||||
<mat-toolbar class="app-header" *ngIf="authenticated">
|
||||
<button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()">
|
||||
<mat-icon>menu</mat-icon>
|
||||
</button>
|
||||
<span></span>
|
||||
|
||||
<button *ngIf="appState.showBackButton" mat-icon-button (click)="goBack()">
|
||||
<mat-icon class="arrow-back">arrow_back</mat-icon>
|
||||
</button>
|
||||
|
||||
<div class="top-spacer">{{ appState.title }}</div>
|
||||
|
||||
<!-- <app-language-selector></app-language-selector> -->
|
||||
|
||||
<button mat-icon-button matTooltip="Create new note" (click)="createNote()">
|
||||
<mat-icon>add</mat-icon>
|
||||
</button>
|
||||
|
||||
<button mat-icon-button (click)="draweraccount.toggle()">
|
||||
<mat-icon>account_circle</mat-icon>
|
||||
</button>
|
||||
</mat-toolbar>
|
||||
|
||||
<mat-sidenav-container class="sidenav-container" *ngIf="authenticated">
|
||||
<mat-sidenav #drawer class="sidenav print-hidden" fixedInViewport [attr.role]="'navigation'" [mode]="'over'">
|
||||
<mat-sidenav-container fullscreen class="sidenav-container" *ngIf="authenticated">
|
||||
<mat-sidenav #drawer class="sidenav print-hidden" fixedInViewport [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="(isHandset$ | async) === false">
|
||||
<mat-toolbar class="logo-icon">
|
||||
<img src="assets/icons/icon-128x128.png" />
|
||||
<div>Blockcore Notes</div>
|
||||
</mat-toolbar>
|
||||
|
||||
<mat-nav-list>
|
||||
<a [routerLink]="['/']" mat-menu-item (click)="drawer.toggle()">
|
||||
<a [routerLink]="['/']" mat-menu-item (click)="toggleMenu()">
|
||||
<mat-icon>dashboard</mat-icon>
|
||||
<span>Explore</span>
|
||||
</a>
|
||||
<!-- <a [routerLink]="['/']" mat-menu-item (click)="drawer.toggle()">
|
||||
<mat-icon>category</mat-icon>
|
||||
<span>Circle</span>
|
||||
</a>
|
||||
|
||||
<!--
|
||||
<a [routerLink]="['/identities']" mat-menu-item (click)="drawer.toggle()">
|
||||
<mat-icon>people</mat-icon>
|
||||
<span>Identities</span>
|
||||
@ -51,20 +26,24 @@
|
||||
</a> -->
|
||||
<!-- <mat-divider></mat-divider> -->
|
||||
|
||||
<a [routerLink]="['/people']" mat-menu-item (click)="drawer.toggle()">
|
||||
<a [routerLink]="['/people']" mat-menu-item (click)="toggleMenu()">
|
||||
<mat-icon>people</mat-icon>
|
||||
<span>People</span>
|
||||
</a>
|
||||
<a [routerLink]="['/circles']" mat-menu-item (click)="toggleMenu()">
|
||||
<mat-icon>animation</mat-icon>
|
||||
<span>Circles</span>
|
||||
</a>
|
||||
|
||||
<a [routerLink]="['/settings']" mat-menu-item (click)="drawer.toggle()">
|
||||
<a [routerLink]="['/settings']" mat-menu-item (click)="toggleMenu()">
|
||||
<mat-icon>settings</mat-icon>
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
<a [routerLink]="['/about']" mat-menu-item (click)="drawer.toggle()">
|
||||
<a [routerLink]="['/about']" mat-menu-item (click)="toggleMenu()">
|
||||
<mat-icon>help_outline</mat-icon>
|
||||
<span>About</span>
|
||||
</a>
|
||||
<a [routerLink]="['/logout']" mat-menu-item (click)="drawer.toggle()">
|
||||
<a [routerLink]="['/logout']" mat-menu-item (click)="toggleMenu()">
|
||||
<mat-icon>logout</mat-icon>
|
||||
<span>Logout</span>
|
||||
</a>
|
||||
@ -142,7 +121,32 @@
|
||||
</mat-sidenav>
|
||||
|
||||
<mat-sidenav-content>
|
||||
<router-outlet></router-outlet>
|
||||
<mat-toolbar class="app-header">
|
||||
<button *ngIf="(isHandset$ | async) === true" type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()">
|
||||
<mat-icon>menu</mat-icon>
|
||||
</button>
|
||||
<span></span>
|
||||
|
||||
<button *ngIf="appState.showBackButton" mat-icon-button (click)="goBack()">
|
||||
<mat-icon class="arrow-back">arrow_back</mat-icon>
|
||||
</button>
|
||||
|
||||
<div class="top-spacer">{{ appState.title }}</div>
|
||||
|
||||
<!-- <app-language-selector></app-language-selector> -->
|
||||
|
||||
<button mat-icon-button matTooltip="Create new note" (click)="createNote()">
|
||||
<mat-icon>add</mat-icon>
|
||||
</button>
|
||||
|
||||
<button mat-icon-button (click)="draweraccount.toggle()">
|
||||
<mat-icon>account_circle</mat-icon>
|
||||
</button>
|
||||
</mat-toolbar>
|
||||
|
||||
<div class="scrolling-content">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</mat-sidenav-content>
|
||||
|
||||
<!-- <mat-sidenav-content>
|
||||
|
||||
@ -8,6 +8,8 @@ import { CheckForUpdateService } from './services/check-for-update.service';
|
||||
import { StorageService } from './services/storage.service';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { NoteDialog } from './shared/create-note-dialog/create-note-dialog';
|
||||
import { Observable, map, shareReplay } from 'rxjs';
|
||||
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
@ -20,7 +22,6 @@ export class AppComponent {
|
||||
authenticated = false;
|
||||
note: any;
|
||||
|
||||
|
||||
constructor(
|
||||
public appState: ApplicationState,
|
||||
private storage: StorageService,
|
||||
@ -28,7 +29,8 @@ export class AppComponent {
|
||||
private router: Router,
|
||||
public appUpdateService: AppUpdateService,
|
||||
public appUpdateCheckService: CheckForUpdateService,
|
||||
public dialog: MatDialog
|
||||
public dialog: MatDialog,
|
||||
private breakpointObserver: BreakpointObserver
|
||||
) {
|
||||
appState.title = 'Blockcore Notes';
|
||||
|
||||
@ -37,16 +39,25 @@ export class AppComponent {
|
||||
});
|
||||
}
|
||||
|
||||
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
|
||||
map((result) => result.matches),
|
||||
shareReplay()
|
||||
);
|
||||
|
||||
goBack() {
|
||||
this.router.navigateByUrl('/');
|
||||
}
|
||||
|
||||
toggleMenu() {
|
||||
if (this.breakpointObserver.isMatched(Breakpoints.Handset)) {
|
||||
this.drawer.toggle();
|
||||
}
|
||||
}
|
||||
|
||||
async ngOnInit() {
|
||||
await this.storage.open();
|
||||
await this.storage.initialize();
|
||||
|
||||
|
||||
|
||||
// const testdata = await this.storage.get('123');
|
||||
// console.log(testdata);
|
||||
|
||||
@ -58,10 +69,10 @@ export class AppComponent {
|
||||
|
||||
createNote(): void {
|
||||
const dialogRef = this.dialog.open(NoteDialog, {
|
||||
data: {name: this.note},
|
||||
data: { name: this.note },
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().subscribe(result => {
|
||||
dialogRef.afterClosed().subscribe((result) => {
|
||||
this.note = result;
|
||||
});
|
||||
}
|
||||
|
||||
@ -77,17 +77,10 @@ $blockcore-notes-theme: mat.define-dark-theme(
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
overflow: overlay !important;
|
||||
// overflow: hidden;
|
||||
}
|
||||
body {
|
||||
// margin: 0;
|
||||
// padding: 0;
|
||||
// overflow: hidden;
|
||||
font-size: 18px;
|
||||
background-color: #212121;
|
||||
color: white;
|
||||
@ -120,19 +113,10 @@ a:hover {
|
||||
}
|
||||
|
||||
.mat-sidenav-content {
|
||||
/* This puts the scrollbar inside the content */
|
||||
overflow: overlay !important;
|
||||
/* Disable scrolling on the content, we want it specific on child element */
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.mat-drawer-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
height: calc(100% - 100px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* TODO: The toolbar becomes a few pixel smaller with this setup.. debug why. */
|
||||
app-root {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -143,17 +127,35 @@ app-root mat-toolbar {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
app-root mat-sidenav-container {
|
||||
flex-grow: 2;
|
||||
flex-basis: auto;
|
||||
height: 100%;
|
||||
.mat-drawer-inner-container {
|
||||
overflow: overlay !important;
|
||||
}
|
||||
|
||||
// .sidenav-container {
|
||||
// // overflow: auto overlay;
|
||||
// // height: 100%;
|
||||
// overflow: hidden !important;
|
||||
// }
|
||||
/* The container for main content. */
|
||||
mat-sidenav-content {
|
||||
height: 100%;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Top element in main content, make it always appear on-top. */
|
||||
mat-sidenav-content mat-toolbar {
|
||||
flex: 0 1 68px !important; /* When changing the sidenav-content to flex, the toolbar does not render properly, so a minor hack is needed. */
|
||||
}
|
||||
|
||||
/* When changing the sidenav-content to flex, the toolbar does not render properly, so a minor hack is needed. */
|
||||
@media only screen and (max-width: 599px) {
|
||||
mat-sidenav-content mat-toolbar {
|
||||
flex: 0 1 58px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Container for the actual content, which is our scrolling container. */
|
||||
.scrolling-content {
|
||||
overflow: overlay !important;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sidenav-left {
|
||||
}
|
||||
@ -305,4 +307,4 @@ select {
|
||||
.space {
|
||||
margin-top: 0.4em;
|
||||
margin-bottom: 0.4em;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user