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() {
+ }
+}