This commit is contained in:
richard-loafle 2020-02-14 09:30:36 +09:00
commit 2b894672e5
24 changed files with 240 additions and 273 deletions

View File

@ -1,6 +1,6 @@
{
"name": "ucap-webmessenger",
"version": "0.0.20",
"version": "0.0.21",
"author": {
"name": "LG CNS",
"email": "lgucap@lgcns.com"

View File

@ -19,8 +19,15 @@ export function createTranslateLoader(nativeService: NativeService) {
break;
case NativeType.Electron:
prefix = environment.production
? '/dist/ucap-webmessenger-app/assets/i18n/'
? // normal
'/dist/ucap-webmessenger-app/assets/i18n/'
: '/projects/ucap-webmessenger-app/src/assets/i18n/';
// installer > aws
// ? '/dist/ucap-webmessenger-app/assets/i18n/'
// : '/dist/ucap-webmessenger-app/assets/i18n/';
// vscode > prod
// ? '/projects/ucap-webmessenger-app/src/assets/i18n/'
// : '/projects/ucap-webmessenger-app/src/assets/i18n/';
break;

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

View File

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

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

View File

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

View File

@ -4,6 +4,7 @@
mat-stretch-tabs
animationDuration="0ms"
(selectedIndexChange)="onSelectedIndexChange($event)"
class="tab_num2"
>
<mat-tab label="{{ 'common.file.type.images' | translate }}"></mat-tab>
<mat-tab label="{{ 'common.file.type.video' | translate }}"></mat-tab>
@ -101,71 +102,70 @@
<div class="search-list">
<perfect-scrollbar class="album-scrollbar">
<div class="albumlist-content">
<div
*ngFor="let fileInfo of filteredList"
class="img-item"
(click)="onClickImage($event, fileInfo)"
>
<dl>
<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
*ngFor="let fileInfo of filteredList"
class="img-item"
(click)="onClickImage($event, fileInfo)"
>
<dl>
<dt>
<div
[ngClass]="[
'mime-icon',
'light',
'ico-' + getExtention(fileInfo.info.name)
]"
*ngIf="fileInfo.fileDownloadItem.downloadingProgress$ | async"
class="spinner"
>
<div class="ico"></div>
<span class="mdi mdi-spin mdi-loading mdi-48px"></span>
</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
*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
[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>
</perfect-scrollbar>
</div>
<div class="btn-box"
>
<div class="btn-box">
<button
mat-flat-button
[disabled]="selectedFileList.length > 0 ? 'false' : 'true'"

View File

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

View File

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

View File

@ -178,16 +178,6 @@ $tablet-s-width: 768px;
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 {

View File

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

View File

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

View File

@ -218,38 +218,30 @@
@include weblink(#2d3a4a);
::ng-deep .myset {
.myset {
.mat-menu-content {
.setting {
display: flex;
flex-flow: row;
align-items: center;
height: 48px;
.zoom {
height: 16px;
background-repeat: no-repeat;
height: 48px;
&.plus-square {
margin-left: 10px;
padding-left: 26px;
background-position: left 50%;
line-height: normal;
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");
}
&.minus-square {
margin-right: 10px;
padding-right: 26px;
background-position: right 50%;
line-height: normal;
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");
}
&:hover {
background-repeat: no-repeat;
}
}
.set-size {
margin: 0 10px;
}
}
.set-size {
margin: 0 10px;
}
}
}
.zoom {
display: flex;
flex-flow: row;
height: 16px;
align-items: center;
background-repeat: no-repeat;
height: 48px;
button {
&:hover {
background-repeat: no-repeat;
}
}
}

View File

@ -55,19 +55,7 @@
}
}
/*::ng-deep .mat-drawer-inner-container {
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 {
.left-drawer-toggle {
position: absolute;
top: calc(50% - 30px);
left: -4px;

View File

@ -300,6 +300,20 @@ $daesang-grey: (
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 {
.mat-tab-label[aria-selected='true'] {
.mat-tab-label-content {
@ -356,6 +370,31 @@ $daesang-grey: (
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] {
display: flex;
flex-direction: row;
@ -408,12 +447,28 @@ $daesang-grey: (
}
}
//대화 말풍선 global 적용
.message-row {
.message-main {
.bubble {
background-color: mat-color($accent, 100);
border: 1px solid mat-color($accent, 200);
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 {
@ -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 {
background-color: mat-color($accent, 200, 0.4);
}
@ -471,4 +520,25 @@ $daesang-grey: (
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;
}
}
}
}
}
}

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

View File

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

View File

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

View File

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

View File

@ -79,69 +79,36 @@
<mat-list>
<mat-list-item
*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
>{{ oldAttachment.resContent }}
>
<span class="file-name">{{ oldAttachment.resContent }}</span>
<button
mat-button
class="icon-button"
aria-label="기존파일삭제"
(click)="onClickDeleteOldAttachment(oldAttachment)"
>
<svg
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>
<i class="mid mdi-18px mdi-delete-outline"></i>
</button>
</div>
</mat-list-item>
<mat-list-item
*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
>{{ attachment.name }}
><span class="file-name">{{ attachment.name }}</span>
<button
mat-button
class="icon-button"
aria-label="파일삭제"
(click)="onClickDelelteAttachment(attachment)"
>
<svg
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>
<i class="mid mdi-18px mdi-delete-outline"></i>
</button>
</div>
</mat-list-item>

View File

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

View File

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

View File

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

View File

@ -89,11 +89,13 @@ export class ListItemComponent implements OnInit {
this.defaultPath = 'assets/images/img_groupphoto_80.png';
break;
case RoomType.Mytalk:
const me = this.roomUserInfo.filter(
v => v.seq === this.loginRes.userSeq
);
if (!!me && me.length > 0) {
this.imagePath = me[0].profileImageFile;
if (!!this.roomUserInfo && !!this.loginRes) {
const me = this.roomUserInfo.filter(
v => v.seq === this.loginRes.userSeq
);
if (!!me && me.length > 0) {
this.imagePath = me[0].profileImageFile;
}
}
break;
case RoomType.Single:
@ -101,11 +103,13 @@ export class ListItemComponent implements OnInit {
case RoomType.Allim:
case RoomType.Allim_Elephant:
case RoomType.Allim_TMS:
const others = this.roomUserInfo.filter(
v => v.seq !== this.loginRes.userSeq
);
if (!!others && others.length > 0) {
this.imagePath = others[0].profileImageFile;
if (!!this.roomUserInfo && !!this.loginRes) {
const others = this.roomUserInfo.filter(
v => v.seq !== this.loginRes.userSeq
);
if (!!others && others.length > 0) {
this.imagePath = others[0].profileImageFile;
}
}
break;
}
@ -113,13 +117,15 @@ export class ListItemComponent implements OnInit {
get _roomUserInfos() {
if (this.roomInfo.roomType === RoomType.Single) {
return this.roomUserInfo.filter(roomUserInfo => {
return this.loginRes.userSeq !== roomUserInfo.seq;
});
return this.roomUserInfo.filter(
roomUserInfo =>
!!this.loginRes && this.loginRes.userSeq !== roomUserInfo.seq
);
} else {
return this.roomUserInfo
.filter(roomUserInfo => {
return (
!!this.loginRes &&
this.loginRes.userSeq !== roomUserInfo.seq &&
roomUserInfo.isJoinRoom
);