-
+
+
+
+
+
+
{{ "chat.elements.messageBox.uplDrag.upload"|translate }}
+
+
+
+
+
+
{{ "chat.elements.messageBox.uplDrag.transfer"|translate }}
+
+
+
+
+
+
+
+
+
+
+
+ {{ "chat.elements.messageBox.placeholder"|translate }}
+
+
+
-
diff --git a/src/app/chat/elements/message-box/message-box.scss b/src/app/chat/elements/message-box/message-box.scss
index 94b515d..081800f 100644
--- a/src/app/chat/elements/message-box/message-box.scss
+++ b/src/app/chat/elements/message-box/message-box.scss
@@ -3,27 +3,117 @@
display: flex;
justify-content: center;
+ #dragOverlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.2s ease-in-out;
+
+ &.show {
+ opacity: 1;
+ pointer-events: all;
+ }
+
+ .method {
+ width: 800px;
+ height: 200px;
+ background: var(--tui-background-accent-1-hover);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ gap: 15px;
+
+ .icon-holder {
+ border-radius: 50%;
+ background: var(--tui-background-accent-1);
+ padding: 20px;
+
+ tui-icon {
+ font-size: 50px;
+ }
+ }
+
+ span {
+ font-size: 20px;
+ font-weight: 600;
+ }
+ }
+ }
+
#message-box {
+ transition: all 0.2s ease-in-out;
width: 60%;
background: var(--tui-background-base-alt);
- height: 75px;
- border-radius: 200px;
+ min-height: 75px;
+ max-height: 200px;
border: 2px solid var(--tui-border-normal);
display: grid;
- grid-template-columns: 10% 80% 10%;
+ grid-template-columns: 85px 1fr 100px;
align-items: center;
padding: 0 10px;
+ .items-left, .items-middle, .items-right {
+ display: flex;
+ align-items: center;
+ }
+
+ .items-left, .items-right {
+ button {
+ height: 30px;
+ width: 30px;
+
+ tui-icon {
+ font-size: 20px;
+ }
+ }
+ }
+
.items-middle {
+ ::-webkit-scrollbar-thumb {
+ background: transparent;
+ border-radius: 10px;
+ }
+
+ position: relative;
+
textarea {
width: 100%;
- height: 100%;
background: transparent;
border: none;
outline: none;
resize: none;
color: var(--tui-text-01);
+ font-size: 16px;
+ z-index: 1;
}
+
+ .placeholder {
+ position: absolute;
+ font-size: 16px;
+ height: 25px;
+ top: 2px;
+ left: 2px;
+ color: gray;
+ transition: all 0.2s ease-in-out;
+
+ &.hidden {
+ margin-left: 10px;
+ opacity: 0;
+ }
+ }
+ }
+
+ .items-right {
+ display: flex;
+ justify-content: end;
}
}
}
diff --git a/src/app/chat/elements/message-box/message-box.ts b/src/app/chat/elements/message-box/message-box.ts
index f4d17a4..36c35d3 100644
--- a/src/app/chat/elements/message-box/message-box.ts
+++ b/src/app/chat/elements/message-box/message-box.ts
@@ -1,12 +1,59 @@
-import { Component } from '@angular/core';
-import {TuiAppearance} from '@taiga-ui/core';
+import {Component, HostListener, inject, input} from '@angular/core';
+import {TuiAppearance, TuiButton, TuiGroup, TuiIcon, TuiScrollbarDirective} from '@taiga-ui/core';
+import {TranslatePipe} from '@ngx-translate/core';
+import {ServiceManager} from '../../../service-manager';
+import {MessageBoxViewModel} from './message-box-viewmodel';
+import {FormsModule} from '@angular/forms';
@Component({
selector: 'message-box',
imports: [
- TuiAppearance
+ TuiAppearance,
+ TranslatePipe,
+ TuiScrollbarDirective,
+ TuiGroup,
+ TuiIcon,
+ TuiButton,
+ FormsModule
],
templateUrl: './message-box.html',
styleUrl: './message-box.scss',
})
-export class MessageBox {}
+export class MessageBox {
+ viewModel = input.required
()
+
+ textareaHeight = 25
+ messageBoxRadius = 200
+
+ private dragCounter = 0;
+ isDraggingOverWindow = false;
+
+ @HostListener('window:dragenter', ['$event'])
+ onDragEnter(event: DragEvent) {
+ event.preventDefault();
+ this.dragCounter++;
+
+ if (this.dragCounter === 1) {
+ this.isDraggingOverWindow = true;
+ console.log("Drag entered the window area");
+ }
+ }
+
+ @HostListener('window:dragleave', ['$event'])
+ onDragLeave(event: DragEvent) {
+ event.preventDefault();
+ this.dragCounter--;
+
+ if (this.dragCounter === 0) {
+ this.isDraggingOverWindow = false;
+ console.log("Drag left the window completely");
+ }
+ }
+
+ onTextAreaInput(e: HTMLTextAreaElement) {
+ const calculatedHeight = e.value.split(/\r?\n/).length * 25
+ const calculatedRadius = (200 - this.textareaHeight)
+ this.textareaHeight = calculatedHeight > 180 ? 180 : calculatedHeight
+ this.messageBoxRadius = calculatedRadius < 30 ? 30 : calculatedRadius
+ }
+}
diff --git a/src/app/chat/elements/messages/messages.html b/src/app/chat/elements/messages/messages.html
new file mode 100644
index 0000000..c951ff0
--- /dev/null
+++ b/src/app/chat/elements/messages/messages.html
@@ -0,0 +1,19 @@
+@if (serviceManager.currentSession != null) {
+ @for (message of messages(); track message.msgid; let i = $index) {
+
+
+ {{message.sent_at.T * 1000 | date: 'HH:mm'}}
+
+
+ {{message.message}}
+
+
+