Fixed Cache Bug + Finished UI Refactor

qortal-ui-plugins/plugins/core/components/ChatPage.js

@@ -559,7 +559,7 @@ class ChatPage extends LitElement {
                             <div></div>
                         </div>
                         ` : 
-                        this.renderChatScroller(this._initialMessages)}
+                        this.renderChatScroller()}
                         <mwc-dialog 
                             id="showDialogPublicKey" 
                             ?open=${this.imageFile} 
@@ -900,9 +900,9 @@ class ChatPage extends LitElement {
         if (changedProperties.has('messagesRendered')) { 
             const chatReference1 = this.isReceipient ? 'direct' : 'group';
             const chatReference2 = this._chatId
-            if (chatReference1 && chatReference2) {
+            // if (chatReference1 && chatReference2) {
-                await messagesCache.setItem(`${chatReference1}-${chatReference2}`, this.messagesRendered);
+            //     await messagesCache.setItem(`${chatReference1}-${chatReference2}`, this.messagesRendered);
-            }
+            // }
         }
         if (changedProperties && changedProperties.has('editedMessageObj')) {
             this.chatEditor.insertText(this.editedMessageObj.message)
@@ -949,10 +949,9 @@ class ChatPage extends LitElement {
         this.chatEditorPlaceholder = placeholder;
     }
 
-    renderChatScroller(initialMessages) {
+    renderChatScroller() {
         return html`
         <chat-scroller 
-        .initialMessages=${initialMessages} 
         .messages=${this.messagesRendered} 
         .emojiPicker=${this.emojiPicker} 
         .escapeHTML=${escape} 
@@ -1062,8 +1061,7 @@ class ChatPage extends LitElement {
             })
 
             // TODO: Determine number of initial messages by screen height...
-            this._initialMessages = this._messages;
+            this.messagesRendered = this._messages;
-            this.messagesRendered = this._initialMessages;
             this.isLoadingMessages = false;
             setTimeout(() => this.downElementObserver(), 500);
         } else {

qortal-ui-plugins/plugins/core/components/ChatScroller-css.js

@@ -93,19 +93,32 @@ export const chatStyles = css`
 	}
 
 	.message-data-time {
-		color: #a8aab1;
+		color: #888888;
 		font-size: 13px;
-		padding-left: 6px;
-		padding-bottom: 4px;
 		user-select: none;
+		float: right;
+    padding-left: 15px;
+		padding-bottom: 3px;
+    transform: translateY(10px);
 	}
 
-	.message-data-level {
+	.message-data-time-hidden {
-		color: #03a9f4;
+		visibility: hidden;
+		transition: all 0.1s ease-in-out;
+		color: #888888;
 		font-size: 13px;
-		padding-left: 8px;
-		padding-bottom: 4px;
 		user-select: none;
+		float: right;
+    padding-left: 15px;
+		padding-bottom: 3px;
+    transform: translateY(10px);
+	}
+
+	.message-user-info {
+		display: flex;
+		justify-content: space-between;
+		width: 100%;
+		gap: 10px;
 	}
 
 	.chat-bubble-container {
@@ -231,6 +244,10 @@ export const chatStyles = css`
 		display: block;
 	}
 
