Add collapsing of the sidebar
Signed-off-by: trivernis <trivernis@protonmail.com>pull/14/head
parent
0bf89d9cee
commit
5f588d8a69
GPG Key ID:
DFFFCC2C7A02DB45
@ -1,14 +1,14 @@
|
||||
<mat-drawer-container autosize>
|
||||
<mat-drawer disableClose="true" mode="side" opened>
|
||||
<app-drawer-page>
|
||||
<app-drawer-page-side>
|
||||
<app-import-tab-sidebar (fileImported)="this.addFileFromImport($event)"
|
||||
(importFinished)="this.refreshFileView()"
|
||||
[selectedFiles]="selectedFiles"></app-import-tab-sidebar>
|
||||
</mat-drawer>
|
||||
<mat-drawer-content>
|
||||
</app-drawer-page-side>
|
||||
<app-drawer-page-content>
|
||||
<app-file-multiview (fileSelectEvent)="this.onFileSelect($event)"
|
||||
(modeChangeEvent)="this.state.mode.next($event)"
|
||||
[files]="this.files"
|
||||
[mode]="this.state.mode.value"
|
||||
[preselectedFile]="this.getSelectedFileFromState()"></app-file-multiview>
|
||||
</mat-drawer-content>
|
||||
</mat-drawer-container>
|
||||
</app-drawer-page-content>
|
||||
</app-drawer-page>
|
||||
|
||||
@ -0,0 +1 @@
|
||||
<ng-content></ng-content>
|
||||
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { DrawerPageContentComponent } from './drawer-page-content.component';
|
||||
|
||||
describe('DrawerPageContentComponent', () => {
|
||||
let component: DrawerPageContentComponent;
|
||||
let fixture: ComponentFixture<DrawerPageContentComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ DrawerPageContentComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(DrawerPageContentComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,16 @@
|
||||
import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-drawer-page-content',
|
||||
templateUrl: './drawer-page-content.component.html',
|
||||
styleUrls: ['./drawer-page-content.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class DrawerPageContentComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
<ng-content></ng-content>
|
||||
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { DrawerPageSideComponent } from './drawer-page-side.component';
|
||||
|
||||
describe('DrawerPageSideComponent', () => {
|
||||
let component: DrawerPageSideComponent;
|
||||
let fixture: ComponentFixture<DrawerPageSideComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ DrawerPageSideComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(DrawerPageSideComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,16 @@
|
||||
import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-drawer-page-side',
|
||||
templateUrl: './drawer-page-side.component.html',
|
||||
styleUrls: ['./drawer-page-side.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class DrawerPageSideComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
<mat-drawer-container autosize>
|
||||
<mat-drawer [opened]="this.drawerOpened" disableClose mode="side">
|
||||
<ng-content select="app-drawer-page-side"></ng-content>
|
||||
</mat-drawer>
|
||||
<mat-drawer-content>
|
||||
<ng-content select="app-drawer-page-content"></ng-content>
|
||||
|
||||
<div (click)="this.toggleDrawer()" class="drawer-open-button-float" mat-ripple>
|
||||
<ng-icon *ngIf="!this.drawerOpened" name="mat-chevron-right"></ng-icon>
|
||||
<ng-icon *ngIf="this.drawerOpened" name="mat-chevron-left"></ng-icon>
|
||||
</div>
|
||||
</mat-drawer-content>
|
||||
</mat-drawer-container>
|
||||
@ -0,0 +1,66 @@
|
||||
@import "src/colors";
|
||||
|
||||
mat-drawer {
|
||||
height: 100%;
|
||||
width: 25%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
mat-drawer-content {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
mat-drawer-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.drawer-side-inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.drawer-side-top-bar {
|
||||
background: $background;
|
||||
}
|
||||
|
||||
.collapse-button {
|
||||
height: 2em;
|
||||
float: right;
|
||||
|
||||
ng-icon {
|
||||
margin-top: -0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-open-button-float {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 4em;
|
||||
width: 1.5em;
|
||||
border-bottom-right-radius: 1em;
|
||||
opacity: 0.5;
|
||||
background: $background-lighter-10;
|
||||
text-align: center;
|
||||
transition-duration: 0.1s;
|
||||
|
||||
ng-icon {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-open-button-float:hover {
|
||||
background: $background-lighter-10;
|
||||
opacity: 0.9;
|
||||
cursor: pointer;
|
||||
transition: 0.7s;
|
||||
width: 2em;
|
||||
height: 10em;
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
import {ComponentFixture, TestBed} from "@angular/core/testing";
|
||||
|
||||
import {DrawerPageComponent} from "./drawer-page.component";
|
||||
|
||||
describe("DrawerPageComponent", () => {
|
||||
let component: DrawerPageComponent;
|
||||
let fixture: ComponentFixture<DrawerPageComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [DrawerPageComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(DrawerPageComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it("should create", () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,23 @@
|
||||
import {ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Output} from "@angular/core";
|
||||
|
||||
@Component({
|
||||
selector: "app-drawer-page",
|
||||
templateUrl: "./drawer-page.component.html",
|
||||
styleUrls: ["./drawer-page.component.scss"],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class DrawerPageComponent {
|
||||
|
||||
public drawerOpened = true;
|
||||
|
||||
@Output() appSizeChange = new EventEmitter<void>();
|
||||
|
||||
constructor(private changeDetecter: ChangeDetectorRef) {
|
||||
}
|
||||
|
||||
public toggleDrawer(): void {
|
||||
this.drawerOpened = !this.drawerOpened;
|
||||
this.appSizeChange.emit();
|
||||
this.changeDetecter.markForCheck();
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue