From 0328aa2d111ed41fb69f2fccaa3afb10a9aff31d Mon Sep 17 00:00:00 2001 From: Justin Ferrari <‘justinwesleyferrari@gmail.com’> Date: Thu, 17 Nov 2022 20:09:09 -0500 Subject: [PATCH 1/2] Started bug fixing --- .../plugins/core/components/ChatPage.js | 77 ++++++++----------- .../plugins/core/components/ChatScroller.js | 10 +-- 2 files changed, 37 insertions(+), 50 deletions(-) diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index 0a6b6cac..d2749d9c 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -59,11 +59,11 @@ class ChatPage extends LitElement { editedMessageObj: { type: Object }, iframeHeight: { type: Number }, chatMessageSize: { type: Number}, - imageFile: {type: Object}, - isUploadingImage: {type: Boolean}, + imageFile: { type: Object }, + isUploadingImage: { type: Boolean }, caption: { type: String }, - chatEditor: {type: Object}, - chatEditorNewChat: {type: Object} + chatEditor: { type: Object }, + chatEditorNewChat: { type: Object } } } @@ -144,7 +144,6 @@ class ChatPage extends LitElement { width: 92%; } - .senderName { margin: 0; color: var(--mdc-theme-primary); @@ -234,8 +233,8 @@ class ChatPage extends LitElement { overflow: hidden; justify-content: center; background: white; - padding: 5px; - border-radius: 1px; + padding: 5px; + border-radius: 1px; } .chatbar-caption { @@ -435,7 +434,6 @@ class ChatPage extends LitElement { .dialog-container { position: relative; display: flex; - flex-direction: column; align-items: center; padding: 0 10px; gap: 10px; @@ -523,29 +521,21 @@ class ChatPage extends LitElement { ${this.imageFile && html` dialog-img `} - -
+
this.setChatEditorNewChat(editor)} - .chatEditor=${this.chatEditorNewChat} - .imageFile=${this.imageFile} - .insertImage=${this.insertImage} - - .editedMessageObj=${this.editedMessageObj} - - ?isLoading=${this.isLoading} - ?isLoadingMessages=${this.isLoadingMessages} - > - - - -
+ iframeId="newChat" + ?hasGlobalEvents=${false} + placeholder=${this.chatEditorPlaceholder} + ._sendMessage=${this._sendMessage} + .setChatEditor=${(editor)=> this.setChatEditorNewChat(editor)} + .chatEditor=${this.chatEditorNewChat} + .imageFile=${this.imageFile} + .insertImage=${this.insertImage} + .editedMessageObj=${this.editedMessageObj} + ?isLoading=${this.isLoading} + ?isLoadingMessages=${this.isLoadingMessages}> + +
${this.chatMessageSize >= 750 ? html`
@@ -617,22 +607,21 @@ class ChatPage extends LitElement {
`}
- this.setChatEditor(editor)} .chatEditor=${this.chatEditor} - .imageFile=${this.imageFile} - .insertImage=${this.insertImage} - .chatMessageInput=${this.chatMessageInput} - .editedMessageObj=${this.editedMessageObj} - .mirrorChatInput=${this.mirrorChatInput} - ?isLoading=${this.isLoading} - ?isLoadingMessages=${this.isLoadingMessages} - > - + .imageFile=${this.imageFile} + .insertImage=${this.insertImage} + .chatMessageInput=${this.chatMessageInput} + .editedMessageObj=${this.editedMessageObj} + .mirrorChatInput=${this.mirrorChatInput} + ?isLoading=${this.isLoading} + ?isLoadingMessages=${this.isLoadingMessages}> +
diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index 173b76b6..434d295e 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -125,12 +125,10 @@ class ChatScroller extends LitElement { this.upObserverElement = this.shadowRoot.getElementById('upObserver'); this.downObserverElement = this.shadowRoot.getElementById('downObserver'); // Intialize Observers - this.upElementObserver() - this.downElementObserver() - await this.updateComplete - this.viewElement.scrollTop = this.viewElement.scrollHeight + 50 - - + this.upElementObserver(); + this.downElementObserver(); + await this.updateComplete; + this.viewElement.scrollTop = this.viewElement.scrollHeight + 50; } _getOldMessage(_scrollElement) { From 1908f160eebd5903735a3b4672fc081a6b898313 Mon Sep 17 00:00:00 2001 From: Justin Ferrari <‘justinwesleyferrari@gmail.com’> Date: Thu, 17 Nov 2022 21:33:50 -0500 Subject: [PATCH 2/2] Fixed some UI bugs --- .../plugins/core/components/ChatPage.js | 12 ++++++++++- .../core/components/ChatScroller-css.js | 21 ++++++++++++------- .../plugins/core/components/ChatScroller.js | 10 +++++++-- 3 files changed, 33 insertions(+), 10 deletions(-) diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index 59069f75..c8ebf65c 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -432,6 +432,16 @@ class ChatPage extends LitElement { /* Add Image Modal Dialog Styling */ .dialog-container { + position: relative; + display: flex; + align-items: center; + flex-direction: column; + padding: 0 10px; + gap: 10px; + height: 100%; + } + + .dialog-container-loader { position: relative; display: flex; align-items: center; @@ -628,7 +638,7 @@ class ChatPage extends LitElement { ${(this.isUploadingImage || this.isDeletingImage) ? html`
-
+

${this.isDeletingImage ? diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js index 0ef263ef..753c5230 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js @@ -400,26 +400,33 @@ export const chatStyles = css` .image-container { display: flex; } + .message-data-level { height: 21px; width: 21px; overflow: hidden; } + .defaultSize { - width:45vh; - height:40vh + width: 45vh; + height: 40vh; } + .image-delete-icon { margin-left: 5px; height: 20px; - cursor: pointer; - visibility: hidden; - transition: .2s all; - opacity: .8 + cursor: pointer; + visibility: hidden; + transition: .2s all; + opacity: 0.8; + color: rgb(228, 222, 222); + padding-left: 7px; } + .image-delete-icon:hover { - opacity: 1 + opacity: 1; } + .message-parent:hover .image-delete-icon { visibility: visible; } diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index d23d62da..448ce883 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -414,7 +414,10 @@ class MessageTemplate extends LitElement {

`} ${image && !isImageDeleted ? html` -
+
${imageHTML} this.sendMessage({ type: 'delete', @@ -425,7 +428,10 @@ class MessageTemplate extends LitElement { class="image-delete-icon" icon="vaadin:close" slot="icon">
` : html``} -
+
${unsafeHTML(this.emojiPicker.parse(replacedMessage))}