Qortal/qortal-ui
1
0
Fork 0
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-05-01 07:17:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed Avatar Bug + Fixed User Info Translations

Browse Source
This commit is contained in:
Justin Ferrari 2023-01-07 18:16:51 -05:00
parent 238ee3f3f1
commit f19c6ce673
6 changed files with 72 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -557,7 +557,10 @@
"cchange53": "Receiver cannot be empty!", "cchange53": "Receiver cannot be empty!",
"cchange54": "Invalid Receiver!", "cchange54": "Invalid Receiver!",
"cchange55": "Transaction Successful!", "cchange55": "Transaction Successful!",
"cchange56": "Transaction Failed!" "cchange56": "Transaction Failed!",
"cchange57": "User Info",
"cchange58": "SEND MESSAGE",
"cchange59": "TIP USER"
}, },
"welcomepage": { "welcomepage": {
"wcchange1": "Welcome to Q-Chat", "wcchange1": "Welcome to Q-Chat",

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

@ -280,8 +280,6 @@ class ChatRightPanel extends LitElement {
} }
render() { 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) const owner = this.groupAdmin.filter((admin)=> admin.address === this.leaveGroupObj.owner)
return html` return html`
<div class="container"> <div class="container">
@ -360,7 +358,7 @@ class ChatRightPanel extends LitElement {
?disabled="${this.isLoading}"> ?disabled="${this.isLoading}">
</vaadin-icon> </vaadin-icon>
<div class="user-info-header"> <div class="user-info-header">
${translate("grouppage.gchange35")} ${translate("chatpage.cchange57")}
</div> </div>
<div <div
class="send-message-button" class="send-message-button"
@ -372,7 +370,7 @@ class ChatRightPanel extends LitElement {
this.openUserInfo = false this.openUserInfo = false
} }
}"> }">
${translate("grouppage.gchange56")} ${translate("chatpage.cchange58")}
</div> </div>
<div <div
style=${"margin-top: 5px;"} style=${"margin-top: 5px;"}
@ -382,7 +380,7 @@ class ChatRightPanel extends LitElement {
this.openUserInfo = false this.openUserInfo = false
this.chatEditor.disable(); this.chatEditor.disable();
}}> }}>
${translate("grouppage.gchange57")} ${translate("chatpage.cchange59")}
</div> </div>
<div ?hidden="${!this.isLoading || this.message === ""}" style="text-align: right; height: 36px;"> <div ?hidden="${!this.isLoading || this.message === ""}" style="text-align: right; height: 36px;">
<span ?hidden="${!this.isLoading}"> <span ?hidden="${!this.isLoading}">

16
qortal-ui-plugins/plugins/core/components/ChatScroller.js
View File

