대화방 검색 변경, 동영상 미지원 가이이드
This commit is contained in:
khk
parent
3b2560948a
commit
aea898dea7
|
|
@ -154,7 +154,7 @@
|
|||
>
|
||||
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
|
||||
</div>
|
||||
<div *ngIf="isShowSearchArea" class="chat-search bg-accent-color">
|
||||
<div *ngIf="isShowSearchArea" class="chat-search">
|
||||
<ucap-chat-search
|
||||
[totalCount]="searchTotalCount"
|
||||
[curIndex]="searchCurrentIndex"
|
||||
|
|
|
|||
|
|
@ -77,7 +77,12 @@
|
|||
fxFlexFill
|
||||
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>
|
||||
<ul>
|
||||
|
|
|
|||
|
|
@ -41,6 +41,19 @@ $tablet-s-width: 768px;
|
|||
border-bottom: 1px dotted #dddddd;
|
||||
text-align: center;
|
||||
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 {
|
||||
padding-top: 10px;
|
||||
|
|
|
|||
|
|
@ -420,12 +420,13 @@ $daesang-grey: (
|
|||
}
|
||||
}
|
||||
}
|
||||
.chat-search-frame {
|
||||
/*.대화방 검색창 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);
|
||||
}
|
||||
|
|
@ -454,4 +455,12 @@ $daesang-grey: (
|
|||
background-color: mat-color($accent, 500);
|
||||
}
|
||||
}
|
||||
.chatroom-search{
|
||||
.search-form{
|
||||
border: 2px solid mat-color($accent, B100);
|
||||
}
|
||||
.btns{
|
||||
background-color: mat-color($accent, B100);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
fxLayout="row"
|
||||
|
|
@ -66,7 +8,7 @@
|
|||
<span class="icon-img">
|
||||
<i class="mid mdi-magnify"></i>
|
||||
</span>
|
||||
<mat-form-field floatLabel="never">
|
||||
<mat-form-field floatLabel="never" class="white">
|
||||
<input
|
||||
matInput
|
||||
#inputSearch
|
||||
|
|
@ -90,7 +32,7 @@
|
|||
<span class="text-amount">{{ curIndex }} / {{ totalCount }}</span>
|
||||
</form>
|
||||
</div>
|
||||
<span class="stroke-bar"></span>
|
||||
|
||||
<div class="btns">
|
||||
<button
|
||||
*ngIf="false"
|
||||
|
|
@ -101,16 +43,18 @@
|
|||
<i class="mid mdi-arrow-up"></i>
|
||||
</button>
|
||||
<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>
|
||||
<span class="stroke-bar"></span>
|
||||
<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>
|
||||
<span class="stroke-bar"></span>
|
||||
<button
|
||||
class="icon-button btn-close-searchbox bg-accent-dark"
|
||||
class="icon-button btn-close-searchbox"
|
||||
(click)="inputSearch.value = ''; onClickSearchCancel()"
|
||||
>
|
||||
<i class="mid mdi-window-close"></i>
|
||||
<i class="mid mdi-window-close"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,22 @@
|
|||
$tablet-l-width: 1024px;
|
||||
$tablet-s-width: 768px;
|
||||
$search-item-color: #ffffff;
|
||||
$search-item-color: #444444;
|
||||
|
||||
.chatroom-search {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
flex: 1 1 auto;
|
||||
justify-items: center;
|
||||
width: 100%;
|
||||
.search-form {
|
||||
flex-flow: row;
|
||||
padding: 0 0 0 20px;
|
||||
padding: 0 0 0 10px;
|
||||
margin-left: 10px;
|
||||
width: calc(100% - 126px);
|
||||
position: relative;
|
||||
@media screen and (max-width: #{$tablet-s-width}),
|
||||
(max-height: 600px) {
|
||||
padding: 0 0 0 14px;
|
||||
flex: 0 0 auto;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
form {
|
||||
display: inline-flex;
|
||||
|
|
@ -34,6 +35,12 @@ $search-item-color: #ffffff;
|
|||
.mat-hint {
|
||||
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;
|
||||
.btns {
|
||||
display: flex;
|
||||
flex: 0 0 0%;
|
||||
flex: 1 1 auto;
|
||||
margin-left: auto;
|
||||
margin-top: 0;
|
||||
height: 100%;
|
||||
button {
|
||||
margin-left: 4px;
|
||||
&.btn-search.icon-button {
|
||||
&.icon-button {
|
||||
align-self: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
color: $search-item-color;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -94,14 +101,15 @@ $search-item-color: #ffffff;
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.stroke-bar {
|
||||
width: 2px;
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
display: inline-flex;
|
||||
align-self: center;
|
||||
margin: 0 6px;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ textarea {
|
|||
width: 100%;
|
||||
.mat-form-field-appearance-legacy {
|
||||
.mat-form-field-wrapper {
|
||||
color: #ffffff;
|
||||
//color: #ffffff;
|
||||
width: 100%;
|
||||
.mat-form-field-infix {
|
||||
.mat-input-element {
|
||||
|
|
@ -42,7 +42,8 @@ textarea {
|
|||
}
|
||||
}
|
||||
.mat-form-field-label {
|
||||
color: rgba(255, 255, 255, 0.7) !important;
|
||||
color: currentColor;
|
||||
opacity: 0.7;
|
||||
font-size: 1em;
|
||||
}
|
||||
.mat-form-field-underline {
|
||||
|
|
@ -73,6 +74,7 @@ textarea {
|
|||
width: 90%;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
color: #ffffff;
|
||||
.mat-form-field-wrapper {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
|
|
@ -89,7 +91,8 @@ textarea {
|
|||
top: 0;
|
||||
.mat-form-field-label {
|
||||
top: 0;
|
||||
color: rgba(255, 255, 255, 0.7) !important;
|
||||
color: currentColor;
|
||||
opacity: 0.7;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
|
|
@ -99,6 +102,9 @@ textarea {
|
|||
}
|
||||
}
|
||||
//텍스트 선명도
|
||||
&.white {
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user