AlphaX/qortal-ui
1
0
Fork 0
forked from Qortal/qortal-ui
Code Issues Pull Requests Projects Releases Wiki Activity

add avatar to chat heads

Browse Source
This commit is contained in:
Phillip Lang Martinez 2022-12-05 22:39:28 -05:00
parent c49769de0b
commit df9e0eab63
3 changed files with 62 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
qortal-ui-core/font/switch-theme.css
View File

@ -43,6 +43,10 @@ html {
--nav-border-selected-color: #03a9f4;
--error: #d50000;
--background: url("/img/qortal_background_light_.jpg");
--chatHeadBg: #ebebeb;
--chatHeadBgActive: #ebebeb;
--chatHeadText: #080808;
--chatHeadTextActive: #080808;
}
html[theme="dark"] {
@ -90,4 +94,8 @@ html[theme="dark"] {
--nav-border-selected-color: #76c8f5;
--error: #d50000;
--background: url("/img/qortal_background_dark_.jpg");
--chatHeadBg: #008fd5;
--chatHeadBgActive: #0f1a2e;
--chatHeadText: #ffffff;
--chatHeadTextActive: #ffffff;
}

8
qortal-ui-core/src/styles/switch-theme.css
View File

@ -42,6 +42,10 @@ html {
--nav-border-color: #eeeeee;
--nav-border-selected-color: #03a9f4;
--background: url("/img/qortal_background_light_.jpg");
--chatHeadBg: #ebebeb;
--chatHeadBgActive: #ebebeb;
--chatHeadText: #080808;
--chatHeadTextActive: #080808;
}
html[theme="dark"] {
@ -88,4 +92,8 @@ html[theme="dark"] {
--nav-border-color: #0b305e;
--nav-border-selected-color: #76c8f5;
--background: url("/img/qortal_background_dark_.jpg");
--chatHeadBg: #008fd5;
--chatHeadBgActive: #0f1a2e;
--chatHeadText: #ffffff;
--chatHeadTextActive: #ffffff;
}

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

@ -12,7 +12,8 @@ class ChatHead extends LitElement {
config: { type: Object },
chatInfo: { type: Object },
iconName: { type: String },
activeChatHeadUrl: { type: String }
activeChatHeadUrl: { type: String },
isImageLoaded: { type: Boolean },
}
}
@ -75,12 +76,55 @@ class ChatHead extends LitElement {
this.chatInfo = {}
this.iconName = ''
this.activeChatHeadUrl = ''
this.isImageLoaded = false
this.imageFetches = 0
}
createImage(imageUrl) {
const imageHTMLRes = new Image();
imageHTMLRes.src = imageUrl;
imageHTMLRes.style= "width:40px; height:40px; float: left; border-radius:50%";
imageHTMLRes.onclick= () => {
this.openDialogImage = true;
}
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;
}
render() {
console.log('this.chatInfo',this.chatInfo)
let avatarImg = '';
let backupAvatarImg = ''
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)
}
return html`
<li @click=${() => this.getUrl(this.chatInfo.url)} class="clearfix ${this.activeChatHeadUrl === this.chatInfo.url ? 'active' : ''}">
<mwc-icon class="img-icon">account_circle</mwc-icon>
${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:40px; height:40px; 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:40px; height:40px; 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 class="about">
<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> <mwc-icon style="float:right; padding: 0 1rem; color: var(--chat-group);">${this.chatInfo.groupId !== undefined ? 'lock_open' : 'lock'}</mwc-icon> </div>
</div>