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-08 20:42:14 +09:00
parent 68b971f93b
commit 6fde3b5f22
11 changed files with 183 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,6 +13,10 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
justify-items: center; justify-items: center;
img {
width: 100px;
height: 100px;
}
} }
.app-title { .app-title {

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

@ -41,7 +41,7 @@
<button <button
mat-icon-button mat-icon-button
aria-label="chats button" aria-label="chats button"
class="responsive-chats-button" class="bg-warn-color chat-timer"
*ngIf="!!roomInfo && roomInfo.isTimeRoom" *ngIf="!!roomInfo && roomInfo.isTimeRoom"
> >
<mat-icon>timer</mat-icon> <mat-icon>timer</mat-icon>
@ -88,7 +88,7 @@
*ngIf="roomInfo && roomInfo.isTimeRoom" *ngIf="roomInfo && roomInfo.isTimeRoom"
class="room-type text-accent-color " class="room-type text-accent-color "
> >
<span class="bg-accent-dark" <span class="bg-accent-darkest"
>{{ getConvertTimer(roomInfo.timeRoomInterval) }} </span >{{ getConvertTimer(roomInfo.timeRoomInterval) }} </span
>{{ 'chat.isRoomTypeSecret' | translate }} >{{ 'chat.isRoomTypeSecret' | translate }}
</div> </div>

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

@ -42,8 +42,7 @@
justify-items: center; justify-items: center;
padding: 10px 20px; padding: 10px 20px;
.profile-img { .profile-img {
margin-right: 16px; margin-right: 10px;
.responsive-chats-button { .responsive-chats-button {
display: none; display: none;
line-height: normal; line-height: normal;
@ -141,6 +140,10 @@
width: 100%; width: 100%;
} }
} }
}
.translation-section {
display: flex;
flex-flow: column;
.translation-container { .translation-container {
position: absolute; position: absolute;
@ -148,6 +151,8 @@
left: 0; left: 0;
width: 100%; width: 100%;
background-color: transparent; background-color: transparent;
background-color: rgba(250, 255, 255, 0.8);
border-top: 1px solid;
.translation-zone { .translation-zone {
position: absolute; position: absolute;
@ -166,3 +171,17 @@
} }
} }
} }
::ng-deep .chat-header {
.profile-img {
.chat-timer {
.mat-button-wrapper {
.mat-icon {
line-height: normal;
color: #ffffff;
transform: translateY(-3px);
}
}
}
}
}

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

@ -91,7 +91,7 @@ $aquaBlue-daesang: (
50: #f9feff, 50: #f9feff,
//#e0f7fa, //#e0f7fa,
/* 100: #b2ebf2,*/ 100: #ebfdff, /* 100: #b2ebf2,*/ 100: #ebfdff,
200: #65e4f5, /*200: #65e4f5,*/ 200: #a7f3fd,
//#80deea, //#80deea,
300: #4dd0e1, 300: #4dd0e1,
400: #26c6da, 400: #26c6da,
@ -200,14 +200,17 @@ $daesang-grey: (
background: mat-color($accent, 600); background: mat-color($accent, 600);
color: mat-color($primary, default-contrast); color: mat-color($primary, default-contrast);
} }
.bg-accent-brightest {
background: mat-color($accent, 50);
color: mat-color($primary, $dark-primary-text);
}
.bg-accent-light { .bg-accent-light {
background: mat-color($accent, 300) !important; background: mat-color($accent, 300) !important;
color: mat-color($primary, default-contrast); color: mat-color($primary, default-contrast);
} }
.bg-accent-bright {
background-color: mat-color($accent, 100);
}
.bg-accent-brightest {
background: mat-color($accent, 50);
color: mat-color($primary, $dark-primary-text);
}
.bg-accent-color { .bg-accent-color {
background: mat-color($accent); background: mat-color($accent);
color: mat-color($accent, default-contrast); color: mat-color($accent, default-contrast);
@ -236,6 +239,9 @@ $daesang-grey: (
.border-primary-color { .border-primary-color {
border: 1px solid mat-color($primary); border: 1px solid mat-color($primary);
} }
.border-accent-bright {
border-color: mat-color($accent, 300);
}
.border-accent-color { .border-accent-color {
border: 1px solid mat-color($accent); border: 1px solid mat-color($accent);
} }
@ -409,7 +415,14 @@ $daesang-grey: (
} }
.chat-search-frame { .chat-search-frame {
.chat-search { .chat-search {
background-color: mat-color($accent, 600, 0.7); //background-color: mat-color($accent, 600, 0.7);
background-color: mat-color($accent, 800, 0.8);
} }
} }
.translationForm {
background-color: mat-color($accent, 200, 0.5);
}
.translation-preview {
background-color: mat-color($accent, 800, 0.8);
}
} }

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

