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

ng-deep 정리중(6차)

Browse Source
This commit is contained in:
khk 2020-02-13 20:03:24 +09:00
parent 2a385a7b7b
commit 771b88b1b3
21 changed files with 212 additions and 258 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.scss
View File

@ -75,18 +75,3 @@
} }
} }
} }
// perfect-scrollbar right로 2px이동
::ng-deep .ps__rail-y {
& > .ps__thumb-y {
margin-right: -2px;
}
}
::ng-deep .cdk-virtual-scroll-orientation-vertical {
.cdk-virtual-scroll-content-wrapper {
width: 100%;
height: 100%;
contain: unset;
}
}

4
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.html
View File

@ -44,7 +44,7 @@
animationDuration="0ms" animationDuration="0ms"
[selectedIndex]="0" [selectedIndex]="0"
(selectedIndexChange)="onSelectedIndexChange($event)" (selectedIndexChange)="onSelectedIndexChange($event)"
class="message-tab" class="message-tab tab_num3"
> >
<mat-tab [label]="MessageType.Receive"> <mat-tab [label]="MessageType.Receive">
<ng-template mat-tab-label> <ng-template mat-tab-label>
@ -161,7 +161,7 @@
</mat-radio-group> </mat-radio-group>
</form> </form>
</div> </div>
<div style="height: calc(100% - 65.5px)"> <div style="height: calc(100% - 50px)">
<perfect-scrollbar <perfect-scrollbar
fxFlex="1 1 auto" fxFlex="1 1 auto"
*ngIf="!!(messageSearchList$ | async)" *ngIf="!!(messageSearchList$ | async)"

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

@ -66,18 +66,3 @@
} }
} }
} }
//쪽지 local style
::ng-deep .message-box {
.mat-tab-label {
min-width: 33%;
}
.mat-radio-label {
.mat-radio-label-content {
padding-left: 4px;
}
}
.mat-tab-body-wrapper {
height: calc(100% - 50px);
}
}

4
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.scss
View File

@ -13,7 +13,7 @@ $tablet-s-width: 768px;
} }
} }
//rightDrawer공통 /*rightDrawer공통
::ng-deep .rightDrawer-item { ::ng-deep .rightDrawer-item {
width: 100%; width: 100%;
height: calc(100% - 60px); height: calc(100% - 60px);
@ -23,4 +23,4 @@ $tablet-s-width: 768px;
min-width: 50%; min-width: 50%;
} }
} }
} }*/

118
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html
View File

