diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index 63a0dad5..8dc7083f 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -53,7 +53,8 @@ class ChatPage extends LitElement { messagesRendered: { type: Array }, repliedToMessageObj: { type: Object }, editedMessageObj: { type: Object }, - chatMessageSize: { type: String} + chatMessageSize: { type: String }, + iframeHeight: { type: Number } } } @@ -63,6 +64,12 @@ class ChatPage extends LitElement { scroll-behavior: smooth; } + .chat-container { + display: grid; + grid-template-rows: minmax(66%, 92vh) minmax(40px, auto); + max-height: 100%; + } + .chat-text-area { display: flex; justify-content: center; @@ -72,8 +79,6 @@ class ChatPage extends LitElement { .chat-text-area .typing-area { display: flex; flex-direction: column; - position: absolute; - bottom: 0; width: 98%; box-sizing: border-box; margin-bottom: 8px; @@ -90,8 +95,6 @@ class ChatPage extends LitElement { .chat-text-area .typing-area .chat-editor { border-color: transparent; flex: 1; - max-height: 40px; - height: 40px; margin: 0; padding: 0; border: none; @@ -210,11 +213,12 @@ class ChatPage extends LitElement { this.messagesRendered = [] this.repliedToMessageObj = null this.editedMessageObj = null + this.iframeHeight = 40; } render() { return html` -
+
${this.isLoadingMessages ? html`

${translate("chatpage.cchange22")}

` : this.renderChatScroller(this._initialMessages)}
@@ -256,7 +260,8 @@ class ChatPage extends LitElement { `}
- + @@ -281,7 +286,6 @@ class ChatPage extends LitElement { async firstUpdated() { // TODO: Load and fetch messages from localstorage (maybe save messages to localstorage...) - // this.changeLanguage(); this.emojiPickerHandler = this.shadowRoot.querySelector('.emoji-button'); this.mirrorChatInput = this.shadowRoot.getElementById('messageBox'); @@ -403,6 +407,16 @@ class ChatPage extends LitElement { this.chatEditor.insertText(this.editedMessageObj.message) } + + if (changedProperties && changedProperties.has('iframeHeight')) { + console.log({iframeHeight: this.iframeHeight}) + } + } + + calculateIFrameHeight(height) { + console.log(height, "height here") + this.iframeHeight = height; + this.requestUpdate(); } changeLanguage() { @@ -446,9 +460,6 @@ class ChatPage extends LitElement { async getOldMessage(scrollElement) { - - - if (this.isReceipient) { const getInitialMessages = await parentEpml.request('apiCall', { type: 'api', @@ -575,9 +586,6 @@ class ChatPage extends LitElement { } } - // set replied to message in chat editor - - getMessageSize(message){ try { @@ -643,6 +651,8 @@ class ChatPage extends LitElement { } + // set replied to message in chat editor + setRepliedToMessageObj(messageObj) { this.repliedToMessageObj = {...messageObj}; this.editedMessageObj = null; @@ -821,9 +831,6 @@ class ChatPage extends LitElement { directSocketLink = `ws://${nodeUrl}/websockets/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${cid}`; } - - - const directSocket = new WebSocket(directSocketLink); // Open Connection @@ -1404,6 +1411,14 @@ class ChatPage extends LitElement { if (e.type === 'keydown') { + console.log(editorConfig.editableElement.contentDocument.body.scrollHeight); + + if (editorConfig.editableElement.contentDocument.body.scrollHeight > 40) { + editorConfig.calculateIFrameHeight(editorConfig.editableElement.contentDocument.body.scrollHeight); + } else { + editorConfig.calculateIFrameHeight(40); + }; + // Handle Enter if (e.keyCode === 13 && !e.shiftKey) { @@ -1484,6 +1499,7 @@ class ChatPage extends LitElement { const editorConfig = { getMessageSize: this.getMessageSize, + calculateIFrameHeight: this.calculateIFrameHeight, mirrorElement: this.mirrorChatInput, editableElement: this.chatMessageInput, sendFunc: this._sendMessage, diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js index 3e56949f..8e1429c1 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js @@ -65,7 +65,7 @@ export const chatStyles = css` .chat-list { overflow-y: auto; overflow-x: hidden; - height: 92vh; + height: 100%; box-sizing: border-box; }