diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index 98ed1c59..037a525e 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -2144,7 +2144,8 @@ class ChatPage extends LitElement { const findOriginalMessageIndex = this.messagesRendered.findIndex(msg=> msg.reference === newMessage.chatReference || (msg.chatReference && msg.chatReference === newMessage.chatReference) ) if(findOriginalMessageIndex !== -1){ const newMessagesRendered = [...this.messagesRendered] - newMessagesRendered[findOriginalMessageIndex] = {...newMessage, timestamp: newMessagesRendered[findOriginalMessageIndex].timestamp, editedTimestamp: newMessage.timestamp } + newMessagesRendered[findOriginalMessageIndex] = {...newMessage, timestamp: newMessagesRendered[findOriginalMessageIndex].timestamp, senderName: newMessagesRendered[findOriginalMessageIndex].senderName, + sender: newMessagesRendered[findOriginalMessageIndex].sender, editedTimestamp: newMessage.timestamp } this.messagesRendered = newMessagesRendered await this.getUpdateComplete(); } diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js index af39f5d3..177f9265 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js @@ -421,6 +421,10 @@ export const chatStyles = css` height: 40vh; } + .hideImg { + visibility: hidden; + } + .image-deleted-msg { font-family: Roboto, sans-serif; font-size: 14px; @@ -659,5 +663,46 @@ export const chatStyles = css` 100% { background-color:rgba(var(--menuactivergb), 0)} } + .smallLoading, + .smallLoading:after { + border-radius: 50%; + width: 2px; + height: 2px; + } + + .smallLoading { + border-width: 0.8em; + border-style: solid; + border-color: rgba(3, 169, 244, 0.2) rgba(3, 169, 244, 0.2) + rgba(3, 169, 244, 0.2) rgb(3, 169, 244); + font-size: 30px; + position: relative; + text-indent: -9999em; + transform: translateZ(0px); + animation: 1.1s linear 0s infinite normal none running loadingAnimation; + } + + @-webkit-keyframes loadingAnimation { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } + } + + @keyframes loadingAnimation { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } + } + ` diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index 37a08e7e..4178041b 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -418,15 +418,12 @@ class MessageTemplate extends LitElement { setTimeout(() => { this.imageFetches = this.imageFetches + 1; imageHTMLRes.src = imageUrl; - }, 500); + }, 2000); } else { - imageHTMLRes.src = '/img/chain.png'; - imageHTMLRes.style= "max-width:45vh; max-height:20vh; border-radius: 5px; filter: opacity(0.5)"; - imageHTMLRes.onclick= () => { - - } - - this.isImageLoaded = true + setTimeout(() => { + this.imageFetches = this.imageFetches + 1; + imageHTMLRes.src = imageUrl; + }, 6000); } }; return imageHTMLRes; @@ -472,6 +469,7 @@ class MessageTemplate extends LitElement { } const escapedMessage = this.escapeHTML(message) const replacedMessage = escapedMessage.replace(new RegExp('\r?\n','g'), '
'); + return hideit ? html`
  • ` : html`
  • `} - ${image && !isImageDeleted && !this.viewImage && this.myAddress !== this.messageObj.sender ? html` + ${image && !isImageDeleted && !this.viewImage && this.myAddress !== this.messageObj.sender ? html`
    { this.viewImage = true @@ -591,16 +589,26 @@ class MessageTemplate extends LitElement {
    ` : html``} + ${!this.isImageLoaded && image && this.viewImage ? html` +
    +
    +
    + + `: ''} ${image && !isImageDeleted && (this.viewImage || this.myAddress === this.messageObj.sender) ? html`
    - ${imageHTML} { this.openDeleteImage = true; this.chatE }} class="image-delete-icon" icon="vaadin:close" slot="icon"> + ` : ''} +
    ` : image && isImageDeleted ? html`

    This image has been deleted

    @@ -637,7 +645,7 @@ class MessageTemplate extends LitElement { ${edited} ` - : null + : '' } @@ -847,7 +855,6 @@ class ChatMenu extends LitElement { console.log({error}) } } - render() { return html`
    diff --git a/qortal-ui-plugins/plugins/utils/replace-messages-edited.js b/qortal-ui-plugins/plugins/utils/replace-messages-edited.js index cb5ba73e..1d6a2941 100644 --- a/qortal-ui-plugins/plugins/utils/replace-messages-edited.js +++ b/qortal-ui-plugins/plugins/utils/replace-messages-edited.js @@ -21,9 +21,12 @@ export const replaceMessagesEdited = async ({ let responseItem = { ...response[0] } const decodeResponseItem = decodeMessageFunc(responseItem, isReceipient, _publicKey) delete decodeResponseItem.timestamp + console.log({msg}) msgItem = { ...msg, ...decodeResponseItem, + senderName: msg.senderName, + sender: msg.sender, editedTimestamp: response[0].timestamp, } }