@ -4,6 +4,7 @@
mat-stretch-tabs mat-stretch-tabs
animationDuration="0ms" animationDuration="0ms"
(selectedIndexChange)="onSelectedIndexChange($event)" (selectedIndexChange)="onSelectedIndexChange($event)"
class="tab_num2"
> >
<mat-tab label="{{ 'common.file.type.images' | translate }}"></mat-tab> <mat-tab label="{{ 'common.file.type.images' | translate }}"></mat-tab>
<mat-tab label="{{ 'common.file.type.video' | translate }}"></mat-tab> <mat-tab label="{{ 'common.file.type.video' | translate }}"></mat-tab>
@ -101,71 +102,70 @@
<div class="search-list"> <div class="search-list">
<perfect-scrollbar class="album-scrollbar"> <perfect-scrollbar class="album-scrollbar">
<div class="albumlist-content"> <div class="albumlist-content">
<div <div
*ngFor="let fileInfo of filteredList" *ngFor="let fileInfo of filteredList"
class="img-item" class="img-item"
(click)="onClickImage($event, fileInfo)" (click)="onClickImage($event, fileInfo)"
> >
<dl> <dl>
<dt> <dt>
<div
*ngIf="fileInfo.fileDownloadItem.downloadingProgress$ | async"
class="spinner"
>
<span class="mdi mdi-spin mdi-loading mdi-48px"></span>
</div>
<div
*ngIf="
!!fileInfo.info &&
!!fileInfo.info.sentMessageJson &&
!!fileInfo.info.sentMessageJson.thumbUrl;
then thumb;
else icon
"
></div>
<ng-template #thumb>
<img
#thumbImg
[src]="fileInfo.info.sentMessageJson.thumbUrl"
[matTooltip]="fileInfo.info.name"
(error)="onErrorThumbnail(thumbImg, fileInfo)"
/>
</ng-template>
<ng-template #icon>
<div <div
[ngClass]="[ *ngIf="fileInfo.fileDownloadItem.downloadingProgress$ | async"
'mime-icon', class="spinner"
'light',
'ico-' + getExtention(fileInfo.info.name)
]"
> >
<div class="ico"></div> <span class="mdi mdi-spin mdi-loading mdi-48px"></span>
</div> </div>
</ng-template> <div
</dt> *ngIf="
<dd> !!fileInfo.info &&
<span class="checkbox"> !!fileInfo.info.sentMessageJson &&
<mat-checkbox !!fileInfo.info.sentMessageJson.thumbUrl;
#checkbox then thumb;
[checked]="getCheckItem(fileInfo)" else icon
(change)="onCheckItem(checkbox.checked, fileInfo)" "
(click)="$event.stopPropagation()" ></div>
> <ng-template #thumb>
</mat-checkbox> <img
</span> #thumbImg
<span class="btn-download"> [src]="fileInfo.info.sentMessageJson.thumbUrl"
<button mat-button (click)="onClickDownload(fileInfo)"> [matTooltip]="fileInfo.info.name"
<mat-icon>vertical_align_bottom</mat-icon> (error)="onErrorThumbnail(thumbImg, fileInfo)"
</button> />
</span> </ng-template>
</dd> <ng-template #icon>
</dl> <div
</div> [ngClass]="[
'mime-icon',
'light',
'ico-' + getExtention(fileInfo.info.name)
]"
>
<div class="ico"></div>
</div>
</ng-template>
</dt>
<dd>
<span class="checkbox">
<mat-checkbox
#checkbox
[checked]="getCheckItem(fileInfo)"
(change)="onCheckItem(checkbox.checked, fileInfo)"
(click)="$event.stopPropagation()"
>
</mat-checkbox>
</span>
<span class="btn-download">
<button mat-button (click)="onClickDownload(fileInfo)">
<mat-icon>vertical_align_bottom</mat-icon>
</button>
</span>
</dd>
</dl>
</div>
</div> </div>
</perfect-scrollbar> </perfect-scrollbar>
</div> </div>
<div class="btn-box" <div class="btn-box">
>
<button <button
mat-flat-button mat-flat-button
[disabled]="selectedFileList.length > 0 ? 'false' : 'true'" [disabled]="selectedFileList.length > 0 ? 'false' : 'true'"

1
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss
View File