+	.message-parent:hover .message-data-time-hidden {
+		visibility: visible;
+	}
+
 	.chat-hover {
 		display: none;
 		position: absolute;

qortal-ui-plugins/plugins/core/components/ChatScroller.js

@@ -16,7 +16,6 @@ import '@material/mwc-icon';
 import { EmojiPicker } from 'emoji-picker-js';
 import { cropAddress } from "../../utils/cropAddress";
 
-
 const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
 class ChatScroller extends LitElement {
     static get properties() {
@@ -25,7 +24,6 @@ class ChatScroller extends LitElement {
             getOldMessage: { attribute: false },
             emojiPicker: { attribute: false },
             escapeHTML: { attribute: false },
-            initialMessages: { type: Array }, // First set of messages to load.. 15 messages max ( props )
             messages: { type: Array },
             hideMessages: { type: Array },
             setRepliedToMessageObj: { type: Function },
@@ -51,26 +49,26 @@ class ChatScroller extends LitElement {
         console.log({messages: this.messages})
 
         let formattedMessages = this.messages.reduce((messageArray, message) => {
-            const lastGroupedMessage = messageArray[messageArray.length - 1]
+            const lastGroupedMessage = messageArray[messageArray.length - 1];
-            let timestamp
+            let timestamp;
-            let sender
+            let sender;
-            let repliedToData
+            let repliedToData;
             if (lastGroupedMessage) {
-                timestamp = lastGroupedMessage.timestamp
+                timestamp = lastGroupedMessage.timestamp;
-                sender = lastGroupedMessage.sender
+                sender = lastGroupedMessage.sender;
-                repliedToData = lastGroupedMessage.repliedToData
+                repliedToData = lastGroupedMessage.repliedToData;
             }
-            const isSameGroup = Math.abs(timestamp - message.timestamp) < 600000 && sender === message.sender && !repliedToData
+            const isSameGroup = Math.abs(timestamp - message.timestamp) < 600000 && sender === message.sender && !repliedToData;
        
             if (isSameGroup) {
-                messageArray[messageArray.length - 1].messages = [...(messageArray[messageArray.length - 1]?.messages || []), message]
+                messageArray[messageArray.length - 1].messages = [...(messageArray[messageArray.length - 1]?.messages || []), message];
             } else {
                 messageArray.push({
                     messages: [message],
                     ...message
-                })
+                });
             }
-            return messageArray
+            return messageArray;
         }, [])
 
         return html`
@@ -248,8 +246,7 @@ class MessageTemplate extends LitElement {
     }
 
     render() {
-        const parsedMessageObj = JSON.parse(this.messageObj.decodedMessage);
+        console.log(this.messageObj);
-        console.log({isFirstMessage: this.isFirstMessage, isSingleMessageInGroup: this.isSingleMessageInGroup, isLastMessageInGroup: this.isLastMessageInGroup, messageText: parsedMessageObj.messageText})
         const hidemsg = this.hideMessages;
         let message = "";
         let reactions = [];
@@ -348,14 +345,6 @@ class MessageTemplate extends LitElement {
             'padding-bottom: 0;' 
             : null} 
             ${this.isFirstMessage && 'margin-top: 20px;'}">
-                ${this.isFirstMessage ? (
-                    html`
-                    <div class="message-data ${this.messageObj.sender === this.myAddress ? "" : ""}">
-                        <span class="message-data-level">${levelFounder}</span>
-                        <span class="message-data-time"><message-time timestamp=${this.messageObj.timestamp}></message-time></span>
-                    </div>
-                    `
-                ) : null}
                 <div>
                     <div 
                     class="message-container" 
@@ -385,10 +374,11 @@ class MessageTemplate extends LitElement {
                             ?  'border-radius: 27px 25px 25px 12px;'
                             : (this.isFirstMessage === false && this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true) ?  
                             'border-radius: 10px 25px 25px 0;' 
-                            : this.isFirstMessage === true 
+                            : (this.isFirstMessage === true && this.isSingleMessageInGroup === false && this.isLastMessageInGroup === true) 
                             ? 'border-radius: 25px 25px 25px 0px;'
                             : null
                             }">
+                            <div class="message-user-info">
                                 ${this.isFirstMessage ? 
                                     html`
                                         <span class="message-data-name">
@@ -397,6 +387,12 @@ class MessageTemplate extends LitElement {
                                         `
                                     : null
                                 }
+                                ${this.isFirstMessage ? (
+                                html`
+                                    <span class="message-data-level">${levelFounder}</span>
+                                `
+                                ) : null}
+                            </div>
                                 ${repliedToData && html`
                                     <div class="original-message">
                                         <p class="original-message-sender">
@@ -421,12 +417,23 @@ class MessageTemplate extends LitElement {
                                     ` : html``}
                                     <div id="messageContent" class="message">
                                         ${unsafeHTML(this.emojiPicker.parse(replacedMessage))}
+                                        <div class="${((this.isFirstMessage === false && 
+                                            this.isSingleMessageInGroup === true && 
+                                            this.isLastMessageInGroup === true) || 
+                                            (this.isFirstMessage === true && 
+                                            this.isSingleMessageInGroup === false &&
+                                            this.isLastMessageInGroup === true)) 
+                                            ? 'message-data-time'
+                                            : 'message-data-time-hidden'
+                                        }">
+                                            <message-time timestamp=${this.messageObj.timestamp}></message-time>
+                                        </div>
                                     </div>
                             </div>
                                 <chat-menu 
                                 tabindex="0"
                                 class="chat-hover"
-                                style="${this.showBlockAddressIcon ? 'display: block;' : null} ${this.isFirstMessage && 'top: -50px'}"
+                                style="${this.showBlockAddressIcon && 'display: block;'}"
                                 toblockaddress="${this.messageObj.sender}" 
                                 .showPrivateMessageModal=${() => this.showPrivateMessageModal()}
                                 .showBlockUserModal=${() => this.showBlockUserModal()}
@@ -538,8 +545,6 @@ class ChatMenu extends LitElement {
         }
     }
 
-  
-
     firstUpdated () {
         this.emojiPicker = new EmojiPicker({
             style: "twemoji",
@@ -559,13 +564,9 @@ class ChatMenu extends LitElement {
          
            
          })
- 
         });
-      
     }
     
- 
-    
     render() {
         return html` 
             <div class="container">

qortal-ui-plugins/plugins/core/components/LevelFounder.js

@@ -48,32 +48,42 @@ class LevelFounder extends LitElement {
                 font-weight: 400;
             }
 
-            .level {
-                position: relative;
-                display: inline;
-            }
-
             .custom {
                 --paper-tooltip-background: #03a9f4;
                 --paper-tooltip-text-color: #fff;
             }
 
+            .level-img-tooltip {
+                --paper-tooltip-background: #000000;
+                --paper-tooltip-text-color: #fff;
+                --paper-tooltip-delay-in: 300;
+                --paper-tooltip-delay-out: 3000;
+            }
+
+            .message-data {
+                display: flex;
+                justify-content: center;
+                gap: 5px;
+            }
+
+            .message-data-level {
+                width: 20px;
+                height: 20px;
+            }
+
+
             .badge {
                 align-items: center;
-                background: #03a9f4;
+                background: rgb(3, 169, 244);
                 border: 1px solid transparent;
-                border-radius: 99em;
+                border-radius: 50%;
-                color: #fff;
+                color: rgb(255, 255, 255);
                 display: flex;
                 font-size: 10px;
                 font-weight: 400;
                 height: 12px;
+                width: 12px;
                 justify-content: center;
-                line-height: 1;
-                min-width: 12px;
-                position: absolute;
-                left: -16px;
-                top: -12px;
                 cursor: pointer;
             }
         `
@@ -87,7 +97,7 @@ class LevelFounder extends LitElement {
 
     render() {
         return html`
-            <div class="level">
+            <div class="message-data">
                 ${this.renderFounder()}
                 ${this.renderLevel()}
             </div>
@@ -135,21 +145,24 @@ class LevelFounder extends LitElement {
     }
 
     renderFounder() {
-        let adressfounder = this.memberInfo.flags
+        let adressfounder = this.memberInfo.flags;
         if (adressfounder === 1) {
         return html `
             <span id="founderTooltip" class="badge">F</span>
             <paper-tooltip class="custom" for="founderTooltip" position="top">FOUNDER</paper-tooltip>
         `
         } else {
-            return html ``
+            return null;
         }
     }
 
     renderLevel() {
-        let adresslevel = this.memberInfo.level
+        let adresslevel = this.memberInfo.level;
         return html `
-            <span id="levelTooltip">${translate("mintingpage.mchange27")} ${adresslevel}</span>
+            <img id="level-img" src=${`/img/badges/level-${adresslevel}.png`} alt=${`badge-${adresslevel}`} class="message-data-level" />
+            <paper-tooltip class="level-img-tooltip" for="level-img" position="top" >
+            ${translate("mintingpage.mchange27")} ${adresslevel}
+            </paper-tooltip>
         `
     }