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 2020-01-20 18:54:24 +09:00
parent 5e8800cc3c
commit d00d4d4a54
24 changed files with 164 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
View File

@ -13,8 +13,8 @@
<!--<mat-icon>chat</mat-icon>--> <!--<mat-icon>chat</mat-icon>-->
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="30" width="24"
height="30" height="24"
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="currentColor" fill="currentColor"
stroke-width="1.5" stroke-width="1.5"
@ -48,6 +48,11 @@
</button> </button>
</div> </div>
<div class="room-info"> <div class="room-info">
<div *ngIf="roomInfoSubject.value && roomInfoSubject.value.isTimeRoom" class="room-type text-accent-color ">
<span class="bg-accent-darkest">{{
getConvertTimer(roomInfoSubject.value.timeRoomInterval)
}} </span>
</div>
<h3 class="room-name"> <h3 class="room-name">
<ng-container <ng-container
*ngIf="!roomInfoSubject.value || !userInfoListSubject.value" *ngIf="!roomInfoSubject.value || !userInfoListSubject.value"
@ -89,7 +94,7 @@
</ng-container> </ng-container>
</h3> </h3>
<!-- Timer Room Info --> <!-- Timer Room Info -->
<div <!--<div
*ngIf="roomInfoSubject.value && roomInfoSubject.value.isTimeRoom" *ngIf="roomInfoSubject.value && roomInfoSubject.value.isTimeRoom"
class="room-type text-accent-color " class="room-type text-accent-color "
> >
@ -98,7 +103,7 @@
getConvertTimer(roomInfoSubject.value.timeRoomInterval) getConvertTimer(roomInfoSubject.value.timeRoomInterval)
}} </span }} </span
>{{ 'chat.isRoomTypeSecret' | translate }} >{{ 'chat.isRoomTypeSecret' | translate }}
</div> </div>-->
<!-- Timer Room Info --> <!-- Timer Room Info -->
</div> </div>
<div class="room-option"> <div class="room-option">

26
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
View File