@ -14,6 +14,7 @@ $tablet-s-width: 768px;
word-wrap: break-word; word-wrap: break-word;
} }
} }
.rightDrawer-albumbox { .rightDrawer-albumbox {
position: relative; position: relative;
width: 100%; width: 100%;

1
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.html
View File

@ -4,6 +4,7 @@
mat-stretch-tabs mat-stretch-tabs
animationDuration="0ms" animationDuration="0ms"
(selectedIndexChange)="onSelectedIndexChange($event)" (selectedIndexChange)="onSelectedIndexChange($event)"
class="tab_num2"
> >
<mat-tab label="{{ 'chat.typeReceived' | translate }}"></mat-tab> <mat-tab label="{{ 'chat.typeReceived' | translate }}"></mat-tab>
<mat-tab label="{{ 'chat.typeSent' | translate }}"></mat-tab> <mat-tab label="{{ 'chat.typeSent' | translate }}"></mat-tab>

10
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss
View File

@ -178,16 +178,6 @@ $tablet-s-width: 768px;
padding: 0 12px; padding: 0 12px;
} }
} }
.mat-paginator-page-size {
@media screen and (max-width: #{$tablet-s-width}), (max-height: 800px) {
display: none;
}
}
}
.mat-paginator-container {
display: flex;
flex-flow: column;
} }
.mat-row:hover { .mat-row:hover {

2
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/notice.component.scss
View File

@ -19,7 +19,7 @@
height: calc(100% - 60px); height: calc(100% - 60px);
.table-box { .table-box {
height: calc(100% - 111.5px); height: calc(100% - 100px);
overflow: auto; overflow: auto;
} }
.footer-fix { .footer-fix {

12
projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
View File

@ -260,22 +260,22 @@
{{ 'profile.open' | translate }} {{ 'profile.open' | translate }}
</button> </button>
</div> </div>
<!-- <div class="setting"> <!--<div class=" zoom setting">
<button <button
mat-menu-item mat-menu-item
class="zoom minus-square" class="icon-button"
(click)="onClickZoomOut($event)" (click)="onClickZoomOut($event)"
> >
축소</button <i class="mid mdi-minus-box-outline"></i>축소</button
><span class="set-size" (click)="onClickZoomLabel($event)">{{ zoom }}%</span ><span class="set-size" (click)="onClickZoomLabel($event)">{{ zoom }}%</span
><button ><button
mat-menu-item mat-menu-item
class="zoom plus-square" class="icon-button"
(click)="onClickZoomIn($event)" (click)="onClickZoomIn($event)"
> >
확대 <i class="mid mdi-plus-box-outline"></i>확대
</button> </button>
</div> --> </div>-->
<div class="setting"> <div class="setting">
<button mat-menu-item (click)="onClickNotice()"> <button mat-menu-item (click)="onClickNotice()">
{{ 'notice.label' | translate }} {{ 'notice.label' | translate }}

44
projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss
View File

@ -218,38 +218,30 @@
@include weblink(#2d3a4a); @include weblink(#2d3a4a);
::ng-deep .myset { .myset {
.mat-menu-content { .mat-menu-content {
.setting { .setting {
display: flex; display: flex;
flex-flow: row; flex-flow: row;
align-items: center; align-items: center;
height: 48px; height: 48px;
.zoom { }
height: 16px; .set-size {
background-repeat: no-repeat; margin: 0 10px;
height: 48px; }
&.plus-square { }
margin-left: 10px; }
padding-left: 26px;
background-position: left 50%; .zoom {
line-height: normal; display: flex;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' %3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='12' y1='8' x2='12' y2='16'%3E%3C/line%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E"); flex-flow: row;
} height: 16px;
&.minus-square { align-items: center;
margin-right: 10px; background-repeat: no-repeat;
padding-right: 26px; height: 48px;
background-position: right 50%; button {
line-height: normal; &:hover {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' %3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E"); background-repeat: no-repeat;
}
&:hover {
background-repeat: no-repeat;
}
}
.set-size {
margin: 0 10px;
}
} }
} }
} }

14
projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss
View File

@ -55,19 +55,7 @@
} }
} }
/*::ng-deep .mat-drawer-inner-container { .left-drawer-toggle {
overflow: unset !important;
}
::ng-deep .mat-tab-labels {
display: flex;
width: 100%;
//border-bottom: 2px solid #dddddd;
flex: 1 1 auto;
justify-content: space-around;
}*/
::ng-deep .left-drawer-toggle {
position: absolute; position: absolute;
top: calc(50% - 30px); top: calc(50% - 30px);
left: -4px; left: -4px;

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

@ -300,6 +300,20 @@ $daesang-grey: (
background-color: mat-color($accent, 300); background-color: mat-color($accent, 300);
} }
.ps__rail-y {
& > .ps__thumb-y {
margin-right: -2px;
}
}
.cdk-virtual-scroll-orientation-vertical {
.cdk-virtual-scroll-content-wrapper {
width: 100%;
height: 100%;
contain: none;
}
}
.global-menu { .global-menu {
.mat-tab-label[aria-selected='true'] { .mat-tab-label[aria-selected='true'] {
.mat-tab-label-content { .mat-tab-label-content {
@ -356,6 +370,31 @@ $daesang-grey: (
color: #ffffff; color: #ffffff;
} }
//탭개수에 의한 width 정의
.mat-tab-group {
&.tab_num2 {
.mat-tab-label {
width: 50%;
min-width: 50%;
}
}
&.tab_num3 {
.mat-tab-label {
width: 33%;
min-width: 33%;
}
}
}
//쪽지 라디오 버튼 정렬
.message-box {
.mat-radio-label {
.mat-radio-label-content {
padding-left: 4px;
}
}
}
mat-tab-group[vertical] { mat-tab-group[vertical] {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -408,12 +447,28 @@ $daesang-grey: (
} }
} }
//대화 말풍선 global 적용
.message-row { .message-row {
.message-main { .message-main {
.bubble { .bubble {
background-color: mat-color($accent, 100); background-color: mat-color($accent, 100);
border: 1px solid mat-color($accent, 200); border: 1px solid mat-color($accent, 200);
overflow: hidden; overflow: hidden;
.bubble-main {
word-wrap: break-word;
white-space: pre-wrap;
word-break: break-word;
a {
color: #0367a6;
text-decoration: underline;
}
}
.btn-box {
min-width: 300px;
@media screen and (max-width: #{$tablet-s-width}) {
min-width: 250px;
}
}
} }
} }
&.me { &.me {
@ -428,13 +483,7 @@ $daesang-grey: (
} }
} }
} }
/*.대화방 검색창 bg
chat-search-frame {
.chat-search {
//background-color: mat-color($accent, 600, 0.7);
background-color: mat-color($accent, 800, 0.8);
}
}*/
.translationForm { .translationForm {
background-color: mat-color($accent, 200, 0.4); background-color: mat-color($accent, 200, 0.4);
} }
@ -471,4 +520,25 @@ $daesang-grey: (
background-color: mat-color($accent, B100); background-color: mat-color($accent, B100);
} }
} }
.rightDrawer-item {
.footer-fix {
.mat-paginator-container {
display: flex;
flex-flow: column;
}
}
@media screen and (max-width: #{$tablet-s-width}) {
.footer-fix {
height: 100px;
.mat-paginator-container {
height: 40px;
min-height: 40px;
.mat-paginator-page-size {
display: none;
}
}
}
}
}
} }

