Qortal/qortal-ui
1
0
Fork 0
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-03-27 07:45:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Continued chateditor logic

Browse Source
This commit is contained in:
Justin Ferrari 2022-10-31 23:04:09 -05:00
parent 2e154e731c
commit 0f557b7057
1 changed files with 14 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
qortal-ui-plugins/plugins/core/components/ChatPage.js
View File

@ -54,7 +54,7 @@ class ChatPage extends LitElement {
repliedToMessageObj: { type: Object }, repliedToMessageObj: { type: Object },
editedMessageObj: { type: Object }, editedMessageObj: { type: Object },
chatMessageSize: { type: String }, chatMessageSize: { type: String },
iframeHeight: { type: Number } iframeHeight: { type: Number }
} }
} }
@ -66,13 +66,15 @@ class ChatPage extends LitElement {
.chat-container { .chat-container {
display: grid; display: grid;
grid-template-rows: minmax(66%, 92vh) minmax(40px, auto); grid-template-rows: minmax(6%, 92vh) minmax(40px, auto);
max-height: 100%; max-height: 100%;
} }
.chat-text-area { .chat-text-area {
display: flex; display: flex;
justify-content: center; justify-content: center;
min-height: 60px;
max-height: 100%;
overflow: hidden; overflow: hidden;
} }
@ -93,8 +95,10 @@ class ChatPage extends LitElement {
} }
.chat-text-area .typing-area .chat-editor { .chat-text-area .typing-area .chat-editor {
display: flex;
max-height: -webkit-fill-available;
width: 100%;
border-color: transparent; border-color: transparent;
flex: 1;
margin: 0; margin: 0;
padding: 0; padding: 0;
border: none; border: none;
@ -161,9 +165,10 @@ class ChatPage extends LitElement {
width: auto; width: auto;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: flex-end;
height: auto; height: auto;
padding: 5px; padding: 5px;
overflow-y: hidden;
} }
.chat-text-area .typing-area .emoji-button { .chat-text-area .typing-area .emoji-button {
@ -193,6 +198,7 @@ class ChatPage extends LitElement {
this.getOldMessage = this.getOldMessage.bind(this) this.getOldMessage = this.getOldMessage.bind(this)
this._sendMessage = this._sendMessage.bind(this) this._sendMessage = this._sendMessage.bind(this)
this._downObserverhandler = this._downObserverhandler.bind(this) this._downObserverhandler = this._downObserverhandler.bind(this)
this.calculateIFrameHeight = this.calculateIFrameHeight.bind(this)
this.selectedAddress = {} this.selectedAddress = {}
this.chatId = '' this.chatId = ''
this.myAddress = '' this.myAddress = ''
@ -222,7 +228,7 @@ class ChatPage extends LitElement {
<div> <div>
${this.isLoadingMessages ? html`<h1>${translate("chatpage.cchange22")}</h1>` : this.renderChatScroller(this._initialMessages)} ${this.isLoadingMessages ? html`<h1>${translate("chatpage.cchange22")}</h1>` : this.renderChatScroller(this._initialMessages)}
</div> </div>
<div class="chat-text-area"> <div class="chat-text-area" style="${`height: ${this.iframeHeight}px`}">
<div class="typing-area"> <div class="typing-area">
${this.repliedToMessageObj && html` ${this.repliedToMessageObj && html`
<div class="repliedTo-container"> <div class="repliedTo-container">
@ -285,7 +291,6 @@ class ChatPage extends LitElement {
async firstUpdated() { async firstUpdated() {
// TODO: Load and fetch messages from localstorage (maybe save messages to localstorage...) // TODO: Load and fetch messages from localstorage (maybe save messages to localstorage...)
// this.changeLanguage(); // this.changeLanguage();
this.emojiPickerHandler = this.shadowRoot.querySelector('.emoji-button'); this.emojiPickerHandler = this.shadowRoot.querySelector('.emoji-button');
this.mirrorChatInput = this.shadowRoot.getElementById('messageBox'); this.mirrorChatInput = this.shadowRoot.getElementById('messageBox');
@ -403,19 +408,13 @@ class ChatPage extends LitElement {
} }
if (changedProperties && changedProperties.has('editedMessageObj')) { if (changedProperties && changedProperties.has('editedMessageObj')) {
this.chatEditor.insertText(this.editedMessageObj.message) this.chatEditor.insertText(this.editedMessageObj.message)
} }
if (changedProperties && changedProperties.has('iframeHeight')) {
console.log({iframeHeight: this.iframeHeight})
}
} }
calculateIFrameHeight(height) { calculateIFrameHeight(height) {
console.log(height, "height here") console.log(height, "height here")
this.iframeHeight = height; this.iframeHeight = height;
this.requestUpdate();
} }
changeLanguage() { changeLanguage() {
@ -1459,15 +1458,9 @@ class ChatPage extends LitElement {
} }
if (e.type === 'keydown') { if (e.type === 'keydown') {
console.log(editorConfig.mirrorElement.scrollHeight);
console.log(editorConfig.editableElement.contentDocument.body.scrollHeight); editorConfig.calculateIFrameHeight(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 // Handle Enter
if (e.keyCode === 13 && !e.shiftKey) { if (e.keyCode === 13 && !e.shiftKey) {