From e0c44bef69b399ae4af9ad59f9f1e243ea17e6f2 Mon Sep 17 00:00:00 2001 From: Justin Ferrari <‘justinwesleyferrari@gmail.com’> Date: Tue, 3 Jan 2023 22:19:13 -0500 Subject: [PATCH 1/7] Started Tip User --- qortal-ui-core/language/us.json | 9 +- qortal-ui-core/src/components/app-view.js | 32 +- .../plugins/core/components/ChatPage.js | 48 +- .../plugins/core/components/ChatRightPanel.js | 566 +++++++++++------- .../plugins/utils/getUserNameFromAddress.js | 20 + 5 files changed, 426 insertions(+), 249 deletions(-) create mode 100644 qortal-ui-plugins/plugins/utils/getUserNameFromAddress.js diff --git a/qortal-ui-core/language/us.json b/qortal-ui-core/language/us.json index efeca99f..c8fa70b4 100644 --- a/qortal-ui-core/language/us.json +++ b/qortal-ui-core/language/us.json @@ -565,7 +565,7 @@ "gchange32": "Date Updated", "gchange33": "Joining", "gchange34": "Join Group", - "gchange35": "Leave Group Request", + "gchange35": "User Info", "gchange36": "Leaving", "gchange37": "Leave Group", "gchange38": "Manage Group Owner:", @@ -584,7 +584,12 @@ "gchange51": "Join", "gchange52": "Admin", "gchange53": "Member", - "gchange54": "Members" + "gchange54": "Members", + "gchange55": "Tip QORT to", + "gchange56": "SEND MESSAGE", + "gchange57": "TIP USER", + "gchange58": "Tip Amount", + "gchange59": "Available Balance" }, "puzzlepage": { "pchange1": "Puzzles", diff --git a/qortal-ui-core/src/components/app-view.js b/qortal-ui-core/src/components/app-view.js index 51325e36..091bdb5f 100644 --- a/qortal-ui-core/src/components/app-view.js +++ b/qortal-ui-core/src/components/app-view.js @@ -44,7 +44,6 @@ class AppView extends connect(store)(LitElement) { app-drawer { box-shadow: var(--shadow-2); - background: var(--sidetopbar); } app-header { @@ -66,25 +65,32 @@ class AppView extends connect(store)(LitElement) { background: var(--sidetopbar); } - .sideBarMenu{ + .sideBarMenu { overflow-y: auto; flex: 1 1; } - #sideBar::-webkit-scrollbar { - width: 7px; - background-color: transparent; + .sideBarMenu::-webkit-scrollbar-track { + background-color: whitesmoke; + border-radius: 7px; } - - #sideBar::-webkit-scrollbar-track { - background-color: transparent; + + .sideBarMenu::-webkit-scrollbar { + width: 6px; + border-radius: 7px; + background-color: whitesmoke; } - - #sideBar::-webkit-scrollbar-thumb { - background-color: #333; - border-radius: 6px; - border: 3px solid #333; + + .sideBarMenu::-webkit-scrollbar-thumb { + background-color: rgb(180, 176, 176); + border-radius: 7px; + transition: all 0.3s ease-in-out; } + + .sideBarMenu::-webkit-scrollbar-thumb:hover { + background-color: rgb(148, 146, 146); + cursor: pointer; + } ` ] } diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index e93498b3..f37fc94b 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -105,6 +105,7 @@ class ChatPage extends LitElement { flex-direction: column; height: 50vh; overflow-y: auto; + overflow-x: hidden; width: 100%; } @@ -287,7 +288,6 @@ class ChatPage extends LitElement { .chat-container { display: grid; - grid-template-rows: minmax(6%, 92vh) minmax(40px, auto); max-height: 100%; } @@ -575,13 +575,6 @@ class ChatPage extends LitElement { object-fit: contain; } - .chat-container { - display: grid; - grid-template-rows: minmax(40px, auto) minmax(6%, 92vh) minmax(40px, auto); - max-height: 100%; - flex: 3; - } - .chat-right-panel { flex: 0; border-left: 3px solid rgb(221, 221, 221); @@ -845,21 +838,24 @@ class ChatPage extends LitElement { render() { return html`
-
- ${(!this.isReceipient && +this._chatId !== 0) ? html` +
+ ${(!this.isReceipient && +this._chatId !== 0) ? + html`
-
-

${this.groupInfo && this.groupInfo.groupName}

-
-
- - - - - +
+

${this.groupInfo && this.groupInfo.groupName}

+
+
+ + + + +
- ` : html`
`} + ` : null}
${this.isLoadingMessages ? @@ -1145,7 +1141,17 @@ class ChatPage extends LitElement {
- this.getMoreMembers(val)} .toggle=${(val)=> this._toggle(val)} .selectedAddress=${this.selectedAddress} .groupMembers=${this.groupMembers} .groupAdmin=${this.groupAdmin} .leaveGroupObj=${this.groupInfo}> + this.getMoreMembers(val)} + .toggle=${(val)=> this._toggle(val)} + .selectedAddress=${this.selectedAddress} + .groupMembers=${this.groupMembers} + .groupAdmin=${this.groupAdmin} + .leaveGroupObj=${this.groupInfo} + .setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)} + .chatEditor=${this.chatEditor} + > +
diff --git a/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js b/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js index 2366400e..001bd0f3 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js +++ b/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js @@ -2,6 +2,7 @@ import { LitElement, html, css } from "lit" import { render } from "lit/html.js" import { get, translate } from "lit-translate" import { Epml } from "../../../epml" +import { getUserNameFromAddress } from "../../utils/getUserNameFromAddress" import snackbar from "./snackbar.js" import "@material/mwc-button" import "@material/mwc-dialog" @@ -15,7 +16,7 @@ class ChatRightPanel extends LitElement { static get properties() { return { isLoading: { type: Boolean }, - isOpenLeaveModal: { type: Boolean }, + openUserInfo: { type: Boolean }, leaveGroupObj: { type: Object }, error: { type: Boolean }, message: { type: String }, @@ -24,14 +25,18 @@ class ChatRightPanel extends LitElement { groupMembers: { attribute: false }, selectedHead: { type: Object }, toggle: { attribute: false }, - getMoreMembers:{ attribute: false } + getMoreMembers:{ attribute: false }, + setOpenPrivateMessage: { attribute: false }, + openTipUser: { type: Boolean }, + userName: { type: String }, + chatEditor: { type: Object } } } constructor() { super() this.isLoading = false - this.isOpenLeaveModal = false + this.openUserInfo = false this.leaveGroupObj = {} this.leaveFee = 0.001 this.error = false @@ -42,144 +47,242 @@ class ChatRightPanel extends LitElement { this.observerHandler = this.observerHandler.bind(this) this.viewElement = '' this.downObserverElement = '' + this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address + this.openTipUser = false + this.userName = {} } -static get styles() { -return css` - .top-bar-icon { + static get styles() { + return css` + .top-bar-icon { + cursor: pointer; + height: 18px; + width: 18px; + transition: 0.2s all; + } + + .top-bar-icon:hover { + color: var(--black); + } + + .modal-button { + font-family: Roboto, sans-serif; + font-size: 16px; + color: var(--mdc-theme-primary); + background-color: transparent; + padding: 8px 10px; + border-radius: 5px; + border: none; + transition: all 0.3s ease-in-out; + } + + .close-row { + width: 100%; + display: flex; + justify-content: flex-end; + height: 50px; + flex:0 + + } + + .container-body { + width: 100%; + display: flex; + flex-direction: column; + flex-grow: 1; + overflow:auto; + margin-top: 5px; + padding: 0px 6px; + box-sizing: border-box; + } + + .container-body::-webkit-scrollbar-track { + background-color: whitesmoke; + border-radius: 7px; + } + + .container-body::-webkit-scrollbar { + width: 6px; + border-radius: 7px; + background-color: whitesmoke; + } + + .container-body::-webkit-scrollbar-thumb { + background-color: rgb(180, 176, 176); + border-radius: 7px; + transition: all 0.3s ease-in-out; + } + + .container-body::-webkit-scrollbar-thumb:hover { + background-color: rgb(148, 146, 146); + cursor: pointer; + } + + p { + color: var(--black); + margin: 0px; + padding: 0px; + word-break: break-all; + } + + .container { + display: flex; + width: 100%; + flex-direction: column; + height: 100%; + } + + .chat-right-panel-label { + font-family: Montserrat, sans-serif; + color: var(--group-header); + padding: 5px; + font-size: 13px; + user-select: none; + } + + .group-info { + display: flex; + flex-direction: column; + justify-content: flex-start; + gap: 10px; + } + + .group-name { + font-family: Raleway, sans-serif; + font-size: 20px; + color: var(--chat-bubble-msg-color); + text-align: center; + user-select: none; + } + + .group-description { + font-family: Roboto, sans-serif; + color: var(--chat-bubble-msg-color); + letter-spacing: 0.3px; + font-weight: 300; + font-size: 14px; + margin-top: 15px; + word-break: break-word; + user-select: none; + } + + .group-subheader { + font-family: Montserrat, sans-serif; + font-size: 14px; + color: var(--chat-bubble-msg-color); + } + + .group-data { + font-family: Roboto, sans-serif; + letter-spacing: 0.3px; + font-weight: 300; + font-size: 14px; + color: var(--chat-bubble-msg-color); + } + + .user-info-header { + font-family: Montserrat, sans-serif; + text-align: center; + font-size: 25px; + color: var(--chat-bubble-msg-color); + margin-bottom: 10px; + padding: 10px 0; + user-select: none; + } + + .send-message-button { + font-family: Roboto, sans-serif; + letter-spacing: 0.3px; + font-weight: 300; + padding: 8px 5px; + border-radius: 3px; + text-align: center; + color: var(--mdc-theme-primary); + transition: all 0.3s ease-in-out; + } + + .send-message-button:hover { cursor: pointer; - height: 18px; - width: 18px; - transition: 0.2s all; - } + background-color: #03a8f485; + } - .top-bar-icon:hover { - color: var(--black); - } + .close-icon { + position: absolute; + top: 3px; + right: 5px; + color: #676b71; + width: 14px; + transition: all 0.1s ease-in-out; + } - .modal-button { - font-family: Roboto, sans-serif; - font-size: 16px; - color: var(--mdc-theme-primary); - background-color: transparent; - padding: 8px 10px; - border-radius: 5px; - border: none; - transition: all 0.3s ease-in-out; - } + .close-icon:hover { + cursor: pointer; + color: #494c50; + } - .close-row { - width: 100%; - display: flex; - justify-content: flex-end; - height: 50px; - flex:0 + .tip-user-header { + display: flex; + justify-content: center; + align-items: center; + padding: 12px; + border-bottom: 1px solid whitesmoke; + gap: 25px; + } - } + .tip-user-header-font { + font-family: Montserrat, sans-serif; + font-size: 20px; + color: var(--chat-bubble-msg-color); + } - .container-body { - width: 100%; - display: flex; - flex-direction: column; - flex-grow: 1; - overflow:auto; - margin-top: 5px; - padding: 0px 6px; - box-sizing: border-box; - } + .tip-user-body { + display: flex; + justify-content: flex-start; + align-items: center; + padding: 15px 10px; + } - .container-body::-webkit-scrollbar-track { - background-color: whitesmoke; - border-radius: 7px; - } - - .container-body::-webkit-scrollbar { - width: 6px; - border-radius: 7px; - background-color: whitesmoke; - } - - .container-body::-webkit-scrollbar-thumb { - background-color: rgb(180, 176, 176); - border-radius: 7px; - transition: all 0.3s ease-in-out; - } + .tip-input { + width: 300px; + margin-bottom: 15px; + outline: 0; + border-width: 0 0 2px; + border-color: var(--mdc-theme-primary); + background-color: transparent; + padding: 10px; + font-family: Roboto, sans-serif; + font-size: 15px; + color: var(--chat-bubble-msg-color); + } - .container-body::-webkit-scrollbar-thumb:hover { - background-color: rgb(148, 146, 146); - cursor: pointer; - } + .tip-input::selection { + background-color: var(--mdc-theme-primary); + color: white; + } - p { - color: var(--black); - margin: 0px; - padding: 0px; - word-break: break-all; - } + .tip-input::placeholder { + opacity: 0.9; + color: var(--black); + } - .container { - display: flex; - width: 100%; - flex-direction: column; - height: 100%; + ` } - .chat-right-panel-label { - font-family: Montserrat, sans-serif; - color: var(--group-header); - padding: 5px; - font-size: 13px; - user-select: none; - } - - .group-info { - display: flex; - flex-direction: column; - justify-content: flex-start; - gap: 10px; - } - - .group-name { - font-family: Raleway, sans-serif; - font-size: 20px; - color: var(--chat-bubble-msg-color); - text-align: center; - user-select: none; - } - - .group-description { - font-family: Roboto, sans-serif; - color: var(--chat-bubble-msg-color); - letter-spacing: 0.3px; - font-weight: 300; - font-size: 14px; - margin-top: 15px; - word-break: break-word; - user-select: none; - } - - .group-subheader { - font-family: Montserrat, sans-serif; - font-size: 14px; - color: var(--chat-bubble-msg-color); - } - - .group-data { - font-family: Roboto, sans-serif; - letter-spacing: 0.3px; - font-weight: 300; - font-size: 14px; - color: var(--chat-bubble-msg-color); - } -` -} - firstUpdated() { this.viewElement = this.shadowRoot.getElementById('viewElement'); this.downObserverElement = this.shadowRoot.getElementById('downObserver'); this.elementObserver(); } + async updated(changedProperties) { + if (changedProperties && changedProperties.has('selectedHead')) { + if (this.selectedHead !== {}) { + const userName = await getUserNameFromAddress(this.selectedHead.address); + this.userName = userName; + } + } + } + timeIsoString(timestamp) { let myTimestamp = timestamp === undefined ? 1587560082346 : timestamp let time = new Date(myTimestamp) @@ -212,7 +315,7 @@ return css` if (myRef && myRef.type) { clearInterval(interval) this.isLoading = false - this.isOpenLeaveModal = false + this.openUserInfo = false } } catch (error) {} stop = false @@ -437,106 +540,143 @@ return css` } render() { console.log('this.groupMembers', this.groupMembers); - console.log(5, "Chat Right Panel Here"); + console.log(18, "Chat Right Panel Here"); const owner = this.groupAdmin.filter((admin)=> admin.address === this.leaveGroupObj.owner) return html`
-
- this.toggle(false)} style="margin: 0px 10px" icon="vaadin:close" slot="icon"> -
-
-

${this.leaveGroupObj && this.leaveGroupObj.groupName}

-
-

${this.leaveGroupObj && this.leaveGroupObj.description}

-

Members: ${this.leaveGroupObj && this.leaveGroupObj.memberCount}

- -

Date created : ${new Date(this.leaveGroupObj.created).toLocaleDateString("en-US")}

+
+ this.toggle(false)} style="margin: 0px 10px" icon="vaadin:close" slot="icon"> +
+
+

${this.leaveGroupObj && this.leaveGroupObj.groupName}

+
+

${this.leaveGroupObj && this.leaveGroupObj.description}

+

Members: ${this.leaveGroupObj && this.leaveGroupObj.memberCount}

+ +

Date created : ${new Date(this.leaveGroupObj.created).toLocaleDateString("en-US")}

+
+
+

GROUP OWNER

+ ${owner.map((item) => { + return html` { + if (val.address === this.myAddress) return; + console.log({ val }); + this.selectedHead = val; + this.openUserInfo = true; + }} + chatInfo=${JSON.stringify(item)} + >` + })} +

ADMINS

+ ${this.groupAdmin.map((item) => { + return html` { + if (val.address === this.myAddress) return; + console.log({ val }); + this.selectedHead = val; + this.openUserInfo = true; + }} + chatInfo=${JSON.stringify(item)} + >` + })} +

MEMBERS

+ ${this.groupMembers.map((item) => { + return html` { + if (val.address === this.myAddress) return; + console.log({ val }); + this.selectedHead = val; + this.openUserInfo = true; + }} + chatInfo=${JSON.stringify(item)} + >` + })} +
-
-

GROUP OWNER

- ${owner.map((item) => { - return html` {}} - chatInfo=${JSON.stringify(item)} - >` - })} -

ADMINS

- ${this.groupAdmin.map((item) => { - return html` {}} - chatInfo=${JSON.stringify(item)} - >` - })} -

MEMBERS

- ${this.groupMembers.map((item) => { - return html` { - console.log({ val }) - this.selectedHead = val - this.isOpenLeaveModal = true - }} - chatInfo=${JSON.stringify(item)} - >` - })} -
-
{ - if (this.isLoading) return - this.isOpenLeaveModal = false - }} - style=${ - this.isOpenLeaveModal ? "display: block" : "display: none" - }> -
-

${translate("grouppage.gchange35")}

-
-
- - - -
- - - ${translate("grouppage.gchange36")}   - - - - - ${this.message} - -
- - - -
+ this.openTipUser = true + this.openUserInfo = false + this.chatEditor.disable(); + }}> + ${translate("grouppage.gchange57")} +
+
+ + + ${translate("grouppage.gchange36")}   + + + + + ${this.message} +
+
+ + { + this.openTipUser = false; + this.chatEditor.enable(); + }} + style=${this.openTipUser ? "display: block" : "display: none"}> +
+ +

