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-02-07 14:13:56 +09:00
parent 3b2560948a
commit aea898dea7
7 changed files with 65 additions and 80 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/messages.component.html
View File

@ -154,7 +154,7 @@
> >
<mat-progress-bar mode="indeterminate"></mat-progress-bar> <mat-progress-bar mode="indeterminate"></mat-progress-bar>
</div> </div>
<div *ngIf="isShowSearchArea" class="chat-search bg-accent-color"> <div *ngIf="isShowSearchArea" class="chat-search">
<ucap-chat-search <ucap-chat-search
[totalCount]="searchTotalCount" [totalCount]="searchTotalCount"
[curIndex]="searchCurrentIndex" [curIndex]="searchCurrentIndex"

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

@ -77,7 +77,12 @@
fxFlexFill fxFlexFill
class="guide-msg" class="guide-msg"
> >
{{ 'common.file.errors.cantPlay' | translate }} <div>
<span class="icon-img">
<i class="mid mdi-information-outline"></i>
</span>
{{ 'common.file.errors.cantPlay' | translate }}
</div>
</div> </div>
</div> </div>
<ul> <ul>

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

@ -41,6 +41,19 @@ $tablet-s-width: 768px;
border-bottom: 1px dotted #dddddd; border-bottom: 1px dotted #dddddd;
text-align: center; text-align: center;
padding-bottom: 10px; padding-bottom: 10px;
.guide-msg {
div {
display: flex;
flex-flow: column;
height: 140px;
justify-content: center;
justify-items: center;
color: #999999;
.icon-img {
margin-bottom: 6px;
}
}
}
} }
ul { ul {
padding-top: 10px; padding-top: 10px;

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

@ -420,12 +420,13 @@ $daesang-grey: (
} }
} }
} }
.chat-search-frame { /*.대화방 검색창 bg
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); 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);
} }
@ -454,4 +455,12 @@ $daesang-grey: (
background-color: mat-color($accent, 500); background-color: mat-color($accent, 500);
} }
} }
.chatroom-search{
.search-form{
border: 2px solid mat-color($accent, B100);
}
.btns{
background-color: mat-color($accent, B100);
}
}
} }

72
projects/ucap-webmessenger-ui-chat/src/lib/components/search.component.html
View File

@ -1,61 +1,3 @@
<!--<div fxFlex fxLayout="row" class="chatroom-search">
<div
fxLayout="row"
fxLayoutAlign="start center"
class="input input-lineless search-form"
>
<form [formGroup]="fgSearch">
<span class="icon-img">
<i class="mid mdi-magnify"></i>
</span>
<mat-form-field floatLabel="never">
<input
matInput
#inputSearch
type="text"
placeholder="{{ 'chat.searchEventByText' | translate }}"
value=""
formControlName="searchInput"
(keydown.enter)="onKeyDownEnter($event, inputSearch.value)"
/>
<button
mat-button
matSuffix
mat-icon-button
aria-label="Clear"
*ngIf="inputSearch.value"
(click)="inputSearch.value = ''"
>
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
<span class="text-amount">{{ curIndex }} / {{ totalCount }}</span>
</form>
</div>
<span class="stroke-bar"></span>
<div class="btns">
<button
*ngIf="false"
mat-stroked-button
(click)="onClickSearchAndPrev()"
class="btn-toggle"
>
<i class="mid mdi-arrow-up"></i>
</button>
<button class="icon-button btn-search" (click)="onClickPrevSearch()">
<i class="mid mdi-arrow-up mdi-chevron-up"></i>
</button>
<button class="icon-button btn-search" (click)="onClickNextSearch()">
<i class="mid mdi-arrow-down mdi-chevron-down"></i>
</button>
<button
class="icon-button btn-close-searchbox bg-accent-dark"
(click)="inputSearch.value = ''; onClickSearchCancel()"
>
<i class="mid mdi-window-close"></i>
</button>
</div>
</div>-->
<div fxFlex fxLayout="row" class="chatroom-search"> <div fxFlex fxLayout="row" class="chatroom-search">
<div <div
fxLayout="row" fxLayout="row"
@ -66,7 +8,7 @@
<span class="icon-img"> <span class="icon-img">
<i class="mid mdi-magnify"></i> <i class="mid mdi-magnify"></i>
</span> </span>
<mat-form-field floatLabel="never"> <mat-form-field floatLabel="never" class="white">
<input <input
matInput matInput
#inputSearch #inputSearch
@ -90,7 +32,7 @@
<span class="text-amount">{{ curIndex }} / {{ totalCount }}</span> <span class="text-amount">{{ curIndex }} / {{ totalCount }}</span>
</form> </form>
</div> </div>
<span class="stroke-bar"></span>
<div class="btns"> <div class="btns">
<button <button
*ngIf="false" *ngIf="false"
@ -101,16 +43,18 @@
<i class="mid mdi-arrow-up"></i> <i class="mid mdi-arrow-up"></i>
</button> </button>
<button class="icon-button btn-search" (click)="onClickPrevSearch()"> <button class="icon-button btn-search" (click)="onClickPrevSearch()">
<i class="mid mdi-chevron-up"></i> <i class="mid mid-24 mdi-chevron-up"></i>
</button> </button>
<span class="stroke-bar"></span>
<button class="icon-button btn-search" (click)="onClickNextSearch()"> <button class="icon-button btn-search" (click)="onClickNextSearch()">
<i class="mid mdi-chevron-down"></i> <i class="mid mid-24 mdi-chevron-down"></i>
</button> </button>
<span class="stroke-bar"></span>
<button <button
class="icon-button btn-close-searchbox bg-accent-dark" class="icon-button btn-close-searchbox"
(click)="inputSearch.value = ''; onClickSearchCancel()" (click)="inputSearch.value = ''; onClickSearchCancel()"
> >
<i class="mid mdi-window-close"></i> <i class="mid mdi-window-close"></i>
</button> </button>
</div> </div>
</div> </div>

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

@ -1,21 +1,22 @@
$tablet-l-width: 1024px; $tablet-l-width: 1024px;
$tablet-s-width: 768px; $tablet-s-width: 768px;
$search-item-color: #ffffff; $search-item-color: #444444;
.chatroom-search { .chatroom-search {
display: flex; display: flex;
flex: 0 0 auto; flex: 1 1 auto;
justify-items: center; justify-items: center;
width: 100%; width: 100%;
.search-form { .search-form {
flex-flow: row; flex-flow: row;
padding: 0 0 0 20px; padding: 0 0 0 10px;
margin-left: 10px;
width: calc(100% - 126px); width: calc(100% - 126px);
position: relative; position: relative;
@media screen and (max-width: #{$tablet-s-width}), @media screen and (max-width: #{$tablet-s-width}),
(max-height: 600px) { (max-height: 600px) {
padding: 0 0 0 14px; padding: 0 0 0 14px;
flex: 0 0 auto; flex: 1 1 auto;
} }
form { form {
display: inline-flex; display: inline-flex;
@ -34,6 +35,12 @@ $search-item-color: #ffffff;
.mat-hint { .mat-hint {
color: rgba(0, 0, 0, 0.54); color: rgba(0, 0, 0, 0.54);
} }
&.white {
.mat-form-field-label,
.mat-hint {
color: rgba(0, 0, 0, 0.54);
}
}
} }
} }
} }
@ -72,17 +79,17 @@ $search-item-color: #ffffff;
position: relative; position: relative;
.btns { .btns {
display: flex; display: flex;
flex: 0 0 0%; flex: 1 1 auto;
margin-left: auto; margin-left: auto;
margin-top: 0; margin-top: 0;
height: 100%; height: 100%;
button { button {
margin-left: 4px; margin-left: 4px;
&.btn-search.icon-button { &.icon-button {
align-self: center; align-self: center;
width: 30px; width: 30px;
height: 30px; height: 30px;
color: $search-item-color; color: #ffffff;
} }
} }
} }
@ -94,14 +101,15 @@ $search-item-color: #ffffff;
display: flex; display: flex;
justify-content: center; justify-content: center;
justify-items: center; justify-items: center;
margin-right: 4px;
} }
} }
.stroke-bar { .stroke-bar {
width: 2px; width: 1px;
height: 20px; height: 20px;
background-color: rgba(255, 255, 255, 0.3); background-color: rgba(255, 255, 255, 0.3);
display: inline-flex; display: inline-flex;
align-self: center; align-self: center;
margin: 0 6px; margin: 0 4px;
} }

12
projects/ucap-webmessenger-ui/src/assets/scss/partials/_forms.scss
View File

@ -21,7 +21,7 @@ textarea {
width: 100%; width: 100%;
.mat-form-field-appearance-legacy { .mat-form-field-appearance-legacy {
.mat-form-field-wrapper { .mat-form-field-wrapper {
color: #ffffff; //color: #ffffff;
width: 100%; width: 100%;
.mat-form-field-infix { .mat-form-field-infix {
.mat-input-element { .mat-input-element {
@ -42,7 +42,8 @@ textarea {
} }
} }
.mat-form-field-label { .mat-form-field-label {
color: rgba(255, 255, 255, 0.7) !important; color: currentColor;
opacity: 0.7;
font-size: 1em; font-size: 1em;
} }
.mat-form-field-underline { .mat-form-field-underline {
@ -73,6 +74,7 @@ textarea {
width: 90%; width: 90%;
align-items: center; align-items: center;
display: flex; display: flex;
color: #ffffff;
.mat-form-field-wrapper { .mat-form-field-wrapper {
padding: 0; padding: 0;
display: flex; display: flex;
@ -89,7 +91,8 @@ textarea {
top: 0; top: 0;
.mat-form-field-label { .mat-form-field-label {
top: 0; top: 0;
color: rgba(255, 255, 255, 0.7) !important; color: currentColor;
opacity: 0.7;
font-size: 0.9em; font-size: 0.9em;
} }
} }
@ -99,6 +102,9 @@ textarea {
} }
} }
//텍스트 선명도 //텍스트 선명도
&.white {
color: #333333;
}
} }
} }