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,137 +47,226 @@ 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 { - cursor: pointer; - height: 18px; - width: 18px; - transition: 0.2s all; - } + 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); - } + .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; - } + .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 + .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 { + 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-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); + .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; - } + background-color: #03a8f485; + } - p { - color: var(--black); - margin: 0px; - padding: 0px; - word-break: break-all; - } + .close-icon { + position: absolute; + top: 3px; + right: 5px; + color: #676b71; + width: 14px; + transition: all 0.1s ease-in-out; + } - .container { - display: flex; - width: 100%; - flex-direction: column; - height: 100%; - } + .close-icon:hover { + cursor: pointer; + color: #494c50; + } - .chat-right-panel-label { - font-family: Montserrat, sans-serif; - color: var(--group-header); - padding: 5px; - font-size: 13px; - user-select: none; - } + .tip-user-header { + display: flex; + justify-content: center; + align-items: center; + padding: 12px; + border-bottom: 1px solid whitesmoke; + gap: 25px; + } - .group-info { - display: flex; - flex-direction: column; - justify-content: flex-start; - gap: 10px; - } + .tip-user-header-font { + font-family: Montserrat, sans-serif; + font-size: 20px; + color: var(--chat-bubble-msg-color); + } - .group-name { - font-family: Raleway, sans-serif; - font-size: 20px; - color: var(--chat-bubble-msg-color); - text-align: center; - user-select: none; - } + .tip-user-body { + display: flex; + justify-content: flex-start; + align-items: center; + padding: 15px 10px; + } - .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; - } + .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); + } - .group-subheader { - font-family: Montserrat, sans-serif; - font-size: 14px; - 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); + } - .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'); @@ -180,6 +274,15 @@ return css` 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