19
projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.scss
View File

@ -165,22 +165,3 @@ $tablet-s-width: 768px;
} }
} }
} }
//대화창 공통
::ng-deep .bubble {
.bubble-main {
word-wrap: break-word;
white-space: pre-wrap;
word-break: break-word;
a {
color: #0367a6;
text-decoration: underline;
}
}
.btn-box {
min-width: 300px;
@media screen and (max-width: #{$tablet-s-width}) {
min-width: 250px;
}
}
}

4
projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/schedule.component.scss
View File

@ -67,10 +67,6 @@
} }
} }
::ng-deep .message-row.me > .event-info {
border-radius: 0 0 0 6px;
}
.feather-calendar { .feather-calendar {
stroke: #ffffff; stroke: #ffffff;
} }

4
projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video-conference.component.scss
View File

@ -96,10 +96,6 @@
} }
} }
::ng-deep .message-row.me > .event-info {
border-radius: 0 0 0 6px;
}
.feather-calendar { .feather-calendar {
stroke: #ffffff; stroke: #ffffff;
} }

8
projects/ucap-webmessenger-ui-chat/src/lib/components/search.component.scss
View File

@ -50,14 +50,14 @@ $search-item-color: #444444;
min-width: 30px; min-width: 30px;
padding: 0 10px; padding: 0 10px;
align-self: center; align-self: center;
font-size: 0.9em; font-size: 0.7em;
font-weight: normal; font-weight: normal;
justify-content: center; justify-content: center;
margin-left: auto; margin-left: auto;
} }
} }
::ng-deep .chat-search { .chat-search {
margin: 0 4px 4px; margin: 0 4px 4px;
padding: 6px; padding: 6px;
font-size: 14px; font-size: 14px;
@ -67,7 +67,7 @@ $search-item-color: #444444;
.search-form { .search-form {
form { form {
display: flex; display: flex;
icon-img { .icon-img {
display: none; display: none;
} }
} }
@ -75,7 +75,7 @@ $search-item-color: #444444;
} }
} }
::ng-deep .chatroom-search { .chatroom-search {
position: relative; position: relative;
.btns { .btns {
display: flex; display: flex;

55
projects/ucap-webmessenger-ui-message/src/lib/components/write.component.html
View File

@ -79,69 +79,36 @@
<mat-list> <mat-list>
<mat-list-item <mat-list-item
*ngFor="let oldAttachment of oldAttachmentList" *ngFor="let oldAttachment of oldAttachmentList"
class="attach-file" class="attach-file-list"
> >
<div class="file-name"> <div class="attach-file">
<span class="mdi mdi-attachment mdi-18px"> </span <span class="mdi mdi-attachment mdi-18px"> </span
>{{ oldAttachment.resContent }} >
<span class="file-name">{{ oldAttachment.resContent }}</span>
<button <button
mat-button mat-button
class="icon-button"
aria-label="기존파일삭제" aria-label="기존파일삭제"
(click)="onClickDeleteOldAttachment(oldAttachment)" (click)="onClickDeleteOldAttachment(oldAttachment)"
> >
<svg <i class="mid mdi-18px mdi-delete-outline"></i>
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-trash-2"
>
<polyline points="3 6 5 6 21 6"></polyline>
<path
d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
></path>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line>
</svg>
</button> </button>
</div> </div>
</mat-list-item> </mat-list-item>
<mat-list-item <mat-list-item
*ngFor="let attachment of attachmentList" *ngFor="let attachment of attachmentList"
class="attach-file" class="attach-file-list"
> >
<div class="file-name"> <div class="attach-file">
<span class="mdi mdi-attachment mdi-18px"> </span <span class="mdi mdi-attachment mdi-18px"> </span
>{{ attachment.name }} ><span class="file-name">{{ attachment.name }}</span>
<button <button
mat-button mat-button
class="icon-button"
aria-label="파일삭제" aria-label="파일삭제"
(click)="onClickDelelteAttachment(attachment)" (click)="onClickDelelteAttachment(attachment)"
> >
<svg <i class="mid mdi-18px mdi-delete-outline"></i>
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-trash-2"
>
<polyline points="3 6 5 6 21 6"></polyline>
<path
d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
></path>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line>
</svg>
</button> </button>
</div> </div>
</mat-list-item> </mat-list-item>

39
projects/ucap-webmessenger-ui-message/src/lib/components/write.component.scss
View File

@ -128,25 +128,30 @@
margin-top: 10px; margin-top: 10px;
} }
} }
.attach-file {
display: flex; .attach-file-list {
flex-flow: row; width: 100%;
flex: 1 1 auto; .attach-file {
.mat-list-item-content { display: flex;
padding: 0 !important; flex-flow: row;
flex: 1 1 auto;
width: 100%;
margin: 0 -16px;
align-items: center;
font-size: 0.9em;
border-bottom: 1px dotted #dddddd;
span {
margin-right: 6px;
flex: 0 0 auto;
}
.file-name { .file-name {
display: flex; display: flex;
width: 100%; flex: 1 1 auto;
align-items: center; }
font-size: 0.9em; button {
border-bottom: 1px dotted #dddddd; flex: 0 0 auto;
span { width: 24px;
margin-right: 6px; margin-left: auto;
}
button {
width: 24px;
margin-left: auto;
}
} }
} }
} }

