ucap/next-ucap-messenger
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

이미지뷰어 아이콘 수정

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.scss
View File

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

21
projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
View File

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

48
projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.html
View File

@ -1,6 +1,11 @@
<div class="ucap-image-viewer-container"> <div class="ucap-image-viewer-container">
<mat-toolbar color="accent" class="ucap-image-viewer-header"> <mat-toolbar class="ucap-image-viewer-header bg-primary-dark">
<mat-icon class="ucap-image-viewer-icon">image</mat-icon> <!--<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-title">{{ fileInfo.fileName }}</span>
<span class="ucap-image-viewer-spacer"></span> <span class="ucap-image-viewer-spacer"></span>
@ -11,7 +16,12 @@
matTooltipPosition="below" matTooltipPosition="below"
aria-label="" 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>
<button <button
mat-icon-button mat-icon-button
@ -20,7 +30,8 @@
matTooltipPosition="below" matTooltipPosition="below"
aria-label="" 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>
<button <button
mat-icon-button mat-icon-button
@ -29,7 +40,14 @@
matTooltipPosition="below" matTooltipPosition="below"
aria-label="" 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>
<button <button
mat-icon-button mat-icon-button
@ -39,16 +57,24 @@
aria-label="" aria-label=""
(click)="onClickDownload()" (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> </button>
<span class="stroke-bar"></span>
<button <button
mat-raised-button mat-icon-button
color="primary" color="warn"
class="ucap-image-viewer-action" class="ucap-image-viewer-action btn-close"
matTooltip="뷰어닫기"
(click)="onClickClose()" (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> </button>
</mat-toolbar> </mat-toolbar>
<div class="ucap-image-viewer-body"> <div class="ucap-image-viewer-body">

17
projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.scss
View File

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

2
projects/ucap-webmessenger-ui/src/lib/components/float-action-button.component.html
View File

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