@ -40,11 +40,11 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
justify-items: center; justify-items: center;
padding: 10px 20px; padding: 4px 20px;
.profile-img { .profile-img {
margin-right: 10px; margin-right: 10px;
width: 40px; width: 30px;
height: 40px; height: 30px;
.responsive-chats-button { .responsive-chats-button {
display: none; display: none;
line-height: normal; line-height: normal;
@ -52,11 +52,11 @@
&:last-child { &:last-child {
display: block; display: block;
padding: 0; padding: 0;
width: 40px; width: 30px;
height: 40px; height: 30px;
border-radius: 50%; border-radius: 50%;
color: #efefef; color: #efefef;
font-size: 16px; font-size: 1rem;
} }
} }
&.thumbnail-mask { &.thumbnail-mask {
@ -70,21 +70,21 @@
} }
.room-info { .room-info {
display: flex; display: flex;
flex-flow: column; flex-flow: row;
overflow: hidden; overflow: hidden;
align-items: center;
.room-name { .room-name {
font-size: 1rem; font-size: 0.94rem;
line-height: normal; line-height: normal;
@include ellipsis(1); @include ellipsis(1);
} }
.room-type { .room-type {
font-size: 0.9rem; font-size: 0.9rem;
line-height: normal; line-height: normal;
margin-top: 2px;
height: 20px; height: 20px;
span { span {
border-radius: 10px; border-radius: 10px;
padding: 1px 10px; padding: 2px 6px;
margin-right: 6px; margin-right: 6px;
font-size: 0.7rem; font-size: 0.7rem;
} }
@ -179,10 +179,14 @@
.profile-img { .profile-img {
.chat-timer { .chat-timer {
.mat-button-wrapper { .mat-button-wrapper {
display: flex;
justify-content: center;
justify-items: center;
.mat-icon { .mat-icon {
line-height: normal; line-height: normal;
color: #ffffff; color: #ffffff;
transform: translateY(-1px); font-size: 20px;
transform: translateY(1px);
} }
} }
} }

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

@ -1,19 +1,19 @@
.rightDrawer-title{ .rightDrawer-title {
height: 60px; height: 50px;
border-bottom: 1px solid #dddddd; border-bottom: 1px solid #dddddd;
font-size: 16px; font-size: 1em;
align-items: center; align-items: center;
display: flex; display: flex;
padding: 0 20px; padding: 0 20px;
font-weight: 600; font-weight: 600;
span{ span {
margin-left:auto; margin-left: auto;
} }
} }
::ng-deep .mat-tab-labels { ::ng-deep .mat-tab-labels {
display: flex; display: flex;
width: 100%; width: 100%;
border-bottom: 2px solid #dddddd; border-bottom: 2px solid #dddddd;
flex: 1 1 auto; flex: 1 1 auto;
justify-content: space-around; justify-content: space-around;
} }

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

@ -68,16 +68,14 @@
.img-item { .img-item {
cursor: pointer; cursor: pointer;
margin-bottom: 10px; margin-bottom: 10px;
margin-right: 9px;
position: relative; position: relative;
height: 150px;
dl { dl {
dt { dt {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 120px; width: 100px;
height: 120px; height: 100px;
background-color: #efefef; background-color: #efefef;
border: 1px dotted #cccccc; border: 1px dotted #cccccc;
box-sizing: border-box; box-sizing: border-box;
@ -104,6 +102,15 @@
display: flex; display: flex;
flex-flow: wrap; flex-flow: wrap;
height: auto; height: auto;
justify-content: space-between;
width: 100%;
.img-item {
cursor: pointer;
margin-bottom: 10px;
position: relative;
height: 130px;
width: 33%;
}
} }
} }
} }
@ -120,6 +127,7 @@
width: 100%; width: 100%;
button { button {
margin: 5px; margin: 5px;
font-size: 0.9em;
} }
} }

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

@ -1,3 +1,5 @@
$listH-row2: 60px;
@mixin ellipsis($row) { @mixin ellipsis($row) {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -94,20 +96,19 @@
width: 100%; width: 100%;
position: relative; position: relative;
th.infos { th.infos {
padding: 16px; padding: 10px;
} }
tr.mat-row { tr.mat-row {
height: 70px; height: $listH-row2;
.cdk-column-check { .cdk-column-check {
width: 40px; width: 40px;
} }
.file-info { .file-info {
padding: 16px; padding: 10px;
display: grid; display: grid;
height: 70px; height: $listH-row2;
.file-name { .file-name {
font-weight: 500; font-weight: 500;
margin-bottom: 2px;
width: 100%; width: 100%;
@include ellipsis(1); @include ellipsis(1);
} }
@ -138,9 +139,12 @@
height: calc(100% - 440px); height: calc(100% - 440px);
overflow-y: auto; overflow-y: auto;
th { th {
font-size: 1.1em; font-size: 1em;
color: #333333; color: #333333;
} }
td {
font-size: 1em;
}
} }
.mat-paginator-container { .mat-paginator-container {
@ -168,6 +172,7 @@
background-color: #ffffff; background-color: #ffffff;
button { button {
margin: 5px; margin: 5px;
font-size: 0.9em;
} }
} }
} }

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

@ -10,6 +10,7 @@
-webkit-line-clamp: $row; -webkit-line-clamp: $row;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-wrap: break-word; word-wrap: break-word;
line-height: 1.2em;
} }
} }
@ -28,6 +29,7 @@
position: relative; position: relative;
th.infos { th.infos {
padding: 10px; padding: 10px;
text-align: center;
} }
tr.mat-row { tr.mat-row {
height: 70px; height: 70px;
@ -38,14 +40,22 @@
.title { .title {
font-weight: 600; font-weight: 600;
margin-bottom: 2px; margin-bottom: 2px;
width: 50%; width: 100%;
@include ellipsis(1); @include ellipsis(2);
display: flex;
align-items: center;
.important { .important {
color: red; color: red;
margin-right: 6px;
} }
} }
} }
.date {
.date {
font-size: 0.8em;
text-align: right;
}
}
} }
} }