${translate("grouppage.gchange55")} ${this.userName}

+
+

${translate("grouppage.gchange59")}

+ +
+
+
+
` } } diff --git a/qortal-ui-plugins/plugins/utils/getUserNameFromAddress.js b/qortal-ui-plugins/plugins/utils/getUserNameFromAddress.js new file mode 100644 index 00000000..ded1de96 --- /dev/null +++ b/qortal-ui-plugins/plugins/utils/getUserNameFromAddress.js @@ -0,0 +1,20 @@ +import { Epml } from '../../epml.js'; + +const parentEpml = new Epml({ type: 'WINDOW', source: window.parent }) + +export const getUserNameFromAddress = async (address) => { + try { + const getNames = await parentEpml.request("apiCall", { + type: "api", + url: `/names/address/${address}`, + }); + + if (Array.isArray(getNames) && getNames.length > 0 ) { + return getNames[0].name; + } else { + return address; + } + } catch (error) { + console.error(error); + } +} \ No newline at end of file From b58d3f90a91500889b60d5853a4375ca2366cec7 Mon Sep 17 00:00:00 2001 From: Justin Ferrari <‘justinwesleyferrari@gmail.com’> Date: Wed, 4 Jan 2023 13:46:19 -0500 Subject: [PATCH 2/7] Continued styling of the tip user --- qortal-ui-core/language/us.json | 3 +- .../plugins/core/components/ChatRightPanel.js | 37 ++++++++++++++++--- .../plugins/utils/getUserNameFromAddress.js | 3 +- 3 files changed, 35 insertions(+), 8 deletions(-) diff --git a/qortal-ui-core/language/us.json b/qortal-ui-core/language/us.json index c8fa70b4..607af4d0 100644 --- a/qortal-ui-core/language/us.json +++ b/qortal-ui-core/language/us.json @@ -589,7 +589,8 @@ "gchange56": "SEND MESSAGE", "gchange57": "TIP USER", "gchange58": "Tip Amount", - "gchange59": "Available Balance" + "gchange59": "Available Balance", + "gchange60": "Failed to Fetch QORT Balance. Try again!" }, "puzzlepage": { "pchange1": "Puzzles", diff --git a/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js b/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js index 001bd0f3..4ba79ba6 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js +++ b/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js @@ -29,7 +29,8 @@ class ChatRightPanel extends LitElement { setOpenPrivateMessage: { attribute: false }, openTipUser: { type: Boolean }, userName: { type: String }, - chatEditor: { type: Object } + chatEditor: { type: Object }, + walletBalance: { type: Number } } } @@ -237,9 +238,11 @@ class ChatRightPanel extends LitElement { .tip-user-body { display: flex; - justify-content: flex-start; - align-items: center; - padding: 15px 10px; + justify-content: center; + align-items: flex-start; + padding: 20px 10px; + flex-direction: column; + gap: 15px; } .tip-input { @@ -272,6 +275,7 @@ class ChatRightPanel extends LitElement { this.viewElement = this.shadowRoot.getElementById('viewElement'); this.downObserverElement = this.shadowRoot.getElementById('downObserver'); this.elementObserver(); + this.fetchWalletDetails(); } async updated(changedProperties) { @@ -538,9 +542,30 @@ class ChatRightPanel extends LitElement { this.getMoreMembers(this.leaveGroupObj.groupId) } } + + getApiKey() { + const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]; + let apiKey = myNode.apiKey; + return apiKey; + } + + async fetchWalletDetails() { + parentEpml.request('apiCall', { + url: `/addresses/balance/${this.myAddress}?apiKey=${this.getApiKey()}`, + }) + .then((res) => { + if (isNaN(Number(res))) { + let snack4string = get("grouppage.gchange60") + parentEpml.request('showSnackBar', `${snack4string}`) + } else { + this.walletBalance = Number(res).toFixed(8); + } + }) + } + render() { console.log('this.groupMembers', this.groupMembers); - console.log(18, "Chat Right Panel Here"); + console.log(20, "Chat Right Panel Here"); const owner = this.groupAdmin.filter((admin)=> admin.address === this.leaveGroupObj.owner) return html`
@@ -671,7 +696,7 @@ class ChatRightPanel extends LitElement {

${translate("grouppage.gchange55")} ${this.userName}

-

${translate("grouppage.gchange59")}

+

${translate("grouppage.gchange59")}: ${this.walletBalance} QORT

diff --git a/qortal-ui-plugins/plugins/utils/getUserNameFromAddress.js b/qortal-ui-plugins/plugins/utils/getUserNameFromAddress.js index ded1de96..f8f02a53 100644 --- a/qortal-ui-plugins/plugins/utils/getUserNameFromAddress.js +++ b/qortal-ui-plugins/plugins/utils/getUserNameFromAddress.js @@ -1,4 +1,5 @@ import { Epml } from '../../epml.js'; +import { cropAddress } from './cropAddress.js'; const parentEpml = new Epml({ type: 'WINDOW', source: window.parent }) @@ -12,7 +13,7 @@ export const getUserNameFromAddress = async (address) => { if (Array.isArray(getNames) && getNames.length > 0 ) { return getNames[0].name; } else { - return address; + return cropAddress(address); } } catch (error) { console.error(error); From 631cffeb217bacae062b592d8680aaf9087456b0 Mon Sep 17 00:00:00 2001 From: Justin Ferrari <‘justinwesleyferrari@gmail.com’> Date: Fri, 6 Jan 2023 14:13:13 -0500 Subject: [PATCH 3/7] Tip user completed --- qortal-ui-core/language/us.json | 463 +++++++++--------- qortal-ui-plugins/package.json | 6 +- .../plugins/core/components/ChatPage.js | 28 +- .../plugins/core/components/ChatRightPanel.js | 385 ++------------- .../plugins/core/components/TipUser-css.js | 85 ++++ .../plugins/core/components/TipUser.js | 282 +++++++++++ .../plugins/utils/getUserNameFromAddress.js | 2 +- 7 files changed, 670 insertions(+), 581 deletions(-) create mode 100644 qortal-ui-plugins/plugins/core/components/TipUser-css.js create mode 100644 qortal-ui-plugins/plugins/core/components/TipUser.js diff --git a/qortal-ui-core/language/us.json b/qortal-ui-core/language/us.json index 7958a057..66517cf1 100644 --- a/qortal-ui-core/language/us.json +++ b/qortal-ui-core/language/us.json @@ -21,22 +21,22 @@ "korean": "Korean" }, "sidemenu": { - "minting":"MINTING", - "mintingdetails":"MINTING DETAILS", - "becomeAMinter":"BECOME A MINTER", - "wallets":"WALLETS", - "tradeportal":"TRADE PORTAL", - "rewardshare":"REWARD SHARE", - "nameregistration":"NAME REGISTRATION", - "websites":"WEBSITES", - "management":"MANAGEMENT", - "datamanagement":"DATA MANAGEMENT", - "qchat":"Q-CHAT", - "groupmanagement":"GROUP MANAGEMENT", - "puzzles":"PUZZLES", - "nodemanagement":"NODE MANAGEMENT", - "trading":"TRADING", - "groups":"GROUPS" + "minting": "MINTING", + "mintingdetails": "MINTING DETAILS", + "becomeAMinter": "BECOME A MINTER", + "wallets": "WALLETS", + "tradeportal": "TRADE PORTAL", + "rewardshare": "REWARD SHARE", + "nameregistration": "NAME REGISTRATION", + "websites": "WEBSITES", + "management": "MANAGEMENT", + "datamanagement": "DATA MANAGEMENT", + "qchat": "Q-CHAT", + "groupmanagement": "GROUP MANAGEMENT", + "puzzles": "PUZZLES", + "nodemanagement": "NODE MANAGEMENT", + "trading": "TRADING", + "groups": "GROUPS" }, "login": { "login": "Login", @@ -130,32 +130,32 @@ "snack4": "Nodes successfully saved as", "snack5": "Nodes successfully imported" }, - "appinfo":{ - "blockheight":"Block Height", - "uiversion":"UI Version", - "coreversion":"Core Version", - "minting":"(Minting)", - "synchronizing":"Synchronizing", - "peers":"Connected Peers" + "appinfo": { + "blockheight": "Block Height", + "uiversion": "UI Version", + "coreversion": "Core Version", + "minting": "(Minting)", + "synchronizing": "Synchronizing", + "peers": "Connected Peers" }, "walletprofile": { "minterlevel": "Minter Level", "blocksminted": "Blocks Minted" }, - "general":{ - "yes":"Yes", - "no":"No", - "confirm":"Confirm", - "decline":"Decline", - "open":"Open", - "close":"Close", - "back":"Back", - "next":"Next", - "create":"Create", - "continue":"Continue", - "save":"Save", - "balance":"Balance", - "balances":"YOUR WALLET BALANCES" + "general": { + "yes": "Yes", + "no": "No", + "confirm": "Confirm", + "decline": "Decline", + "open": "Open", + "close": "Close", + "back": "Back", + "next": "Next", + "create": "Create", + "continue": "Continue", + "save": "Save", + "balance": "Balance", + "balances": "YOUR WALLET BALANCES" }, "startminting": { "smchange1": "Cannot fetch minting accounts", @@ -280,55 +280,55 @@ "wchange56": "WARNING!", "wchange57": "Memo" }, - "tradepage":{ - "tchange1":"Trade Portal", - "tchange2":"Select Trading Pair", - "tchange3":"HISTORIC MARKET TRADES", - "tchange4":"MY TRADE HISTORY", - "tchange5":"OPEN MARKET SELL ORDERS", - "tchange6":"MY ORDERS", - "tchange7":"Stuck Offers", - "tchange8":"Amount", - "tchange9":"Price", - "tchange10":"Total", - "tchange11":"Date", - "tchange12":"Status", - "tchange13":"Seller", - "tchange14":"Price Each", - "tchange15":"Clear Form", - "tchange16":"You have", - "tchange17":"Action", - "tchange18":"BUY", - "tchange19":"SELL", - "tchange20":"Failed to Create Trade. Try again!", - "tchange21":"Failed to Create Trade. Error Code", - "tchange22":"Insufficient Funds!", - "tchange23":"Buy Request Successful!", - "tchange24":"Buy Request Existing!", - "tchange25":"Failed to Create Trade. Error Code", - "tchange26":"Trade Cancelling In Progress!", - "tchange27":"Failed to Cancel Trade. Try again!", - "tchange28":"Failed to Cancel Trade. Error Code", - "tchange29":"CANCEL", - "tchange30":"Failed to Fetch Balance. Try again!", - "tchange31":"SOLD", - "tchange32":"BOUGHT", - "tchange33":"Average", - "tchange34":"Amount can not be 0", - "tchange35":"Price can not be 0", - "tchange36":"PENDING AUTO BUY", - "tchange37":"No auto buy order found !", - "tchange38":"ADD", - "tchange39":"AUTO BUY ORDER", - "tchange40":"Price", - "tchange41":"Successfully removed auto buy order!", - "tchange42":"MARKET OPEN SELL ORDERS", - "tchange43":"MY BUY HISTORY", - "tchange44":"Successfully added auto buy order!", - "tchange45":"AUTO BUY WITH", - "tchange46":"AUTO BUY", - "tchange47":"Sell for this price", - "tchange48":"NOT ENOUGH" + "tradepage": { + "tchange1": "Trade Portal", + "tchange2": "Select Trading Pair", + "tchange3": "HISTORIC MARKET TRADES", + "tchange4": "MY TRADE HISTORY", + "tchange5": "OPEN MARKET SELL ORDERS", + "tchange6": "MY ORDERS", + "tchange7": "Stuck Offers", + "tchange8": "Amount", + "tchange9": "Price", + "tchange10": "Total", + "tchange11": "Date", + "tchange12": "Status", + "tchange13": "Seller", + "tchange14": "Price Each", + "tchange15": "Clear Form", + "tchange16": "You have", + "tchange17": "Action", + "tchange18": "BUY", + "tchange19": "SELL", + "tchange20": "Failed to Create Trade. Try again!", + "tchange21": "Failed to Create Trade. Error Code", + "tchange22": "Insufficient Funds!", + "tchange23": "Buy Request Successful!", + "tchange24": "Buy Request Existing!", + "tchange25": "Failed to Create Trade. Error Code", + "tchange26": "Trade Cancelling In Progress!", + "tchange27": "Failed to Cancel Trade. Try again!", + "tchange28": "Failed to Cancel Trade. Error Code", + "tchange29": "CANCEL", + "tchange30": "Failed to Fetch Balance. Try again!", + "tchange31": "SOLD", + "tchange32": "BOUGHT", + "tchange33": "Average", + "tchange34": "Amount can not be 0", + "tchange35": "Price can not be 0", + "tchange36": "PENDING AUTO BUY", + "tchange37": "No auto buy order found !", + "tchange38": "ADD", + "tchange39": "AUTO BUY ORDER", + "tchange40": "Price", + "tchange41": "Successfully removed auto buy order!", + "tchange42": "MARKET OPEN SELL ORDERS", + "tchange43": "MY BUY HISTORY", + "tchange44": "Successfully added auto buy order!", + "tchange45": "AUTO BUY WITH", + "tchange46": "AUTO BUY", + "tchange47": "Sell for this price", + "tchange48": "NOT ENOUGH" }, "rewardsharepage": { "rchange1": "Rewardshares", @@ -354,47 +354,47 @@ "rchange21": "Reward Share Successful!", "rchange22": "Reward Share Removed Successfully!" }, - "registernamepage":{ - "nchange1":"Name Registration", - "nchange2":"Register Name", - "nchange3":"Registered Names", - "nchange4":"Avatar", - "nchange5":"Name", - "nchange6":"Owner", - "nchange7":"Action", - "nchange8":"No names registered by this account!", - "nchange9":"Register a Name!", - "nchange10":"Description (optional)", - "nchange11":"Doing something delicious", - "nchange12":"Registering Name", - "nchange13":"The current name registration fee is", - "nchange14":"Register", - "nchange15":"Set Avatar", - "nchange16":"Need Core Update", - "nchange17":"Name Already Exists!", - "nchange18":"Name Registration Successful!", - "nchange19":"Sell Name", - "nchange20":"Cancel Sell", - "nchange21":"Buy Name", - "nchange22":"Open Market Names To Sell", - "nchange23":"Sell Price", - "nchange24":"No Names To Sell", - "nchange25":"Name To Sell", - "nchange26":"Are you sure to sell this name ?", - "nchange27":"For this price in QORT", - "nchange28":"On pressing confirm, the sell name request will be sent!", - "nchange29":"Name To Cancel", - "nchange30":"Are you sure to cancel the sell for this name ?", - "nchange31":"On pressing confirm, the cancel sell name request will be sent!", - "nchange32":"Sell Name Request Successful!", - "nchange33":"Cancel Sell Name Request Successful!", - "nchange34":"Buy Name Request Successful!", - "nchange35":"YOU HAVE A NAME!", - "nchange36":"Only accounts with no registered name can buy a name.", - "nchange37":"ATTENTION!", - "nchange38":"You not have enough qort to buy this name.", - "nchange39":"Are you sure to buy this name ?", - "nchange40":"On pressing confirm, the buy name request will be sent!" + "registernamepage": { + "nchange1": "Name Registration", + "nchange2": "Register Name", + "nchange3": "Registered Names", + "nchange4": "Avatar", + "nchange5": "Name", + "nchange6": "Owner", + "nchange7": "Action", + "nchange8": "No names registered by this account!", + "nchange9": "Register a Name!", + "nchange10": "Description (optional)", + "nchange11": "Doing something delicious", + "nchange12": "Registering Name", + "nchange13": "The current name registration fee is", + "nchange14": "Register", + "nchange15": "Set Avatar", + "nchange16": "Need Core Update", + "nchange17": "Name Already Exists!", + "nchange18": "Name Registration Successful!", + "nchange19": "Sell Name", + "nchange20": "Cancel Sell", + "nchange21": "Buy Name", + "nchange22": "Open Market Names To Sell", + "nchange23": "Sell Price", + "nchange24": "No Names To Sell", + "nchange25": "Name To Sell", + "nchange26": "Are you sure to sell this name ?", + "nchange27": "For this price in QORT", + "nchange28": "On pressing confirm, the sell name request will be sent!", + "nchange29": "Name To Cancel", + "nchange30": "Are you sure to cancel the sell for this name ?", + "nchange31": "On pressing confirm, the cancel sell name request will be sent!", + "nchange32": "Sell Name Request Successful!", + "nchange33": "Cancel Sell Name Request Successful!", + "nchange34": "Buy Name Request Successful!", + "nchange35": "YOU HAVE A NAME!", + "nchange36": "Only accounts with no registered name can buy a name.", + "nchange37": "ATTENTION!", + "nchange38": "You not have enough qort to buy this name.", + "nchange39": "Are you sure to buy this name ?", + "nchange40": "On pressing confirm, the buy name request will be sent!" }, "websitespage": { "schange1": "Browse Websites", @@ -541,9 +541,8 @@ "cchange38": "User Verified", "cchange39": "Cannot send an encrypted message to this user since they do not have their publickey on chain.", "cchange40": "IMAGE (click to view)", - "cchange41":"Your Balance Is Under 4.20 QORT", - "cchange42":"Out of the need to combat spam, accounts with under 4.20 Qort balance will take a long time to SEND messages in Q-Chat. If you wish to immediately increase the send speed for Q-Chat messages, obtain over 4.20 QORT to your address. This can be done with trades in the Trade Portal, or by way of another Qortian giving you the QORT. Once you have over 4.20 QORT in your account, Q-Chat messages will be instant and this dialog will no more show. Thank you for your understanding of this necessary spam prevention method, and we hope you enjoy Qortal!" - + "cchange41": "Your Balance Is Under 4.20 QORT", + "cchange42": "Out of the need to combat spam, accounts with under 4.20 Qort balance will take a long time to SEND messages in Q-Chat. If you wish to immediately increase the send speed for Q-Chat messages, obtain over 4.20 QORT to your address. This can be done with trades in the Trade Portal, or by way of another Qortian giving you the QORT. Once you have over 4.20 QORT in your account, Q-Chat messages will be instant and this dialog will no more show. Thank you for your understanding of this necessary spam prevention method, and we hope you enjoy Qortal!" }, "welcomepage": { "wcchange1": "Welcome to Q-Chat", @@ -635,7 +634,15 @@ "gchange57": "TIP USER", "gchange58": "Tip Amount", "gchange59": "Available Balance", - "gchange60": "Failed to Fetch QORT Balance. Try again!" + "gchange60": "Failed to Fetch QORT Balance. Try again!", + "gchange61": "Current static fee", + "gchange62": "Send", + "gchange63": "Insufficient Funds!", + "gchange64": "Invalid Amount!", + "gchange65": "Receiver cannot be empty!", + "gchange66": "Invalid Receiver!", + "gchange67": "Transaction Successful!", + "gchange68": "Transaction Failed!" }, "puzzlepage": { "pchange1": "Puzzles", @@ -725,104 +732,104 @@ "rewarddialog5": "You are removing a reward share transaction associated with account:", "rewarddialog6": "On pressing confirm, the rewardshare will be removed and the minting key will become invalid." }, - "sponsorshipspage":{ - "schange1":"Active Sponsorships", - "schange2":"Account Address", - "schange3":"Total Sponsorships active", - "schange4":"Next sponsorship ending in", - "schange5":"Sponsor New Minter", - "schange6":"Finished Sponsorships", - "schange7":"Completed", - "schange8":"Addresses", - "schange9":"You currently have no active sponsorships", - "schange10":"Public Key Lookup", - "schange11":"Copy", - "schange12":"Address to Public Key Converter", - "schange13":"Enter address", - "schange14":"In progress", - "schange15":"Finishing up", - "schange16":"Copy the key below and share it with your sponsored person.", - "schange17":"Copied to clipboard", - "schange18":"Warning: do not leave this plugin or close the Qortal UI until completion!", - "schange19":"Copy Sponsorship Key", - "schange20":"Creating relationship", - "schange21":"Remove Sponsorship Key" + "sponsorshipspage": { + "schange1": "Active Sponsorships", + "schange2": "Account Address", + "schange3": "Total Sponsorships active", + "schange4": "Next sponsorship ending in", + "schange5": "Sponsor New Minter", + "schange6": "Finished Sponsorships", + "schange7": "Completed", + "schange8": "Addresses", + "schange9": "You currently have no active sponsorships", + "schange10": "Public Key Lookup", + "schange11": "Copy", + "schange12": "Address to Public Key Converter", + "schange13": "Enter address", + "schange14": "In progress", + "schange15": "Finishing up", + "schange16": "Copy the key below and share it with your sponsored person.", + "schange17": "Copied to clipboard", + "schange18": "Warning: do not leave this plugin or close the Qortal UI until completion!", + "schange19": "Copy Sponsorship Key", + "schange20": "Creating relationship", + "schange21": "Remove Sponsorship Key" }, - "explorerpage":{ - "exp1":"Address or name to search", - "exp2":"Account Balance", - "exp3":"More Info", - "exp4":"Address or Name not found !", - "exp5":"Note that registered names are case-sensitive.", - "exp6":"Founder", - "exp7":"Info", - "exp8":"Show all buy trades", - "exp9":"Show all sell trades", - "exp10":"BUY HISTORY", - "exp11":"SELL HISTORY", - "exp12":"No buy trades made yet.", - "exp13":"No sell trades made yet.", - "exp14":"Show complete info", - "exp15":"Minting Since", - "exp16":"Not Minting", - "exp17":"ALL PAYMENTS", - "exp18":"Payments", - "exp19":"Sent", - "exp20":"Received", - "exp21":"Trades" + "explorerpage": { + "exp1": "Address or name to search", + "exp2": "Account Balance", + "exp3": "More Info", + "exp4": "Address or Name not found !", + "exp5": "Note that registered names are case-sensitive.", + "exp6": "Founder", + "exp7": "Info", + "exp8": "Show all buy trades", + "exp9": "Show all sell trades", + "exp10": "BUY HISTORY", + "exp11": "SELL HISTORY", + "exp12": "No buy trades made yet.", + "exp13": "No sell trades made yet.", + "exp14": "Show complete info", + "exp15": "Minting Since", + "exp16": "Not Minting", + "exp17": "ALL PAYMENTS", + "exp18": "Payments", + "exp19": "Sent", + "exp20": "Received", + "exp21": "Trades" }, - "managegroup":{ - "mg1":"Group Members", - "mg2":"Invite To Group", - "mg3":"Group Admins", - "mg4":"Update Group", - "mg5":"Close Manage Group", - "mg6":"BAN", - "mg7":"KICK", - "mg8":"Group ID", - "mg9":"Joined", - "mg10":"Add Group Admin", - "mg11":"Are you sure to add this member to admins ?", - "mg12":"On pressing confirm, add admin request will be sent!", - "mg13":"Remove Group Admin", - "mg14":"Remove Admin Address", - "mg15":"Are you sure to remove this member from admins ?", - "mg16":"On pressing confirm, remove admin request will be sent!", - "mg17":"Ban Member From Group", - "mg18":"Member Name", - "mg19":"Member Address", - "mg20":"How Long To Ban", - "mg21":"Reason For Ban", - "mg22":"Are you sure to ban this member from the group ?", - "mg23":"On pressing confirm, the ban request will be sent!", - "mg24":"FOREVER", - "mg25":"Banned Members", - "mg26":"CANCEL BAN", - "mg27":"Ban Expiry", - "mg28":"Cancel Ban Member From Group", - "mg29":"Are you sure to cancel the ban for this member from the group ?", - "mg30":"On pressing confirm, the cancel ban request will be sent!", - "mg31":"Kick Member From Group", - "mg32":"Reason For Kick", - "mg33":"Are you sure to kick this member from the group ?", - "mg34":"On pressing confirm, the kick request will be sent!", - "mg35":"No Open Group Invites", - "mg36":"Your Open Group Invites", - "mg37":"Address or name to invite", - "mg38":"Invite Expiry Time", - "mg39":"All Fields Are Required", - "mg40":"Are you sure to invite this member to the group ?", - "mg41":"On pressing confirm, the invite request will be sent!", - "mg42":"Group Type", - "mg43":"Invite Expiry", - "mg44":"Public Group", - "mg45":"Private Group", - "mg46":"Cancel Invite", - "mg47":"Cancel Invite To Group", - "mg48":"Are you sure to cancel the invite for this member ?", - "mg49":"On pressing confirm, the cancel invite request will be sent!", - "mg50":"Coming Soon...", - "mg51":"Minimum 3 Characters / Maximum 32 Characters", - "mg52":"Maximum 128 Characters" + "managegroup": { + "mg1": "Group Members", + "mg2": "Invite To Group", + "mg3": "Group Admins", + "mg4": "Update Group", + "mg5": "Close Manage Group", + "mg6": "BAN", + "mg7": "KICK", + "mg8": "Group ID", + "mg9": "Joined", + "mg10": "Add Group Admin", + "mg11": "Are you sure to add this member to admins ?", + "mg12": "On pressing confirm, add admin request will be sent!", + "mg13": "Remove Group Admin", + "mg14": "Remove Admin Address", + "mg15": "Are you sure to remove this member from admins ?", + "mg16": "On pressing confirm, remove admin request will be sent!", + "mg17": "Ban Member From Group", + "mg18": "Member Name", + "mg19": "Member Address", + "mg20": "How Long To Ban", + "mg21": "Reason For Ban", + "mg22": "Are you sure to ban this member from the group ?", + "mg23": "On pressing confirm, the ban request will be sent!", + "mg24": "FOREVER", + "mg25": "Banned Members", + "mg26": "CANCEL BAN", + "mg27": "Ban Expiry", + "mg28": "Cancel Ban Member From Group", + "mg29": "Are you sure to cancel the ban for this member from the group ?", + "mg30": "On pressing confirm, the cancel ban request will be sent!", + "mg31": "Kick Member From Group", + "mg32": "Reason For Kick", + "mg33": "Are you sure to kick this member from the group ?", + "mg34": "On pressing confirm, the kick request will be sent!", + "mg35": "No Open Group Invites", + "mg36": "Your Open Group Invites", + "mg37": "Address or name to invite", + "mg38": "Invite Expiry Time", + "mg39": "All Fields Are Required", + "mg40": "Are you sure to invite this member to the group ?", + "mg41": "On pressing confirm, the invite request will be sent!", + "mg42": "Group Type", + "mg43": "Invite Expiry", + "mg44": "Public Group", + "mg45": "Private Group", + "mg46": "Cancel Invite", + "mg47": "Cancel Invite To Group", + "mg48": "Are you sure to cancel the invite for this member ?", + "mg49": "On pressing confirm, the cancel invite request will be sent!", + "mg50": "Coming Soon...", + "mg51": "Minimum 3 Characters / Maximum 32 Characters", + "mg52": "Maximum 128 Characters" } } \ No newline at end of file diff --git a/qortal-ui-plugins/package.json b/qortal-ui-plugins/package.json index 4301c32a..4e813ff4 100644 --- a/qortal-ui-plugins/package.json +++ b/qortal-ui-plugins/package.json @@ -47,8 +47,8 @@ "@polymer/paper-slider": "3.0.1", "@polymer/paper-spinner": "3.0.2", "@polymer/paper-tooltip": "3.0.1", - "@vaadin/horizontal-layout": "23.2.5", - "@vaadin/tabs": "23.2.5", + "@vaadin/horizontal-layout": "23.3.2", + "@vaadin/tabs": "23.3.2", "@rollup/plugin-alias": "4.0.2", "@rollup/plugin-babel": "6.0.3", "@rollup/plugin-commonjs": "24.0.0", @@ -75,4 +75,4 @@ "engines": { "node": ">=16.17.1" } -} +} \ 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 544db34f..a50cd34c 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -1171,22 +1171,20 @@ class ChatPage extends LitElement {
-
- this.getMoreMembers(val)} - .toggle=${(val)=> this._toggle(val)} - .selectedAddress=${this.selectedAddress} - .groupMembers=${this.groupMembers} - .groupAdmin=${this.groupAdmin} - .leaveGroupObj=${this.groupInfo} - .setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)} - .chatEditor=${this.chatEditor} - > +
+ this.getMoreMembers(val)} + .toggle=${(val)=> this._toggle(val)} + .selectedAddress=${this.selectedAddress} + .groupMembers=${this.groupMembers} + .groupAdmin=${this.groupAdmin} + .leaveGroupObj=${this.groupInfo} + .setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)} + .chatEditor=${this.chatEditor}> - -
-
- ` + + + ` } async getMoreMembers(groupId){ diff --git a/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js b/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js index 4ba79ba6..4dbe8cb7 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js +++ b/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js @@ -1,16 +1,17 @@ -import { LitElement, html, css } from "lit" -import { render } from "lit/html.js" -import { get, translate } from "lit-translate" -import { Epml } from "../../../epml" -import { getUserNameFromAddress } from "../../utils/getUserNameFromAddress" -import snackbar from "./snackbar.js" -import "@material/mwc-button" -import "@material/mwc-dialog" -import "@polymer/paper-spinner/paper-spinner-lite.js" -import "@material/mwc-icon" -import "./WrapperModal" - -const parentEpml = new Epml({ type: "WINDOW", source: window.parent }) +import { LitElement, html, css } from "lit"; +import { render } from "lit/html.js"; +import { get, translate } from "lit-translate"; +import { Epml } from "../../../epml"; +import { getUserNameFromAddress } from "../../utils/getUserNameFromAddress"; +import snackbar from "./snackbar.js"; +import "@material/mwc-button"; +import "@material/mwc-dialog"; +import "@polymer/paper-spinner/paper-spinner-lite.js"; +import '@polymer/paper-progress/paper-progress.js'; +import "@material/mwc-icon"; +import '@vaadin/button'; +import "./WrapperModal"; +import "./TipUser" class ChatRightPanel extends LitElement { static get properties() { @@ -30,7 +31,11 @@ class ChatRightPanel extends LitElement { openTipUser: { type: Boolean }, userName: { type: String }, chatEditor: { type: Object }, - walletBalance: { type: Number } + walletBalance: { type: Number }, + sendMoneyLoading: { type: Boolean }, + btnDisable: { type: Boolean }, + errorMessage: { type: String }, + successMessage: { type: String } } } @@ -50,7 +55,12 @@ class ChatRightPanel extends LitElement { this.downObserverElement = '' this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address this.openTipUser = false - this.userName = {} + this.userName = "" + this.sendMoneyLoading = false + this.btnDisable = false + this.errorMessage = "" + this.successMessage = "" + this.setOpenTipUser = this.setOpenTipUser.bind(this); } static get styles() { @@ -203,8 +213,8 @@ class ChatRightPanel extends LitElement { } .send-message-button:hover { - cursor: pointer; - background-color: #03a8f485; + cursor: pointer; + background-color: #03a8f485; } .close-icon { @@ -220,54 +230,6 @@ class ChatRightPanel extends LitElement { cursor: pointer; color: #494c50; } - - .tip-user-header { - display: flex; - justify-content: center; - align-items: center; - padding: 12px; - border-bottom: 1px solid whitesmoke; - gap: 25px; - } - - .tip-user-header-font { - font-family: Montserrat, sans-serif; - font-size: 20px; - color: var(--chat-bubble-msg-color); - } - - .tip-user-body { - display: flex; - justify-content: center; - align-items: flex-start; - padding: 20px 10px; - flex-direction: column; - gap: 15px; - } - - .tip-input { - width: 300px; - margin-bottom: 15px; - outline: 0; - border-width: 0 0 2px; - border-color: var(--mdc-theme-primary); - background-color: transparent; - padding: 10px; - font-family: Roboto, sans-serif; - font-size: 15px; - color: var(--chat-bubble-msg-color); - } - - .tip-input::selection { - background-color: var(--mdc-theme-primary); - color: white; - } - - .tip-input::placeholder { - opacity: 0.9; - color: var(--black); - } - ` } @@ -275,7 +237,6 @@ class ChatRightPanel extends LitElement { this.viewElement = this.shadowRoot.getElementById('viewElement'); this.downObserverElement = this.shadowRoot.getElementById('downObserver'); this.elementObserver(); - this.fetchWalletDetails(); } async updated(changedProperties) { @@ -287,236 +248,6 @@ class ChatRightPanel extends LitElement { } } - timeIsoString(timestamp) { - let myTimestamp = timestamp === undefined ? 1587560082346 : timestamp - let time = new Date(myTimestamp) - return time.toISOString() - } - - resetDefaultSettings() { - this.error = false - this.message = "" - this.isLoading = false - } - - renderErr9Text() { - return html`${translate("grouppage.gchange49")}` - } - - async confirmRelationship(reference) { - let interval = null - let stop = false - const getAnswer = async () => { - - - if (!stop) { - stop = true - try { - let myRef = await parentEpml.request("apiCall", { - type: "api", - url: `/transactions/reference/${reference}`, - }) - if (myRef && myRef.type) { - clearInterval(interval) - this.isLoading = false - this.openUserInfo = false - } - } catch (error) {} - stop = false - } - } - interval = setInterval(getAnswer, 5000) - } - - async unitFee(txType) { - 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 url = `${nodeUrl}/transactions/unitfee?txType=${txType}`; - let fee = null; - - try { - const res = await fetch(url); - const data = await res.json(); - fee = (Number(data) / 1e8).toFixed(3); - } catch (error) { - fee = null; - } - - return fee; - } - - async getLastRef() { - let myRef = await parentEpml.request("apiCall", { - type: "api", - url: `/addresses/lastreference/${this.selectedAddress.address}`, - }) - return myRef; - } - - getTxnRequestResponse(txnResponse, reference) { - if (txnResponse === true) { - this.message = this.renderErr9Text() - this.error = false - this.confirmRelationship(reference) - } else { - this.error = true - this.message = "" - throw new Error(txnResponse) - } - } - - async convertBytesForSigning(transactionBytesBase58) { - let convertedBytes = await parentEpml.request("apiCall", { - type: "api", - method: "POST", - url: `/transactions/convert`, - body: `${transactionBytesBase58}`, - }) - return convertedBytes - } - - async signTx(body){ - return await parentEpml.request("apiCall", { - type: "api", - method: "POST", - url: `/transactions/sign`, - body: body, - headers: { - 'Content-Type': 'application/json' - } - }) - } - - async process(body){ - return await parentEpml.request("apiCall", { - type: "api", - method: "POST", - url: `/transactions/process`, - body: body, - }) - } - async _addAdmin(groupId) { - this.resetDefaultSettings() - - const leaveFeeInput = await this.unitFee('ADD_GROUP_ADMIN') - if(!leaveFeeInput){ - throw Error() - } - this.isLoading = true - - // Get Last Ref - const getLastRef = async () => { - let myRef = await parentEpml.request('apiCall', { - type: 'api', - url: `/addresses/lastreference/${this.selectedAddress.address}` - }) - return myRef - }; - - const validateReceiver = async () => { - let lastRef = await getLastRef(); - let myTransaction = await makeTransactionRequest(lastRef) - getTxnRequestResponse(myTransaction) - - } - - // Make Transaction Request - const makeTransactionRequest = async (lastRef) => { - let groupdialog3 = get("transactions.groupdialog3") - let groupdialog4 = get("transactions.groupdialog4") - let myTxnrequest = await parentEpml.request('transaction', { - type: 24, - nonce: this.selectedAddress.nonce, - params: { - _groupId: groupId, - fee: leaveFeeInput, - member: this.selectedHead.address, - lastReference: lastRef - } - }) - return myTxnrequest - } - - const getTxnRequestResponse = (txnResponse) => { - - if (txnResponse.success === false && txnResponse.message) { - this.error = true - this.message = txnResponse.message - throw new Error(txnResponse) - } else if (txnResponse.success === true && !txnResponse.data.error) { - this.message = this.renderErr9Text() - this.error = false - this.confirmRelationship() - } else { - this.error = true - this.message = txnResponse.data.message - throw new Error(txnResponse) - } - } - validateReceiver() - } - - async _removeAdmin(groupId) { - this.resetDefaultSettings() - - const leaveFeeInput = await this.unitFee('REMOVE_GROUP_ADMIN') - if(!leaveFeeInput){ - throw Error() - } - this.isLoading = true - - // Get Last Ref - const getLastRef = async () => { - let myRef = await parentEpml.request('apiCall', { - type: 'api', - url: `/addresses/lastreference/${this.selectedAddress.address}` - }) - return myRef - }; - - const validateReceiver = async () => { - let lastRef = await getLastRef(); - let myTransaction = await makeTransactionRequest(lastRef) - getTxnRequestResponse(myTransaction) - - } - - // Make Transaction Request - const makeTransactionRequest = async (lastRef) => { - let groupdialog3 = get("transactions.groupdialog3") - let groupdialog4 = get("transactions.groupdialog4") - let myTxnrequest = await parentEpml.request('transaction', { - type: 25, - nonce: this.selectedAddress.nonce, - params: { - _groupId: groupId, - fee: leaveFeeInput, - member: this.selectedHead.address, - lastReference: lastRef - } - }) - return myTxnrequest - } - - const getTxnRequestResponse = (txnResponse) => { - - if (txnResponse.success === false && txnResponse.message) { - this.error = true - this.message = txnResponse.message - throw new Error(txnResponse) - } else if (txnResponse.success === true && !txnResponse.data.error) { - this.message = this.renderErr9Text() - this.error = false - this.confirmRelationship() - } else { - this.error = true - this.message = txnResponse.data.message - throw new Error(txnResponse) - } - } - validateReceiver() - } - elementObserver() { const options = { root: this.viewElement, @@ -530,42 +261,27 @@ class ChatRightPanel extends LitElement { // call `observe()` on that MutationObserver instance, // passing it the element to observe, and the options object observer.observe(elementToObserve); - } - observerHandler(entries) { - if (!entries[0].isIntersecting) { - return - } else { - if(this.groupMembers.length < 20){ - return - } - console.log('this.leaveGroupObjp', this.leaveGroupObj) - this.getMoreMembers(this.leaveGroupObj.groupId) - } - } - - getApiKey() { - const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]; - let apiKey = myNode.apiKey; - return apiKey; } - async fetchWalletDetails() { - parentEpml.request('apiCall', { - url: `/addresses/balance/${this.myAddress}?apiKey=${this.getApiKey()}`, - }) - .then((res) => { - if (isNaN(Number(res))) { - let snack4string = get("grouppage.gchange60") - parentEpml.request('showSnackBar', `${snack4string}`) - } else { - this.walletBalance = Number(res).toFixed(8); + observerHandler(entries) { + if (!entries[0].isIntersecting) { + return + } else { + if(this.groupMembers.length < 20){ + return } - }) + console.log('this.leaveGroupObjp', this.leaveGroupObj) + this.getMoreMembers(this.leaveGroupObj.groupId) + } + } + + setOpenTipUser(props) { + this.openTipUser = props } render() { console.log('this.groupMembers', this.groupMembers); - console.log(20, "Chat Right Panel Here"); + console.log(28, "Chat Right Panel Here"); const owner = this.groupAdmin.filter((admin)=> admin.address === this.leaveGroupObj.owner) return html`
@@ -626,7 +342,9 @@ class ChatRightPanel extends LitElement { { if (this.isLoading) return - this.openUserInfo = false + this.openUserInfo = false; + this.userName = ""; + this.shadowRoot.querySelector("tip-user").shadowRoot.getElementById('amountInput').value = ""; }} style=${ this.openUserInfo ? "display: block" : "display: none" @@ -691,14 +409,13 @@ class ChatRightPanel extends LitElement { this.chatEditor.enable(); }} style=${this.openTipUser ? "display: block" : "display: none"}> -
- -

${translate("grouppage.gchange55")} ${this.userName}

-
-
-

${translate("grouppage.gchange59")}: ${this.walletBalance} QORT

- -
+ this.setOpenTipUser(val)} + > +
diff --git a/qortal-ui-plugins/plugins/core/components/TipUser-css.js b/qortal-ui-plugins/plugins/core/components/TipUser-css.js new file mode 100644 index 00000000..db6727b9 --- /dev/null +++ b/qortal-ui-plugins/plugins/core/components/TipUser-css.js @@ -0,0 +1,85 @@ +import { css } from 'lit' + +export const tipUserStyles = css` + .tip-user-header { + display: flex; + justify-content: center; + align-items: center; + padding: 12px; + border-bottom: 1px solid whitesmoke; + gap: 25px; + user-select: none; + } + + .tip-user-header-font { + font-family: Montserrat, sans-serif; + font-size: 20px; + color: var(--chat-bubble-msg-color); + margin: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .tip-user-body { + display: flex; + justify-content: center; + align-items: center; + padding: 20px 10px; + flex-direction: column; + gap: 25px; + } + + .tip-input { + width: 300px; + margin-bottom: 15px; + outline: 0; + border-width: 0 0 2px; + border-color: var(--mdc-theme-primary); + background-color: transparent; + padding: 10px; + font-family: Roboto, sans-serif; + font-size: 15px; + color: var(--chat-bubble-msg-color); + } + + .tip-input::selection { + background-color: var(--mdc-theme-primary); + color: white; + } + + .tip-input::placeholder { + opacity: 0.9; + color: var(--black); + } + + .tip-available { + font-family: Roboto, sans-serif; + font-size: 17px; + color: var(--chat-bubble-msg-color); + font-weight: 300; + letter-spacing: 0.3px; + margin: 0; + user-select: none; + } + + .success-msg { + font-family: Roboto, sans-serif; + font-size: 18px; + font-weight: 400; + letter-spacing: 0.3px; + margin: 0; + user-select: none; + color: #10880b; + } + + .error-msg { + font-family: Roboto, sans-serif; + font-size: 18px; + font-weight: 400; + letter-spacing: 0.3px; + margin: 0; + user-select: none; + color: #f30000; + } +` \ No newline at end of file diff --git a/qortal-ui-plugins/plugins/core/components/TipUser.js b/qortal-ui-plugins/plugins/core/components/TipUser.js new file mode 100644 index 00000000..c0be137f --- /dev/null +++ b/qortal-ui-plugins/plugins/core/components/TipUser.js @@ -0,0 +1,282 @@ +import { LitElement, html } from 'lit'; +import { render } from 'lit/html.js'; +import { get, translate } from 'lit-translate'; +import { tipUserStyles } from './TipUser-css.js'; +import { Epml } from '../../../epml'; +import '@vaadin/button'; +import '@polymer/paper-progress/paper-progress.js'; + +const parentEpml = new Epml({ type: "WINDOW", source: window.parent }); + +export class TipUser extends LitElement { + static get properties() { + return { + userName: { type: String }, + chatEditor: { type: Object }, + walletBalance: { type: Number }, + sendMoneyLoading: { type: Boolean }, + openUserInfo: { type: Boolean }, + btnDisable: { type: Boolean }, + errorMessage: { type: String }, + successMessage: { type: String }, + setOpenTipUser: { attribute: false } + } + } + + constructor() { + super() + this.sendMoneyLoading = false + this.btnDisable = false + this.errorMessage = "" + this.successMessage = "" + this.myAddress = window.parent.reduxStore.getState().app.selectedAddress + } + + static styles = [tipUserStyles] + + async firstUpdated() { + await this.fetchWalletDetails(); + } + + updated(changedProperties) { + if (changedProperties && changedProperties.has("openUserInfo")) { + if (this.openUserInfo) { + this.shadowRoot.getElementById("amountInput").value = ""; + this.errorMessage = ""; + this.successMessage = ""; + } + } + } + + async getLastRef() { + let myRef = await parentEpml.request("apiCall", { + type: "api", + url: `/addresses/lastreference/${this.myAddress.address}`, + }) + return myRef; + } + + renderSuccessText() { + return html`${translate("grouppage.gchange67")}` + } + + renderReceiverText() { + return html`${translate("grouppage.gchange66")}` + } + + getApiKey() { + const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]; + let apiKey = myNode.apiKey; + return apiKey; + } + + async fetchWalletDetails() { + await parentEpml.request('apiCall', { + url: `/addresses/balance/${this.myAddress.address}?apiKey=${this.getApiKey()}`, + }) + .then((res) => { + if (isNaN(Number(res))) { + let snack4string = get("grouppage.gchange60") + parentEpml.request('showSnackBar', `${snack4string}`) + } else { + this.walletBalance = Number(res).toFixed(8); + } + }) + } + + async sendQort() { + const amount = this.shadowRoot.getElementById("amountInput").value; + let recipient = this.userName; + this.sendMoneyLoading = true; + this.btnDisable = true; + + if (parseFloat(amount) + parseFloat(0.001) > parseFloat(this.walletBalance)) { + this.sendMoneyLoading = false; + this.btnDisable = false; + let snack1string = get("grouppage.gchange63"); + parentEpml.request('showSnackBar', `${snack1string}`); + return false; + } + + if (parseFloat(amount) <= 0) { + this.sendMoneyLoading = false; + this.btnDisable = false; + let snack2string = get("grouppage.gchange64"); + parentEpml.request('showSnackBar', `${snack2string}`); + return false; + } + + if (recipient.length === 0) { + this.sendMoneyLoading = false; + this.btnDisable = false; + let snack3string = get("grouppage.gchange65"); + parentEpml.request('showSnackBar', `${snack3string}`); + return false; + } + + const validateName = async (receiverName) => { + let myRes; + let myNameRes = await parentEpml.request('apiCall', { + type: 'api', + url: `/names/${receiverName}`, + }) + + if (myNameRes.error === 401) { + myRes = false; + } else { + myRes = myNameRes; + } + return myRes; + } + + const validateAddress = async (receiverAddress) => { + let myAddress = await window.parent.validateAddress(receiverAddress); + return myAddress; + } + + const validateReceiver = async (recipient) => { + let lastRef = await this.getLastRef(); + let isAddress; + + try { + isAddress = await validateAddress(recipient); + } catch (err) { + isAddress = false; + } + + if (isAddress) { + let myTransaction = await makeTransactionRequest(recipient, lastRef); + getTxnRequestResponse(myTransaction); + } else { + let myNameRes = await validateName(recipient); + if (myNameRes !== false) { + let myNameAddress = myNameRes.owner + let myTransaction = await makeTransactionRequest(myNameAddress, lastRef) + getTxnRequestResponse(myTransaction) + } else { + console.error(this.renderReceiverText()) + this.errorMessage = this.renderReceiverText(); + this.sendMoneyLoading = false; + this.btnDisable = false; + } + } + } + + const getName = async (recipient)=> { + try { + const getNames = await parentEpml.request("apiCall", { + type: "api", + url: `/names/address/${recipient}`, + }); + + if (getNames?.length > 0 ) { + return getNames[0].name; + } else { + return ''; + } + } catch (error) { + return ""; + } + } + + const makeTransactionRequest = async (receiver, lastRef) => { + let myReceiver = receiver; + let mylastRef = lastRef; + let dialogamount = get("transactions.amount"); + let dialogAddress = get("login.address"); + let dialogName = get("login.name"); + let dialogto = get("transactions.to"); + let recipientName = await getName(myReceiver); + let myTxnrequest = await parentEpml.request('transaction', { + type: 2, + nonce: this.myAddress.nonce, + params: { + recipient: myReceiver, + recipientName: recipientName, + amount: amount, + lastReference: mylastRef, + fee: 0.001, + dialogamount: dialogamount, + dialogto: dialogto, + dialogAddress, + dialogName + }, + }) + return myTxnrequest; + } + + const getTxnRequestResponse = (txnResponse) => { + if (txnResponse.success === false && txnResponse.message) { + this.errorMessage = txnResponse.message; + this.sendMoneyLoading = false; + this.btnDisable = false; + throw new Error(txnResponse); + } else if (txnResponse.success === true && !txnResponse.data.error) { + this.shadowRoot.getElementById('amountInput').value = ''; + this.userName = ''; + this.errorMessage = ''; + this.successMessage = this.renderSuccessText(); + this.sendMoneyLoading = false; + this.btnDisable = false; + setTimeout(() => { + this.setOpenTipUser(false); + this.chatEditor.enable(); + this.successMessage = ""; + }, 3000); + } else { + this.errorMessage = txnResponse.data.message; + this.sendMoneyLoading = false; + this.btnDisable = false; + throw new Error(txnResponse); + } + } + validateReceiver(recipient); + } + + render() { + console.log(5, "Tip User Here"); + console.log(this.openUserInfo, "openUserInfo here"); + return html` +
+ +

${translate("grouppage.gchange55")} ${this.userName}

+
+
+

${translate("grouppage.gchange59")}: ${this.walletBalance} QORT

+ +

${translate("grouppage.gchange61")}: 0.001 QORT

+ ${this.sendMoneyLoading ? + html` + + ` + : html` +
+ this.sendQort()}> + + ${translate("grouppage.gchange62")} QORT + +
+ `} + + ${this.successMessage ? + html` +

+ ${this.successMessage} +

+ ` + : this.errorMessage ? + html` +

+ ${this.errorMessage} +

+ ` + : null} +
+ `; + } +} +customElements.define('tip-user', TipUser); diff --git a/qortal-ui-plugins/plugins/utils/getUserNameFromAddress.js b/qortal-ui-plugins/plugins/utils/getUserNameFromAddress.js index f8f02a53..1d8bf688 100644 --- a/qortal-ui-plugins/plugins/utils/getUserNameFromAddress.js +++ b/qortal-ui-plugins/plugins/utils/getUserNameFromAddress.js @@ -13,7 +13,7 @@ export const getUserNameFromAddress = async (address) => { if (Array.isArray(getNames) && getNames.length > 0 ) { return getNames[0].name; } else { - return cropAddress(address); + return address; } } catch (error) { console.error(error); From 238ee3f3f1eb451f8f392c751d47a2c21e171c8e Mon Sep 17 00:00:00 2001 From: Justin Ferrari <‘justinwesleyferrari@gmail.com’> Date: Fri, 6 Jan 2023 17:22:19 -0500 Subject: [PATCH 4/7] Made Tip User Reusable --- qortal-ui-core/language/us.json | 3 +- .../plugins/core/components/ChatPage.js | 8 +-- .../plugins/core/components/ChatRightPanel.js | 2 +- .../plugins/core/components/ChatScroller.js | 70 +++++++++++++++++-- .../plugins/core/components/TipUser.js | 13 ++-- 5 files changed, 76 insertions(+), 20 deletions(-) diff --git a/qortal-ui-core/language/us.json b/qortal-ui-core/language/us.json index d9efaade..a35ec919 100644 --- a/qortal-ui-core/language/us.json +++ b/qortal-ui-core/language/us.json @@ -587,7 +587,8 @@ "bcchange14": "Forward", "bcchange15": "Message Forwarded", "bcchange16": "Choose Recipient or Search for One Below", - "bcchange17": "FORWARDED" + "bcchange17": "FORWARDED", + "bcchange18": "Tip User" }, "grouppage": { "gchange1": "Qortal Groups", diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index 6fd8e544..97ff9f15 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -1462,12 +1462,10 @@ class ChatPage extends LitElement { async updated(changedProperties) { if (changedProperties && changedProperties.has('userLanguage')) { const userLang = changedProperties.get('userLanguage') - - if(userLang){ + if (userLang) { await new Promise(r => setTimeout(r, 100)); this.chatEditorPlaceholder = this.isReceipient === true ? `Message ${this._chatId}` : `${get("chatpage.cchange8")}`; - } - + } } if (changedProperties && changedProperties.has('chatId') && changedProperties.get('chatId')) { @@ -1479,7 +1477,6 @@ class ChatPage extends LitElement { this.chatEditor.disable(); } } - } async getName (recipient) { @@ -1533,6 +1530,7 @@ async getName (recipient) { chatId=${this.chatId} .messages=${this.messagesRendered} .escapeHTML=${escape} + .chatEditor=${this.chatEditor} .getOldMessage=${this.getOldMessage} .setRepliedToMessageObj=${(val) => this.setRepliedToMessageObj(val)} .setEditedMessageObj=${(val) => this.setEditedMessageObj(val)} diff --git a/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js b/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js index 4dbe8cb7..ef94570e 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js +++ b/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js @@ -410,7 +410,7 @@ class ChatRightPanel extends LitElement { }} style=${this.openTipUser ? "display: block" : "display: none"}> this.setOpenTipUser(val)} diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index 23d5d191..5d72946b 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -8,6 +8,8 @@ import { Epml } from "../../../epml"; import './LevelFounder.js'; import './NameMenu.js'; import './ChatModals.js'; +import './WrapperModal'; +import './TipUser' import '@vaadin/icons'; import '@vaadin/icon'; import '@material/mwc-button'; @@ -36,8 +38,11 @@ class ChatScroller extends LitElement { isLoadingMessages: { type: Boolean}, setIsLoadingMessages: {attribute: false}, chatId: { type: String }, + chatEditor: { type: Object }, setForwardProperties: { attribute: false }, setOpenPrivateMessage: { attribute: false }, + openTipUser: { type: Boolean }, + userName: { type: String } } } @@ -48,12 +53,17 @@ class ChatScroller extends LitElement { this.messages = [] this._upObserverhandler = this._upObserverhandler.bind(this) this._downObserverHandler = this._downObserverHandler.bind(this) + this.setOpenTipUser = this.setOpenTipUser.bind(this) + this.setUserName = this.setUserName.bind(this) this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address this.hideMessages = JSON.parse(localStorage.getItem("MessageBlockedAddresses") || "[]") + this.openTipUser = false; + this.userName = ""; } - render() { + console.log(6, "chat scroller here"); + console.log(this.openTipUser, "openTipUser here"); let formattedMessages = this.messages.reduce((messageArray, message, index) => { const lastGroupedMessage = messageArray[messageArray.length - 1]; let timestamp; @@ -117,12 +127,27 @@ class ChatScroller extends LitElement { .setToggledMessage=${this.setToggledMessage} .setForwardProperties=${this.setForwardProperties} .setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)} - > + .setOpenTipUser=${(val) => this.setOpenTipUser(val)} + .setUserName=${(val) => this.setUserName(val)}> ` ) })}
+ { + this.openTipUser = false; + this.chatEditor.enable(); + }} + style=${this.openTipUser ? "display: block;" : "display: none;"}> + this.setOpenTipUser(val)}> + + ` } @@ -133,6 +158,9 @@ class ChatScroller extends LitElement { if(changedProperties.has('chatId') && changedProperties.get('chatId')){ return true } + if(changedProperties.has('openTipUser')){ + return true + } // Only update element if prop1 changed. return changedProperties.has('messages'); } @@ -148,6 +176,15 @@ class ChatScroller extends LitElement { toggledMessage = message; } + setOpenTipUser(props) { + this.openTipUser = props; + this.chatEditor.disable(); + } + + setUserName(props) { + this.userName = props; + } + async firstUpdated() { this.emojiPicker.on('emoji', selection => { @@ -240,10 +277,12 @@ class MessageTemplate extends LitElement { isFirstMessage: { type: Boolean }, isSingleMessageInGroup: { type: Boolean }, isLastMessageInGroup: { type: Boolean }, - setToggledMessage: {attribute: false}, - setForwardProperties: {attribute: false}, - viewImage: {type: Boolean}, - setOpenPrivateMessage : { attribute: false } + setToggledMessage: { attribute: false }, + setForwardProperties: { attribute: false }, + viewImage: { type: Boolean }, + setOpenPrivateMessage : { attribute: false }, + setOpenTipUser: { attribute: false }, + setUserName: { attribute: false } } } @@ -538,6 +577,8 @@ class MessageTemplate extends LitElement { .setForwardProperties=${this.setForwardProperties} ?firstMessageInChat=${this.messageObj.firstMessageInChat} .setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)} + .setOpenTipUser=${(val) => this.setOpenTipUser(val)} + .setUserName=${(val) => this.setUserName(val)} > @@ -643,7 +684,9 @@ class ChatMenu extends LitElement { sendMessageForward: { attribute: false }, setForwardProperties: { attribute: false }, firstMessageInChat: { type: Boolean }, - setOpenPrivateMessage: { attribute: false } + setOpenPrivateMessage: { attribute: false }, + setOpenTipUser: { attribute: false }, + setUserName: { attribute: false }, } } @@ -789,6 +832,19 @@ class ChatMenu extends LitElement { ` ) : html`
`} + ${this.myAddress !== this.originalMessage.sender ? ( + html` +
{ + this.setOpenTipUser(true); + this.setUserName(this.originalMessage.sender); + }}> + +
+ ` + ) : html`
`}
diff --git a/qortal-ui-plugins/plugins/core/components/TipUser.js b/qortal-ui-plugins/plugins/core/components/TipUser.js index 6bc0ffbb..ac389a94 100644 --- a/qortal-ui-plugins/plugins/core/components/TipUser.js +++ b/qortal-ui-plugins/plugins/core/components/TipUser.js @@ -15,11 +15,12 @@ export class TipUser extends LitElement { chatEditor: { type: Object }, walletBalance: { type: Number }, sendMoneyLoading: { type: Boolean }, - openUserInfo: { type: Boolean }, + closeTipUser: { type: Boolean }, btnDisable: { type: Boolean }, errorMessage: { type: String }, successMessage: { type: String }, - setOpenTipUser: { attribute: false } + setOpenTipUser: { attribute: false }, + focusChatEditor: { attribute: false } } } @@ -39,8 +40,8 @@ export class TipUser extends LitElement { } updated(changedProperties) { - if (changedProperties && changedProperties.has("openUserInfo")) { - if (this.openUserInfo) { + if (changedProperties && changedProperties.has("closeTipUser")) { + if (this.closeTipUser) { this.shadowRoot.getElementById("amountInput").value = ""; this.errorMessage = ""; this.successMessage = ""; @@ -221,6 +222,7 @@ export class TipUser extends LitElement { setTimeout(() => { this.setOpenTipUser(false); this.chatEditor.enable(); + this.focusChatEditor(); this.successMessage = ""; }, 3000); } else { @@ -234,8 +236,7 @@ export class TipUser extends LitElement { } render() { - console.log(5, "Tip User Here"); - console.log(this.openUserInfo, "openUserInfo here"); + console.log(7, "Tip User Here"); return html`
From f19c6ce6734d5e4c048ba9b6c77a2658f357c494 Mon Sep 17 00:00:00 2001 From: Justin Ferrari <‘justinwesleyferrari@gmail.com’> Date: Sat, 7 Jan 2023 18:16:51 -0500 Subject: [PATCH 5/7] Fixed Avatar Bug + Fixed User Info Translations --- qortal-ui-core/language/us.json | 5 +- .../plugins/core/components/ChatRightPanel.js | 8 +- .../plugins/core/components/ChatScroller.js | 16 ++-- .../core/components/ChatSideNavHeads.js | 75 ++++++++++++++----- .../plugins/core/components/TipUser.js | 1 - .../plugins/core/components/UserInfo.js | 0 6 files changed, 72 insertions(+), 33 deletions(-) create mode 100644 qortal-ui-plugins/plugins/core/components/UserInfo.js diff --git a/qortal-ui-core/language/us.json b/qortal-ui-core/language/us.json index a35ec919..c7d90de2 100644 --- a/qortal-ui-core/language/us.json +++ b/qortal-ui-core/language/us.json @@ -557,7 +557,10 @@ "cchange53": "Receiver cannot be empty!", "cchange54": "Invalid Receiver!", "cchange55": "Transaction Successful!", - "cchange56": "Transaction Failed!" + "cchange56": "Transaction Failed!", + "cchange57": "User Info", + "cchange58": "SEND MESSAGE", + "cchange59": "TIP USER" }, "welcomepage": { "wcchange1": "Welcome to Q-Chat", diff --git a/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js b/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js index ef94570e..ec38a6fd 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js +++ b/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js @@ -280,8 +280,6 @@ class ChatRightPanel extends LitElement { } render() { - console.log('this.groupMembers', this.groupMembers); - console.log(28, "Chat Right Panel Here"); const owner = this.groupAdmin.filter((admin)=> admin.address === this.leaveGroupObj.owner) return html`
@@ -360,7 +358,7 @@ class ChatRightPanel extends LitElement { ?disabled="${this.isLoading}">
- ${translate("grouppage.gchange56")} + ${translate("chatpage.cchange58")}
- ${translate("grouppage.gchange57")} + ${translate("chatpage.cchange59")}
diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index 5d72946b..5c0a7954 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -28,15 +28,15 @@ class ChatScroller extends LitElement { escapeHTML: { attribute: false }, messages: { type: Array }, hideMessages: { type: Array }, - setRepliedToMessageObj: {attribute: false}, - setEditedMessageObj: {attribute: false}, - focusChatEditor: {attribute: false}, - sendMessage: {attribute: false}, - sendMessageForward: {attribute: false}, - showLastMessageRefScroller: { type: Function }, + setRepliedToMessageObj: { attribute: false }, + setEditedMessageObj: { attribute: false }, + focusChatEditor: { attribute: false }, + sendMessage: { attribute: false }, + sendMessageForward: { attribute: false }, + showLastMessageRefScroller: { attribute: false }, emojiPicker: { attribute: false }, isLoadingMessages: { type: Boolean}, - setIsLoadingMessages: {attribute: false}, + setIsLoadingMessages: { attribute: false }, chatId: { type: String }, chatEditor: { type: Object }, setForwardProperties: { attribute: false }, @@ -62,8 +62,6 @@ class ChatScroller extends LitElement { } render() { - console.log(6, "chat scroller here"); - console.log(this.openTipUser, "openTipUser here"); let formattedMessages = this.messages.reduce((messageArray, message, index) => { const lastGroupedMessage = messageArray[messageArray.length - 1]; let timestamp; diff --git a/qortal-ui-plugins/plugins/core/components/ChatSideNavHeads.js b/qortal-ui-plugins/plugins/core/components/ChatSideNavHeads.js index daa9e478..220aeb79 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatSideNavHeads.js +++ b/qortal-ui-plugins/plugins/core/components/ChatSideNavHeads.js @@ -93,6 +93,7 @@ class ChatSideNavHeads extends LitElement { } imageHTMLRes.onload = () => { this.isImageLoaded = true; + this.requestUpdate(); } imageHTMLRes.onerror = () => { if (this.imageFetches < 4) { @@ -101,36 +102,67 @@ class ChatSideNavHeads extends LitElement { imageHTMLRes.src = imageUrl; }, 500); } else { - - - this.isImageLoaded = false + this.isImageLoaded = false } }; + console.log(imageHTMLRes, "here8") return imageHTMLRes; } render() { - let avatarImg = ''; - let backupAvatarImg = '' - if(this.chatInfo.name){ + console.log(9, 'chat side nav head'); + console.log(this.isImageLoaded, 'Is image loaded'); + console.log(this.chatInfo, 'Chat Info Here'); + let avatarImg = "" + if (this.chatInfo.name) { 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/${this.chatInfo.name}/qortal_avatar?async=true&apiKey=${myNode.apiKey}`; - avatarImg= this.createImage(avatarUrl) - + avatarImg = this.createImage(avatarUrl) } return html`
  • this.getUrl(this.chatInfo)} class="clearfix"> - ${this.isImageLoaded ? html`${avatarImg}` : html`` } - ${!this.isImageLoaded && !this.chatInfo.name && !this.chatInfo.groupName ? html`account_circle` : html`` } - ${!this.isImageLoaded && this.chatInfo.name ? html`
    ${this.chatInfo.name.charAt(0)}
    `: ''} - ${!this.isImageLoaded && this.chatInfo.groupName ? html`
    ${this.chatInfo.groupName.charAt(0)}
    `: ''} -
    -
    ${this.chatInfo.groupName ? this.chatInfo.groupName : this.chatInfo.name !== undefined ? this.chatInfo.name : this.chatInfo.address.substr(0, 15)}
    -
    -
  • - ` + ${this.isImageLoaded ? html`${avatarImg}` : html``} + ${!this.isImageLoaded && !this.chatInfo.name && !this.chatInfo.groupName + ? html`account_circle` + : html``} + ${!this.isImageLoaded && this.chatInfo.name + ? html`
    + ${this.chatInfo.name.charAt(0)} +
    ` + : ""} + ${!this.isImageLoaded && this.chatInfo.groupName + ? html`
    + ${this.chatInfo.groupName.charAt(0)} +
    ` + : ""} +
    +
    + + ${this.chatInfo.groupName + ? this.chatInfo.groupName + : this.chatInfo.name !== undefined + ? this.chatInfo.name + : this.chatInfo.address.substr(0, 15)} + +
    +
    + + ` } firstUpdated() { @@ -154,6 +186,12 @@ class ChatSideNavHeads extends LitElement { } + updated(changedProperties) { + if (changedProperties && changedProperties.has("avatarImg")) { + console.log(this.avatarImg, "avatarImg"); + } + } + shouldUpdate(changedProperties) { if(changedProperties.has('activeChatHeadUrl')){ return true @@ -161,6 +199,9 @@ class ChatSideNavHeads extends LitElement { if(changedProperties.has('chatInfo')){ return true } + if(changedProperties.has('isImageLoaded')){ + return true + } return false } diff --git a/qortal-ui-plugins/plugins/core/components/TipUser.js b/qortal-ui-plugins/plugins/core/components/TipUser.js index ac389a94..2beefd48 100644 --- a/qortal-ui-plugins/plugins/core/components/TipUser.js +++ b/qortal-ui-plugins/plugins/core/components/TipUser.js @@ -236,7 +236,6 @@ export class TipUser extends LitElement { } render() { - console.log(7, "Tip User Here"); return html`
    diff --git a/qortal-ui-plugins/plugins/core/components/UserInfo.js b/qortal-ui-plugins/plugins/core/components/UserInfo.js new file mode 100644 index 00000000..e69de29b From 9fec8908c1f7380922c8cdb42d0516ecd522f274 Mon Sep 17 00:00:00 2001 From: Justin Ferrari <‘justinwesleyferrari@gmail.com’> Date: Mon, 9 Jan 2023 19:37:52 -0500 Subject: [PATCH 6/7] Chat User Info Completed --- .../plugins/core/components/ChatRightPanel.js | 116 +++--------------- .../core/components/ChatScroller-css.js | 7 ++ .../plugins/core/components/ChatScroller.js | 80 ++++++++++-- .../core/components/ChatSideNavHeads.js | 15 +-- .../plugins/core/components/UserInfo.js | 0 5 files changed, 94 insertions(+), 124 deletions(-) delete mode 100644 qortal-ui-plugins/plugins/core/components/UserInfo.js diff --git a/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js b/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js index ec38a6fd..fa1734c0 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js +++ b/qortal-ui-plugins/plugins/core/components/ChatRightPanel.js @@ -12,15 +12,14 @@ import "@material/mwc-icon"; import '@vaadin/button'; import "./WrapperModal"; import "./TipUser" +import "./UserInfo/UserInfo"; class ChatRightPanel extends LitElement { static get properties() { return { - isLoading: { type: Boolean }, openUserInfo: { type: Boolean }, leaveGroupObj: { type: Object }, error: { type: Boolean }, - message: { type: String }, chatHeads: { type: Array }, groupAdmin: { attribute: false }, groupMembers: { attribute: false }, @@ -41,12 +40,10 @@ class ChatRightPanel extends LitElement { constructor() { super() - this.isLoading = false this.openUserInfo = false this.leaveGroupObj = {} this.leaveFee = 0.001 this.error = false - this.message = "" this.chatHeads = [] this.groupAdmin = [] this.groupMembers = [] @@ -61,6 +58,7 @@ class ChatRightPanel extends LitElement { this.errorMessage = "" this.successMessage = "" this.setOpenTipUser = this.setOpenTipUser.bind(this); + this.setOpenUserInfo = this.setOpenUserInfo.bind(this); } static get styles() { @@ -190,46 +188,6 @@ class ChatRightPanel extends LitElement { font-size: 14px; color: var(--chat-bubble-msg-color); } - - .user-info-header { - font-family: Montserrat, sans-serif; - text-align: center; - font-size: 25px; - color: var(--chat-bubble-msg-color); - margin-bottom: 10px; - padding: 10px 0; - user-select: none; - } - - .send-message-button { - font-family: Roboto, sans-serif; - letter-spacing: 0.3px; - font-weight: 300; - padding: 8px 5px; - border-radius: 3px; - text-align: center; - color: var(--mdc-theme-primary); - transition: all 0.3s ease-in-out; - } - - .send-message-button:hover { - cursor: pointer; - background-color: #03a8f485; - } - - .close-icon { - position: absolute; - top: 3px; - right: 5px; - color: #676b71; - width: 14px; - transition: all 0.1s ease-in-out; - } - - .close-icon:hover { - cursor: pointer; - color: #494c50; - } ` } @@ -279,6 +237,10 @@ class ChatRightPanel extends LitElement { this.openTipUser = props } + setOpenUserInfo(props) { + this.openUserInfo = props + } + render() { const owner = this.groupAdmin.filter((admin)=> admin.address === this.leaveGroupObj.owner) return html` @@ -291,7 +253,7 @@ class ChatRightPanel extends LitElement {

    ${this.leaveGroupObj && this.leaveGroupObj.description}

    Members: ${this.leaveGroupObj && this.leaveGroupObj.memberCount}

    - +

    Date created : ${new Date(this.leaveGroupObj.created).toLocaleDateString("en-US")}


    @@ -337,9 +299,8 @@ class ChatRightPanel extends LitElement {
    - { - if (this.isLoading) return this.openUserInfo = false; this.userName = ""; this.shadowRoot.querySelector("tip-user").shadowRoot.getElementById('amountInput').value = ""; @@ -347,59 +308,14 @@ class ChatRightPanel extends LitElement { style=${ this.openUserInfo ? "display: block" : "display: none" }> -
    - { - this.openUserInfo = false - }} - ?disabled="${this.isLoading}"> - - -
    - ${translate("chatpage.cchange58")} -
    -
    { - this.openTipUser = true - this.openUserInfo = false - this.chatEditor.disable(); - }}> - ${translate("chatpage.cchange59")} -
    -
    - - - ${translate("grouppage.gchange36")}   - - - - - ${this.message} - -
    -
    + this.setOpenUserInfo(val)} + .setOpenTipUser=${(val) => this.setOpenTipUser(val)} + .setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)} + .chatEditor=${this.chatEditor} + .userName=${this.userName} + .selectedHead=${this.selectedHead} + >
    { diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js index 1d054bab..64b49b45 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js @@ -63,12 +63,19 @@ export const chatStyles = css` margin-bottom: 5px; } + .forwarded-text { + user-select: none; + color: #03a9f4; + margin-bottom: 5px; + } + .message-data-forward { user-select: none; color: var(--mainmenutext); margin-bottom: 5px; font-size: 12px; } + .message-data-my-name { color: #cf21e8; text-shadow: 0 0 3px #cf21e8; diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index 5c0a7954..38903750 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -5,18 +5,19 @@ import { translate, get } from 'lit-translate'; import {unsafeHTML} from 'lit/directives/unsafe-html.js'; import { chatStyles } from './ChatScroller-css.js' import { Epml } from "../../../epml"; +import { EmojiPicker } from 'emoji-picker-js'; +import { cropAddress } from "../../utils/cropAddress"; import './LevelFounder.js'; import './NameMenu.js'; import './ChatModals.js'; import './WrapperModal'; import './TipUser' +import "./UserInfo/UserInfo"; import '@vaadin/icons'; import '@vaadin/icon'; 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 }) let toggledMessage = {} @@ -42,7 +43,9 @@ class ChatScroller extends LitElement { setForwardProperties: { attribute: false }, setOpenPrivateMessage: { attribute: false }, openTipUser: { type: Boolean }, - userName: { type: String } + openUserInfo: { type: Boolean }, + userName: { type: String }, + selectedHead: { type: Object } } } @@ -54,14 +57,17 @@ class ChatScroller extends LitElement { this._upObserverhandler = this._upObserverhandler.bind(this) this._downObserverHandler = this._downObserverHandler.bind(this) this.setOpenTipUser = this.setOpenTipUser.bind(this) + this.setOpenUserInfo = this.setOpenUserInfo.bind(this) this.setUserName = this.setUserName.bind(this) this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address this.hideMessages = JSON.parse(localStorage.getItem("MessageBlockedAddresses") || "[]") this.openTipUser = false; + this.openUserInfo = false; this.userName = ""; } render() { + console.log(9, "chat scroller here"); let formattedMessages = this.messages.reduce((messageArray, message, index) => { const lastGroupedMessage = messageArray[messageArray.length - 1]; let timestamp; @@ -126,6 +132,7 @@ class ChatScroller extends LitElement { .setForwardProperties=${this.setForwardProperties} .setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)} .setOpenTipUser=${(val) => this.setOpenTipUser(val)} + .setOpenUserInfo=${(val) => this.setOpenUserInfo(val)} .setUserName=${(val) => this.setUserName(val)}> ` ) @@ -146,6 +153,25 @@ class ChatScroller extends LitElement { .setOpenTipUser=${(val) => this.setOpenTipUser(val)}> + { + this.openUserInfo = false; + this.chatEditor.enable(); + this.userName = ""; + this.selectedHead = {}; + }} + style=${ + this.openUserInfo ? "display: block" : "display: none" + }> + this.setOpenUserInfo(val)} + .setOpenTipUser=${(val) => this.setOpenTipUser(val)} + .setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)} + .chatEditor=${this.chatEditor} + .userName=${this.userName} + .selectedHead=${this.selectedHead} + > + ` } @@ -159,6 +185,9 @@ class ChatScroller extends LitElement { if(changedProperties.has('openTipUser')){ return true } + if(changedProperties.has('openUserInfo')){ + return true + } // Only update element if prop1 changed. return changedProperties.has('messages'); } @@ -179,8 +208,18 @@ class ChatScroller extends LitElement { this.chatEditor.disable(); } + setOpenUserInfo(props) { + this.openUserInfo = props; + this.chatEditor.disable(); + } + setUserName(props) { - this.userName = props; + this.userName = props.senderName ? props.senderName : props.sender; + this.selectedHead = { + ...this.selectedHead, + address: props.sender, + name: props.senderName, + }; } async firstUpdated() { @@ -280,6 +319,7 @@ class MessageTemplate extends LitElement { viewImage: { type: Boolean }, setOpenPrivateMessage : { attribute: false }, setOpenTipUser: { attribute: false }, + setOpenUserInfo: { attribute: false }, setUserName: { attribute: false } } } @@ -450,7 +490,13 @@ class MessageTemplate extends LitElement { (this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true)) ? ( html` -
    +
    { + if (this.myAddress === this.messageObj.sender) return; + this.setOpenUserInfo(true); + this.setUserName(this.messageObj); + }} class="message-data-avatar"> ${avatarImg}
    ` @@ -477,7 +523,14 @@ class MessageTemplate extends LitElement { ${repliedToData && html`
    -

    - ${repliedToData.senderName ?? cropAddress(repliedToData.sender)} +

    { + if (this.myAddress === repliedToData.sender) return; + this.setOpenUserInfo(true); + this.setUserName(repliedToData) + }} + class="original-message-sender"> + ${repliedToData.senderName ?? cropAddress(repliedToData.sender)}

    ${repliedToData.decodedMessage.messageText} @@ -837,7 +897,7 @@ class ChatMenu extends LitElement { data-text="${translate("blockpage.bcchange18")}" @click=${() => { this.setOpenTipUser(true); - this.setUserName(this.originalMessage.sender); + this.setUserName(this.originalMessage); }}>

    diff --git a/qortal-ui-plugins/plugins/core/components/ChatSideNavHeads.js b/qortal-ui-plugins/plugins/core/components/ChatSideNavHeads.js index 220aeb79..b0798399 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatSideNavHeads.js +++ b/qortal-ui-plugins/plugins/core/components/ChatSideNavHeads.js @@ -93,7 +93,6 @@ class ChatSideNavHeads extends LitElement { } imageHTMLRes.onload = () => { this.isImageLoaded = true; - this.requestUpdate(); } imageHTMLRes.onerror = () => { if (this.imageFetches < 4) { @@ -105,14 +104,10 @@ class ChatSideNavHeads extends LitElement { this.isImageLoaded = false } }; - console.log(imageHTMLRes, "here8") return imageHTMLRes; } render() { - console.log(9, 'chat side nav head'); - console.log(this.isImageLoaded, 'Is image loaded'); - console.log(this.chatInfo, 'Chat Info Here'); let avatarImg = "" if (this.chatInfo.name) { const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]; @@ -181,15 +176,7 @@ class ChatSideNavHeads extends LitElement { this.config = JSON.parse(c) }) }) - parentEpml.imReady() - - - } - - updated(changedProperties) { - if (changedProperties && changedProperties.has("avatarImg")) { - console.log(this.avatarImg, "avatarImg"); - } + parentEpml.imReady(); } shouldUpdate(changedProperties) { diff --git a/qortal-ui-plugins/plugins/core/components/UserInfo.js b/qortal-ui-plugins/plugins/core/components/UserInfo.js deleted file mode 100644 index e69de29b..00000000 From ab8de0dbcdf6853119d70f163d8e4ab35bf5764d Mon Sep 17 00:00:00 2001 From: Justin Ferrari <‘justinwesleyferrari@gmail.com’> Date: Mon, 9 Jan 2023 20:07:48 -0500 Subject: [PATCH 7/7] Added User Info Folder (Fixed .gitignore) --- .gitignore | 2 +- .../core/components/UserInfo/UserInfo-css.js | 69 +++++++++ .../core/components/UserInfo/UserInfo.js | 134 ++++++++++++++++++ 3 files changed, 204 insertions(+), 1 deletion(-) create mode 100644 qortal-ui-plugins/plugins/core/components/UserInfo/UserInfo-css.js create mode 100644 qortal-ui-plugins/plugins/core/components/UserInfo/UserInfo.js diff --git a/.gitignore b/.gitignore index 6cf26473..02e71ef5 100644 --- a/.gitignore +++ b/.gitignore @@ -5,7 +5,7 @@ yarn.lock qortal-ui-plugins/plugins/core/**/*.js !*.src.js qortal-ui-core/src/redux/app/version.js -!qortal-ui-plugins/plugins/core/components/*.js +!qortal-ui-plugins/plugins/core/components/**/*.js # Node modules node_modules/ diff --git a/qortal-ui-plugins/plugins/core/components/UserInfo/UserInfo-css.js b/qortal-ui-plugins/plugins/core/components/UserInfo/UserInfo-css.js new file mode 100644 index 00000000..d22025ca --- /dev/null +++ b/qortal-ui-plugins/plugins/core/components/UserInfo/UserInfo-css.js @@ -0,0 +1,69 @@ +import { css } from 'lit' + +export const userInfoStyles = css` + .user-info-header { + font-family: Montserrat, sans-serif; + text-align: center; + font-size: 28px; + color: var(--chat-bubble-msg-color); + margin-bottom: 10px; + padding: 10px 0; + user-select: none; + } + + .avatar-container { + display: flex; + justify-content: center; + } + + .user-info-avatar { + width: 100px; + height: 100px; + border-radius: 50%; + margin: 10px 0; + } + + .user-info-no-avatar { + display: flex; + justify-content: center; + align-items: center; + text-transform: capitalize; + font-size: 50px; + font-family: Roboto, sans-serif; + width: 100px; + height: 100px; + border-radius:50%; + background: var(--chatHeadBg); + color: var(--chatHeadText); + } + + .send-message-button { + font-family: Roboto, sans-serif; + letter-spacing: 0.3px; + font-weight: 300; + padding: 8px 5px; + border-radius: 3px; + text-align: center; + color: var(--mdc-theme-primary); + transition: all 0.3s ease-in-out; + } + + .send-message-button:hover { + cursor: pointer; + background-color: #03a8f485; + } + + .close-icon { + position: absolute; + top: 3px; + right: 5px; + color: #676b71; + width: 14px; + transition: all 0.1s ease-in-out; + } + + .close-icon:hover { + cursor: pointer; + color: #494c50; + } +` \ No newline at end of file diff --git a/qortal-ui-plugins/plugins/core/components/UserInfo/UserInfo.js b/qortal-ui-plugins/plugins/core/components/UserInfo/UserInfo.js new file mode 100644 index 00000000..c31b4515 --- /dev/null +++ b/qortal-ui-plugins/plugins/core/components/UserInfo/UserInfo.js @@ -0,0 +1,134 @@ +import { LitElement, html } from 'lit'; +import { render } from 'lit/html.js'; +import { translate } from 'lit-translate'; +import { userInfoStyles } from './UserInfo-css.js'; +import { Epml } from '../../../../epml'; +import '@vaadin/button'; +import '@polymer/paper-progress/paper-progress.js'; +import { cropAddress } from '../../../utils/cropAddress.js'; + +// const parentEpml = new Epml({ type: "WINDOW", source: window.parent }); + +export class UserInfo extends LitElement { + static get properties() { + return { + setOpenUserInfo: { attribute: false }, + setOpenTipUser: { attribute: false }, + setOpenPrivateMessage: { attribute: false }, + chatEditor: { type: Object }, + userName: { type: String }, + selectedHead: { type: Object }, + isImageLoaded: { type: Boolean } + } + } + + constructor() { + super() + this.isImageLoaded = false + this.selectedHead = {} + this.imageFetches = 0 +} + + static styles = [userInfoStyles] + + createImage(imageUrl) { + const imageHTMLRes = new Image(); + imageHTMLRes.src = imageUrl; + imageHTMLRes.classList.add("user-info-avatar"); + // imageHTMLRes.style= "width:30px; height:30px; float: left; border-radius:50%; font-size:14px"; + imageHTMLRes.onload = () => { + this.isImageLoaded = true; + } + imageHTMLRes.onerror = () => { + if (this.imageFetches < 4) { + setTimeout(() => { + this.imageFetches = this.imageFetches + 1; + imageHTMLRes.src = imageUrl; + }, 500); + } else { + this.isImageLoaded = false + } + }; + return imageHTMLRes; + } + + updated(changedProperties) { + if (changedProperties && changedProperties.has('selectedHead')) { + if (this.selectedHead) { + console.log(this.selectedHead, "selected head") + } + } + } + + render() { + let avatarImg = ""; + if (this.selectedHead.name) { + 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/${this.selectedHead.name}/qortal_avatar?async=true&apiKey=${myNode.apiKey}`; + avatarImg = this.createImage(avatarUrl); + } + return html` +
    + { + this.setOpenUserInfo(false) + this.chatEditor.enable(); + }}> + + ${this.isImageLoaded ? + html` +
    + ${avatarImg} +
    ` : + html``} + ${!this.isImageLoaded && this.selectedHead.name ? + html` +
    + +
    + ` + : ""} + ${!this.isImageLoaded && !this.selectedHead.name ? + html` +
    + avatar +
    ` + : ""} + +
    + ${translate("chatpage.cchange58")} +
    +
    { + this.setOpenTipUser(true); + this.setOpenUserInfo(false); + this.chatEditor.disable(); + }}> + ${translate("chatpage.cchange59")} +
    +
    + ` + } +} +customElements.define('user-info', UserInfo);