@ -28,15 +28,15 @@ class ChatScroller extends LitElement {
escapeHTML: { attribute: false }, escapeHTML: { attribute: false },
messages: { type: Array }, messages: { type: Array },
hideMessages: { type: Array }, hideMessages: { type: Array },
setRepliedToMessageObj: {attribute: false}, setRepliedToMessageObj: { attribute: false },
setEditedMessageObj: {attribute: false}, setEditedMessageObj: { attribute: false },
focusChatEditor: {attribute: false}, focusChatEditor: { attribute: false },
sendMessage: {attribute: false}, sendMessage: { attribute: false },
sendMessageForward: {attribute: false}, sendMessageForward: { attribute: false },
showLastMessageRefScroller: { type: Function }, showLastMessageRefScroller: { attribute: false },
emojiPicker: { attribute: false }, emojiPicker: { attribute: false },
isLoadingMessages: { type: Boolean}, isLoadingMessages: { type: Boolean},
setIsLoadingMessages: {attribute: false}, setIsLoadingMessages: { attribute: false },
chatId: { type: String }, chatId: { type: String },
chatEditor: { type: Object }, chatEditor: { type: Object },
setForwardProperties: { attribute: false }, setForwardProperties: { attribute: false },
@ -62,8 +62,6 @@ class ChatScroller extends LitElement {
} }
render() { render() {
console.log(6, "chat scroller here");
console.log(this.openTipUser, "openTipUser here");
let formattedMessages = this.messages.reduce((messageArray, message, index) => { let formattedMessages = this.messages.reduce((messageArray, message, index) => {
const lastGroupedMessage = messageArray[messageArray.length - 1]; const lastGroupedMessage = messageArray[messageArray.length - 1];
let timestamp; let timestamp;

75
qortal-ui-plugins/plugins/core/components/ChatSideNavHeads.js
View File

@ -93,6 +93,7 @@ class ChatSideNavHeads extends LitElement {
} }
imageHTMLRes.onload = () => { imageHTMLRes.onload = () => {
this.isImageLoaded = true; this.isImageLoaded = true;
this.requestUpdate();
} }
imageHTMLRes.onerror = () => { imageHTMLRes.onerror = () => {
if (this.imageFetches < 4) { if (this.imageFetches < 4) {
@ -101,36 +102,67 @@ class ChatSideNavHeads extends LitElement {
imageHTMLRes.src = imageUrl; imageHTMLRes.src = imageUrl;
}, 500); }, 500);
} else { } else {
this.isImageLoaded = false
this.isImageLoaded = false
} }
}; };
console.log(imageHTMLRes, "here8")
return imageHTMLRes; return imageHTMLRes;
} }
render() { render() {
let avatarImg = ''; console.log(9, 'chat side nav head');
let backupAvatarImg = '' console.log(this.isImageLoaded, 'Is image loaded');
if(this.chatInfo.name){ 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 myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port; const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port;
const avatarUrl = `${nodeUrl}/arbitrary/THUMBNAIL/${this.chatInfo.name}/qortal_avatar?async=true&apiKey=${myNode.apiKey}`; 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` return html`
<li @click=${() => this.getUrl(this.chatInfo)} class="clearfix"> <li @click=${() => this.getUrl(this.chatInfo)} class="clearfix">
${this.isImageLoaded ? html`${avatarImg}` : html`` } ${this.isImageLoaded ? html`${avatarImg}` : html``}
${!this.isImageLoaded && !this.chatInfo.name && !this.chatInfo.groupName ? html`<mwc-icon class="img-icon">account_circle</mwc-icon>` : html`` } ${!this.isImageLoaded && !this.chatInfo.name && !this.chatInfo.groupName
${!this.isImageLoaded && this.chatInfo.name ? html`<div style="width:30px; height:30px; float: left; border-radius:50%; background: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadBgActive)' : 'var(--chatHeadBg)' }; color: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadTextActive)' : 'var(--chatHeadText)' }; font-weight:bold; display: flex; justify-content: center; align-items: center; text-transform: capitalize">${this.chatInfo.name.charAt(0)}</div>`: ''} ? html`<mwc-icon class="img-icon">account_circle</mwc-icon>`
${!this.isImageLoaded && this.chatInfo.groupName ? html`<div style="width:30px; height:30px; float: left; border-radius:50%; background: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadBgActive)' : 'var(--chatHeadBg)' }; color: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadTextActive)' : 'var(--chatHeadText)' }; font-weight:bold; display: flex; justify-content: center; align-items: center; text-transform: capitalize">${this.chatInfo.groupName.charAt(0)}</div>`: ''} : html``}
<div> ${!this.isImageLoaded && this.chatInfo.name
<div class="name"><span style="float:left; padding-left: 8px; color: var(--chat-group);">${this.chatInfo.groupName ? this.chatInfo.groupName : this.chatInfo.name !== undefined ? this.chatInfo.name : this.chatInfo.address.substr(0, 15)} </span> </div> ? html`<div
</div> style="width:30px; height:30px; float: left; border-radius:50%; background: ${this.activeChatHeadUrl === this.chatInfo.url
</li> ? "var(--chatHeadBgActive)"
` : "var(--chatHeadBg)"}; color: ${this.activeChatHeadUrl ===
this.chatInfo.url
? "var(--chatHeadTextActive)"
: "var(--chatHeadText)"}; font-weight:bold; display: flex; justify-content: center; align-items: center; text-transform: capitalize"
>
${this.chatInfo.name.charAt(0)}
</div>`
: ""}
${!this.isImageLoaded && this.chatInfo.groupName
? html`<div
style="width:30px; height:30px; float: left; border-radius:50%; background: ${this.activeChatHeadUrl === this.chatInfo.url
? "var(--chatHeadBgActive)"
: "var(--chatHeadBg)"}; color: ${this.activeChatHeadUrl === this.chatInfo.url
? "var(--chatHeadTextActive)"
: "var(--chatHeadText)"}; font-weight:bold; display: flex; justify-content: center; align-items: center; text-transform: capitalize"
>
${this.chatInfo.groupName.charAt(0)}
</div>`
: ""}
<div>
<div class="name">
<span style="float:left; padding-left: 8px; color: var(--chat-group);">
${this.chatInfo.groupName
? this.chatInfo.groupName
: this.chatInfo.name !== undefined
? this.chatInfo.name
: this.chatInfo.address.substr(0, 15)}
</span>
</div>
</div>
</li>
`
} }
firstUpdated() { firstUpdated() {
@ -154,6 +186,12 @@ class ChatSideNavHeads extends LitElement {
} }
updated(changedProperties) {
if (changedProperties && changedProperties.has("avatarImg")) {
console.log(this.avatarImg, "avatarImg");
}
}
shouldUpdate(changedProperties) { shouldUpdate(changedProperties) {
if(changedProperties.has('activeChatHeadUrl')){ if(changedProperties.has('activeChatHeadUrl')){
return true return true
@ -161,6 +199,9 @@ class ChatSideNavHeads extends LitElement {
if(changedProperties.has('chatInfo')){ if(changedProperties.has('chatInfo')){
return true return true
} }
if(changedProperties.has('isImageLoaded')){
return true
}
return false return false
} }

1
qortal-ui-plugins/plugins/core/components/TipUser.js
View File

@ -236,7 +236,6 @@ export class TipUser extends LitElement {
} }
render() { render() {
console.log(7, "Tip User Here");
return html` return html`
<div class="tip-user-header"> <div class="tip-user-header">
<img src="/img/qort.png" width="32" height="32"> <img src="/img/qort.png" width="32" height="32">

0
qortal-ui-plugins/plugins/core/components/UserInfo.js Normal file
View File