diff --git a/img/badges/level-0.png b/img/badges/level-0.png new file mode 100644 index 00000000..74e9099c Binary files /dev/null and b/img/badges/level-0.png differ diff --git a/img/badges/level-1.png b/img/badges/level-1.png new file mode 100644 index 00000000..9955cc9f Binary files /dev/null and b/img/badges/level-1.png differ diff --git a/img/badges/level-2.png b/img/badges/level-2.png new file mode 100644 index 00000000..627517ad Binary files /dev/null and b/img/badges/level-2.png differ diff --git a/img/badges/level-3.png b/img/badges/level-3.png new file mode 100644 index 00000000..e7a196ac Binary files /dev/null and b/img/badges/level-3.png differ diff --git a/img/badges/level-4.png b/img/badges/level-4.png new file mode 100644 index 00000000..045d4803 Binary files /dev/null and b/img/badges/level-4.png differ diff --git a/img/badges/level-5.png b/img/badges/level-5.png new file mode 100644 index 00000000..b7477290 Binary files /dev/null and b/img/badges/level-5.png differ diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index f5f0f9ec..99005d5f 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -559,7 +559,7 @@ class ChatPage extends LitElement {
` : - this.renderChatScroller(this._initialMessages)} + this.renderChatScroller()} this.downElementObserver(), 500); } else { diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js index b814de97..e3b84996 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js +++ b/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 { - color: #03a9f4; + .message-data-time-hidden { + 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; diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index 4c3529af..4543f423 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -14,8 +14,7 @@ import '@material/mwc-button'; import '@material/mwc-dialog'; import '@material/mwc-icon'; import { EmojiPicker } from 'emoji-picker-js'; -import {cropAddress} from "../../utils/cropAddress"; - +import { cropAddress } from "../../utils/cropAddress"; const parentEpml = new Epml({ type: 'WINDOW', source: window.parent }) class ChatScroller extends LitElement { @@ -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 }, @@ -50,27 +48,27 @@ class ChatScroller extends LitElement { render() { console.log({messages: this.messages}) - let formattedMessages = this.messages.reduce((messageArray, message)=> { - const lastGroupedMessage = messageArray[messageArray.length - 1] - let timestamp - let sender - let repliedToData - if(lastGroupedMessage){ - timestamp = lastGroupedMessage.timestamp - sender = lastGroupedMessage.sender - repliedToData = lastGroupedMessage.repliedToData + let formattedMessages = this.messages.reduce((messageArray, message) => { + const lastGroupedMessage = messageArray[messageArray.length - 1]; + let timestamp; + let sender; + let repliedToData; + if (lastGroupedMessage) { + timestamp = lastGroupedMessage.timestamp; + sender = lastGroupedMessage.sender; + 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] + if (isSameGroup) { + 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({isFirstMessage: this.isFirstMessage, isSingleMessageInGroup: this.isSingleMessageInGroup, isLastMessageInGroup: this.isLastMessageInGroup, messageText: parsedMessageObj.messageText}) + console.log(this.messageObj); 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` -
- ${levelFounder} - -
- ` - ) : null}
- ${this.isFirstMessage ? + ${repliedToData && html`

@@ -421,12 +417,23 @@ class MessageTemplate extends LitElement { ` : html``}

${unsafeHTML(this.emojiPicker.parse(replacedMessage))} +
+ +
this.showPrivateMessageModal()} .showBlockUserModal=${() => this.showBlockUserModal()} @@ -538,9 +545,7 @@ class ChatMenu extends LitElement { } } - - - firstUpdated(){ + firstUpdated () { this.emojiPicker = new EmojiPicker({ style: "twemoji", twemojiBaseUrl: '/emoji/', @@ -558,13 +563,9 @@ class ChatMenu extends LitElement { reaction: selection.emoji, - }) - - }); - + }) + }); } - - render() { return html` diff --git a/qortal-ui-plugins/plugins/core/components/LevelFounder.js b/qortal-ui-plugins/plugins/core/components/LevelFounder.js index 3f70ef68..98c192bf 100644 --- a/qortal-ui-plugins/plugins/core/components/LevelFounder.js +++ b/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; - color: #fff; + border-radius: 50%; + 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` -
+
${this.renderFounder()} ${this.renderLevel()}
@@ -135,21 +145,24 @@ class LevelFounder extends LitElement { } renderFounder() { - let adressfounder = this.memberInfo.flags + let adressfounder = this.memberInfo.flags; if (adressfounder === 1) { - return html ` - F - FOUNDER - ` + return html ` + F + FOUNDER + ` } else { - return html `` + return null; } } renderLevel() { - let adresslevel = this.memberInfo.level + let adresslevel = this.memberInfo.level; return html ` - ${translate("mintingpage.mchange27")} ${adresslevel} + ${`badge-${adresslevel}`} + + ${translate("mintingpage.mchange27")} ${adresslevel} + ` }