Improve flap button design

Signed-off-by: trivernis <trivernis@protonmail.com>
Trivernis · Feb 11, 2022 · dd2db19 · dd2db19
1 parent 142ed02
commit dd2db19
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 32 deletions.
diff --git a/mediarepo-ui/src/app/components/shared/app-common/drawer-page/drawer-page.component.html b/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>

diff --git a/mediarepo-ui/src/app/components/shared/app-common/flap-button/flap-button.component.html b/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>
diff --git a/mediarepo-ui/src/app/components/shared/app-common/flap-button/flap-button.component.scss b/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;
 
- &[attach='left'], &[attach='top'][align='start'], &[attach='bottom'][align='start'] {
+ &:hover {
+ opacity: 1;
+ }
+
+ &[attach='left'] {
+ top: 0;
  left: 0;
+ height: 100%;
+ width: 4em;
  }
 
- &[attach='right'], &[attach='top'][align='end'], &[attach='bottom'][align='end'] {
+ &[attach='right'] {
+ top: 0;
  right: 0;
+ height: 100%;
+ width: 4em;
  }
 
- &[attach='top'], &[attach='left'][align='start'], &[attach='right'][align='start'] {
+ &[attach='top'] {
+ left: 0;
  top: 0;
+ width: 100%;
+ height: 4em;
  }
 
- &[attach='bottom'], &[attach='left'][align='end'], &[attach='right'][align='end'] {
+ &[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'] {
- top: 50%;
- transform: translate(0, -50%);
+ .flap-button {
+ top: 50%;
+ transform: translate(0, -50%);
+ }
  }
 
  &[attach='top'][align='center'], &[attach='bottom'][align='center'] {
- left: 50%;
- transform: translate(-50%, 0);
+ .flap-button {
+ left: 50%;
+ transform: translate(-50%, 0);
+ }
  }
 }
 
 .flap-button {
+ position: absolute;
  display: flex;
- opacity: 0.5;
- background: $background-lighter-10;
+ opacity: 0.7;
+ 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-bottom-right-radius: 1em;
+ border-top-right-radius: $flap-border-radius;
+ border-bottom-right-radius: $flap-border-radius;
  }
 
  &.flap-right {
- border-top-left-radius: 1em;
- border-bottom-left-radius: 1em;
+ border-top-left-radius: $flap-border-radius;
+ border-bottom-left-radius: $flap-border-radius;
  }
 
  &.flap-top {
- border-bottom-right-radius: 1em;
- border-bottom-left-radius: 1em;
+ border-bottom-right-radius: $flap-border-radius;
+ border-bottom-left-radius: $flap-border-radius;
  }
 
  &.flap-bottom {
- border-top-right-radius: 1em;
- border-top-left-radius: 1em;
+ border-top-right-radius: $flap-border-radius;
+ border-top-left-radius: $flap-border-radius;
  }
 }
 

diff --git a/mediarepo-ui/src/app/components/shared/app-common/flap-button/flap-button.component.ts b/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() {
  }

diff --git a/...ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.html b/...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>

diff --git a/mediarepo-ui/src/colors.scss b/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);