135 lines
4.3 KiB
HTML
135 lines
4.3 KiB
HTML
<div
|
|
class="container"
|
|
fxFlex="0 0 auto"
|
|
fxLayout="row"
|
|
fxLayoutAlign="center center"
|
|
>
|
|
<div class="add-option">
|
|
<button
|
|
mat-icon-button
|
|
class="material-icons"
|
|
(click)="onClickFileInput()"
|
|
matTooltip="{{ 'chat.btnAttachFile' | translate }}"
|
|
>
|
|
<mat-icon>attach_file</mat-icon>
|
|
</button>
|
|
<input
|
|
type="file"
|
|
#fileInput
|
|
style="display: none"
|
|
multiple
|
|
(change)="onChangeFileInput()"
|
|
/>
|
|
|
|
<button
|
|
mat-icon-button
|
|
class="material-icons"
|
|
(click)="onClickStickerSelector()"
|
|
matTooltip="{{ 'chat.btnSticker' | translate }}"
|
|
>
|
|
<mat-icon>sentiment_satisfied_alt</mat-icon>
|
|
</button>
|
|
|
|
<button
|
|
mat-icon-button
|
|
class="material-icons"
|
|
(click)="onClickTranslation()"
|
|
matTooltip="{{ 'chat.btnTranslate' | translate }}"
|
|
>
|
|
<!--<mat-icon>g_translate</mat-icon>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
d="M7.41 9l2.24 2.24-.83 2L6 10.4l-3.3 3.3-1.4-1.42L4.58 9l-.88-.88c-.53-.53-1-1.3-1.3-2.12h2.2c.15.28.33.53.51.7l.89.9.88-.88C7.48 6.1 8 4.84 8 4H0V2h5V0h2v2h5v2h-2c0 1.37-.74 3.15-1.7 4.12L7.4 9zm3.84 8L10 20H8l5-12h2l5 12h-2l-1.25-3h-5.5zm.83-2h3.84L14 10.4 12.08 15z"
|
|
/>
|
|
</svg>-->
|
|
<svg
|
|
id="레이어_1"
|
|
data-name="레이어 1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 16.35 14.72"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
d="M6.78,7.42H3.2V3.5H4.28V4.66H5.72V3.51H6.78V5H8.13V3H9.22V8.6H8.13V5.89H6.78Zm2.6,2.17v.86H4.21V8.06H5.3V9.59ZM5.72,5.49H4.28V6.56H5.72Z"
|
|
transform="translate(-1.83 -3)"
|
|
/>
|
|
<path
|
|
d="M16.8,3V7.49H15.71v-1H14.07a2.08,2.08,0,0,1-1.52.63,1.88,1.88,0,1,1,0-3.76A2,2,0,0,1,14.07,4h1.64V3ZM13.52,5.27a.9.9,0,0,0-1-.94.9.9,0,0,0-1,.94,1,1,0,0,0,1.93,0ZM11.64,7.83H16.8v2.76H15.71V8.69H11.64Zm4.07-2.16V4.89h-1.2a1.53,1.53,0,0,1,0,.38,1.81,1.81,0,0,1,0,.4Z"
|
|
transform="translate(-1.83 -3)"
|
|
/>
|
|
<path
|
|
d="M3.11,13.82H1.83v-.75H5.32v.75H4v3.82H3.11Z"
|
|
transform="translate(-1.83 -3)"
|
|
/>
|
|
<path
|
|
d="M5.69,14.18h.74l.06.61h0a1.19,1.19,0,0,1,1-.7,1.08,1.08,0,0,1,.41.07L7.75,15a1,1,0,0,0-.36-.06.92.92,0,0,0-.8.68v2.07h-.9Z"
|
|
transform="translate(-1.83 -3)"
|
|
/>
|
|
<path
|
|
d="M8,16.7c0-.74.6-1.13,2-1.28a.54.54,0,0,0-.59-.6,1.91,1.91,0,0,0-.95.33l-.33-.6a2.74,2.74,0,0,1,1.45-.46c.88,0,1.33.53,1.33,1.53v2h-.74l-.07-.37h0a1.66,1.66,0,0,1-1,.45A1,1,0,0,1,8,16.7Zm2,0V16c-.84.12-1.12.34-1.12.65s.19.39.45.39A.92.92,0,0,0,10,16.67Z"
|
|
transform="translate(-1.83 -3)"
|
|
/>
|
|
<path
|
|
d="M11.85,14.18h.74l.06.45h0a1.64,1.64,0,0,1,1.13-.54c.75,0,1.07.52,1.07,1.39v2.16H14V15.59c0-.53-.15-.72-.49-.72a1,1,0,0,0-.72.39v2.38h-.9Z"
|
|
transform="translate(-1.83 -3)"
|
|
/>
|
|
<path
|
|
d="M15.48,17.23l.41-.56a1.51,1.51,0,0,0,.93.37c.35,0,.5-.15.5-.36s-.36-.38-.72-.52-1-.43-1-1,.51-1.06,1.29-1.06a1.93,1.93,0,0,1,1.18.43l-.41.55a1.3,1.3,0,0,0-.75-.3c-.31,0-.45.14-.45.33s.34.35.7.49,1,.4,1,1-.47,1.09-1.37,1.09A2.14,2.14,0,0,1,15.48,17.23Z"
|
|
transform="translate(-1.83 -3)"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<form
|
|
#replyForm="ngForm"
|
|
(ngSubmit)="onSend($event)"
|
|
(keydown.enter)="onSend($event)"
|
|
fxFlex
|
|
fxLayout="row"
|
|
fxLayoutAlign="start center"
|
|
>
|
|
<mat-form-field
|
|
class="message-text"
|
|
fxFlex
|
|
floatLabel="never"
|
|
appearance="standard"
|
|
>
|
|
<textarea
|
|
matInput
|
|
#replyInput
|
|
placeholder="{{ 'chat.typeMessage' | translate }}"
|
|
ngModel
|
|
name="message"
|
|
[matTextareaAutosize]="true"
|
|
[matAutosizeMaxRows]="20"
|
|
></textarea>
|
|
</mat-form-field>
|
|
|
|
<button
|
|
class="send-message-button bg-accent-darkest"
|
|
mat-icon-button
|
|
type="submit"
|
|
aria-label="Send message"
|
|
>
|
|
<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="butt"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path d="M12 19V6M5 12l7-7 7 7" />
|
|
</svg>
|
|
</button>
|
|
</form>
|
|
</div>
|