From e145c9b0e101830c6d3cacf37990b06a5d6b633e Mon Sep 17 00:00:00 2001 From: Justin Ferrari <‘justinwesleyferrari@gmail.com’> Date: Fri, 11 Nov 2022 22:03:58 -0500 Subject: [PATCH] Continued Chat UI Refactor --- qortal-ui-core/font/switch-theme.css | 2 +- qortal-ui-core/src/styles/switch-theme.css | 2 +- .../core/components/ChatScroller-css.js | 19 +++++---- .../plugins/core/components/ChatScroller.js | 39 +++++++++++++------ .../plugins/utils/cropAddress.js | 8 ++++ 5 files changed, 49 insertions(+), 21 deletions(-) create mode 100644 qortal-ui-plugins/plugins/utils/cropAddress.js diff --git a/qortal-ui-core/font/switch-theme.css b/qortal-ui-core/font/switch-theme.css index 008718d9..6190e2f4 100644 --- a/qortal-ui-core/font/switch-theme.css +++ b/qortal-ui-core/font/switch-theme.css @@ -7,7 +7,7 @@ html { --border: #d0d6de; --border2: #dde2e8; --copybutton: #707584; - --chat-bubble: #efefef73; + --chat-bubble: #9f9f9f0a; --chat-bubble-bg: #f3f3f3; --chat-bubble-msg-color: #080808; --sectxt: #576374; diff --git a/qortal-ui-core/src/styles/switch-theme.css b/qortal-ui-core/src/styles/switch-theme.css index 9e1a0a49..26c78fd8 100644 --- a/qortal-ui-core/src/styles/switch-theme.css +++ b/qortal-ui-core/src/styles/switch-theme.css @@ -7,7 +7,7 @@ html { --border: #d0d6de; --border2: #dde2e8; --copybutton: #707584; - --chat-bubble: #efefef73; + --chat-bubble: #9f9f9f0a; --chat-bubble-bg: #f3f3f3; --chat-bubble-msg-color: #080808; --sectxt: #576374; diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js index 530c3e51..b814de97 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js @@ -82,8 +82,14 @@ export const chatStyles = css` } .message-data-name { - color: var(--black); user-select: none; + color: #03a9f4; + margin-bottom: 5px; + } + + .message-data-my-name { + color: #cf21e8; + text-shadow: 0 0 3px #cf21e8; } .message-data-time { @@ -127,7 +133,6 @@ export const chatStyles = css` justify-content: center; border-radius: 5px; padding: 12px 15px; - gap: 10px; width: fit-content; min-width: 150px; } @@ -158,16 +163,14 @@ export const chatStyles = css` position: relative; display: flex; flex-direction: column; - color: black; + color: var(--chat-bubble-msg-color); line-height: 19px; - overflow-wrap: break-word; user-select: text; - font-size: 13px; + font-size: 15px; width: 90%; border-radius: 5px; - background-color: rgba(232, 232, 232, 0.79); padding: 8px 5px 8px 25px; - white-space: nowrap; + margin-bottom: 10px; } .original-message:before { @@ -187,8 +190,10 @@ export const chatStyles = css` .replied-message { margin: 0; + white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + max-width: 300px; } .message { diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index 4907e878..4c3529af 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -14,6 +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"; const parentEpml = new Epml({ type: 'WINDOW', source: window.parent }) @@ -247,6 +248,8 @@ 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}) const hidemsg = this.hideMessages; let message = ""; let reactions = []; @@ -321,11 +324,12 @@ class MessageTemplate extends LitElement { imageHTMLDialog.style= "height: auto; max-height: 80vh; width: auto; max-width: 80vw; object-fit: contain; border-radius: 5px"; } - if (this.messageObj.sender === this.myAddress) { - nameMenu = html`${this.messageObj.senderName ? this.messageObj.senderName : this.messageObj.sender}`; - } else { - nameMenu = html`${this.messageObj.senderName ? this.messageObj.senderName : this.messageObj.sender}`; - } + nameMenu = html` + + ${this.messageObj.senderName ? this.messageObj.senderName : cropAddress(this.messageObj.sender)} + + `; + if (repliedToData) { try { const parsedMsg = JSON.parse(repliedToData.decodedMessage); @@ -347,7 +351,6 @@ class MessageTemplate extends LitElement { ${this.isFirstMessage ? ( html`
- ${nameMenu} ${levelFounder}
@@ -376,20 +379,32 @@ class MessageTemplate extends LitElement { (this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true)) && 'message-triangle'}`}" style="${(this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false) ? 'margin-bottom: 0;' : null} - ${(this.isFirstMessage === true && this.isSingleMessageInGroup === false && this.isLastMessageInGroup === false) - ? 'border-radius: 25px 25px 25px 0px;' - : (this.isFirstMessage === false && this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false) + ${(this.isFirstMessage === false && this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false) ? 'border-radius: 8px 25px 25px 8px;' : (this.isFirstMessage === true && this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false) ? 'border-radius: 27px 25px 25px 12px;' - : (this.isSingleMessageInGroup === true && this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true) ? + : (this.isFirstMessage === false && this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true) ? 'border-radius: 10px 25px 25px 0;' + : this.isFirstMessage === true + ? 'border-radius: 25px 25px 25px 0px;' : null }"> + ${this.isFirstMessage ? + html` + + ${nameMenu} + + ` + : null + } ${repliedToData && html`
-

${repliedToData.sendName ?? repliedToData.sender}

-

${repliedToData.decodedMessage.messageText}

+

+ ${repliedToData.sendName ?? cropAddress(repliedToData.sender)} +

+

+ ${repliedToData.decodedMessage.messageText} +

`} ${image && !isImageDeleted ? html` diff --git a/qortal-ui-plugins/plugins/utils/cropAddress.js b/qortal-ui-plugins/plugins/utils/cropAddress.js new file mode 100644 index 00000000..8c0c3f1b --- /dev/null +++ b/qortal-ui-plugins/plugins/utils/cropAddress.js @@ -0,0 +1,8 @@ +export function cropAddress(string = "", range = 5) { + const [start, end] = [ + string?.substring(0, range), + string?.substring(string?.length - range, string?.length), + // + ]; + return start + "..." + end; +}