이미지뷰어 아이콘 수정
This commit is contained in:
khk
parent
d71100f66f
commit
b5f3773c98
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user