Trivernis
/
mediarepo
mirror of https://github.com/Trivernis/mediarepo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improve flap button design

Browse Source 
Signed-off-by: trivernis <trivernis@protonmail.com>
pull/14/head
trivernis 2 years ago
parent 142ed02f51
commit dd2db194c9
Signed by: Trivernis
GPG Key ID: DFFFCC2C7A02DB45
6 changed files with 86 additions and 32 deletions
Show Stats Download Patch File Download Diff File

2
mediarepo-ui/src/app/components/shared/app-common/drawer-page/drawer-page.component.html
Unescape Escape View File

@ -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>

4
mediarepo-ui/src/app/components/shared/app-common/flap-button/flap-button.component.html
Unescape Escape View File

@ -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>

106
mediarepo-ui/src/app/components/shared/app-common/flap-button/flap-button.component.scss
Unescape Escape View File

@ -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;
}
}

3
mediarepo-ui/src/app/components/shared/app-common/flap-button/flap-button.component.ts
Unescape Escape View File

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

2
mediarepo-ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.html
Unescape Escape View File

@ -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>

1
mediarepo-ui/src/colors.scss
Unescape Escape View File

@ -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);

Write Preview
Loading…
Cancel
Save