94 lines
3.7 KiB
HTML
94 lines
3.7 KiB
HTML
<div id="dragOverlay" tuiGroup orientation="vertical" [class.show]="isDraggingOverWindow">
|
|
<div class="method" (drop)="onDrop($event)" (dragover)="onDragOver($event)">
|
|
<div class="icon-holder">
|
|
<tui-icon icon="@tui.file-up"/>
|
|
</div>
|
|
<span>{{ "chat.elements.messageBox.uplDrag.upload"|translate }}</span>
|
|
</div>
|
|
<div class="method" style="opacity: 0.5">
|
|
<div class="icon-holder">
|
|
<tui-icon icon="@tui.cloud-sync"/>
|
|
</div>
|
|
<span>{{ "chat.elements.messageBox.uplDrag.transfer"|translate }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<ng-template [(tuiDialog)]="viewModel().dialogOpen" [tuiDialogOptions]="{label: 'chat.elements.messageBox.fileUploadDialog.label'|translate}">
|
|
@if (filterPictureVideo(viewModel().files()).length != 0) {
|
|
<masonry [maxColSize]="2" style="overflow-y: scroll; height: 200px">
|
|
@for (file of viewModel().files(); track file) {
|
|
@if (file.type == "image") {
|
|
<img [src]="file.blob" style="width: 100%; height: 100%; object-fit: fill;"/>
|
|
}
|
|
}
|
|
</masonry>
|
|
}
|
|
|
|
<div tuiGroup orientation="vertical" style="width: 100%">
|
|
@for (file of viewModel().files(); track file) {
|
|
@if (file.type != "image") {
|
|
<div style="background: var(--tui-background-neutral-1); height: 50px; display: flex; align-items: center; padding: 0 10px">
|
|
<span>{{ file.name }}</span>
|
|
</div>
|
|
}
|
|
}
|
|
</div>
|
|
|
|
<div style="margin-top: 10px; display: flex; gap: 10px; width: 100%">
|
|
<tui-textfield style="width: 100%">
|
|
<label tuiLabel>{{"chat.elements.messageBox.placeholder"|translate}}</label>
|
|
<textarea
|
|
#caption
|
|
placeholder="{{ 'chat.elements.messageBox.message'|translate }}"
|
|
[(ngModel)]="viewModel().message"
|
|
tuiTextarea
|
|
></textarea>
|
|
</tui-textfield>
|
|
|
|
<button tuiButton iconStart="@tui.send" (click)="sendMessageWithCaption()"></button>
|
|
</div>
|
|
</ng-template>
|
|
|
|
<main>
|
|
<div id="message-box-extension" tuiAppearance="floating" [class.shown]="viewModel().editingMessage()">
|
|
<div id="content">
|
|
@if (viewModel().editingMessage()) {
|
|
<tui-icon icon="@tui.pencil"></tui-icon>
|
|
<span>{{"chat.elements.messageBox.editMessageLabel"|translate}}</span>
|
|
@if (viewModel().editingMessage()!.message == "") {
|
|
<tui-icon icon="@tui.paperclip"></tui-icon>
|
|
<span>{{"chat.elements.messageBox.attachments"|translate}}</span>
|
|
} @else {
|
|
{{viewModel().editingMessage()!.message}}
|
|
}
|
|
}
|
|
</div>
|
|
|
|
<button id="close" tuiButton appearance="flat" (click)="viewModel().editingMessage.set(null); viewModel().message.set('');">
|
|
<tui-icon icon="@tui.x"/>
|
|
</button>
|
|
</div>
|
|
<div id="message-box" [style]="'border-radius:'+messageBoxRadius+'px;'">
|
|
<div class="items-left">
|
|
<button tuiButton appearance="flat" (click)="uplInput.click()">
|
|
<tui-icon icon="@tui.file-up"/>
|
|
<input #uplInput type="file" (change)="handleFileInput($event)" multiple hidden/>
|
|
</button>
|
|
|
|
<button tuiButton appearance="flat" disabled>
|
|
<tui-icon icon="@tui.cloud-sync"/>
|
|
</button>
|
|
</div>
|
|
<div class="items-middle">
|
|
<textarea (keydown.enter)="handleEnterKeydown($event); viewModel().onMessageSend(message.value, null)" [style]="'height:'+textareaHeight+'px;'" #message (input)="onTextAreaInput(message)" [(ngModel)]="viewModel().message"></textarea>
|
|
<span class="placeholder"
|
|
[class.hidden]="message.value != ''">{{ "chat.elements.messageBox.placeholder"|translate }}</span>
|
|
</div>
|
|
<div class="items-right">
|
|
<button [disabled]="message.value.trim() == ''" tuiButton appearance="flat" (click)="viewModel().onMessageSend(message.value, null)">
|
|
<tui-icon icon="@tui.send"/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</main>
|