이미지뷰어 아이콘 수정

This commit is contained in:
khk 2019-11-08 16:02:42 +09:00
parent d71100f66f
commit b5f3773c98
5 changed files with 72 additions and 18 deletions

View File

@ -43,7 +43,7 @@
height: 100%;
.mat-form-field-flex {
height: 59px;
padding: 0 20px;
padding: 0 10px 0 20px;
align-items: center;
.mat-form-field-infix {
width: 100%;

View File

@ -51,8 +51,7 @@ $lg-red: (
200: #f48fb1,
300: #f06292,
400: #ef4c73,
/* 400: #ec407a,*/
500: #ed097e,
/* 400: #ec407a,*/ 500: #ed097e,
600: #d81b60,
700: #c2185b,
800: #ad1457,
@ -90,6 +89,14 @@ $lg-red: (
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
.bg-primary-dark{
background: mat-color($primary, 900);
color: mat-color($primary, default-contrast);
}
.bg-primary-light{
background: mat-color($primary, 300);
color: mat-color($primary, default-contrast);
}
.bg-primary-color {
background: mat-color($primary);
color: mat-color($primary, default-contrast);
@ -128,6 +135,10 @@ $lg-red: (
.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary {
background-color: mat-color($accent, 200);
}
/*.mat-form-field-appearance-legacy .mat-hint{
color: mat-color($accent, 800);
}*/
.mat-form-field-appearance-legacy {
.mat-form-field-label {
color: mat-color($primary);
@ -145,8 +156,12 @@ $lg-red: (
.app-dialog-full .mat-dialog-container {
overflow: hidden;
padding: 0px;
background-color: rgba($color: #000000, $alpha: 0.3);
background-color: rgba($color: #000000, $alpha: 0.7);
box-shadow: none;
border-radius: 0px;
}
.btn-main-float .bg-accent-dark{
background: mat-color($accent, 600);
color: mat-color($primary, default-contrast);
}
}

View File

@ -1,6 +1,11 @@
<div class="ucap-image-viewer-container">
<mat-toolbar color="accent" class="ucap-image-viewer-header">
<mat-icon class="ucap-image-viewer-icon">image</mat-icon>
<mat-toolbar class="ucap-image-viewer-header bg-primary-dark">
<!--<mat-icon class="ucap-image-viewer-icon">image</mat-icon>-->
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" class="ucap-image-viewer-icon">
<rect x="3" y="3" width="18" height="18" rx="2" />
<circle cx="8.5" cy="8.5" r="1.5" />
<path d="M20.4 14.5L16 10 4 20" /></svg>
<span class="ucap-image-viewer-title">{{ fileInfo.fileName }}</span>
<span class="ucap-image-viewer-spacer"></span>
@ -11,7 +16,12 @@
matTooltipPosition="below"
aria-label=""
>
<mat-icon>settings_overscan</mat-icon>
<!--<mat-icon>settings_overscan</mat-icon>-->
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
<path d="M3.8 3.8l16.4 16.4M20.2 3.8L3.8 20.2M15 3h6v6M9 3H3v6M15 21h6v-6M9 21H3v-6" />
</svg>
</button>
<button
mat-icon-button
@ -20,7 +30,8 @@
matTooltipPosition="below"
aria-label=""
>
<mat-icon>zoom_out</mat-icon>
<!--<mat-icon>zoom_out</mat-icon>-->
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="butt" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>
</button>
<button
mat-icon-button
@ -29,7 +40,14 @@
matTooltipPosition="below"
aria-label=""
>
<mat-icon>zoom_in</mat-icon>
<!--<mat-icon>zoom_in</mat-icon>-->
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
<line x1="11" y1="8" x2="11" y2="14"></line>
<line x1="8" y1="11" x2="14" y2="11"></line>
</svg>
</button>
<button
mat-icon-button
@ -39,16 +57,24 @@
aria-label=""
(click)="onClickDownload()"
>
<mat-icon>get_app</mat-icon>
<!--<mat-icon>get_app</mat-icon>-->
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
<path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5" /></svg>
</button>
<span class="stroke-bar"></span>
<button
mat-raised-button
color="primary"
class="ucap-image-viewer-action"
mat-icon-button
color="warn"
class="ucap-image-viewer-action btn-close"
matTooltip="뷰어닫기"
(click)="onClickClose()"
>
Close
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</mat-toolbar>
<div class="ucap-image-viewer-body">

View File

@ -4,26 +4,39 @@
.ucap-image-viewer-header {
width: 100%;
height: 50px;
height: 60px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
background-color: #333333;
.ucap-image-viewer-icon {
margin-right: 10px;
}
.ucap-image-viewer-title {
font-size: 16px;
}
.ucap-image-viewer-spacer {
flex: 1 1 auto;
}
.stroke-bar {
width: 1px;
height: 30px;
background-color: rgba(256, 256, 256, 0.3);
margin: 0 10px;
}
.ucap-image-viewer-action {
&:hover {
opacity: 0.7;
}
}
}
.ucap-image-viewer-body {
position: relative;
width: 100%;
height: calc(100% - 50px);
height: calc(100% - 60px);
.ucap-image-viewer-image-wrapper {
height: 100%;

View File

@ -3,7 +3,7 @@
*ngIf="fabTogglerState === 'active'"
(click)="onToggleFab()"
></div>
<div class="fab-container">
<div class="fab-container btn-main-float">
<button mat-fab class="fab-toggler bg-accent-dark" (click)="onToggleFab()">
<mat-icon [@fabToggler]="fabTogglerState">add</mat-icon>
</button>