2019-12-26 11:39:02 +09:00
|
|
|
<div fxFlex fxLayout="row" class="chatroom-search">
|
|
|
|
<div fxLayout="row" fxLayoutAlign="start center" class="input search-form">
|
2020-01-28 20:50:52 +09:00
|
|
|
<form [formGroup]="fgSearch">
|
2020-01-07 19:30:58 +09:00
|
|
|
<i class="material-icons icon-search"> </i>
|
2019-12-23 15:23:27 +09:00
|
|
|
<mat-form-field floatLabel="never">
|
|
|
|
<input
|
|
|
|
matInput
|
|
|
|
#inputSearch
|
|
|
|
type="text"
|
2020-01-08 16:13:00 +09:00
|
|
|
placeholder="{{ 'chat.searchEventByText' | translate }}"
|
2019-12-23 15:23:27 +09:00
|
|
|
value=""
|
|
|
|
formControlName="searchInput"
|
|
|
|
(keydown.enter)="onKeyDownEnter($event, inputSearch.value)"
|
|
|
|
/>
|
2020-01-07 19:30:58 +09:00
|
|
|
<!-- <button
|
2019-12-23 15:23:27 +09:00
|
|
|
mat-button
|
|
|
|
matSuffix
|
|
|
|
mat-icon-button
|
|
|
|
aria-label="Clear"
|
|
|
|
(click)="inputSearch.value = ''; onClickSearchCancel()"
|
2020-01-07 19:30:58 +09:00
|
|
|
>
|
|
|
|
-->
|
|
|
|
<button
|
|
|
|
mat-button
|
|
|
|
matSuffix
|
|
|
|
mat-icon-button
|
|
|
|
aria-label="Clear"
|
|
|
|
*ngIf="inputSearch.value"
|
|
|
|
(click)="inputSearch.value = ''"
|
2019-12-23 15:23:27 +09:00
|
|
|
>
|
|
|
|
<mat-icon>close</mat-icon>
|
|
|
|
</button>
|
|
|
|
</mat-form-field>
|
2020-01-28 20:50:52 +09:00
|
|
|
<span class="text-amount">{{ curIndex }} / {{ totalCount }}</span>
|
2019-12-23 15:23:27 +09:00
|
|
|
</form>
|
|
|
|
</div>
|
2020-01-28 20:50:52 +09:00
|
|
|
<span class="stroke-bar"></span>
|
2019-12-26 11:39:02 +09:00
|
|
|
<div class="btns">
|
2019-12-30 19:19:39 +09:00
|
|
|
<button
|
2020-01-08 08:19:57 +09:00
|
|
|
*ngIf="false"
|
2019-12-30 19:19:39 +09:00
|
|
|
mat-stroked-button
|
|
|
|
(click)="onClickSearchAndPrev()"
|
|
|
|
class="btn-toggle"
|
|
|
|
>
|
|
|
|
<svg
|
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
|
width="20"
|
|
|
|
height="20"
|
|
|
|
viewBox="0 0 20 20"
|
|
|
|
fill="none"
|
|
|
|
stroke="currentColor"
|
|
|
|
stroke-width="1.5"
|
|
|
|
stroke-linecap="round"
|
|
|
|
stroke-linejoin="round"
|
|
|
|
class="feather feather-arrow-up"
|
|
|
|
>
|
|
|
|
<path d="M3.3,9v6.7c0,0.9,0.7,1.7,1.7,1.7h10c0.9,0,1.7-0.7,1.7-1.7V9" />
|
|
|
|
<polyline class="st0" points="13.3,6 10,2.7 6.7,6 " />
|
|
|
|
<line class="st0" x1="10" y1="2.7" x2="10" y2="12.5" />
|
|
|
|
</svg>
|
2019-12-23 15:23:27 +09:00
|
|
|
</button>
|
2020-01-28 20:50:52 +09:00
|
|
|
<button class="icon-button btn-search" (click)="onClickPrevSearch()">
|
|
|
|
<i class="mid mdi-arrow-up"></i>
|
2019-12-23 15:23:27 +09:00
|
|
|
</button>
|
2020-01-28 20:50:52 +09:00
|
|
|
<button class="icon-button btn-search" (click)="onClickNextSearch()">
|
|
|
|
<i class="mid mdi-arrow-down"></i>
|
2019-12-23 15:23:27 +09:00
|
|
|
</button>
|
2020-01-07 19:30:58 +09:00
|
|
|
|
2019-12-30 19:19:39 +09:00
|
|
|
<!--<mat-button-toggle-group>
|
|
|
|
<mat-button-toggle></mat-button-toggle>
|
|
|
|
<mat-button-toggle >
|
|
|
|
<svg
|
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
|
width="24"
|
|
|
|
height="24"
|
|
|
|
viewBox="0 0 24 24"
|
|
|
|
fill="none"
|
|
|
|
stroke="currentColor"
|
|
|
|
stroke-width="2"
|
|
|
|
stroke-linecap="round"
|
|
|
|
stroke-linejoin="round"
|
|
|
|
class="feather feather-arrow-up"
|
|
|
|
>
|
|
|
|
<line x1="12" y1="19" x2="12" y2="5"></line>
|
|
|
|
<polyline points="5 12 12 5 19 12"></polyline>
|
|
|
|
</svg>
|
|
|
|
</mat-button-toggle>
|
|
|
|
<mat-button-toggle ></mat-button-toggle>
|
|
|
|
</mat-button-toggle-group>-->
|
2020-01-28 20:50:52 +09:00
|
|
|
<button
|
|
|
|
class="icon-button btn-close-searchbox bg-accent-dark"
|
|
|
|
(click)="inputSearch.value = ''; onClickSearchCancel()"
|
2020-01-07 19:30:58 +09:00
|
|
|
>
|
2020-01-28 20:50:52 +09:00
|
|
|
<i class="mid mdi-window-close"></i>
|
|
|
|
</button>
|
|
|
|
</div>
|
2019-12-23 15:23:27 +09:00
|
|
|
</div>
|