AlphaX/qortal-ui
1
0
Fork 0
forked from Qortal/qortal-ui
Code Issues Pull Requests 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!",
"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",

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

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

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

@ -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`
<li @click=${() => this.getUrl(this.chatInfo)} class="clearfix">
${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 ? 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>`: ''}
${!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>
`
${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
? 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>`
: ""}
${!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() {
@ -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
}

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

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

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