Improve flap button design

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

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

@@ -5,7 +5,7 @@
     <mat-drawer-content>
         <ng-content select="app-drawer-page-content"></ng-content>
 
-        <app-flap-button (click)="this.toggleDrawer()" align="start" attach="left">
+        <app-flap-button (appClick)="this.toggleDrawer()" align="center" attach="left">
             <ng-icon *ngIf="!this.drawerOpened" name="mat-chevron-right"></ng-icon>
             <ng-icon *ngIf="this.drawerOpened" name="mat-chevron-left"></ng-icon>
         </app-flap-button>

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

@@ -1,3 +1,5 @@
-<div [className]="'flap-' + this.attach + ' flap-' + this.align +  ' flap-button'" matRipple>
+<div (click)="this.appClick.emit($event)"
+     [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

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

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

@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, Component, Input} from "@angular/core";
+import {ChangeDetectionStrategy, Component, EventEmitter, Input, Output} from "@angular/core";
 
 export type Attachment = "top" | "bottom" | "left" | "right";
 export type Alignment = "start" | "center" | "end";
@@ -13,6 +13,7 @@ export class FlapButtonComponent {
 
     @Input() attach: Attachment = "top";
     @Input() align: Alignment = "center";
+    @Output() appClick = new EventEmitter<MouseEvent>();
 
     constructor() {
     }

mediarepo-ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.html

@@ -8,7 +8,7 @@
         <app-content-viewer (contextmenu)="this.selectedFile && fileContextMenu.onContextMenu($event, [this.selectedFile!.data])"
                             *ngIf="this.selectedFile"
                             [file]="this.selectedFile!.data"></app-content-viewer>
-        <app-flap-button (click)="this.togglePreviewStrip()" align="center" attach="bottom">
+        <app-flap-button (appClick)="this.togglePreviewStrip()" align="center" attach="bottom">
             <ng-icon *ngIf="previewStripVisible" name="mat-expand-more"></ng-icon>
             <ng-icon *ngIf="!previewStripVisible" name="mat-expand-less"></ng-icon>
         </app-flap-button>

mediarepo-ui/src/colors.scss

@@ -12,6 +12,7 @@ $primary-darker-20: darken($primary, 20%);
 $primary-darker-30: darken($primary, 30%);
 
 $accent: mat.get-color-from-palette($accent-pallette, 'text');
+$accent-darker-10: darken($accent, 10%);
 $accent-lighter-10: lighten($accent, 10%);
 
 $warn: mat.get-color-from-palette($warn-palette);