From d6bffbeaa95cb1d07e7b94126780e2e11b82f0a6 Mon Sep 17 00:00:00 2001 From: Justin Ferrari <‘justinwesleyferrari@gmail.com’> Date: Sat, 29 Oct 2022 10:51:02 -0500 Subject: [PATCH 1/4] Started UI Fixes --- .../plugins/core/components/ChatModals.js | 34 +++--- .../plugins/core/components/ChatPage.js | 106 +++++++++--------- .../core/components/ChatWelcomePage.js | 97 ++++++++-------- .../plugins/core/components/NameMenu.js | 6 +- 4 files changed, 125 insertions(+), 118 deletions(-) diff --git a/qortal-ui-plugins/plugins/core/components/ChatModals.js b/qortal-ui-plugins/plugins/core/components/ChatModals.js index b7370ef3..c9daf3b4 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatModals.js +++ b/qortal-ui-plugins/plugins/core/components/ChatModals.js @@ -92,11 +92,11 @@ class ChatModals extends LitElement { // Send Private Message _sendMessage() { - this.isLoading = true + this.isLoading = true; - const recipient = this.shadowRoot.getElementById('sendTo').value - const messageBox = this.shadowRoot.getElementById('messageBox') - const messageText = messageBox.value + const recipient = this.shadowRoot.getElementById('sendTo').value; + const messageBox = this.shadowRoot.getElementById('messageBox'); + const messageText = messageBox.value; if (recipient.length === 0) { this.isLoading = false @@ -105,22 +105,21 @@ class ChatModals extends LitElement { } else { this.sendMessage() } - } + }; async sendMessage() { - this.isLoading = true - - const _recipient = this.shadowRoot.getElementById('sendTo').value - const messageBox = this.shadowRoot.getElementById('messageBox') - const messageText = messageBox.value - let recipient + this.isLoading = true; + const _recipient = this.shadowRoot.getElementById('sendTo').value; + const messageBox = this.shadowRoot.getElementById('messageBox'); + const messageText = messageBox.value; + let recipient; const validateName = async (receiverName) => { - let myRes + let myRes; let myNameRes = await parentEpml.request('apiCall', { type: 'api', url: `/names/${receiverName}` - }) + }); if (myNameRes.error === 401) { myRes = false @@ -128,7 +127,7 @@ class ChatModals extends LitElement { myRes = myNameRes } - return myRes + return myRes; } const myNameRes = await validateName(_recipient) @@ -139,7 +138,6 @@ class ChatModals extends LitElement { recipient = myNameRes.owner } - let _reference = new Uint8Array(64); window.crypto.getRandomValues(_reference); @@ -367,7 +365,11 @@ class ChatModals extends LitElement {

- ${translate('welcomepage.wcchange6')} + { + console.log("here500"); + this._sendMessage(); + } + }>${translate('welcomepage.wcchange6')} ${translate("chatpage.cchange22")}` : this.renderChatScroller(this._initialMessages)} -
-
- ${this.repliedToMessageObj && html` -
-
- -
-

${this.repliedToMessageObj.senderName ? this.repliedToMessageObj.senderName : this.repliedToMessageObj.sender}

-

${this.repliedToMessageObj.message}