4
projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.html
View File

@ -12,7 +12,7 @@
<button <button
mat-mini-fab mat-mini-fab
class="mat-elevation-z6 btn-upload-profile-image" class="mat-elevation-z6 icon-button btn-upload-profile-image"
*ngIf="isMe && editableProfileImage" *ngIf="isMe && editableProfileImage"
matTooltip="{{ 'profile.changeProfileImage' | translate }}" matTooltip="{{ 'profile.changeProfileImage' | translate }}"
matTooltipPosition="above" matTooltipPosition="above"
@ -22,7 +22,7 @@
" "
(click)="profileImageFileInput.click()" (click)="profileImageFileInput.click()"
> >
<span class="mdi mdi-upload mdi-18px"></span> <i class="mid mdi-camera"></i>
</button> </button>
<span <span

13
projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.scss
View File

@ -206,22 +206,19 @@ $login-max-height: 800px;
} }
} }
::ng-deep .btn-upload-profile-image { .btn-upload-profile-image {
display: flex; display: flex;
margin-left: -26px; margin-left: -26px;
margin-right: 10px; margin-right: 10px;
width: 36px; width: 36px;
height: 36px; height: 36px;
line-height: 36px; line-height: 36px;
font-size: 20px;
justify-content: center; justify-content: center;
justify-content: center; justify-content: center;
&.mat-mini-fab { i {
.mat-button-wrapper { display: inline-block;
display: flex; margin-top: -8px;
justify-content: center;
justify-items: center;
padding: 0;
}
} }
} }