qortal.link/qortal-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Started Tip User

Browse Source
This commit is contained in:
Justin Ferrari 2023-01-03 22:19:13 -05:00
parent 16532f7f43
commit e0c44bef69
5 changed files with 426 additions and 249 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
qortal-ui-core/language/us.json
View File

@ -565,7 +565,7 @@
"gchange32": "Date Updated", "gchange32": "Date Updated",
"gchange33": "Joining", "gchange33": "Joining",
"gchange34": "Join Group", "gchange34": "Join Group",
"gchange35": "Leave Group Request", "gchange35": "User Info",
"gchange36": "Leaving", "gchange36": "Leaving",
"gchange37": "Leave Group", "gchange37": "Leave Group",
"gchange38": "Manage Group Owner:", "gchange38": "Manage Group Owner:",
@ -584,7 +584,12 @@
"gchange51": "Join", "gchange51": "Join",
"gchange52": "Admin", "gchange52": "Admin",
"gchange53": "Member", "gchange53": "Member",
"gchange54": "Members" "gchange54": "Members",
"gchange55": "Tip QORT to",
"gchange56": "SEND MESSAGE",
"gchange57": "TIP USER",
"gchange58": "Tip Amount",
"gchange59": "Available Balance"
}, },
"puzzlepage": { "puzzlepage": {
"pchange1": "Puzzles", "pchange1": "Puzzles",

32
qortal-ui-core/src/components/app-view.js
View File

@ -44,7 +44,6 @@ class AppView extends connect(store)(LitElement) {
app-drawer { app-drawer {
box-shadow: var(--shadow-2); box-shadow: var(--shadow-2);
background: var(--sidetopbar);
} }
app-header { app-header {
@ -66,25 +65,32 @@ class AppView extends connect(store)(LitElement) {
background: var(--sidetopbar); background: var(--sidetopbar);
} }
.sideBarMenu{ .sideBarMenu {
overflow-y: auto; overflow-y: auto;
flex: 1 1; flex: 1 1;
} }
#sideBar::-webkit-scrollbar { .sideBarMenu::-webkit-scrollbar-track {
width: 7px; background-color: whitesmoke;
background-color: transparent; border-radius: 7px;
} }
#sideBar::-webkit-scrollbar-track { .sideBarMenu::-webkit-scrollbar {
background-color: transparent; width: 6px;
border-radius: 7px;
background-color: whitesmoke;
} }
#sideBar::-webkit-scrollbar-thumb { .sideBarMenu::-webkit-scrollbar-thumb {
background-color: #333; background-color: rgb(180, 176, 176);
border-radius: 6px; border-radius: 7px;
border: 3px solid #333; transition: all 0.3s ease-in-out;
} }
.sideBarMenu::-webkit-scrollbar-thumb:hover {
background-color: rgb(148, 146, 146);
cursor: pointer;
}
` `
] ]
} }

48
qortal-ui-plugins/plugins/core/components/ChatPage.js
View File

