Qortal/qortal-ui
4
1
Fork 4
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-02-11 17:55:51 +00:00
Code Issues Projects Releases Wiki Activity

Add group avatar to chat select , fix typos in chat text editor, close edit and reply to on group change

Browse Source
This commit is contained in:
AlphaX-Projects 2024-05-10 17:55:06 +02:00
parent 5cb2d02063
commit 3cc5d544a2
4 changed files with 60 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
plugins/plugins/core/components/ChatPage.js
View File

@ -321,13 +321,13 @@ class ChatPage extends LitElement {
<p class="senderName">${this.repliedToMessageObj.senderName ? this.repliedToMessageObj.senderName : this.repliedToMessageObj.sender}</p> <p class="senderName">${this.repliedToMessageObj.senderName ? this.repliedToMessageObj.senderName : this.repliedToMessageObj.sender}</p>
${this.repliedToMessageObj.version.toString() === '1' ? ${this.repliedToMessageObj.version.toString() === '1' ?
html` html`
${this.repliedToMessageObj.message} <span style="color: var(--black);">${this.repliedToMessageObj.message}</span>
` `
: '' : ''
} }
${+this.repliedToMessageObj.version > 1 ? ${+this.repliedToMessageObj.version > 1 ?
html` html`
${unsafeHTML(generateHTML(this.repliedToMessageObj.message, [StarterKit, Underline, Highlight]))} <span style="color: var(--black);">${unsafeHTML(generateHTML(this.repliedToMessageObj.message, [StarterKit, Underline, Highlight]))}</span>
` `
: '' : ''
} }
@ -344,7 +344,7 @@ class ChatPage extends LitElement {
<vaadin-icon class="reply-icon" icon="vaadin:pencil" slot="icon"></vaadin-icon> <vaadin-icon class="reply-icon" icon="vaadin:pencil" slot="icon"></vaadin-icon>
<div class="repliedTo-message"> <div class="repliedTo-message">
<p class="senderName">${translate("chatpage.cchange25")}</p> <p class="senderName">${translate("chatpage.cchange25")}</p>
${unsafeHTML(generateHTML(this.editedMessageObj.message, [StarterKit, Underline, Highlight]))} <span style="color: var(--black);">${unsafeHTML(generateHTML(this.editedMessageObj.message, [StarterKit, Underline, Highlight]))}</span>
</div> </div>
<vaadin-icon class="close-icon" icon="vaadin:close-big" slot="icon" @click=${() => this.closeEditMessageContainer()}></vaadin-icon> <vaadin-icon class="close-icon" icon="vaadin:close-big" slot="icon" @click=${() => this.closeEditMessageContainer()}></vaadin-icon>
</div> </div>
@ -1366,11 +1366,23 @@ class ChatPage extends LitElement {
shouldUpdate(changedProperties) { shouldUpdate(changedProperties) {
if (changedProperties.has('chatId')) { if (changedProperties.has('chatId')) {
if (this.repliedToMessageObj) {
this.closeRepliedToContainer()
return true
}
if (this.editedMessageObj) {
this.closeEditMessageContainer()
return true
}
return true return true
} }
if (changedProperties.has('setActiveChatHeadUrl')) { if (changedProperties.has('setActiveChatHeadUrl')) {
return false return false
} }
if (changedProperties.has('setOpenPrivateMessage')) { if (changedProperties.has('setOpenPrivateMessage')) {
return false return false
} }
@ -1666,8 +1678,6 @@ class ChatPage extends LitElement {
let list = [...decodeMsgs] let list = [...decodeMsgs]
this.messagesRendered = { this.messagesRendered = {
messages: list, messages: list,
type: 'old', type: 'old',

40
plugins/plugins/core/components/ChatSelect.js
View File

@ -14,7 +14,9 @@ class ChatSelect extends LitElement {
iconName: { type: String }, iconName: { type: String },
activeChatHeadUrl: { type: String }, activeChatHeadUrl: { type: String },
isImageLoaded: { type: Boolean }, isImageLoaded: { type: Boolean },
setActiveChatHeadUrl: { attribute: false } setActiveChatHeadUrl: { attribute: false },
avatarImg: { type: String }
} }
} }
@ -27,8 +29,7 @@ class ChatSelect extends LitElement {
this.selectedAddress = {} this.selectedAddress = {}
this.config = { this.config = {
user: { user: {
node: { node: {}
}
} }
} }
this.chatInfo = {} this.chatInfo = {}
@ -36,29 +37,44 @@ class ChatSelect extends LitElement {
this.activeChatHeadUrl = '' this.activeChatHeadUrl = ''
this.isImageLoaded = false this.isImageLoaded = false
this.imageFetches = 0 this.imageFetches = 0
this.avatarImg = ''
} }
render() { render() {
let avatarImg = '' let groupString = 'Group_' + this.chatInfo.groupId
let backupAvatarImg = '' let groupAvatarString = 'qortal_group_avatar_' + this.chatInfo.groupId
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
if (groupString === 'Group_0') {
const avatarUrl = `/img/qgcgroup.png`
this.avatarImg = this.createImage(avatarUrl)
} else if (groupString === 'Group_1') {
const avatarUrl = `/img/qdcgroup.png`
this.avatarImg = this.createImage(avatarUrl)
} else if (this.chatInfo.name) {
const avatarUrl = `${nodeUrl}/arbitrary/THUMBNAIL/${this.chatInfo.name}/qortal_avatar?async=true` const avatarUrl = `${nodeUrl}/arbitrary/THUMBNAIL/${this.chatInfo.name}/qortal_avatar?async=true`
avatarImg = this.createImage(avatarUrl) this.avatarImg = this.createImage(avatarUrl)
} else if (this.chatInfo.ownerName) {
if (this.chatInfo.ownerName === undefined) {
// Nothing to do
} else {
const avatarUrl = `${nodeUrl}/arbitrary/THUMBNAIL/${this.chatInfo.ownerName}/${groupAvatarString}?async=true`
this.avatarImg = this.createImage(avatarUrl)
}
} }
return html` return html`
<li @click=${() => this.getUrl(this.chatInfo.url)} class="clearfix ${this.activeChatHeadUrl === this.chatInfo.url ? 'active' : ''}"> <li @click=${() => this.getUrl(this.chatInfo.url)} class="clearfix ${this.activeChatHeadUrl === this.chatInfo.url ? 'active' : ''}">
${this.isImageLoaded ? html`${avatarImg}` : html``} ${this.isImageLoaded ? html`${this.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 ? html`<mwc-icon class="img-icon">account_circle</mwc-icon>` : html``}
${!this.isImageLoaded && this.chatInfo.name ? ${!this.isImageLoaded && this.chatInfo.name ?
html` html`
<div <div
style="width:40px; height:40px; float:left; border-radius:50%; background: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadBgActive)' : 'var(--chatHeadBg)'}; 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)'}; color: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadTextActive)' : 'var(--chatHeadText)'};
font-weight:bold; display:flex; justify-content:center; align-items:center; text-transform:capitalize" font-weight:bold; display:flex; justify-content:center; align-items:center; text-transform:capitalize;"
> >
${this.chatInfo.name.charAt(0)} ${this.chatInfo.name.charAt(0)}
</div> </div>
@ -70,7 +86,7 @@ class ChatSelect extends LitElement {
<div <div
style="width:40px; height:40px; float:left; border-radius:50%; background: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadBgActive)' : 'var(--chatHeadBg)'}; 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)'}; color: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadTextActive)' : 'var(--chatHeadText)'};
font-weight:bold; display:flex; justify-content:center; align-items:center; text-transform:capitalize" font-weight:bold; display:flex; justify-content:center; align-items:center; text-transform:capitalize;"
> >
${this.chatInfo.groupName.charAt(0)} ${this.chatInfo.groupName.charAt(0)}
</div> </div>

28
plugins/plugins/core/components/ChatTextEditor.js
View File

@ -60,12 +60,12 @@ class ChatTextEditor extends LitElement {
render() { render() {
return html` return html`
<div class=${["chatbar-container", "chatbar-buttons", this.iframeId !== "_chatEditorDOM" && 'hide-styling'].join(" ")} style="align-items: center;justify-content:space-between"> <div class=${["chatbar-container", "chatbar-buttons", this.iframeId !== "_chatEditorDOM" && 'hide-styling'].join(" ")} style="align-items: center; justify-content:space-between;">
<div style="display: flex;align-items: center"> <div style="display: flex; align-items: center;">
<button <button
@click=${() => this.editor.chain().focus().toggleBold().run()} @click=${() => this.editor.chain().focus().toggleBold().run()}
?disabled=${this.editor && !this.editor.can().chain().focus().toggleBold().run()} ?disabled=${this.editor && !this.editor.can().chain().focus().toggleBold().run()}
class=${["chatbar-button-single", (this.editedMessageObj || this.repliedToMessageObj || this.openGifModal) && 'show-chatbar-buttons', this.editor && this.editor.isActive('bold') ? 'is-active' : ''].join(" ")} class=${["chatbar-button-single", (this.editedMessageObj || this.repliedToMessageObj || this.openGifModal) && 'show-chatbar-buttons', this.editor && this.editor.isActive('bold') ? 'is-active' : ''].join(' ')}
> >
<span class="material-symbols-outlined">&#xe238;</span> <span class="material-symbols-outlined">&#xe238;</span>
</button> </button>
@ -104,7 +104,7 @@ class ChatTextEditor extends LitElement {
</div> </div>
${this.iframeId === "_chatEditorDOM" ? ${this.iframeId === "_chatEditorDOM" ?
html` html`
<div style="height: 26px; box-sizing: border-box" class=${["chatbar-button-single", "removeBg"].join(' ')}> <div style="height: 26px; box-sizing: border-box;" class=${["chatbar-button-single", "removeBg"].join(' ')}>
<label for="qChatShowAutoMsg" @click=${() => this.shadowRoot.getElementById('qChatShowAutoMsg').click()}> <label for="qChatShowAutoMsg" @click=${() => this.shadowRoot.getElementById('qChatShowAutoMsg').click()}>
${translate('chatpage.cchange69')} ${translate('chatpage.cchange69')}
</label> </label>
@ -126,8 +126,8 @@ class ChatTextEditor extends LitElement {
: '' : ''
} }
</div> </div>
<div class=${["chatbar-container", (this.iframeId === "newChat" || this.iframeId === "privateMessage") ? "chatbar-caption" : ""].join(" ")} style="align-items: flex-end; position: relative"> <div class=${["chatbar-container", (this.iframeId === "newChat" || this.iframeId === "privateMessage") ? "chatbar-caption" : ""].join(" ")} style="align-items: flex-end; position: relative;">
<div style=${this.iframeId === "privateMessage" ? "display: none" : "display: block"} class="file-picker-container" @click=${(e) => {this.preventUserSendingImage(e)}}> <div style=${this.iframeId === "privateMessage" ? "display: none;" : "display: block;"} class="file-picker-container" @click=${(e) => {this.preventUserSendingImage(e)}}>
<vaadin-icon class="paperclip-icon" icon="vaadin:paperclip" slot="icon"></vaadin-icon> <vaadin-icon class="paperclip-icon" icon="vaadin:paperclip" slot="icon"></vaadin-icon>
<div class="file-picker-input-container"> <div class="file-picker-input-container">
<input <input
@ -142,18 +142,18 @@ class ChatTextEditor extends LitElement {
class="file-picker-input" class="file-picker-input"
type="file" type="file"
name="myImage" name="myImage"
accept="image/*, .doc, .docx, .pdf, .zip, .pdf, .txt, .odt, .ods, .xls, .xlsx, .ppt, .pptx" / accept="image/*, .doc, .docx, .pdf, .zip, .pdf, .txt, .odt, .ods, .xls, .xlsx, .ppt, .pptx"
> >
</div> </div>
</div> </div>
<textarea style="color: var(--black);" tabindex='1' ?autofocus=${true} ?disabled=${this.isLoading || this.isLoadingMessages} id="messageBox" rows="1">></textarea> <textarea style="color: var(--black);" tabindex='1' ?autofocus=${true} ?disabled=${this.isLoading || this.isLoadingMessages} id="messageBox" rows="1"></textarea>
<div id=${this.iframeId} class=${["element", this.iframeId === "privateMessage" ? "privateMessageMargin" : ""].join(" ")}></div> <div id=${this.iframeId} class=${["element", this.iframeId === "privateMessage" ? "privateMessageMargin" : ""].join(" ")}></div>
<button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}> <button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}>
${html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg" />`} ${html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg">`}
</button> </button>
${this.editedMessageObj ? ${this.editedMessageObj ?
(html` html`
<div style="margin-bottom: 10px"> <div style="margin-bottom: 10px;">
${this.isLoading === false ${this.isLoading === false
? html` ? html`
<vaadin-icon class="checkmark-icon" icon="vaadin:check" slot="icon" @click=${() => {this.sendMessageFunc(this.messageQueue)}}></vaadin-icon> <vaadin-icon class="checkmark-icon" icon="vaadin:check" slot="icon" @click=${() => {this.sendMessageFunc(this.messageQueue)}}></vaadin-icon>
@ -162,11 +162,11 @@ class ChatTextEditor extends LitElement {
` `
} }
</div> </div>
`) : html` ` : html`
<div style="margin-bottom: 10px; ${(this.iframeId === 'newChat' || this.iframeId === "newAttachmentChat") ? 'display: none;' : 'display: flex;'}"> <div style="margin-bottom: 10px; ${(this.iframeId === 'newChat' || this.iframeId === "newAttachmentChat") ? 'display: none;' : 'display: flex;'}">
${this.isLoading === false ${this.isLoading === false
? html` ? html`
<img src="/img/qchat-send-message-icon.svg" alt="send-icon" class="send-icon" @click=${() => {this.sendMessageFunc(this.messageQueue)}} /> <img src="/img/qchat-send-message-icon.svg" alt="send-icon" class="send-icon" @click=${() => {this.sendMessageFunc(this.messageQueue)}}>
` : html` ` : html`
<paper-spinner-lite active></paper-spinner-lite> <paper-spinner-lite active></paper-spinner-lite>
` `
@ -178,7 +178,7 @@ class ChatTextEditor extends LitElement {
${this.chatMessageSize >= 750 ? ${this.chatMessageSize >= 750 ?
html` html`
<div class="message-size-container" style=${this.imageFile && "margin-top: 10px;"}> <div class="message-size-container" style=${this.imageFile && "margin-top: 10px;"}>
<div class="message-size" style="${this.chatMessageSize > 4000 && 'color: #bd1515'}"> <div class="message-size" style="${this.chatMessageSize > 4000 && 'color: #F44336'}">
${`Your message size is of ${this.chatMessageSize} bytes out of a maximum of 4000`} ${`Your message size is of ${this.chatMessageSize} bytes out of a maximum of 4000`}
</div> </div>
</div> </div>

6
plugins/plugins/core/components/plugins-css.js
View File

@ -120,7 +120,7 @@ export const chatpageStyles = css`
.message-size { .message-size {
font-family: Roboto, sans-serif; font-family: Roboto, sans-serif;
font-size: 12px; font-size: 12px;
color: black; color: var(--black);
} }
.lds-grid { .lds-grid {
@ -508,7 +508,7 @@ export const chatpageStyles = css`
.message-size { .message-size {
font-family: Roboto, sans-serif; font-family: Roboto, sans-serif;
font-size: 12px; font-size: 12px;
color: black; color: var(--black);
} }
.lds-grid { .lds-grid {
@ -3529,7 +3529,7 @@ export const chatTextEditorStyles = css`
.message-size { .message-size {
font-family: Roboto, sans-serif; font-family: Roboto, sans-serif;
font-size: 12px; font-size: 12px;
color: black; color: var(--black);
} }
.paperclip-icon { .paperclip-icon {