20
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.html
View File

@ -1,14 +1,16 @@
<div fxLayout="column" class="list"> <div fxLayout="column" class="list">
<div class="search-list"> <div class="search-list">
<ucap-profile-user-list-item <perfect-scrollbar class="album-scrollbar">
*ngFor="let userInfo of userInfoList" <ucap-profile-user-list-item
[userInfo]="userInfo" *ngFor="let userInfo of userInfoList"
[presence]="getStatusBulkInfo(userInfo) | async" [userInfo]="userInfo"
[sessionVerinfo]="sessionVerinfo" [presence]="getStatusBulkInfo(userInfo) | async"
(contextmenu)="onContextMenuRoomUser($event, userInfo)" [sessionVerinfo]="sessionVerinfo"
(openProfile)="onClickOpenProfile(userInfo.seq)" (contextmenu)="onContextMenuRoomUser($event, userInfo)"
> (openProfile)="onClickOpenProfile(userInfo.seq)"
</ucap-profile-user-list-item> >
</ucap-profile-user-list-item>
</perfect-scrollbar>
</div> </div>
<div <div
fxFlex="1 1 50px" fxFlex="1 1 50px"

12
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.scss
View File

@ -1,16 +1,24 @@
@import "../../../../../../../ucap-webmessenger-ui/src/assets/scss/partials/presence"; @import '../../../../../../../ucap-webmessenger-ui/src/assets/scss/partials/presence';
.list { .list {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
.search-list { .search-list {
overflow: auto; overflow-y: auto;
height: calc(100% - 110px);
} }
} }
.btn-box { .btn-box {
position: absolute;
bottom: 0;
height: 50px;
margin-bottom: 10px;
width: 100%;
button { button {
margin: 5px; margin: 5px;
width: 50%;
font-size: 0.9em;
} }
} }

8
projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.scss
View File