@ -105,6 +105,7 @@ class ChatPage extends LitElement {
flex-direction: column; flex-direction: column;
height: 50vh; height: 50vh;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden;
width: 100%; width: 100%;
} }
@ -287,7 +288,6 @@ class ChatPage extends LitElement {
.chat-container { .chat-container {
display: grid; display: grid;
grid-template-rows: minmax(6%, 92vh) minmax(40px, auto);
max-height: 100%; max-height: 100%;
} }
@ -575,13 +575,6 @@ class ChatPage extends LitElement {
object-fit: contain; 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 { .chat-right-panel {
flex: 0; flex: 0;
border-left: 3px solid rgb(221, 221, 221); border-left: 3px solid rgb(221, 221, 221);
@ -845,21 +838,24 @@ class ChatPage extends LitElement {
render() { render() {
return html` return html`
<div class="main-container"> <div class="main-container">
<div class="chat-container"> <div
${(!this.isReceipient && +this._chatId !== 0) ? html` class="chat-container"
style=${(!this.isReceipient && +this._chatId !== 0) ? "grid-template-rows: minmax(40px, auto) minmax(6%, 92vh) minmax(40px, auto); flex: 3;" : "grid-template-rows: minmax(6%, 92vh) minmax(40px, auto); flex: 2;"}>
${(!this.isReceipient && +this._chatId !== 0) ?
html`
<div class="group-nav-container"> <div class="group-nav-container">
<div @click=${this._toggle} style="height: 100%;display: flex;align-items: center;flex-grow: 1;cursor: pointer;cursor:pointer;user-select:none"> <div @click=${this._toggle} style="height: 100%; display: flex; align-items: center;flex-grow: 1; cursor: pointer; cursor: pointer; user-select: none">
<p class="group-name">${this.groupInfo && this.groupInfo.groupName}</p> <p class="group-name">${this.groupInfo && this.groupInfo.groupName}</p>
</div> </div>
<div style="display:flex;height:100%;align-items:center"> <div style="display: flex; height: 100%; align-items: center">
<vaadin-icon class="top-bar-icon" @click=${this._toggle} style="margin: 0px 10px" icon="vaadin:info" slot="icon"></vaadin-icon> <vaadin-icon class="top-bar-icon" @click=${this._toggle} style="margin: 0px 10px" icon="vaadin:info" slot="icon"></vaadin-icon>
<!-- <chat-group-settings .chatHeads=${this.chatHeads} .selectedAddress=${this.selectedAddress} .leaveGroupObj=${this.groupInfo} .setActiveChatHeadUrl=${(val)=> this.setActiveChatHeadUrl(val)}></chat-group-settings> --> <!-- <chat-group-settings .chatHeads=${this.chatHeads} .selectedAddress=${this.selectedAddress} .leaveGroupObj=${this.groupInfo} .setActiveChatHeadUrl=${(val)=> this.setActiveChatHeadUrl(val)}></chat-group-settings> -->
<!-- <vaadin-icon class="top-bar-icon" style="margin: 0px 20px" icon="vaadin:search" slot="icon"></vaadin-icon> --> <!-- <vaadin-icon class="top-bar-icon" style="margin: 0px 20px" icon="vaadin:search" slot="icon"></vaadin-icon> -->
<!-- <vaadin-icon class="top-bar-icon" style="margin: 0px 20px" icon="vaadin:exit" slot="icon"></vaadin-icon> --> <!-- <vaadin-icon class="top-bar-icon" style="margin: 0px 20px" icon="vaadin:exit" slot="icon"></vaadin-icon> -->
<!-- <chat-leave-group .chatHeads=${this.chatHeads} .selectedAddress=${this.selectedAddress} .leaveGroupObj=${this.groupInfo} .setActiveChatHeadUrl=${(val)=> this.setActiveChatHeadUrl(val)}></chat-leave-group> --> <!-- <chat-leave-group .chatHeads=${this.chatHeads} .selectedAddress=${this.selectedAddress} .leaveGroupObj=${this.groupInfo} .setActiveChatHeadUrl=${(val)=> this.setActiveChatHeadUrl(val)}></chat-leave-group> -->
</div> </div>
</div> </div>
` : html`<div></div>`} ` : null}
<div> <div>
${this.isLoadingMessages ? ${this.isLoadingMessages ?
@ -1145,7 +1141,17 @@ class ChatPage extends LitElement {
</wrapper-modal> </wrapper-modal>
</div> </div>
<div class="chat-right-panel ${this.shifted ? "movedin" : "movedout"}" ${animate()}> <div class="chat-right-panel ${this.shifted ? "movedin" : "movedout"}" ${animate()}>
<chat-right-panel .getMoreMembers=${(val)=> this.getMoreMembers(val)} .toggle=${(val)=> this._toggle(val)} .selectedAddress=${this.selectedAddress} .groupMembers=${this.groupMembers} .groupAdmin=${this.groupAdmin} .leaveGroupObj=${this.groupInfo}></chat-right-panel> <chat-right-panel
.getMoreMembers=${(val)=> 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}
>
</chat-right-panel>
</div> </div>
</div> </div>

566
qortal-ui-plugins/plugins/core/components/ChatRightPanel.js
View File

@ -2,6 +2,7 @@ import { LitElement, html, css } from "lit"
import { render } from "lit/html.js" import { render } from "lit/html.js"
import { get, translate } from "lit-translate" import { get, translate } from "lit-translate"
import { Epml } from "../../../epml" import { Epml } from "../../../epml"
import { getUserNameFromAddress } from "../../utils/getUserNameFromAddress"
import snackbar from "./snackbar.js" import snackbar from "./snackbar.js"
import "@material/mwc-button" import "@material/mwc-button"
import "@material/mwc-dialog" import "@material/mwc-dialog"
@ -15,7 +16,7 @@ class ChatRightPanel extends LitElement {
static get properties() { static get properties() {
return { return {
isLoading: { type: Boolean }, isLoading: { type: Boolean },
isOpenLeaveModal: { type: Boolean }, openUserInfo: { type: Boolean },
leaveGroupObj: { type: Object }, leaveGroupObj: { type: Object },
error: { type: Boolean }, error: { type: Boolean },
message: { type: String }, message: { type: String },
@ -24,14 +25,18 @@ class ChatRightPanel extends LitElement {
groupMembers: { attribute: false }, groupMembers: { attribute: false },
selectedHead: { type: Object }, selectedHead: { type: Object },
toggle: { attribute: false }, toggle: { attribute: false },
getMoreMembers:{ attribute: false } getMoreMembers:{ attribute: false },
setOpenPrivateMessage: { attribute: false },
openTipUser: { type: Boolean },
userName: { type: String },
chatEditor: { type: Object }
} }
} }
constructor() { constructor() {
super() super()
this.isLoading = false this.isLoading = false
this.isOpenLeaveModal = false this.openUserInfo = false
this.leaveGroupObj = {} this.leaveGroupObj = {}
this.leaveFee = 0.001 this.leaveFee = 0.001
this.error = false this.error = false
@ -42,144 +47,242 @@ class ChatRightPanel extends LitElement {
this.observerHandler = this.observerHandler.bind(this) this.observerHandler = this.observerHandler.bind(this)
this.viewElement = '' this.viewElement = ''
this.downObserverElement = '' this.downObserverElement = ''
this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address
this.openTipUser = false
this.userName = {}
} }
static get styles() { static get styles() {
return css` return css`
.top-bar-icon { .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; cursor: pointer;
height: 18px; background-color: #03a8f485;
width: 18px; }
transition: 0.2s all;
}
.top-bar-icon:hover { .close-icon {
color: var(--black); position: absolute;
} top: 3px;
right: 5px;
color: #676b71;
width: 14px;
transition: all 0.1s ease-in-out;
}
.modal-button { .close-icon:hover {
font-family: Roboto, sans-serif; cursor: pointer;
font-size: 16px; color: #494c50;
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 { .tip-user-header {
width: 100%; display: flex;
display: flex; justify-content: center;
justify-content: flex-end; align-items: center;
height: 50px; padding: 12px;
flex:0 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 { .tip-user-body {
width: 100%; display: flex;
display: flex; justify-content: flex-start;
flex-direction: column; align-items: center;
flex-grow: 1; padding: 15px 10px;
overflow:auto; }
margin-top: 5px;
padding: 0px 6px;
box-sizing: border-box;
}
.container-body::-webkit-scrollbar-track { .tip-input {
background-color: whitesmoke; width: 300px;
border-radius: 7px; margin-bottom: 15px;
} outline: 0;
border-width: 0 0 2px;
.container-body::-webkit-scrollbar { border-color: var(--mdc-theme-primary);
width: 6px; background-color: transparent;
border-radius: 7px; padding: 10px;
background-color: whitesmoke; font-family: Roboto, sans-serif;
} font-size: 15px;
color: var(--chat-bubble-msg-color);
.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 { .tip-input::selection {
background-color: rgb(148, 146, 146); background-color: var(--mdc-theme-primary);
cursor: pointer; color: white;
} }
p { .tip-input::placeholder {
color: var(--black); opacity: 0.9;
margin: 0px; color: var(--black);
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);
}
`
}
firstUpdated() { firstUpdated() {
this.viewElement = this.shadowRoot.getElementById('viewElement'); this.viewElement = this.shadowRoot.getElementById('viewElement');
this.downObserverElement = this.shadowRoot.getElementById('downObserver'); this.downObserverElement = this.shadowRoot.getElementById('downObserver');
this.elementObserver(); 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) { timeIsoString(timestamp) {
let myTimestamp = timestamp === undefined ? 1587560082346 : timestamp let myTimestamp = timestamp === undefined ? 1587560082346 : timestamp
let time = new Date(myTimestamp) let time = new Date(myTimestamp)
@ -212,7 +315,7 @@ return css`
if (myRef && myRef.type) { if (myRef && myRef.type) {
clearInterval(interval) clearInterval(interval)
this.isLoading = false this.isLoading = false
this.isOpenLeaveModal = false this.openUserInfo = false
} }
} catch (error) {} } catch (error) {}
stop = false stop = false
@ -437,106 +540,143 @@ return css`
} }
render() { render() {
console.log('this.groupMembers', this.groupMembers); 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) const owner = this.groupAdmin.filter((admin)=> admin.address === this.leaveGroupObj.owner)
return html` return html`
<div class="container"> <div class="container">
<div class="close-row" style="margin-top: 15px"> <div class="close-row" style="margin-top: 15px">
<vaadin-icon class="top-bar-icon" @click=${()=> this.toggle(false)} style="margin: 0px 10px" icon="vaadin:close" slot="icon"></vaadin-icon> <vaadin-icon class="top-bar-icon" @click=${()=> this.toggle(false)} style="margin: 0px 10px" icon="vaadin:close" slot="icon"></vaadin-icon>
</div> </div>
<div id="viewElement" class="container-body"> <div id="viewElement" class="container-body">
<p class="group-name">${this.leaveGroupObj && this.leaveGroupObj.groupName}</p> <p class="group-name">${this.leaveGroupObj && this.leaveGroupObj.groupName}</p>
<div class="group-info"> <div class="group-info">
<p class="group-description">${this.leaveGroupObj && this.leaveGroupObj.description}</p> <p class="group-description">${this.leaveGroupObj && this.leaveGroupObj.description}</p>
<p class="group-subheader">Members: <span class="group-data">${this.leaveGroupObj && this.leaveGroupObj.memberCount}</span></p> <p class="group-subheader">Members: <span class="group-data">${this.leaveGroupObj && this.leaveGroupObj.memberCount}</span></p>
<p class="group-subheader">Date created : <span class="group-data">${new Date(this.leaveGroupObj.created).toLocaleDateString("en-US")}</span></p> <p class="group-subheader">Date created : <span class="group-data">${new Date(this.leaveGroupObj.created).toLocaleDateString("en-US")}</span></p>
</div>
<br />
<p class="chat-right-panel-label">GROUP OWNER</p>
${owner.map((item) => {
return html`<chat-side-nav-heads
activeChatHeadUrl=""
.setActiveChatHeadUrl=${(val) => {
if (val.address === this.myAddress) return;
console.log({ val });
this.selectedHead = val;
this.openUserInfo = true;
}}
chatInfo=${JSON.stringify(item)}
></chat-side-nav-heads>`
})}
<p class="chat-right-panel-label">ADMINS</p>
${this.groupAdmin.map((item) => {
return html`<chat-side-nav-heads
activeChatHeadUrl=""
.setActiveChatHeadUrl=${(val) => {
if (val.address === this.myAddress) return;
console.log({ val });
this.selectedHead = val;
this.openUserInfo = true;
}}
chatInfo=${JSON.stringify(item)}
></chat-side-nav-heads>`
})}
<p class="chat-right-panel-label">MEMBERS</p>
${this.groupMembers.map((item) => {
return html`<chat-side-nav-heads
activeChatHeadUrl=""
.setActiveChatHeadUrl=${(val) => {
if (val.address === this.myAddress) return;
console.log({ val });
this.selectedHead = val;
this.openUserInfo = true;
}}
chatInfo=${JSON.stringify(item)}
></chat-side-nav-heads>`
})}
<div id='downObserver'></div>
</div> </div>
<br />
<p class="chat-right-panel-label">GROUP OWNER</p>
${owner.map((item) => {
return html`<chat-side-nav-heads
activeChatHeadUrl=""
.setActiveChatHeadUrl=${(val) => {}}
chatInfo=${JSON.stringify(item)}
></chat-side-nav-heads>`
})}
<p class="chat-right-panel-label">ADMINS</p>
${this.groupAdmin.map((item) => {
return html`<chat-side-nav-heads
activeChatHeadUrl=""
.setActiveChatHeadUrl=${(val) => {}}
chatInfo=${JSON.stringify(item)}
></chat-side-nav-heads>`
})}
<p class="chat-right-panel-label">MEMBERS</p>
${this.groupMembers.map((item) => {
return html`<chat-side-nav-heads
activeChatHeadUrl=""
.setActiveChatHeadUrl=${(val) => {
console.log({ val })
this.selectedHead = val
this.isOpenLeaveModal = true
}}
chatInfo=${JSON.stringify(item)}
></chat-side-nav-heads>`
})}
<div id='downObserver'></div>
</div>
<wrapper-modal <wrapper-modal
.removeImage=${() => { .onClickFunc=${() => {
if (this.isLoading) return if (this.isLoading) return
this.isOpenLeaveModal = false this.openUserInfo = false
}} }}
style=${ style=${
this.isOpenLeaveModal ? "display: block" : "display: none" this.openUserInfo ? "display: block" : "display: none"
}> }>
<div style="text-align:center"> <div style=${"position: relative;"}>
<h1>${translate("grouppage.gchange35")}</h1> <vaadin-icon
<hr> class="close-icon"
</div> icon="vaadin:close-big"
slot="icon"
<button @click=${() => @click=${() => {
this._addAdmin( this.openUserInfo = false
this.leaveGroupObj.groupId }}
)}>Promote to Admin</button> ?disabled="${this.isLoading}">
<button @click=${() => </vaadin-icon>
this._removeAdmin( <div class="user-info-header">
this.leaveGroupObj.groupId ${translate("grouppage.gchange35")}
)}>Remove as Admin</button> </div>
<div style="text-align:right; height:36px;"> <div
<span ?hidden="${!this.isLoading}"> class="send-message-button"
<!-- loading message --> @click="${() => {
${translate("grouppage.gchange36")} &nbsp; this.setOpenPrivateMessage({
<paper-spinner-lite name: this.userName,
style="margin-top:12px;" open: true
?active="${this.isLoading}" })
alt="Leaving" this.openUserInfo = false
> }
</paper-spinner-lite> }">
</span> ${translate("grouppage.gchange56")}
<span ?hidden=${this.message === ""} style="${ </div>
this.error ? "color:red;" : "" <div
}"> style=${"margin-top: 5px;"}
${this.message} class="send-message-button"
</span>
</div>
<button
@click=${() => { @click=${() => {
this.isOpenLeaveModal = false this.openTipUser = true
}} this.openUserInfo = false
class="modal-button" this.chatEditor.disable();
?disabled="${this.isLoading}" }}>
${translate("grouppage.gchange57")}
> </div>
${translate("general.close")} <div ?hidden="${!this.isLoading || this.message === ""}" style="text-align: right; height: 36px;">
</button> <span ?hidden="${!this.isLoading}">
</wrapper-modal > <!-- loading message -->
${translate("grouppage.gchange36")} &nbsp;
<paper-spinner-lite
style="margin-top:12px;"
?active="${this.isLoading}"
alt="Leaving"
>
</paper-spinner-lite>
</span>
<span
?hidden=${this.message === ""}
style="${this.error ? "color:red;" : ""}">
${this.message}
</span>
</div> </div>
</div>
</wrapper-modal>
<wrapper-modal
.onClickFunc=${() => {
this.openTipUser = false;
this.chatEditor.enable();
}}
style=${this.openTipUser ? "display: block" : "display: none"}>
<div class="tip-user-header">
<img src="/img/qort.png" width="32" height="32">
<p class="tip-user-header-font">${translate("grouppage.gchange55")} ${this.userName}</p>
</div> </div>
<div class="tip-user-body">
<p class="tip-available">${translate("grouppage.gchange59")}</p>
<input class="tip-input" type="number" placeholder="${translate("grouppage.gchange58")}" />
</div>
</wrapper-modal>
</div>
</div>
` `
} }
} }

20
qortal-ui-plugins/plugins/utils/getUserNameFromAddress.js Normal file
View File

@ -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);
}
}