@ -6,7 +6,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
flex: 1; flex: 1;
padding: 20px 30px; padding: 10px 30px 20px;
.add-option { .add-option {
display: inline-flex; display: inline-flex;
margin-right: 20px; margin-right: 20px;
@ -31,8 +31,13 @@ textarea[name='message'] {
.mat-form-field-underline { .mat-form-field-underline {
background-color: none; background-color: none;
} }
.send-message-button { ::ng-deep .send-message-button {
margin-left: 20px; margin-left: 20px;
.mat-button-wrapper {
display: flex;
justify-content: center;
justify-items: center;
}
i { i {
display: inline-block; display: inline-block;
width: 40px; width: 40px;

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

@ -9,11 +9,11 @@
} }
} }
.language { .language {
padding: 2px 6px; padding: 0px 6px 4px;
background-color: #222222; background-color: #222222;
margin-right: 6px; margin-right: 6px;
border-radius: 2px; border-radius: 2px;
font-size: 11px; font-size: 1em;
color: #fff; color: #fff;
margin-right: 10px; margin-right: 10px;
} }

41
projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss
View File

@ -9,12 +9,6 @@ $meBox-bg: #ffffff;
flex-direction: column; flex-direction: column;
} }
.information-msg { .information-msg {
/* width: 100%;
height: 100%;
text-align: center;
background-color: rgba(0, 0, 0, 0.1);
padding: 10px;
margin: 10px 0;*/
width: 100%; width: 100%;
} }
@ -66,40 +60,6 @@ $meBox-bg: #ffffff;
color: #333333; color: #333333;
margin-bottom: 6px; margin-bottom: 6px;
} }
/*.bubble {
border: 1px solid $otherBox-line;
font-weight: 900;
position: relative;
background-color: $otherBox-bg;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
word-break: break-all;
word-wrap: break-word;
&:before {
content: '';
width: 0px;
height: 0px;
position: absolute;
border-left: 6px solid transparent;
border-right: 6px solid $otherBox-line;
border-top: 6px solid $otherBox-line;
border-bottom: 6px solid transparent;
left: -12px;
top: 4px;
}
&:after {
content: '';
width: 0px;
height: 0px;
position: absolute;
border-left: 6px solid transparent;
border-right: 6px solid $otherBox-bg;
border-top: 6px solid $otherBox-bg;
border-bottom: 6px solid transparent;
left: -10px;
top: 5px;
}
}*/
.bubble { .bubble {
border-radius: 0 10px 10px 10px; border-radius: 0 10px 10px 10px;
font-weight: 900; font-weight: 900;
@ -188,6 +148,7 @@ $meBox-bg: #ffffff;
button { button {
height: 100%; height: 100%;
width: 100%; width: 100%;
line-height: 2em;
border-radius: 100px; border-radius: 100px;
.mat-button-wrapper { .mat-button-wrapper {
justify-items: center; justify-items: center;

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

@ -4,7 +4,7 @@
justify-items: center; justify-items: center;
.search-form { .search-form {
flex-flow: row; flex-flow: row;
padding: 0 10px 0 20px; padding: 0 0 0 20px;
flex: 1 1 auto; flex: 1 1 auto;
form { form {
display: flex; display: flex;

13
projects/ucap-webmessenger-ui/src/assets/scss/partials/_presence.scss
View File

@ -26,18 +26,23 @@
.work-status { .work-status {
&.morning-off { &.morning-off {
background-color: #11845d; //background-color: #11845d;
background-color: #30ad82;
} }
&.afternoon-off { &.afternoon-off {
background-color: #875acb; //background-color: #875acb;
background-color: #976fd4;
} }
&.day-off { &.day-off {
//background-color: #2b98eb;
background-color: #2b98eb; background-color: #2b98eb;
} }
&.long-time { &.long-time {
background-color: #c72f20; //background-color: #c72f20;
background-color: #ea4737;
} }
&.leave-of-absence { &.leave-of-absence {
background-color: #e7853e; // background-color: #e7853e;
background-color: #ffa25e;
} }
} }

57
projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.html
View File

@ -10,14 +10,36 @@
<span class="translation-section"> <span class="translation-section">
{{ translationPreviewInfo.previewInfo.translation }} {{ translationPreviewInfo.previewInfo.translation }}
</span> </span>
<div class="btns">
<button <button
mat-stroked-button mat-stroked-button
(click)="onClickSendTranslationMessage(translationPreviewInfo)" (click)="onClickSendTranslationMessage(translationPreviewInfo)"
> >
{{ 'chat.send' | translate }} {{ 'chat.send' | translate }}
</button> </button>
<span class="btn-close"> <button
class="btn-close-translatebox bg-accent-dark"
aria-label="Close"
(click)="onClickTranslationCancel()"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-x"
>
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
<!--<span class="btn-close">
<button <button
mat-button mat-button
matSuffix matSuffix
@ -27,14 +49,18 @@
> >
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
</span> </span>-->
</div> </div>
<div> <div>
<form name="translationForm" [formGroup]="translationForm"> <form
<mat-form-field> name="translationForm"
<mat-label>{{ [formGroup]="translationForm"
'common.translations.targetLanguage' | translate class="translationForm "
}}</mat-label> >
<mat-label class="text-language">
{{ 'common.translations.targetLanguage' | translate }}</mat-label
>
<mat-form-field class="select-language">
<mat-select <mat-select
formControlName="destType" formControlName="destType"
(selectionChange)="onChangeSelection($event)" (selectionChange)="onChangeSelection($event)"
@ -47,14 +73,17 @@
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<div _ngcontent-xkt-c1="" class="app-layout-native-title-bar-spacer"></div>
<mat-slide-toggle <mat-slide-toggle
labelPosition="before" labelPosition="before"
class="simpleview"
[checked]="simpleView" [checked]="simpleView"
(change)="onChangToggleSimpleview($event)" (change)="onChangToggleSimpleview($event)"
>{{ 'common.translations.simpleView' | translate }}</mat-slide-toggle >{{ 'common.translations.simpleView' | translate }}</mat-slide-toggle
> >
<mat-slide-toggle <mat-slide-toggle
labelPosition="before" labelPosition="before"
class="preview"
[checked]="preView" [checked]="preView"
(change)="onChangTogglePreview($event)" (change)="onChangTogglePreview($event)"
>{{ 'common.translations.preview' | translate }}</mat-slide-toggle >{{ 'common.translations.preview' | translate }}</mat-slide-toggle

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

@ -1,34 +1,76 @@
.sticker-selector { .translation-preview {
border-top: 1px solid #cccccc;
// .sticker-item-box {
// flex-wrap: wrap;
// padding: 20px 20px 0;
// overflow: auto;
// }
}
// .sticker-item {
// width: 60px;
// margin-bottom: 20px;
// display: inline-flex;
// cursor: pointer;
// }
.selected-sticker {
position: relative; position: relative;
height: 100px; display: flex;
padding: 20px; flex-flow: row;
text-align: right; justify-items: flex-end;
background-color: rgba(0, 0, 0, 0.4); align-items: center;
// img { color: #ffffff;
// margin-right: 40px; .translation-section {
// } display: flex;
// .btn-close { flex: 1 1 auto;
// position: absolute; font-size: 1.1em;
// top: 2px; padding: 0 20px 0 40px;
// right: 20px; }
// width: 40px; .btns {
// height: 40px; display: flex;
// color: #ffffff; flex-flow: row;
// } margin-left: auto;
height: 100%;
button {
&.btn-send {
width: 80px;
background-color: #ffffff;
color: #333333;
}
&.btn-close-translatebox {
width: 3em;
height: 100%;
stroke: #ffffff;
border: none;
display: flex;
justify-content: center;
justify-items: center;
margin-left: auto;
}
}
}
}
::ng-deep .translationForm {
position: relative;
display: flex;
padding: 0 40px;
justify-items: flex-end;
align-content: space-between;
/*background-color: rgba(30, 167, 185, 0.1);
border-top: 1px solid rgba(30, 167, 185, 0.3);
border-bottom: 1px solid rgba(30, 167, 185, 0.3);*/
.text-language {
display: inline-flex;
margin-right: 20px;
font-weight: 600;
font-size: 1em;
justify-content: center;
align-items: center;
margin-right: 20px;
}
.select-language {
display: inline-flex;
width: 300px;
flex: 0 1 auto;
margin-right: 20px;
.mat-form-field-wrapper {
width: 100%;
}
}
.mat-slide-toggle {
display: inline-flex;
width: 120px;
height: unset;
&.simpleview {
margin-right: 20px;
margin-left: auto;
}
&.preview {
}
}
} }