@ -192,7 +192,7 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-delay: $time/2 !important; transition-delay: $time/2 !important;
} }
.slider_inner { .slider_inner {
transform: scale(0.7); transform: scale(0.6);
box-shadow: 0 $base/3 $base * 1 rgba(darken($accent, 50%), 0.2); box-shadow: 0 $base/3 $base * 1 rgba(darken($accent, 50%), 0.2);
pointer-events: auto; pointer-events: auto;
opacity: 1; opacity: 1;
@ -255,9 +255,9 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
::ng-deep .login-form-box { ::ng-deep .login-form-box {
position: absolute; position: absolute;
height: 70vh; height: 60vh;
top: 15%; top: 20%;
right: 15%; right: 20%;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
z-index: 100; z-index: 100;

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

@ -27,7 +27,7 @@
<!-- <mat-drawer #drawer mode="over"> <!-- <mat-drawer #drawer mode="over">
<p>Auto-resizing sidenav</p> <p>Auto-resizing sidenav</p>
</mat-drawer> --> </mat-drawer> -->
<div class="messages"> <div class="chat-messages">
<app-layout-messenger-intro <app-layout-messenger-intro
*ngIf="!(this.selectedChat$ | async)" *ngIf="!(this.selectedChat$ | async)"
></app-layout-messenger-intro> ></app-layout-messenger-intro>

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

@ -12,17 +12,17 @@
position: relative; position: relative;
} }
} }
.contents { .contents {
flex: 1 1 auto; flex: 1 1 auto;
min-width: 400px; min-width: 320px;
height: 100%; height: 100%;
.messages { .chat-messages {
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 1em;
} }
.rightDrawer { .rightDrawer {
width: 400px; width: 320px;
height: 100%; height: 100%;
flex: 0 0 auto; flex: 0 0 auto;
overflow: hidden; overflow: hidden;
@ -40,3 +40,11 @@
::ng-deep .mat-drawer-inner-container { ::ng-deep .mat-drawer-inner-container {
overflow: unset !important; 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;
}

18
projects/ucap-webmessenger-ui-account/src/lib/components/login.component.scss
View File

@ -5,11 +5,15 @@
min-width: 100%; min-width: 100%;
top: 0; top: 0;
right: 0; right: 0;
padding: 16%; padding: 14%;
text-align: center; text-align: center;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
border-radius: 0px; border-radius: 0px;
@media all and (max-height: 900px), (max-width: 1400px) { @media all and (max-height: 800px), (max-width: 1400px) {
width: 380px;
min-width: 380px;
}
@media all and (max-height: 1000px), (max-width: 1600px) {
width: 420px; width: 420px;
min-width: 420px; min-width: 420px;
} }
@ -17,16 +21,16 @@
.mat-title { .mat-title {
margin: 10px 0 40px 0; margin: 10px 0 40px 0;
text-indent: -10000000px; text-indent: -10000000px;
width: 160px; width: 140px;
height: 160px; height: 140px;
// background-image: url(/assets/images/logo/bg_login_w160.png); // background-image: url(/assets/images/logo/bg_login_w160.png);
background-repeat: no-repeat; background-repeat: no-repeat;
display: inline-flex; display: inline-flex;
background-size: 100% auto; background-size: 100% auto;
flex: 1 1 auto; flex: 1 1 auto;
@media all and (max-height: 900px), (max-width: 1400px) { @media all and (max-height: 800px), (max-width: 1400px) {
width: 140px; width: 120px;
min-width: 140px; min-width: 120px;
margin: 10px 0 10px 0; margin: 10px 0 10px 0;
} }
} }

11
projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html
View File

@ -36,7 +36,16 @@
(click)="onClickTranslation()" (click)="onClickTranslation()"
matTooltip="{{ 'chat.btnTranslate' | translate }}" matTooltip="{{ 'chat.btnTranslate' | translate }}"
> >
<mat-icon>g_translate</mat-icon> <!--<mat-icon>g_translate</mat-icon>-->
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M7.41 9l2.24 2.24-.83 2L6 10.4l-3.3 3.3-1.4-1.42L4.58 9l-.88-.88c-.53-.53-1-1.3-1.3-2.12h2.2c.15.28.33.53.51.7l.89.9.88-.88C7.48 6.1 8 4.84 8 4H0V2h5V0h2v2h5v2h-2c0 1.37-.74 3.15-1.7 4.12L7.4 9zm3.84 8L10 20H8l5-12h2l5 12h-2l-1.25-3h-5.5zm.83-2h3.84L14 10.4 12.08 15z"
/>
</svg>
</button> </button>
</div> </div>

10
projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.scss
View File

@ -10,6 +10,9 @@
.add-option { .add-option {
display: inline-flex; display: inline-flex;
margin-right: 20px; margin-right: 20px;
justify-items: center;
width: 80px;
justify-content: space-between;
i { i {
font-size: 20px; font-size: 20px;
color: #666; color: #666;
@ -23,6 +26,13 @@
border-radius: 50%; border-radius: 50%;
} }
} }
button {
width: 20px;
height: 20px;
svg {
fill: #666666;
}
}
} }
} }
textarea[name='message'] { textarea[name='message'] {

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

@ -156,6 +156,7 @@ $meBox-bg: #ffffff;
button { button {
height: 100%; height: 100%;
width: 100%; width: 100%;
font-size: 1em;
line-height: 2em; line-height: 2em;
border-radius: 100px; border-radius: 100px;
.mat-button-wrapper { .mat-button-wrapper {

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

@ -10,4 +10,5 @@
justify-content: center; justify-content: center;
justify-items: center; justify-items: center;
margin: 10px 0 20px; margin: 10px 0 20px;
font-size: 0.84em;
} }

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

@ -1,5 +1,5 @@
.bubble-main { .bubble-main {
padding: 14px; padding: 10px;
text-align: left; text-align: left;
span { span {
word-wrap: break-word; word-wrap: break-word;

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

@ -3,7 +3,7 @@
text-align: left; text-align: left;
.original { .original {
padding: 14px; padding: 10px;
} }
.translation { .translation {
padding: 10px; padding: 10px;

3
projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.scss
View File

@ -26,6 +26,9 @@
width: 100%; width: 100%;
position: relative; position: relative;
justify-items: center; justify-items: center;
.mat-icon{
font-size:18px;
}
.final-message { .final-message {
white-space: nowrap; white-space: nowrap;
word-wrap: normal; word-wrap: normal;

1
projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss
View File

@ -119,7 +119,6 @@ $thumbnail-msize: 40px;
.date { .date {
float: right; float: right;
width: 70px; width: 70px;
font-size: 11px;
text-align: right; text-align: right;
margin-left: 10px; margin-left: 10px;
color: $font-mid; color: $font-mid;

7
projects/ucap-webmessenger-ui/src/assets/scss/partials/_list-item.scss
View File

@ -1,4 +1,6 @@
@charset 'utf-8'; @charset 'utf-8';
$listH-row2: 60px;
$line-basic: 1px solid #dddddd;
@mixin ellipsis($row) { @mixin ellipsis($row) {
overflow: hidden; overflow: hidden;
@ -14,8 +16,6 @@
} }
} }
$listH-row2: 60px;
$line-basic: 1px solid #dddddd;
%list-item { %list-item {
position: relative; position: relative;
display: flex; display: flex;
@ -117,10 +117,11 @@ $line-basic: 1px solid #dddddd;
.final-message, .final-message,
.dept { .dept {
font-size: 0.86em; font-size: 0.86em;
color: #777777;
@include ellipsis(1); @include ellipsis(1);
} }
.date { .date {
font-size: 0.7em; font-size: 0.8em;
@include ellipsis(1); @include ellipsis(1);
} }
} }

21
projects/ucap-webmessenger-ui/src/assets/scss/partials/_search-frame.scss
View File

@ -35,18 +35,6 @@ $search-font-size: 14px;
} }
} }
/*.list-search-frame {
.selectbox {
display: inline-flex;
width: 40%;
padding: 0 20px;
}
& + .searchbox {
width: 60%;
padding-right: 20px;
}
}
*/
.list-search-frame { .list-search-frame {
.searchbox { .searchbox {
height: 100%; height: 100%;
@ -83,6 +71,15 @@ $search-font-size: 14px;
bottom: 0; bottom: 0;
background-color: unset !important; background-color: unset !important;
} }
/* &.mat-form-field-can-float {
&.mat-form-field-should-float .mat-form-field-label,
.mat-input-server:focus
+ .mat-form-field-label-wrapper
.mat-form-field-label {
color: red;
}
}*/
} }
} }
} }

6
projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.scss
View File

@ -20,10 +20,10 @@
min-width: 200px; min-width: 200px;
margin: 0 1%; margin: 0 1%;
margin-bottom: 10px; margin-bottom: 10px;
width: 48%; width: 100%;
border-radius: 3px; border-radius: 3px;
background-color:#f9f9f9; background-color: #f9f9f9;
border:1px solid #dddddd; border: 1px solid #dddddd;
.file-upload-info { .file-upload-info {
padding: 10px; padding: 10px;
svg { svg {

1
projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.scss
View File

@ -52,6 +52,7 @@
padding: 0 40px; padding: 0 40px;
justify-items: flex-end; justify-items: flex-end;
align-content: space-between; align-content: space-between;
font-size: 0.9em;
/*background-color: rgba(30, 167, 185, 0.1); /*background-color: rgba(30, 167, 185, 0.1);
border-top: 1px solid rgba(30, 167, 185, 0.3); border-top: 1px solid rgba(30, 167, 185, 0.3);
border-bottom: 1px solid rgba(30, 167, 185, 0.3);*/ border-bottom: 1px solid rgba(30, 167, 185, 0.3);*/