From 55631d83d17c32d0974c3256c2bac60ce71845ef Mon Sep 17 00:00:00 2001 From: AlphaX-Projects <77661270+AlphaX-Projects@users.noreply.github.com> Date: Mon, 23 May 2022 18:27:08 +0200 Subject: [PATCH 01/30] add level to chat and founder badge --- qortal-ui-core/package.json | 40 +++++++++---------- qortal-ui-plugins/package.json | 38 +++++++++--------- .../plugins/core/components/ChatPage.js | 6 +++ .../plugins/core/components/ChatScroller.js | 14 ++++++- .../plugins/core/components/NameMenu.js | 2 +- 5 files changed, 59 insertions(+), 41 deletions(-) diff --git a/qortal-ui-core/package.json b/qortal-ui-core/package.json index 03a89271..2f8180b8 100644 --- a/qortal-ui-core/package.json +++ b/qortal-ui-core/package.json @@ -19,22 +19,22 @@ "dependencies": { "@hapi/hapi": "20.2.2", "@hapi/inert": "6.0.5", - "sass": "1.51.0" + "sass": "1.52.1" }, "devDependencies": { - "@babel/core": "7.17.10", - "@material/mwc-button": "0.25.3", - "@material/mwc-checkbox": "0.25.3", - "@material/mwc-dialog": "0.25.3", - "@material/mwc-drawer": "0.25.3", - "@material/mwc-fab": "0.25.3", - "@material/mwc-formfield": "0.25.3", - "@material/mwc-icon": "0.25.3", - "@material/mwc-icon-button": "0.25.3", - "@material/mwc-list": "0.25.3", - "@material/mwc-select": "0.25.3", - "@material/mwc-snackbar": "0.25.3", - "@material/mwc-textfield": "0.25.3", + "@babel/core": "7.18.0", + "@material/mwc-button": "0.26.1", + "@material/mwc-checkbox": "0.26.1", + "@material/mwc-dialog": "0.26.1", + "@material/mwc-drawer": "0.26.1", + "@material/mwc-fab": "0.26.1", + "@material/mwc-formfield": "0.26.1", + "@material/mwc-icon": "0.26.1", + "@material/mwc-icon-button": "0.26.1", + "@material/mwc-list": "0.26.1", + "@material/mwc-select": "0.26.1", + "@material/mwc-snackbar": "0.26.1", + "@material/mwc-textfield": "0.26.1", "@polymer/app-layout": "3.1.0", "@polymer/iron-collapse": "3.0.1", "@polymer/iron-flex-layout": "3.0.1", @@ -58,21 +58,21 @@ "@rollup/plugin-commonjs": "22.0.0", "@rollup/plugin-node-resolve": "13.3.0", "@rollup/plugin-replace": "4.0.0", - "@vaadin/grid": "23.0.7", - "@vaadin/icons": "23.0.7", - "@vaadin/password-field": "23.0.7", + "@vaadin/grid": "23.0.10", + "@vaadin/icons": "23.0.10", + "@vaadin/password-field": "23.0.10", "asmcrypto.js": "2.3.2", "bcryptjs": "2.4.3", "epml": "0.3.3", "file-saver": "2.0.5", - "lit": "2.2.3", + "lit": "2.2.4", "lit-translate": "2.0.1", - "postcss": "8.4.13", + "postcss": "8.4.14", "pwa-helpers": "0.9.1", "random-sentence-generator": "0.0.8", "redux": "4.2.0", "redux-thunk": "2.4.1", - "rollup": "2.72.0", + "rollup": "2.74.1", "rollup-plugin-node-globals": "1.4.0", "rollup-plugin-postcss": "4.0.2", "rollup-plugin-progress": "1.1.2", diff --git a/qortal-ui-plugins/package.json b/qortal-ui-plugins/package.json index ea019706..069eb1e1 100644 --- a/qortal-ui-plugins/package.json +++ b/qortal-ui-plugins/package.json @@ -17,24 +17,24 @@ "author": "QORTAL ", "license": "GPL-3.0", "dependencies": { - "@material/mwc-list": "0.25.3", - "@material/mwc-select": "0.25.3", + "@material/mwc-list": "0.26.1", + "@material/mwc-select": "0.26.1", "emoji-picker-js": "https://github.com/Qortal/emoji-picker-js" }, "devDependencies": { - "@babel/core": "7.17.10", + "@babel/core": "7.18.0", "@github/time-elements": "3.1.2", - "@material/mwc-button": "0.25.3", - "@material/mwc-checkbox": "0.25.3", - "@material/mwc-dialog": "0.25.3", - "@material/mwc-formfield": "0.25.3", - "@material/mwc-icon": "0.25.3", - "@material/mwc-icon-button": "0.25.3", - "@material/mwc-slider": "0.25.3", - "@material/mwc-snackbar": "0.25.3", - "@material/mwc-tab": "0.25.3", - "@material/mwc-tab-bar": "0.25.3", - "@material/mwc-textfield": "0.25.3", + "@material/mwc-button": "0.26.1", + "@material/mwc-checkbox": "0.26.1", + "@material/mwc-dialog": "0.26.1", + "@material/mwc-formfield": "0.26.1", + "@material/mwc-icon": "0.26.1", + "@material/mwc-icon-button": "0.26.1", + "@material/mwc-slider": "0.26.1", + "@material/mwc-snackbar": "0.26.1", + "@material/mwc-tab": "0.26.1", + "@material/mwc-tab-bar": "0.26.1", + "@material/mwc-textfield": "0.26.1", "@polymer/iron-icons": "3.0.1", "@polymer/paper-icon-button": "3.0.2", "@polymer/paper-progress": "3.0.1", @@ -46,14 +46,14 @@ "@rollup/plugin-commonjs": "22.0.0", "@rollup/plugin-node-resolve": "13.3.0", "@rollup/plugin-replace": "4.0.0", - "@vaadin/button": "23.0.7", - "@vaadin/grid": "23.0.7", - "@vaadin/icons": "23.0.7", + "@vaadin/button": "23.0.10", + "@vaadin/grid": "23.0.10", + "@vaadin/icons": "23.0.10", "epml": "0.3.3", "html-escaper": "3.0.3", - "lit": "2.2.3", + "lit": "2.2.4", "lit-translate": "2.0.1", - "rollup": "2.72.0", + "rollup": "2.74.1", "rollup-plugin-node-globals": "1.4.0", "rollup-plugin-progress": "1.1.2", "rollup-plugin-terser": "7.0.2" diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index 28060849..a5530237 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -10,6 +10,7 @@ registerTranslateConfig({ import { escape, unescape } from 'html-escaper'; import { inputKeyCodes } from '../../utils/keyCodes.js' import './ChatScroller.js' +import './LevelFounder.js' import './NameMenu.js' import './TimeAgo.js' import { EmojiPicker } from 'emoji-picker-js'; @@ -356,6 +357,8 @@ class ChatPage extends LitElement { chatMessageTemplate(messageObj) { let avatarImg = ''; let nameMenu = ''; + let levelFounder = ''; + if (messageObj.senderName) { const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]; const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port; @@ -369,10 +372,13 @@ class ChatPage extends LitElement { nameMenu = `` } + levelFounder = `` + return `
  • ${nameMenu} + ${levelFounder}
    ${avatarImg}
    diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index 68b8b6c2..c970a7ee 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -2,6 +2,7 @@ import { LitElement, html, css } from 'lit' import { render } from 'lit/html.js' import { Epml } from '../../../epml.js' +import './LevelFounder.js' import './NameMenu.js' import '@material/mwc-button' @@ -76,6 +77,13 @@ class ChatScroller extends LitElement { cursor: pointer; } + .message-data-level { + color: #03a9f4; + font-size: 13px; + padding-left: 8px; + padding-bottom: 4px; + } + .message-data-time { color: #a8aab1; font-size: 13px; @@ -203,6 +211,8 @@ class ChatScroller extends LitElement { chatMessageTemplate(messageObj) { let avatarImg = ''; let nameMenu = ''; + let levelFounder = ''; + if (messageObj.senderName) { const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]; const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port; @@ -216,12 +226,14 @@ class ChatScroller extends LitElement { nameMenu = `` } + levelFounder = `` + return `
  • ${nameMenu} + ${levelFounder} -
    ${avatarImg}
    ${this.emojiPicker.parse(this.escapeHTML(messageObj.decodedMessage))}
    diff --git a/qortal-ui-plugins/plugins/core/components/NameMenu.js b/qortal-ui-plugins/plugins/core/components/NameMenu.js index 910dd7d4..d454171e 100644 --- a/qortal-ui-plugins/plugins/core/components/NameMenu.js +++ b/qortal-ui-plugins/plugins/core/components/NameMenu.js @@ -190,7 +190,7 @@ class NameMenu extends LitElement { return html`
  • -
    - ${nameMenu} - ${levelFounder} - - add_reactionreplymore_horiz -
    -
    ${avatarImg}
    -
    ${this.emojiPicker.parse(escape(messageObj.decodedMessage))}
    -
  • - ` + const hidmes = this.hideMessages + let hideit = hidmes.includes(messageObj.sender) + + if ( hideit === true ) { + return ` +
  • + ` + } else { + return ` +
  • +
    + ${messageObj.senderName ? messageObj.senderName : messageObj.sender} + ${levelFounder} + + ${nameMenu} +
    +
    ${avatarImg}
    +
    ${this.emojiPicker.parse(this.escapeHTML(messageObj.decodedMessage))}
    +
    +
  • + ` + } } renderNewMessage(newMessage) { @@ -422,29 +439,22 @@ class ChatPage extends LitElement { if (this.isReceipient === true) { // direct chat - if (encodedMessageObj.isEncrypted === true && this._publicKey.hasPubKey === true) { - let decodedMessage = window.parent.decryptChatMessage(encodedMessageObj.data, window.parent.reduxStore.getState().app.selectedAddress.keyPair.privateKey, this._publicKey.key, encodedMessageObj.reference) decodedMessageObj = { ...encodedMessageObj, decodedMessage } } else if (encodedMessageObj.isEncrypted === false) { - let bytesArray = window.parent.Base58.decode(encodedMessageObj.data) let decodedMessage = new TextDecoder('utf-8').decode(bytesArray) decodedMessageObj = { ...encodedMessageObj, decodedMessage } } else { - decodedMessageObj = { ...encodedMessageObj, decodedMessage: "Cannot Decrypt Message!" } } - } else { // group chat - let bytesArray = window.parent.Base58.decode(encodedMessageObj.data) let decodedMessage = new TextDecoder('utf-8').decode(bytesArray) decodedMessageObj = { ...encodedMessageObj, decodedMessage } } - return decodedMessageObj } @@ -1027,6 +1037,12 @@ class ChatPage extends LitElement { }; this.chatEditor = new ChatEditor(editorConfig); } + + getApiKey() { + const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] + let apiKey = myNode.apiKey + return apiKey + } } window.customElements.define('chat-page', ChatPage) diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index 71871114..62984562 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -18,8 +18,9 @@ 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 } + initialMessages: { type: Array }, + messages: { type: Array }, + hideMessages: { type: Array } } } @@ -69,9 +70,9 @@ class ChatScroller extends LitElement { } .message-data { - width: 90%; - background: transparent; + width: 92%; margin-bottom: 15px; + margin-left: 50px; } .message-data:hover .hide { @@ -80,7 +81,6 @@ class ChatScroller extends LitElement { } .message-data-name { - color: var(--black); cursor: pointer; } @@ -98,6 +98,14 @@ class ChatScroller extends LitElement { padding-bottom: 4px; } + .message-data-react { + margin-left: 50px; + } + + .message-data-react-item { + padding-left: 6px; + } + .message { color: black; padding: 12px 10px; @@ -140,8 +148,13 @@ class ChatScroller extends LitElement { } .my-message { - background: #ddd; - border: 2px #ccc solid; + background: #d1d1d1; + border: 2px solid #cecece; + } + + .my-message:after { + border-bottom-color: #d1d1d1; + left: 7%; } .other-message { @@ -201,6 +214,7 @@ class ChatScroller extends LitElement { constructor() { super() this.messages = [] + this.hideMessages = [] this._upObserverhandler = this._upObserverhandler.bind(this) this.isLoading = false this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address @@ -217,6 +231,7 @@ class ChatScroller extends LitElement { } firstUpdated() { + this.getHideMessages() this.viewElement = this.shadowRoot.getElementById('viewElement') this.upObserverElement = this.shadowRoot.getElementById('upObserver') this.downObserverElement = this.shadowRoot.getElementById('downObserver') @@ -228,65 +243,80 @@ class ChatScroller extends LitElement { this.viewElement.scrollTop = this.viewElement.scrollHeight + 50 } + async getHideMessages() { + const hideMessages = await parentEpml.request('apiCall', { + url: `/lists/blockedAddresses?apiKey=${this.getApiKey()}` + }) + this.hideMessages = hideMessages + } + chatMessageTemplate(messageObj) { - let avatarImg = ''; - let nameMenu = ''; - let levelFounder = ''; + const hidmes = this.hideMessages + + let avatarImg = '' + let nameMenu = '' + let levelFounder = '' + let hideit = hidmes.includes(messageObj.sender) if (messageObj.senderName) { - const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]; - const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port; - const avatarUrl = `${nodeUrl}/arbitrary/THUMBNAIL/${messageObj.senderName}/qortal_avatar?async=true&apiKey=${myNode.apiKey}`; - avatarImg = ``; + const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] + const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port + const avatarUrl = `${nodeUrl}/arbitrary/THUMBNAIL/${messageObj.senderName}/qortal_avatar?async=true&apiKey=${myNode.apiKey}` + avatarImg = `` } if (messageObj.sender === this.myAddress) { - nameMenu = `${messageObj.senderName ? messageObj.senderName : messageObj.sender}` + nameMenu = `more_horiz` } else { - nameMenu = `` + nameMenu = `` } levelFounder = `` - return ` -
  • -
    - ${nameMenu} - ${levelFounder} - - add_reactionreplymore_horiz -
    -
    ${avatarImg}
    -
    ${this.emojiPicker.parse(this.escapeHTML(messageObj.decodedMessage))}
    -
  • - ` + if ( hideit === true ) { + return ` +
  • + ` + } else { + return ` +
  • +
    + ${messageObj.senderName ? messageObj.senderName : messageObj.sender} + ${levelFounder} + + ${nameMenu} +
    +
    ${avatarImg}
    +
    ${this.emojiPicker.parse(this.escapeHTML(messageObj.decodedMessage))}
    +
    +
  • + ` + } } renderChatMessages(messages) { messages.forEach(message => { - const li = document.createElement('li'); - li.innerHTML = this.chatMessageTemplate(message); + const li = document.createElement('li') + li.innerHTML = this.chatMessageTemplate(message) li.id = message.signature; - this.downObserverElement.before(li); - }); + this.downObserverElement.before(li) + }) } renderOldMessages(listOfOldMessages) { - let { oldMessages, scrollElement } = listOfOldMessages; - - let _oldMessages = oldMessages.reverse(); + let { oldMessages, scrollElement } = listOfOldMessages + let _oldMessages = oldMessages.reverse() _oldMessages.forEach(oldMessage => { - const li = document.createElement('li'); - li.innerHTML = this.chatMessageTemplate(oldMessage); - li.id = oldMessage.signature; - this.upObserverElement.after(li); - scrollElement.scrollIntoView({ behavior: 'auto', block: 'center' }); - }); + const li = document.createElement('li') + li.innerHTML = this.chatMessageTemplate(oldMessage) + li.id = oldMessage.signature + this.upObserverElement.after(li) + scrollElement.scrollIntoView({ behavior: 'auto', block: 'center' }) + }) } _getOldMessage(_scrollElement) { let listOfOldMessages = this.getOldMessage(_scrollElement) - if (listOfOldMessages) { this.renderOldMessages(listOfOldMessages) } @@ -295,7 +325,6 @@ class ChatScroller extends LitElement { _upObserverhandler(entries) { if (entries[0].isIntersecting) { let _scrollElement = entries[0].target.nextElementSibling - this._getOldMessage(_scrollElement) } } @@ -305,11 +334,16 @@ class ChatScroller extends LitElement { root: this.viewElement, rootMargin: '0px', threshold: 1 - }; - + } const observer = new IntersectionObserver(this._upObserverhandler, options) observer.observe(this.upObserverElement) } + + getApiKey() { + const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] + let apiKey = myNode.apiKey + return apiKey + } } window.customElements.define('chat-scroller', ChatScroller) From 8b22b603b246ff8a03c71c48a4715755e0276b1b Mon Sep 17 00:00:00 2001 From: AlphaX-Projects <77661270+AlphaX-Projects@users.noreply.github.com> Date: Fri, 10 Jun 2022 10:54:38 +0200 Subject: [PATCH 14/30] Update Q-Chat Messages from blocked users no more display. Reload message list after block or unblock a user. Revert 3 dot menu , gives error for emoji. --- package.json | 2 +- qortal-ui-core/package.json | 4 +- qortal-ui-plugins/package.json | 2 +- .../plugins/core/components/ChatPage.js | 70 ++++++------ .../plugins/core/components/ChatScroller.js | 105 ++++++------------ .../plugins/core/components/NameMenu.js | 26 ++--- .../core/messaging/q-chat/q-chat.src.js | 27 +++++ 7 files changed, 108 insertions(+), 128 deletions(-) diff --git a/package.json b/package.json index fb902aa9..46ff65ad 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,7 @@ "electron-log": "4.4.7" }, "devDependencies": { - "electron": "17.4.7", + "electron": "19.0.4", "electron-builder": "23.0.3", "electron-notarize": "1.2.1", "electron-packager": "15.5.1", diff --git a/qortal-ui-core/package.json b/qortal-ui-core/package.json index e9a16d8b..5ce8830e 100644 --- a/qortal-ui-core/package.json +++ b/qortal-ui-core/package.json @@ -19,7 +19,7 @@ "dependencies": { "@hapi/hapi": "20.2.2", "@hapi/inert": "6.0.5", - "sass": "1.52.2" + "sass": "1.52.3" }, "devDependencies": { "@babel/core": "7.18.2", @@ -72,7 +72,7 @@ "random-sentence-generator": "0.0.8", "redux": "4.2.0", "redux-thunk": "2.4.1", - "rollup": "2.75.5", + "rollup": "2.75.6", "rollup-plugin-node-globals": "1.4.0", "rollup-plugin-postcss": "4.0.2", "rollup-plugin-progress": "1.1.2", diff --git a/qortal-ui-plugins/package.json b/qortal-ui-plugins/package.json index 0a067d30..44ed5491 100644 --- a/qortal-ui-plugins/package.json +++ b/qortal-ui-plugins/package.json @@ -53,7 +53,7 @@ "html-escaper": "3.0.3", "lit": "2.2.5", "lit-translate": "2.0.1", - "rollup": "2.75.5", + "rollup": "2.75.6", "rollup-plugin-node-globals": "1.4.0", "rollup-plugin-progress": "1.1.2", "rollup-plugin-terser": "7.0.2" diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index 6ccf4753..b3424aa5 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -122,7 +122,7 @@ class ChatPage extends LitElement { this.messages = [] this._messages = [] this.newMessages = [] - this.hideMessages = [] + this.hideMessages = JSON.parse(localStorage.getItem("MessageBlockedAddresses") || "[]") this._publicKey = { key: '', hasPubKey: false } this.messageSignature = '' this._initialMessages = [] @@ -248,16 +248,11 @@ class ChatPage extends LitElement { }).then(res => { this.balance = res }) - parentEpml.request('apiCall', { - url: `/lists/blockedAddresses?apiKey=${this.getApiKey()}` - }).then(response => { - this.hideMessages = response - console.log(response) - }) - parentEpml.subscribe('frame_paste_menu_switch', async res => { + res = JSON.parse(res) if (res.isOpen === false && this.isPasteMenuOpen === true) { + this.pasteToTextBox(textarea) this.isPasteMenuOpen = false } @@ -327,7 +322,7 @@ class ChatPage extends LitElement { } // TODO: Determine number of initial messages by screen height... - this._messages.length <= 2 ? adjustMessages() : this._initialMessages = this._messages.splice(this._messages.length - 2); + this._messages.length <= 15 ? adjustMessages() : this._initialMessages = this._messages.splice(this._messages.length - 15); this.isLoadingMessages = false setTimeout(() => this.downElementObserver(), 500) @@ -362,27 +357,27 @@ class ChatPage extends LitElement { * @property sender and other info.. */ chatMessageTemplate(messageObj) { - let avatarImg = ''; - let nameMenu = ''; - let levelFounder = ''; + const hidemsg = this.hideMessages - if (messageObj.senderName) { - const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]; - const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port; - const avatarUrl = `${nodeUrl}/arbitrary/THUMBNAIL/${messageObj.senderName}/qortal_avatar?async=true&apiKey=${myNode.apiKey}`; - avatarImg = ``; - } - - if (messageObj.sender === this.myAddress) { - nameMenu = `more_horiz` - } else { - nameMenu = `` - } + let avatarImg = '' + let nameMenu = '' + let levelFounder = '' + let hideit = hidemsg.includes(messageObj.sender) levelFounder = `` - const hidmes = this.hideMessages - let hideit = hidmes.includes(messageObj.sender) + if (messageObj.senderName) { + const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] + const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port + const avatarUrl = `${nodeUrl}/arbitrary/THUMBNAIL/${messageObj.senderName}/qortal_avatar?async=true&apiKey=${myNode.apiKey}` + avatarImg = `` + } + + if (messageObj.sender === this.myAddress) { + nameMenu = `${messageObj.senderName ? messageObj.senderName : messageObj.sender}` + } else { + nameMenu = `` + } if ( hideit === true ) { return ` @@ -391,15 +386,13 @@ class ChatPage extends LitElement { } else { return `
  • -
    - ${messageObj.senderName ? messageObj.senderName : messageObj.sender} +
    + ${nameMenu} ${levelFounder} - ${nameMenu}
    -
    ${avatarImg}
    -
    ${this.emojiPicker.parse(this.escapeHTML(messageObj.decodedMessage))}
    -
    +
    ${avatarImg}
    +
    ${this.emojiPicker.parse(escape(messageObj.decodedMessage))}
  • ` } @@ -439,22 +432,29 @@ class ChatPage extends LitElement { if (this.isReceipient === true) { // direct chat + if (encodedMessageObj.isEncrypted === true && this._publicKey.hasPubKey === true) { + let decodedMessage = window.parent.decryptChatMessage(encodedMessageObj.data, window.parent.reduxStore.getState().app.selectedAddress.keyPair.privateKey, this._publicKey.key, encodedMessageObj.reference) decodedMessageObj = { ...encodedMessageObj, decodedMessage } } else if (encodedMessageObj.isEncrypted === false) { + let bytesArray = window.parent.Base58.decode(encodedMessageObj.data) let decodedMessage = new TextDecoder('utf-8').decode(bytesArray) decodedMessageObj = { ...encodedMessageObj, decodedMessage } } else { + decodedMessageObj = { ...encodedMessageObj, decodedMessage: "Cannot Decrypt Message!" } } + } else { // group chat + let bytesArray = window.parent.Base58.decode(encodedMessageObj.data) let decodedMessage = new TextDecoder('utf-8').decode(bytesArray) decodedMessageObj = { ...encodedMessageObj, decodedMessage } } + return decodedMessageObj } @@ -1037,12 +1037,6 @@ class ChatPage extends LitElement { }; this.chatEditor = new ChatEditor(editorConfig); } - - getApiKey() { - const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] - let apiKey = myNode.apiKey - return apiKey - } } window.customElements.define('chat-page', ChatPage) diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index 62984562..b48ea99b 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -18,7 +18,7 @@ class ChatScroller extends LitElement { getOldMessage: { attribute: false }, emojiPicker: { attribute: false }, escapeHTML: { attribute: false }, - initialMessages: { type: Array }, + initialMessages: { type: Array }, // First set of messages to load.. 15 messages max ( props ) messages: { type: Array }, hideMessages: { type: Array } } @@ -75,22 +75,11 @@ class ChatScroller extends LitElement { margin-left: 50px; } - .message-data:hover .hide { - color: #03a9f4; - display: inline; - } - .message-data-name { + color: var(--black); cursor: pointer; } - .message-data-level { - color: #03a9f4; - font-size: 13px; - padding-left: 8px; - padding-bottom: 4px; - } - .message-data-time { color: #a8aab1; font-size: 13px; @@ -98,12 +87,11 @@ class ChatScroller extends LitElement { padding-bottom: 4px; } - .message-data-react { - margin-left: 50px; - } - - .message-data-react-item { - padding-left: 6px; + .message-data-level { + color: #03a9f4; + font-size: 13px; + padding-left: 8px; + padding-bottom: 4px; } .message { @@ -149,7 +137,7 @@ class ChatScroller extends LitElement { .my-message { background: #d1d1d1; - border: 2px solid #cecece; + border: 2px solid #eeeeee; } .my-message:after { @@ -167,10 +155,6 @@ class ChatScroller extends LitElement { left: 7%; } - .hide { - display: none; - } - .align-left { text-align: left; } @@ -187,10 +171,6 @@ class ChatScroller extends LitElement { float: right; } - .padright5 { - padding-right: 5px; - } - .clearfix:after { visibility: hidden; display: block; @@ -203,21 +183,16 @@ class ChatScroller extends LitElement { img { border-radius: 25%; } - - .iconsRight { - color: #a8aab1; - --mdc-icon-size: 18px; - } ` } constructor() { super() this.messages = [] - this.hideMessages = [] this._upObserverhandler = this._upObserverhandler.bind(this) this.isLoading = false this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address + this.hideMessages = JSON.parse(localStorage.getItem("MessageBlockedAddresses") || "[]") } @@ -231,7 +206,6 @@ class ChatScroller extends LitElement { } firstUpdated() { - this.getHideMessages() this.viewElement = this.shadowRoot.getElementById('viewElement') this.upObserverElement = this.shadowRoot.getElementById('upObserver') this.downObserverElement = this.shadowRoot.getElementById('downObserver') @@ -243,20 +217,15 @@ class ChatScroller extends LitElement { this.viewElement.scrollTop = this.viewElement.scrollHeight + 50 } - async getHideMessages() { - const hideMessages = await parentEpml.request('apiCall', { - url: `/lists/blockedAddresses?apiKey=${this.getApiKey()}` - }) - this.hideMessages = hideMessages - } - chatMessageTemplate(messageObj) { - const hidmes = this.hideMessages + const hidemsg = this.hideMessages let avatarImg = '' let nameMenu = '' let levelFounder = '' - let hideit = hidmes.includes(messageObj.sender) + let hideit = hidemsg.includes(messageObj.sender) + + levelFounder = `` if (messageObj.senderName) { const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] @@ -266,13 +235,11 @@ class ChatScroller extends LitElement { } if (messageObj.sender === this.myAddress) { - nameMenu = `more_horiz` + nameMenu = `${messageObj.senderName ? messageObj.senderName : messageObj.sender}` } else { - nameMenu = `` + nameMenu = `` } - levelFounder = `` - if ( hideit === true ) { return `
  • @@ -281,14 +248,12 @@ class ChatScroller extends LitElement { return `
  • - ${messageObj.senderName ? messageObj.senderName : messageObj.sender} + ${nameMenu} ${levelFounder} - ${nameMenu}
    -
    ${avatarImg}
    +
    ${avatarImg}
    ${this.emojiPicker.parse(this.escapeHTML(messageObj.decodedMessage))}
    -
  • ` } @@ -296,27 +261,29 @@ class ChatScroller extends LitElement { renderChatMessages(messages) { messages.forEach(message => { - const li = document.createElement('li') - li.innerHTML = this.chatMessageTemplate(message) + const li = document.createElement('li'); + li.innerHTML = this.chatMessageTemplate(message); li.id = message.signature; - this.downObserverElement.before(li) - }) + this.downObserverElement.before(li); + }); } renderOldMessages(listOfOldMessages) { - let { oldMessages, scrollElement } = listOfOldMessages - let _oldMessages = oldMessages.reverse() + let { oldMessages, scrollElement } = listOfOldMessages; + + let _oldMessages = oldMessages.reverse(); _oldMessages.forEach(oldMessage => { - const li = document.createElement('li') - li.innerHTML = this.chatMessageTemplate(oldMessage) - li.id = oldMessage.signature - this.upObserverElement.after(li) - scrollElement.scrollIntoView({ behavior: 'auto', block: 'center' }) - }) + const li = document.createElement('li'); + li.innerHTML = this.chatMessageTemplate(oldMessage); + li.id = oldMessage.signature; + this.upObserverElement.after(li); + scrollElement.scrollIntoView({ behavior: 'auto', block: 'center' }); + }); } _getOldMessage(_scrollElement) { let listOfOldMessages = this.getOldMessage(_scrollElement) + if (listOfOldMessages) { this.renderOldMessages(listOfOldMessages) } @@ -325,6 +292,7 @@ class ChatScroller extends LitElement { _upObserverhandler(entries) { if (entries[0].isIntersecting) { let _scrollElement = entries[0].target.nextElementSibling + this._getOldMessage(_scrollElement) } } @@ -334,16 +302,11 @@ class ChatScroller extends LitElement { root: this.viewElement, rootMargin: '0px', threshold: 1 - } + }; + const observer = new IntersectionObserver(this._upObserverhandler, options) observer.observe(this.upObserverElement) } - - getApiKey() { - const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] - let apiKey = myNode.apiKey - return apiKey - } } window.customElements.define('chat-scroller', ChatScroller) diff --git a/qortal-ui-plugins/plugins/core/components/NameMenu.js b/qortal-ui-plugins/plugins/core/components/NameMenu.js index 4f2bb65b..79ae1826 100644 --- a/qortal-ui-plugins/plugins/core/components/NameMenu.js +++ b/qortal-ui-plugins/plugins/core/components/NameMenu.js @@ -22,7 +22,6 @@ class NameMenu extends LitElement { return { toblockaddress: { type: String, attribute: true }, nametodialog: { type: String, attribute: true }, - messagesignatur: { type: String, attribute: true }, chatBlockedAdresses: { type: Array }, selectedAddress: { type: Object }, config: { type: Object }, @@ -118,9 +117,8 @@ class NameMenu extends LitElement { .dropdown-content { display: none; position: absolute; - bottom: -75px; - right: 25px; - text-align: center; + bottom: 25px; + left: 10px; background-color: var(--white); min-width: 200px; overflow: auto; @@ -174,15 +172,6 @@ class NameMenu extends LitElement { resize: none; background: #eee; } - - .iconsRight { - color: #a8aab1; - --mdc-icon-size: 18px; - } - - .padright5 { - padding-right: 5px; - } ` } @@ -200,8 +189,8 @@ class NameMenu extends LitElement { render() { return html`