qortal.link/qortal-ui
1
0
Fork 0
Code Issues Pull Requests 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>
${this.repliedToMessageObj.version.toString() === '1' ?
html`
${this.repliedToMessageObj.message}
<span style="color: var(--black);">${this.repliedToMessageObj.message}</span>
`
: ''
}
${+this.repliedToMessageObj.version > 1 ?
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>
<div class="repliedTo-message">
<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>
<vaadin-icon class="close-icon" icon="vaadin:close-big" slot="icon" @click=${() => this.closeEditMessageContainer()}></vaadin-icon>
</div>
@ -1366,11 +1366,23 @@ class ChatPage extends LitElement {
shouldUpdate(changedProperties) {
if (changedProperties.has('chatId')) {
if (this.repliedToMessageObj) {
this.closeRepliedToContainer()
return true
}
if (this.editedMessageObj) {
this.closeEditMessageContainer()
return true
}
return true
}
if (changedProperties.has('setActiveChatHeadUrl')) {
return false
}
if (changedProperties.has('setOpenPrivateMessage')) {
return false
}
@ -1666,8 +1678,6 @@ class ChatPage extends LitElement {
let list = [...decodeMsgs]
this.messagesRendered = {
messages: list,
type: 'old',

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

@ -14,7 +14,9 @@ class ChatSelect extends LitElement {
iconName: { type: String },
activeChatHeadUrl: { type: String },
isImageLoaded: { type: Boolean },
setActiveChatHeadUrl: { attribute: false }
setActiveChatHeadUrl: { attribute: false },
avatarImg: { type: String }
}
}
@ -27,8 +29,7 @@ class ChatSelect extends LitElement {
this.selectedAddress = {}
this.config = {
user: {
node: {
}
node: {}
}
}
this.chatInfo = {}
@ -36,29 +37,44 @@ class ChatSelect extends LitElement {
this.activeChatHeadUrl = ''
this.isImageLoaded = false
this.imageFetches = 0
this.avatarImg = ''
}
render() {
let avatarImg = ''
let backupAvatarImg = ''
let groupString = 'Group_' + this.chatInfo.groupId
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 nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port
const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]
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`
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`
<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 ?
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"
font-weight:bold; display:flex; justify-content:center; align-items:center; text-transform:capitalize;"
>
${this.chatInfo.name.charAt(0)}
</div>
@ -70,7 +86,7 @@ class ChatSelect extends LitElement {
<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"
font-weight:bold; display:flex; justify-content:center; align-items:center; text-transform:capitalize;"
>
${this.chatInfo.groupName.charAt(0)}
</div>

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

@ -60,12 +60,12 @@ class ChatTextEditor extends LitElement {
render() {
return html`
<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 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;">
<button
@click=${() => this.editor.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>
</button>
@ -104,7 +104,7 @@ class ChatTextEditor extends LitElement {
</div>
${this.iframeId === "_chatEditorDOM" ?
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()}>
${translate('chatpage.cchange69')}
</label>
@ -126,8 +126,8 @@ class ChatTextEditor extends LitElement {
: ''
}
</div>
<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 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)}}>
<vaadin-icon class="paperclip-icon" icon="vaadin:paperclip" slot="icon"></vaadin-icon>
<div class="file-picker-input-container">
<input
@ -142,18 +142,18 @@ class ChatTextEditor extends LitElement {
class="file-picker-input"
type="file"
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>
<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>
<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>
${this.editedMessageObj ?
(html`
<div style="margin-bottom: 10px">
html`
<div style="margin-bottom: 10px;">
${this.isLoading === false
? html`
<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>
`) : html`
` : html`
<div style="margin-bottom: 10px; ${(this.iframeId === 'newChat' || this.iframeId === "newAttachmentChat") ? 'display: none;' : 'display: flex;'}">
${this.isLoading === false
? 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`
<paper-spinner-lite active></paper-spinner-lite>
`
@ -178,7 +178,7 @@ class ChatTextEditor extends LitElement {
${this.chatMessageSize >= 750 ?
html`
<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`}
</div>
</div>

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

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