대화방 검색( 디자인적용)
This commit is contained in:
khk
parent
2f0ab68f3e
commit
a863e10685
|
|
@ -185,27 +185,19 @@
|
|||
</mat-menu>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-search-frame">
|
||||
<div *ngIf="(eventListProcessing$ | async) || isTranslationProcess" style="position: absolute; width: 100%;">
|
||||
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
|
||||
</div>
|
||||
<div *ngIf="isShowSearchArea" class="chat-search bg-accent-color">
|
||||
<ucap-chat-search [totalCount]="searchTotalCount" [curIndex]="searchCurrentIndex"
|
||||
(searchText)="onSearchChat($event)" (prevSearch)="onPrevSearch()" (nextSearch)="onNextSearch()"
|
||||
(searchAndPrev)="onSearchAndPrev()" (closeSearchArea)="onCloseSearchArea()"></ucap-chat-search>
|
||||
</div>
|
||||
</div>
|
||||
</mat-toolbar>
|
||||
<!-- / CHAT TOOLBAR -->
|
||||
<div style="position: relative;">
|
||||
<div
|
||||
*ngIf="(eventListProcessing$ | async) || isTranslationProcess"
|
||||
style="position: absolute; width: 100%;"
|
||||
>
|
||||
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
|
||||
</div>
|
||||
<div *ngIf="isShowSearchArea" class="char-search">
|
||||
<ucap-chat-search
|
||||
[totalCount]="searchTotalCount"
|
||||
[curIndex]="searchCurrentIndex"
|
||||
(searchText)="onSearchChat($event)"
|
||||
(prevSearch)="onPrevSearch()"
|
||||
(nextSearch)="onNextSearch()"
|
||||
(searchAndPrev)="onSearchAndPrev()"
|
||||
(closeSearchArea)="onCloseSearchArea()"
|
||||
></ucap-chat-search>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CHAT CONTENT -->
|
||||
<div
|
||||
fxFlex="1 1 auto"
|
||||
|
|
|
|||
|
|
@ -23,20 +23,27 @@
|
|||
width: 100%;
|
||||
}
|
||||
.chat-toolbar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
min-height: 70px;
|
||||
height: auto;
|
||||
align-items: center;
|
||||
background-color: #ffffff !important;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
|
||||
z-index: 1;
|
||||
padding: 0;
|
||||
.chat-header {
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-items: center;
|
||||
padding: 10px 20px;
|
||||
.profile-img {
|
||||
margin-right: 16px;
|
||||
|
||||
.responsive-chats-button {
|
||||
display: none;
|
||||
&:last-child {
|
||||
|
|
@ -87,6 +94,13 @@
|
|||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
.chat-search-frame {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
.chat-search {
|
||||
margin: 0 4px 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-content {
|
||||
|
|
@ -152,12 +166,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.char-search {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background-color: #ffffff;
|
||||
padding: 20px;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
|
||||
border-bottom: 1px solid #dddddd;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<div fxFlex fxLayout="row" class="chatroom-search">
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="input search-form">
|
||||
<form [formGroup]="fgSearch" class="w-100-p">
|
||||
<i class="material-icons icon-search"> </i>
|
||||
<mat-form-field floatLabel="never">
|
||||
<input
|
||||
matInput
|
||||
|
|
@ -11,19 +12,29 @@
|
|||
formControlName="searchInput"
|
||||
(keydown.enter)="onKeyDownEnter($event, inputSearch.value)"
|
||||
/>
|
||||
<button
|
||||
<!-- <button
|
||||
mat-button
|
||||
matSuffix
|
||||
mat-icon-button
|
||||
aria-label="Clear"
|
||||
(click)="inputSearch.value = ''; onClickSearchCancel()"
|
||||
>
|
||||
-->
|
||||
<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>
|
||||
<span class="stroke-bar"></span>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="btns">
|
||||
<button
|
||||
mat-stroked-button
|
||||
|
|
@ -81,6 +92,7 @@
|
|||
<polyline class="st0" points="15.8,10 10,15.8 4.2,10 " />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!--<mat-button-toggle-group>
|
||||
<mat-button-toggle></mat-button-toggle>
|
||||
<mat-button-toggle >
|
||||
|
|
@ -103,4 +115,26 @@
|
|||
<mat-button-toggle ></mat-button-toggle>
|
||||
</mat-button-toggle-group>-->
|
||||
</div>
|
||||
<span class="stroke-bar"></span>
|
||||
<span class="text-amount">{{ curIndex }} / {{ totalCount }}</span>
|
||||
<button
|
||||
class="btn-close-searchbox bg-accent-dark"
|
||||
(click)="inputSearch.value = ''; onClickSearchCancel()"
|
||||
>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
justify-items: center;
|
||||
.search-form {
|
||||
flex-flow: row;
|
||||
padding: 0 10px 0 20px;
|
||||
flex: 1 1 auto;
|
||||
form {
|
||||
display: flex;
|
||||
|
|
@ -17,53 +18,123 @@
|
|||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
}
|
||||
.text-amount {
|
||||
display: inline-flex;
|
||||
width: 80px;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btns {
|
||||
display: flex;
|
||||
flex: 0 0 0%;
|
||||
.text-amount {
|
||||
display: inline-flex;
|
||||
min-width: 80px;
|
||||
padding: 0 10px;
|
||||
align-self: center;
|
||||
font-size: 0.7em;
|
||||
justify-content: center;
|
||||
border-radius: 50px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-form-field-label,
|
||||
.mat-hint {
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
|
||||
::ng-deep .btns {
|
||||
border: 1px solid #dddddd;
|
||||
border-radius: 4px;
|
||||
height: 42px;
|
||||
.mat-stroked-button {
|
||||
border: none;
|
||||
min-width: 40px;
|
||||
height: 42px;
|
||||
padding: 0 10px;
|
||||
&.btn-toggle {
|
||||
display: flex;
|
||||
border-right: 1px solid #dddddd;
|
||||
justify-items: center;
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
::ng-deep .search-form {
|
||||
.mat-form-field-appearance-legacy {
|
||||
.mat-form-field-wrapper {
|
||||
color: #ffffff;
|
||||
padding-bottom: 0.8em;
|
||||
.mat-form-field-infix {
|
||||
.mat-input-element {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
.mat-button-wrapper {
|
||||
display: flex;
|
||||
line-height: inherit;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
stroke: #555555;
|
||||
.mat-form-field-suffix {
|
||||
button {
|
||||
position: relative;
|
||||
transform: translateY(4px);
|
||||
.mat-button-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mat-form-field-label {
|
||||
color: rgba(255, 255, 255, 0.7) !important;
|
||||
}
|
||||
.mat-form-field-underline {
|
||||
height: 0;
|
||||
.mat-form-field-ripple {
|
||||
top: 6px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon-search {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-self: center;
|
||||
color: #ffffff;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .chatroom-search {
|
||||
position: relative;
|
||||
.btns {
|
||||
display: flex;
|
||||
flex: 0 0 0%;
|
||||
height: 40px;
|
||||
margin-top: 10px;
|
||||
//border: 1px solid #ffffff;
|
||||
border-radius: 50px;
|
||||
.mat-stroked-button {
|
||||
border: none;
|
||||
min-width: 40px;
|
||||
height: 40px;
|
||||
padding: 0 10px;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
background-color: (0, 0, 0, 0.7);
|
||||
&.btn-toggle {
|
||||
display: flex;
|
||||
//border-right: 1px solid #ffffff;
|
||||
justify-items: center;
|
||||
.mat-button-wrapper {
|
||||
display: flex;
|
||||
line-height: inherit;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
stroke: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-close-searchbox {
|
||||
width: 3em;
|
||||
height: 100%;
|
||||
//background: #0367a6;
|
||||
stroke: #ffffff;
|
||||
border: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
svg {
|
||||
stroke: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stroke-bar {
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
margin: 0 10px;
|
||||
display: inline-flex;
|
||||
align-self: center;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user