+
+
+ ${this.isLoadingMessages ? html`

${translate("chatpage.cchange22")}

` : this.renderChatScroller(this._initialMessages)} +
+
+
+ ${this.repliedToMessageObj && html` +
+
+ +
+

${this.repliedToMessageObj.senderName ? this.repliedToMessageObj.senderName : this.repliedToMessageObj.sender}

+

${this.repliedToMessageObj.message}

+
+ this.closeRepliedToContainer()} + >
- this.closeRepliedToContainer()} - > -
- `} - ${this.editedMessageObj && html` -
-
- -
-

${translate("chatpage.cchange25")}

-

${this.editedMessageObj.message}

+ `} + ${this.editedMessageObj && html` +
+
+ +
+

${translate("chatpage.cchange25")}

+

${this.editedMessageObj.message}

+
+ this.closeEditMessageContainer()} + >
- this.closeEditMessageContainer()} - > -
- `} -
- - - - ${this.editedMessageObj ? ( - html` - this._sendMessage()} - > - ` - ) : html`
` - } + `} +
+ + + + ${this.editedMessageObj ? ( + html` + this._sendMessage()} + > + ` + ) : html`
` + } +
@@ -274,7 +278,6 @@ class ChatPage extends LitElement { } async firstUpdated() { - // TODO: Load and fetch messages from localstorage (maybe save messages to localstorage...) @@ -385,6 +388,7 @@ class ChatPage extends LitElement { parentEpml.imReady(); } + async updated(changedProperties) { if (changedProperties.has('messagesRendered')) { const chatReference1 = this.isReceipient ? 'direct' : 'group'; diff --git a/qortal-ui-plugins/plugins/core/components/ChatWelcomePage.js b/qortal-ui-plugins/plugins/core/components/ChatWelcomePage.js index 14735c00..3d99c340 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatWelcomePage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatWelcomePage.js @@ -230,7 +230,11 @@ class ChatWelcomePage extends LitElement {

- ${translate("welcomepage.wcchange6")} + { + this._sendMessage(); + } + }> + ${translate("welcomepage.wcchange6")} { - let myRes + let myRes; let myNameRes = await parentEpml.request('apiCall', { type: 'api', url: `/names/${receiverName}` - }) - + }); if (myNameRes.error === 401) { - myRes = false + myRes = false; } else { - myRes = myNameRes - } + myRes = myNameRes; + }; + return myRes; + }; - return myRes - } + const myNameRes = await validateName(_recipient); - const myNameRes = await validateName(_recipient) if (!myNameRes) { - - recipient = _recipient + recipient = _recipient; } else { - - recipient = myNameRes.owner - } + recipient = myNameRes.owner; + }; let _reference = new Uint8Array(64); window.crypto.getRandomValues(_reference); - let sendTimestamp = Date.now() + let sendTimestamp = Date.now(); - let reference = window.parent.Base58.encode(_reference) + let reference = window.parent.Base58.encode(_reference); const getAddressPublicKey = async () => { - let isEncrypted - let _publicKey + let isEncrypted; + let _publicKey; let addressPublicKey = await parentEpml.request('apiCall', { type: 'api', url: `/addresses/publickey/${recipient}` }) - if (addressPublicKey.error === 102) { - _publicKey = false + _publicKey = false; // Do something here... - let err1string = get("welcomepage.wcchange7") - parentEpml.request('showSnackBar', `${err1string}`) - this.isLoading = false + let err1string = get("welcomepage.wcchange7"); + parentEpml.request('showSnackBar', `${err1string}`); + this.isLoading = false; } else if (addressPublicKey !== false) { - isEncrypted = 1 - _publicKey = addressPublicKey - sendMessageRequest(isEncrypted, _publicKey) + isEncrypted = 1; + _publicKey = addressPublicKey; + sendMessageRequest(isEncrypted, _publicKey); } else { - isEncrypted = 0 - _publicKey = this.selectedAddress.address - sendMessageRequest(isEncrypted, _publicKey) - } + isEncrypted = 0; + _publicKey = this.selectedAddress.address; + sendMessageRequest(isEncrypted, _publicKey); + }; }; const sendMessageRequest = async (isEncrypted, _publicKey) => { @@ -407,8 +405,8 @@ class ChatWelcomePage extends LitElement { images: [''], repliedTo: '', version: 1 - } - const stringifyMessageObject = JSON.stringify(messageObject) + }; + const stringifyMessageObject = JSON.stringify(messageObject); let chatResponse = await parentEpml.request('chat', { type: 18, nonce: this.selectedAddress.nonce, @@ -424,7 +422,6 @@ class ChatWelcomePage extends LitElement { isText: 1 } }) - _computePow(chatResponse) } diff --git a/qortal-ui-plugins/plugins/core/components/NameMenu.js b/qortal-ui-plugins/plugins/core/components/NameMenu.js index 9b1a9635..8e1363c6 100644 --- a/qortal-ui-plugins/plugins/core/components/NameMenu.js +++ b/qortal-ui-plugins/plugins/core/components/NameMenu.js @@ -232,7 +232,11 @@ class NameMenu extends LitElement {

- ${translate("welcomepage.wcchange6")} + { + this._sendMessage(); + } + }> + ${translate("welcomepage.wcchange6")} Date: Sat, 29 Oct 2022 22:11:40 -0500 Subject: [PATCH 2/4] Continued UI Edit Message --- .../plugins/core/components/ChatPage.js | 50 ++++++++++++------- .../core/components/ChatScroller-css.js | 2 +- 2 files changed, 34 insertions(+), 18 deletions(-) diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index 63a0dad5..8dc7083f 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -53,7 +53,8 @@ class ChatPage extends LitElement { messagesRendered: { type: Array }, repliedToMessageObj: { type: Object }, editedMessageObj: { type: Object }, - chatMessageSize: { type: String} + chatMessageSize: { type: String }, + iframeHeight: { type: Number } } } @@ -63,6 +64,12 @@ class ChatPage extends LitElement { scroll-behavior: smooth; } + .chat-container { + display: grid; + grid-template-rows: minmax(66%, 92vh) minmax(40px, auto); + max-height: 100%; + } + .chat-text-area { display: flex; justify-content: center; @@ -72,8 +79,6 @@ class ChatPage extends LitElement { .chat-text-area .typing-area { display: flex; flex-direction: column; - position: absolute; - bottom: 0; width: 98%; box-sizing: border-box; margin-bottom: 8px; @@ -90,8 +95,6 @@ class ChatPage extends LitElement { .chat-text-area .typing-area .chat-editor { border-color: transparent; flex: 1; - max-height: 40px; - height: 40px; margin: 0; padding: 0; border: none; @@ -210,11 +213,12 @@ class ChatPage extends LitElement { this.messagesRendered = [] this.repliedToMessageObj = null this.editedMessageObj = null + this.iframeHeight = 40; } render() { return html` -
+
${this.isLoadingMessages ? html`

${translate("chatpage.cchange22")}

` : this.renderChatScroller(this._initialMessages)}
@@ -256,7 +260,8 @@ class ChatPage extends LitElement { `}
- + @@ -281,7 +286,6 @@ class ChatPage extends LitElement { async firstUpdated() { // TODO: Load and fetch messages from localstorage (maybe save messages to localstorage...) - // this.changeLanguage(); this.emojiPickerHandler = this.shadowRoot.querySelector('.emoji-button'); this.mirrorChatInput = this.shadowRoot.getElementById('messageBox'); @@ -403,6 +407,16 @@ class ChatPage extends LitElement { this.chatEditor.insertText(this.editedMessageObj.message) } + + if (changedProperties && changedProperties.has('iframeHeight')) { + console.log({iframeHeight: this.iframeHeight}) + } + } + + calculateIFrameHeight(height) { + console.log(height, "height here") + this.iframeHeight = height; + this.requestUpdate(); } changeLanguage() { @@ -446,9 +460,6 @@ class ChatPage extends LitElement { async getOldMessage(scrollElement) { - - - if (this.isReceipient) { const getInitialMessages = await parentEpml.request('apiCall', { type: 'api', @@ -575,9 +586,6 @@ class ChatPage extends LitElement { } } - // set replied to message in chat editor - - getMessageSize(message){ try { @@ -643,6 +651,8 @@ class ChatPage extends LitElement { } + // set replied to message in chat editor + setRepliedToMessageObj(messageObj) { this.repliedToMessageObj = {...messageObj}; this.editedMessageObj = null; @@ -821,9 +831,6 @@ class ChatPage extends LitElement { directSocketLink = `ws://${nodeUrl}/websockets/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${cid}`; } - - - const directSocket = new WebSocket(directSocketLink); // Open Connection @@ -1404,6 +1411,14 @@ class ChatPage extends LitElement { if (e.type === 'keydown') { + console.log(editorConfig.editableElement.contentDocument.body.scrollHeight); + + if (editorConfig.editableElement.contentDocument.body.scrollHeight > 40) { + editorConfig.calculateIFrameHeight(editorConfig.editableElement.contentDocument.body.scrollHeight); + } else { + editorConfig.calculateIFrameHeight(40); + }; + // Handle Enter if (e.keyCode === 13 && !e.shiftKey) { @@ -1484,6 +1499,7 @@ class ChatPage extends LitElement { const editorConfig = { getMessageSize: this.getMessageSize, + calculateIFrameHeight: this.calculateIFrameHeight, mirrorElement: this.mirrorChatInput, editableElement: this.chatMessageInput, sendFunc: this._sendMessage, diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js index 3e56949f..8e1429c1 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js @@ -65,7 +65,7 @@ export const chatStyles = css` .chat-list { overflow-y: auto; overflow-x: hidden; - height: 92vh; + height: 100%; box-sizing: border-box; } From 0f557b705708448ead627c3ecbf5aa76fca35a56 Mon Sep 17 00:00:00 2001 From: Justin Ferrari <‘justinwesleyferrari@gmail.com’> Date: Mon, 31 Oct 2022 23:04:09 -0500 Subject: [PATCH 3/4] Continued chateditor logic --- .../plugins/core/components/ChatPage.js | 35 ++++++++----------- 1 file changed, 14 insertions(+), 21 deletions(-) diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index 7f0834a3..68462224 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -54,7 +54,7 @@ class ChatPage extends LitElement { repliedToMessageObj: { type: Object }, editedMessageObj: { type: Object }, chatMessageSize: { type: String }, - iframeHeight: { type: Number } + iframeHeight: { type: Number } } } @@ -66,13 +66,15 @@ class ChatPage extends LitElement { .chat-container { display: grid; - grid-template-rows: minmax(66%, 92vh) minmax(40px, auto); + grid-template-rows: minmax(6%, 92vh) minmax(40px, auto); max-height: 100%; } .chat-text-area { display: flex; justify-content: center; + min-height: 60px; + max-height: 100%; overflow: hidden; } @@ -93,8 +95,10 @@ class ChatPage extends LitElement { } .chat-text-area .typing-area .chat-editor { + display: flex; + max-height: -webkit-fill-available; + width: 100%; border-color: transparent; - flex: 1; margin: 0; padding: 0; border: none; @@ -161,9 +165,10 @@ class ChatPage extends LitElement { width: auto; display: flex; justify-content: center; - align-items: center; + align-items: flex-end; height: auto; padding: 5px; + overflow-y: hidden; } .chat-text-area .typing-area .emoji-button { @@ -193,6 +198,7 @@ class ChatPage extends LitElement { this.getOldMessage = this.getOldMessage.bind(this) this._sendMessage = this._sendMessage.bind(this) this._downObserverhandler = this._downObserverhandler.bind(this) + this.calculateIFrameHeight = this.calculateIFrameHeight.bind(this) this.selectedAddress = {} this.chatId = '' this.myAddress = '' @@ -222,7 +228,7 @@ class ChatPage extends LitElement {
${this.isLoadingMessages ? html`

${translate("chatpage.cchange22")}

` : this.renderChatScroller(this._initialMessages)}
-
+
${this.repliedToMessageObj && html`
@@ -285,7 +291,6 @@ class ChatPage extends LitElement { async firstUpdated() { // TODO: Load and fetch messages from localstorage (maybe save messages to localstorage...) - // this.changeLanguage(); this.emojiPickerHandler = this.shadowRoot.querySelector('.emoji-button'); this.mirrorChatInput = this.shadowRoot.getElementById('messageBox'); @@ -403,19 +408,13 @@ class ChatPage extends LitElement { } if (changedProperties && changedProperties.has('editedMessageObj')) { - this.chatEditor.insertText(this.editedMessageObj.message) } - - if (changedProperties && changedProperties.has('iframeHeight')) { - console.log({iframeHeight: this.iframeHeight}) - } } calculateIFrameHeight(height) { console.log(height, "height here") this.iframeHeight = height; - this.requestUpdate(); } changeLanguage() { @@ -1459,15 +1458,9 @@ class ChatPage extends LitElement { } if (e.type === 'keydown') { - - console.log(editorConfig.editableElement.contentDocument.body.scrollHeight); - - if (editorConfig.editableElement.contentDocument.body.scrollHeight > 40) { - editorConfig.calculateIFrameHeight(editorConfig.editableElement.contentDocument.body.scrollHeight); - } else { - editorConfig.calculateIFrameHeight(40); - }; - + console.log(editorConfig.mirrorElement.scrollHeight); + editorConfig.calculateIFrameHeight(editorConfig.editableElement.contentDocument.body.scrollHeight); + // Handle Enter if (e.keyCode === 13 && !e.shiftKey) { From bceb25afa1e177447553a07d11d4a873c9147279 Mon Sep 17 00:00:00 2001 From: Justin Ferrari <‘justinwesleyferrari@gmail.com’> Date: Wed, 2 Nov 2022 19:37:45 -0500 Subject: [PATCH 4/4] Added Icons to Chatbar & Styled Chat Bubbles --- img/qchat-send-message-icon.svg | 4 + qortal-ui-core/font/switch-theme.css | 16 +-- qortal-ui-core/src/styles/switch-theme.css | 16 +-- .../plugins/core/components/ChatPage.js | 109 ++++++++++++------ .../core/components/ChatScroller-css.js | 63 ++++++---- .../plugins/core/components/ChatScroller.js | 106 +++++++++-------- 6 files changed, 189 insertions(+), 125 deletions(-) create mode 100644 img/qchat-send-message-icon.svg diff --git a/img/qchat-send-message-icon.svg b/img/qchat-send-message-icon.svg new file mode 100644 index 00000000..ee6cb8bf --- /dev/null +++ b/img/qchat-send-message-icon.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/qortal-ui-core/font/switch-theme.css b/qortal-ui-core/font/switch-theme.css index bb48fc95..4c65b30c 100644 --- a/qortal-ui-core/font/switch-theme.css +++ b/qortal-ui-core/font/switch-theme.css @@ -7,6 +7,7 @@ html { --border: #d0d6de; --border2: #dde2e8; --copybutton: #707584; + --chat-bubble: #efefef73; --sectxt: #576374; --vdicon: #707b8a; --tradehead: #6a6c75; @@ -17,11 +18,11 @@ html { --relaynodetxt: #646464; --menuhover: #eeeeee; --menuactive: #ebebeb; - --mainmenutext:#080808; - --mainmenutexthover:#080808; + --mainmenutext: #080808; + --mainmenutexthover: #080808; --switchbackground: #666666; --switchborder: #333333; - --sidetopbar: #ffffff; + --sidetopbar: #ffffff; --nav-selected-color: #dddddd; --nav-selected-color-text: #333333; --nav-color-active: #d1d1d1; @@ -43,6 +44,7 @@ html[theme="dark"] { --border: #0b305e; --border2: #0b305e; --copybutton: #d0d6de; + --chat-bubble: #9694941a; --sectxt: #bbc3cd; --vdicon: #d0d6de; --tradehead: #008fd5; @@ -53,11 +55,11 @@ html[theme="dark"] { --relaynodetxt: #d4d4d4; --menuhover: #008fd5; --menuactive: #008fd5; - --mainmenutext:#008fd5; - --mainmenutexthover:#0f1a2e; + --mainmenutext: #008fd5; + --mainmenutexthover: #0f1a2e; --switchbackground: #eeeeee; --switchborder: #03a9f4; - --sidetopbar: #070d19; + --sidetopbar: #070d19; --nav-selected-color: #0f1a2e; --nav-selected-color-text: #76c8f5; --nav-color-active: #d1d1d1; @@ -68,4 +70,4 @@ html[theme="dark"] { --nav-border-selected-color: #76c8f5; --error: #d50000; --background: url("/img/qortal_background_dark_.jpg"); -} +} \ No newline at end of file diff --git a/qortal-ui-core/src/styles/switch-theme.css b/qortal-ui-core/src/styles/switch-theme.css index 45fb525b..9c6c517e 100644 --- a/qortal-ui-core/src/styles/switch-theme.css +++ b/qortal-ui-core/src/styles/switch-theme.css @@ -7,6 +7,7 @@ html { --border: #d0d6de; --border2: #dde2e8; --copybutton: #707584; + --chat-bubble: #efefef73; --sectxt: #576374; --vdicon: #707b8a; --tradehead: #6a6c75; @@ -17,11 +18,11 @@ html { --relaynodetxt: #646464; --menuhover: #eeeeee; --menuactive: #ebebeb; - --mainmenutext:#080808; - --mainmenutexthover:#080808; + --mainmenutext: #080808; + --mainmenutexthover: #080808; --switchbackground: #666666; --switchborder: #333333; - --sidetopbar: #ffffff; + --sidetopbar: #ffffff; --nav-selected-color: #dddddd; --nav-selected-color-text: #333333; --nav-color-active: #d1d1d1; @@ -42,6 +43,7 @@ html[theme="dark"] { --border: #0b305e; --border2: #0b305e; --copybutton: #d0d6de; + --chat-bubble: #9694941a; --sectxt: #bbc3cd; --vdicon: #d0d6de; --tradehead: #008fd5; @@ -52,11 +54,11 @@ html[theme="dark"] { --relaynodetxt: #d4d4d4; --menuhover: #008fd5; --menuactive: #008fd5; - --mainmenutext:#008fd5; - --mainmenutexthover:#0f1a2e; + --mainmenutext: #008fd5; + --mainmenutexthover: #0f1a2e; --switchbackground: #eeeeee; --switchborder: #03a9f4; - --sidetopbar: #070d19; + --sidetopbar: #070d19; --nav-selected-color: #0f1a2e; --nav-selected-color-text: #76c8f5; --nav-color-active: #d1d1d1; @@ -66,4 +68,4 @@ html[theme="dark"] { --nav-border-color: #0b305e; --nav-border-selected-color: #76c8f5; --background: url("/img/qortal_background_dark_.jpg"); -} +} \ No newline at end of file diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index 2bd6b712..ffb5b43c 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -8,7 +8,6 @@ registerTranslateConfig({ }) import ShortUniqueId from 'short-unique-id'; import Compressor from 'compressorjs'; - import { escape, unescape } from 'html-escaper'; import { inputKeyCodes } from '../../utils/keyCodes.js' import './ChatScroller.js' @@ -17,7 +16,6 @@ import './NameMenu.js' import './TimeAgo.js' import { EmojiPicker } from 'emoji-picker-js'; import '@polymer/paper-spinner/paper-spinner-lite.js' - import '@material/mwc-button' import '@material/mwc-dialog' import '@material/mwc-icon' @@ -134,6 +132,7 @@ class ChatPage extends LitElement { margin: 0; color: var(--mdc-theme-primary); font-weight: bold; + user-select: none; } .original-message { @@ -169,9 +168,9 @@ class ChatPage extends LitElement { width: auto; display: flex; justify-content: center; - align-items: flex-end; + align-items: center; height: auto; - padding: 5px; + padding: 5px 5px 5px 7px; overflow-y: hidden; } @@ -194,6 +193,27 @@ class ChatPage extends LitElement { img { border-radius: 25%; } + + .paperclip-icon { + color: #494949; + width: 25px; + } + + .paperclip-icon:hover { + cursor: pointer; + } + + .send-icon { + width: 30px; + margin-left: 5px; + transition: all 0.1s ease-in-out; + } + + .send-icon:hover { + cursor: pointer; + filter: brightness(1.1); + } + ` } @@ -236,9 +256,8 @@ class ChatPage extends LitElement {
${this.isLoadingMessages ? html`

${translate("chatpage.cchange22")}

` : this.renderChatScroller(this._initialMessages)} - -
- + +
hello @@ -251,18 +270,15 @@ class ChatPage extends LitElement { slot="primaryAction" dialogAction="cancel" class="red" - @click=${()=>{ - + @click=${()=> { this._sendMessage({ - type: 'image', - imageFile: this.imageFile, - caption: 'This is a caption' - - - }) + type: 'image', + imageFile: this.imageFile, + caption: 'This is a caption' + }) }} > - send + send
-
+
${this.repliedToMessageObj && html`
@@ -314,22 +330,41 @@ class ChatPage extends LitElement {
`}
+ this.closeEditMessageContainer()} + > ${this.editedMessageObj ? ( html` +
+ ${this.isLoading === false ? html` this._sendMessage()} - > - ` - ) : html`
` + > + + ` : + html` + + `} +
+ ` + ) : + html` +
+ ${this.isLoading === false ? html`send-icon` : html``} +
+ ` }
@@ -1655,23 +1690,21 @@ class ChatPage extends LitElement { e.preventDefault(); const item_list = await navigator.clipboard.read(); - let image_type; // we will feed this later - const item = item_list.find( item => // choose the one item holding our image - item.types.some( type => { // does this item have our type - if( type.startsWith( 'image/' ) ) { - image_type = type; // store which kind of image type it is - return true; - } - } ) - ); - const blob = item && await item.getType( image_type ); - var file = new File([blob], "name", { - type: image_type - }); - - editorConfig.insertImage(file) - - + let image_type; // we will feed this later + const item = item_list.find( item => // choose the one item holding our image + item.types.some( type => { // does this item have our type + if( type.startsWith( 'image/' ) ) { + image_type = type; // store which kind of image type it is + return true; + } + } ) + ); + const blob = item && await item.getType( image_type ); + var file = new File([blob], "name", { + type: image_type + }); + + editorConfig.insertImage(file) navigator.clipboard.readText().then(clipboardText => { diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js index 4609de6c..aea9d27e 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js @@ -39,7 +39,7 @@ export const chatStyles = css` ul { list-style: none; margin: 0; - padding: 20px; + padding: 20px 17px; } .last-message-ref { @@ -77,6 +77,7 @@ export const chatStyles = css` .message-data-name { color: var(--black); + user-select: none; } .message-data-time { @@ -84,6 +85,7 @@ export const chatStyles = css` font-size: 13px; padding-left: 6px; padding-bottom: 4px; + user-select: none; } .message-data-level { @@ -91,6 +93,7 @@ export const chatStyles = css` font-size: 13px; padding-left: 8px; padding-bottom: 4px; + user-select: none; } .chat-bubble-container { @@ -100,16 +103,27 @@ export const chatStyles = css` .message-container { position: relative; + margin-bottom: 20px; + } + + .message-subcontainer { + position: relative; display: flex; + background-color: #f3f3f3; flex-grow: 0; flex-direction: column; align-items: flex-start; justify-content: center; - background-color: whitesmoke; border-radius: 5px; padding: 10px 15px; gap: 10px; - margin-bottom: 20px; + margin-bottom: 10px; + } + + .message-reactions { + background-color: transparent; + width: 100%; + margin-left: 54px; } .original-message { @@ -120,10 +134,10 @@ export const chatStyles = css` line-height: 19px; overflow-wrap: break-word; user-select: text; - font-size: 16px; + font-size: 13px; width: 90%; border-radius: 5px; - background-color: rgba(209, 209, 209, 0.79); + background-color: rgba(232, 232, 232, 0.79); padding: 8px 5px 8px 25px; white-space: nowrap; } @@ -169,12 +183,19 @@ export const chatStyles = css` float: left; } - .message-parent:hover .chat-hover { - display: block; + .message-parent { + padding: 3px; + background: rgba(245, 245, 245, 0); + transition: all 0.1s ease-in-out; } - .message-parent:hover .message-container { - filter:brightness(0.90); + .message-parent:hover { + background: var(--chat-bubble); + border-radius: 8px; + } + + .message-parent:hover .chat-hover { + display: block; } .chat-hover { @@ -191,16 +212,6 @@ export const chatStyles = css` vertical-align: bottom; object-fit: contain; } - - .my-message { - background: #d1d1d1; - border: 2px solid #eeeeee; - } - - .other-message { - background: #f1f1f1; - border: 2px solid #dedede; - } .align-left { text-align: left; @@ -322,12 +333,18 @@ export const chatStyles = css` } .reactions-bg { - background-color: #3C4048; + background-color: #d5d5d5; border-radius: 10px; - padding: 4px; - color: white; + padding: 5px; + color: black; margin-right: 10px; - cursor: pointer + transition: all 0.1s ease-in-out; + border: 0.5px solid transparent; + cursor: pointer; + } + + .reactions-bg:hover { + border: 0.5px solid #6b6969; } .image-container { diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index be2c9acb..8c719642 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -273,59 +273,65 @@ class MessageTemplate extends LitElement {
${avatarImg}
-
- ${repliedToData && html` -
-

${repliedToData.sendName ?? repliedToData.sender}

-

${repliedToData.decodedMessage.messageText}

+
+
+ ${repliedToData && html` +
+

${repliedToData.sendName ?? repliedToData.sender}

+

${repliedToData.decodedMessage.messageText}

+
+ `} + ${image && !isImageDeleted ? html` +
+ ${imageHTML} this.sendMessage({ + type: 'delete', + name: image.name, + identifier: image.identifier, + editedMessageObj: this.messageObj, + + })} + class="image-delete-icon" icon="vaadin:close" slot="icon"> +
+ ` : html``} +
+ ${unsafeHTML(this.emojiPicker.parse(this.escapeHTML(message)))} +
- `} - ${image && !isImageDeleted ? html` -
- ${imageHTML} this.sendMessage({ - type: 'delete', - name: image.name, - identifier: image.identifier, - editedMessageObj: this.messageObj, - - })} - class="image-delete-icon" icon="vaadin:close" slot="icon"> +
+ ${reactions.map((reaction)=> { + return html` + this.sendMessage({ + type: 'reaction', + editedMessageObj: this.messageObj, + reaction: reaction.type, + })} + class="reactions-bg"> + ${reaction.type} ${reaction.qty} + ` + })}
- ` : html``} -
- ${unsafeHTML(this.emojiPicker.parse(this.escapeHTML(message)))} -
-
- ${reactions.map((reaction)=> { - return html` this.sendMessage({ - type: 'reaction', - editedMessageObj: this.messageObj, - reaction: reaction.type, - })} class="reactions-bg" >${reaction.type} ${reaction.qty}` - })} -
- this.showPrivateMessageModal()} - .showBlockUserModal=${() => this.showBlockUserModal()} - .showBlockIconFunc=${(props) => this.showBlockIconFunc(props)} - .showBlockAddressIcon=${this.showBlockAddressIcon} - .originalMessage=${{...this.messageObj, message}} - .setRepliedToMessageObj=${this.setRepliedToMessageObj} - .setEditedMessageObj=${this.setEditedMessageObj} - .focusChatEditor=${this.focusChatEditor} - .myAddress=${this.myAddress} - @blur=${() => this.showBlockIconFunc(false)} - .sendMessage=${this.sendMessage} - > - + this.showPrivateMessageModal()} + .showBlockUserModal=${() => this.showBlockUserModal()} + .showBlockIconFunc=${(props) => this.showBlockIconFunc(props)} + .showBlockAddressIcon=${this.showBlockAddressIcon} + .originalMessage=${{...this.messageObj, message}} + .setRepliedToMessageObj=${this.setRepliedToMessageObj} + .setEditedMessageObj=${this.setEditedMessageObj} + .focusChatEditor=${this.focusChatEditor} + .myAddress=${this.myAddress} + @blur=${() => this.showBlockIconFunc(false)} + .sendMessage=${this.sendMessage} + > +
+