Add flap button

Signed-off-by: trivernis <trivernis@protonmail.com>

mediarepo-ui/src/app/components/shared/app-common/app-common.module.ts

@@ -22,6 +22,7 @@ import {DrawerPageSideComponent} from "./drawer-page/drawer-page-side/drawer-pag
 import {DrawerPageContentComponent} from "./drawer-page/drawer-page-content/drawer-page-content.component";
 import {FlexLayoutModule} from "@angular/flex-layout";
 import {MatRippleModule} from "@angular/material/core";
+import { FlapButtonComponent } from './flap-button/flap-button.component';
 
 
 @NgModule({
@@ -38,6 +39,7 @@ import {MatRippleModule} from "@angular/material/core";
         DrawerPageComponent,
         DrawerPageSideComponent,
         DrawerPageContentComponent,
+        FlapButtonComponent,
     ],
     exports: [
         ConfirmDialogComponent,

mediarepo-ui/src/app/components/shared/app-common/drawer-page/drawer-page.component.html

@@ -5,9 +5,9 @@
     <mat-drawer-content>
         <ng-content select="app-drawer-page-content"></ng-content>
 
-        <div (click)="this.toggleDrawer()" class="drawer-open-button-float" mat-ripple>
+        <app-flap-button (click)="this.toggleDrawer()" align="start" attach="left">
             <ng-icon *ngIf="!this.drawerOpened" name="mat-chevron-right"></ng-icon>
             <ng-icon *ngIf="this.drawerOpened" name="mat-chevron-left"></ng-icon>
-        </div>
+        </app-flap-button>
     </mat-drawer-content>
 </mat-drawer-container>

mediarepo-ui/src/app/components/shared/app-common/drawer-page/drawer-page.component.scss

@@ -37,30 +37,3 @@ mat-drawer-container {
         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;
-}

mediarepo-ui/src/app/components/shared/app-common/flap-button/flap-button.component.html

@@ -0,0 +1,3 @@
+<div [className]="'flap-' + this.attach + ' flap-' + this.align +  ' flap-button'" matRipple>
+    <ng-content></ng-content>
+</div>

mediarepo-ui/src/app/components/shared/app-common/flap-button/flap-button.component.scss

@@ -0,0 +1,111 @@
+@import "src/colors";
+
+:host {
+    position: absolute;
+
+    &[attach='left'], &[attach='top'][align='start'], &[attach='bottom'][align='start'] {
+        left: 0;
+    }
+
+    &[attach='right'], &[attach='top'][align='end'], &[attach='bottom'][align='end'] {
+        right: 0;
+    }
+
+    &[attach='top'], &[attach='left'][align='start'], &[attach='right'][align='start'] {
+        top: 0;
+    }
+
+    &[attach='bottom'], &[attach='left'][align='end'], &[attach='right'][align='end'] {
+        bottom: 0;
+    }
+
+    &[attach='left'][align='center'], &[attach='right'][align='center'] {
+        top: 50%;
+        transform: translate(0, -50%);
+    }
+
+    &[attach='top'][align='center'], &[attach='bottom'][align='center'] {
+        left: 50%;
+        transform: translate(-50%, 0);
+    }
+}
+
+.flap-button {
+    display: flex;
+    opacity: 0.5;
+    background: $background-lighter-10;
+    text-align: center;
+    transition-duration: 0.1s;
+
+    ::ng-deep ng-icon {
+        margin: auto;
+    }
+
+    &:hover {
+        background: $background-lighter-10;
+        opacity: 0.9;
+        cursor: pointer;
+        transition: 0.7s;
+    }
+}
+
+.flap-top, .flap-bottom {
+    height: 1.5em;
+    width: 4em;
+}
+
+.flap-top:hover, .flap-bottom:hover {
+    width: 10em;
+    height: 2em;
+}
+
+.flap-left, .flap-right {
+    height: 4em;
+    width: 1.5em;
+}
+
+.flap-left:hover, .flap-right:hover {
+    width: 2em;
+    height: 10em;
+}
+
+.flap-start.flap-left, .flap-start.flap-top {
+    border-bottom-right-radius: 1em;
+}
+
+.flap-start.flap-right, .flap-end.flap-top {
+    border-bottom-left-radius: 1em;
+}
+
+.flap-end.flap-left, .flap-start.flap-bottom {
+    border-top-right-radius: 1em;
+}
+
+.flap-end.flap-right, .flap-end.flap-bottom {
+    border-top-left-radius: 1em;
+}
+
+.flap-center {
+
+    &.flap-left {
+        border-top-right-radius: 1em;
+        border-bottom-right-radius: 1em;
+    }
+
+    &.flap-right {
+        border-top-left-radius: 1em;
+        border-bottom-left-radius: 1em;
+    }
+
+    &.flap-top {
+        border-bottom-right-radius: 1em;
+        border-bottom-left-radius: 1em;
+    }
+
+    &.flap-bottom {
+        border-top-right-radius: 1em;
+        border-top-left-radius: 1em;
+    }
+}
+
+

mediarepo-ui/src/app/components/shared/app-common/flap-button/flap-button.component.spec.ts

@@ -0,0 +1,25 @@
+import {ComponentFixture, TestBed} from "@angular/core/testing";
+
+import {FlapButtonComponent} from "./flap-button.component";
+
+describe("FlapButtonComponent", () => {
+    let component: FlapButtonComponent;
+    let fixture: ComponentFixture<FlapButtonComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [FlapButtonComponent]
+        })
+            .compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(FlapButtonComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it("should create", () => {
+        expect(component).toBeTruthy();
+    });
+});

mediarepo-ui/src/app/components/shared/app-common/flap-button/flap-button.component.ts

@@ -0,0 +1,19 @@
+import {ChangeDetectionStrategy, Component, Input} from "@angular/core";
+
+export type Attachment = "top" | "bottom" | "left" | "right";
+export type Alignment = "start" | "center" | "end";
+
+@Component({
+    selector: "app-flap-button",
+    templateUrl: "./flap-button.component.html",
+    styleUrls: ["./flap-button.component.scss"],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class FlapButtonComponent {
+
+    @Input() attach: Attachment = "top";
+    @Input() align: Alignment = "center";
+
+    constructor() {
+    }
+}