Qortal/qortal-ui
1
0
Fork 0
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-04-01 18:15:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Finished design of the replies

Browse Source
This commit is contained in:
Justin Ferrari 2022-10-02 10:29:31 -05:00
parent 4aa9692e0f
commit 2a3da26808
3 changed files with 156 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
qortal-ui-plugins/plugins/core/components/ChatPage.js
View File

@ -46,7 +46,7 @@ class ChatPage extends LitElement {
hideNewMesssageBar: { attribute: false }, hideNewMesssageBar: { attribute: false },
chatEditorPlaceholder: { type: String }, chatEditorPlaceholder: { type: String },
messagesRendered: { type: Array }, messagesRendered: { type: Array },
repliedToSignature: { type: String }, repliedToMessageObj: { type: Object },
} }
} }
@ -64,12 +64,11 @@ class ChatPage extends LitElement {
.chat-text-area .typing-area { .chat-text-area .typing-area {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 98%; width: 98%;
box-sizing: border-box; box-sizing: border-box;
padding: 5px;
margin-bottom: 8px; margin-bottom: 8px;
border: 1px solid var(--black); border: 1px solid var(--black);
border-radius: 10px; border-radius: 10px;
@ -91,10 +90,67 @@ class ChatPage extends LitElement {
border: none; border: none;
} }
.repliedTo-container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 10px 20px 8px 10px;
}
.repliedTo-subcontainer {
display: flex;
flex-direction: row;
align-items: center;
gap: 15px;
}
.repliedTo-message {
display: flex;
flex-direction: column;
gap: 5px;
}
.senderName {
margin: 0;
color: var(--mdc-theme-primary);
font-weight: bold;
}
.original-message {
margin: 0;
}
.reply-icon {
width: 20px;
color: var(--mdc-theme-primary);
}
.close-icon {
color: #676b71;
width: 25px;
transition: all 0.1s ease-in-out;
}
.close-icon:hover {
cursor: pointer;
color: #494c50;
}
.chat-text-area .typing-area .chatbar {
width: auto;
display: flex;
justify-content: center;
align-items: center;
height: auto;
padding: 5px;
}
.chat-text-area .typing-area .emoji-button { .chat-text-area .typing-area .emoji-button {
width: 45px; width: 45px;
height: 40px; height: 40px;
padding: 5px; padding-top: 4px;
border: none; border: none;
outline: none; outline: none;
background: transparent; background: transparent;
@ -136,20 +192,38 @@ class ChatPage extends LitElement {
this.isPasteMenuOpen = false this.isPasteMenuOpen = false
this.chatEditorPlaceholder = this.renderPlaceholder() this.chatEditorPlaceholder = this.renderPlaceholder()
this.messagesRendered = [] this.messagesRendered = []
this.repliedToSignature = '' this.repliedToMessageObj = null
} }
render() { render() {
return html` return html`
${this.isLoadingMessages ? html`<h1>${translate("chatpage.cchange22")}</h1>` : this.renderChatScroller(this._initialMessages)} ${this.isLoadingMessages ? html`<h1>${translate("chatpage.cchange22")}</h1>` : this.renderChatScroller(this._initialMessages)}
<div class="chat-text-area"> <div class="chat-text-area">
<div class="typing-area"> <div class="typing-area">
<textarea style="color: var(--black);" tabindex='1' ?autofocus=${true} ?disabled=${this.isLoading || this.isLoadingMessages} id="messageBox" rows="1"></textarea> ${this.repliedToMessageObj && html`
<iframe class="chat-editor" id="_chatEditorDOM" tabindex="-1"></iframe> <div class="repliedTo-container">
<button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}> <div class="repliedTo-subcontainer">
${this.isLoading === false ? html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg">` : html`<paper-spinner-lite active></paper-spinner-lite>`} <vaadin-icon class="reply-icon" icon="vaadin:reply" slot="icon"></vaadin-icon>
</button> <div class="repliedTo-message">
<p class="senderName">${this.repliedToMessageObj.senderName ? this.repliedToMessageObj.senderName : this.repliedToMessageObj.sender}</p>
<p class="original-message">${this.repliedToMessageObj.decodedMessage}</p>
</div>
</div>
<vaadin-icon
class="close-icon"
icon="vaadin:close-big"
slot="icon"
@click=${() => this.closeRepliedToContainer()}
></vaadin-icon>
</div>
`}
<div class="chatbar">
<textarea style="color: var(--black);" tabindex='1' ?autofocus=${true} ?disabled=${this.isLoading || this.isLoadingMessages} id="messageBox" rows="1"></textarea>
<iframe class="chat-editor" id="_chatEditorDOM" tabindex="-1"></iframe>
<button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}>
${this.isLoading === false ? html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg">` : html`<paper-spinner-lite active></paper-spinner-lite>`}
</button>
</div>
</div> </div>
</div> </div>
` `
@ -291,8 +365,8 @@ class ChatPage extends LitElement {
.emojiPicker=${this.emojiPicker} .emojiPicker=${this.emojiPicker}
.escapeHTML=${escape} .escapeHTML=${escape}
.getOldMessage=${this.getOldMessage} .getOldMessage=${this.getOldMessage}
.setRepliedToSignature=${this.setRepliedToSignature} .setRepliedToMessageObj=${(val) => this.setRepliedToMessageObj(val)}
.repliedToSignature=${this.repliedToSignature} .focusChatEditor=${() => this.focusChatEditor()}
> >
</chat-scroller>` </chat-scroller>`
} }
@ -398,9 +472,21 @@ class ChatPage extends LitElement {
} }
} }
setRepliedToSignature(messageSignature) { async setRepliedToMessageObj(messageObj) {
console.log(messageSignature, "Replied To Message Signature Here") console.log(messageObj, "Replied To Message Object Here")
this.repliedToSignature = messageSignature; this.repliedToMessageObj = {...messageObj};
this.requestUpdate();
await this.updateComplete;
console.log(this.repliedToMessageObj);
}
closeRepliedToContainer() {
this.repliedToMessageObj = null;
this.requestUpdate();
}
focusChatEditor() {
this.chatEditor.focus();
} }
/** /**
@ -454,10 +540,6 @@ class ChatPage extends LitElement {
async renderNewMessage(newMessage) { async renderNewMessage(newMessage) {
const viewElement = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById('viewElement'); const viewElement = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById('viewElement');
const downObserver = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById('downObserver');
const li = document.createElement('li');
li.innerHTML = this.chatMessageTemplate(newMessage);
li.id = newMessage.signature;
if (newMessage.sender === this.selectedAddress.address) { if (newMessage.sender === this.selectedAddress.address) {
@ -683,11 +765,11 @@ class ChatPage extends LitElement {
this.chatEditor.enable(); this.chatEditor.enable();
let err1string = get("chatpage.cchange24"); let err1string = get("chatpage.cchange24");
parentEpml.request('showSnackBar', `${err1string}`); parentEpml.request('showSnackBar', `${err1string}`);
} else if(this.repliedToSignature) { } else if (this.repliedToMessageObj) {
const messageObject = { const messageObject = {
messageText, messageText,
images: [''], images: [''],
repliedTo: this.repliedToSignature, repliedTo: this.repliedToMessageObj.signature,
version: 1 version: 1
} }
const stringifyMessageObject = JSON.stringify(messageObject) const stringifyMessageObject = JSON.stringify(messageObject)

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

@ -17,6 +17,10 @@ export const chatStyles = css`
--mdc-theme-secondary: var(--mdc-theme-primary); --mdc-theme-secondary: var(--mdc-theme-primary);
} }
* :focus-visible {
outline: none;
}
*::-webkit-scrollbar-track { *::-webkit-scrollbar-track {
background: var(--scrollbarBG); background: var(--scrollbarBG);
} }
@ -110,6 +114,8 @@ export const chatStyles = css`
.original-message { .original-message {
position: relative; position: relative;
display: flex;
flex-direction: column;
color: black; color: black;
line-height: 19px; line-height: 19px;
overflow-wrap: break-word; overflow-wrap: break-word;
@ -120,8 +126,6 @@ export const chatStyles = css`
background-color: rgba(209, 209, 209, 0.79); background-color: rgba(209, 209, 209, 0.79);
padding: 8px 5px 8px 25px; padding: 8px 5px 8px 25px;
white-space: nowrap; white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.original-message:before { .original-message:before {
@ -131,7 +135,18 @@ export const chatStyles = css`
left: 10px; left: 10px;
height: 75%; height: 75%;
width: 2.6px; width: 2.6px;
background-color: rgb(14, 190, 240); background-color: var(--mdc-theme-primary);
}
.original-message-sender {
margin: 0 0 5px 0;
color: var(--mdc-theme-primary);
}
.replied-message {
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
} }
.message { .message {
@ -166,7 +181,7 @@ export const chatStyles = css`
display: none; display: none;
position: absolute; position: absolute;
top: -38px; top: -38px;
right: 20px; right: 25px;
} }
.emoji { .emoji {
@ -229,6 +244,10 @@ export const chatStyles = css`
position: relative; position: relative;
} }
.container:focus-visible {
outline: none;
}
.menu-icon { .menu-icon {
width: 100%; width: 100%;
padding: 5px; padding: 5px;
@ -238,6 +257,7 @@ export const chatStyles = css`
} }
.menu-icon:hover { .menu-icon:hover {
border-radius: 5px;
background-color: #dad9d9; background-color: #dad9d9;
transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;
cursor: pointer; cursor: pointer;
@ -249,11 +269,12 @@ export const chatStyles = css`
.tooltip:before { .tooltip:before {
content: attr(data-text); content: attr(data-text);
display: none;
position: absolute; position: absolute;
top: -47px; top: -47px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
width: 90px; width: auto;
padding: 10px; padding: 10px;
border-radius: 10px; border-radius: 10px;
background:#fff; background:#fff;
@ -262,7 +283,8 @@ export const chatStyles = css`
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
font-size: 12px; font-size: 12px;
z-index: 5; z-index: 5;
display: none; white-space: nowrap;
overflow: hidden;
} }
.tooltip:hover:before { .tooltip:hover:before {
@ -285,7 +307,7 @@ export const chatStyles = css`
} }
.block-user-container { .block-user-container {
display: block; display: none;
position: absolute; position: absolute;
left: -5px; left: -5px;
} }

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

@ -25,8 +25,8 @@ class ChatScroller extends LitElement {
initialMessages: { type: Array }, // First set of messages to load.. 15 messages max ( props ) initialMessages: { type: Array }, // First set of messages to load.. 15 messages max ( props )
messages: { type: Array }, messages: { type: Array },
hideMessages: { type: Array }, hideMessages: { type: Array },
setRepliedToSignature: {type: Function}, setRepliedToMessageObj: { type: Function },
repliedToSignature: {type: String}, focusChatEditor: { type: Function }
} }
} }
@ -55,8 +55,8 @@ class ChatScroller extends LitElement {
.escapeHTML=${this.escapeHTML} .escapeHTML=${this.escapeHTML}
.messageObj=${message} .messageObj=${message}
.hideMessages=${this.hideMessages} .hideMessages=${this.hideMessages}
.setRepliedToSignature=${this.setRepliedToSignature} .setRepliedToMessageObj=${this.setRepliedToMessageObj}
.repliedToSignature=${this.repliedToSignature} .focusChatEditor=${this.focusChatEditor}
> >
</message-template>` </message-template>`
)} )}
@ -149,8 +149,8 @@ class MessageTemplate extends LitElement {
openDialogPrivateMessage: {type: Boolean}, openDialogPrivateMessage: {type: Boolean},
openDialogBlockUser: {type: Boolean}, openDialogBlockUser: {type: Boolean},
showBlockAddressIcon: { type: Boolean }, showBlockAddressIcon: { type: Boolean },
setRepliedToSignature: {type: Function}, setRepliedToMessageObj: { type: Function },
repliedToSignature: {type: String}, focusChatEditor: { type: Function },
} }
} }
@ -193,7 +193,6 @@ class MessageTemplate extends LitElement {
} }
render() { render() {
console.log(this.messageObj, "here244")
const hidemsg = this.hideMessages const hidemsg = this.hideMessages
let message = "" let message = ""
let repliedToData = null let repliedToData = null
@ -252,7 +251,8 @@ class MessageTemplate extends LitElement {
<div <div
class="original-message" class="original-message"
style=${this.messageObj.sender === this.myAddress && "background-color: rgb(179 179 179 / 79%)"}> style=${this.messageObj.sender === this.myAddress && "background-color: rgb(179 179 179 / 79%)"}>
${repliedToData.decodedMessage} <p class="original-message-sender">${repliedToData.sendName ?? repliedToData.sender}</p>
<p class="replied-message">${repliedToData.decodedMessage}</p>
</div> </div>
`} `}
<div id="messageContent" class="message"> <div id="messageContent" class="message">
@ -267,9 +267,9 @@ class MessageTemplate extends LitElement {
.showBlockUserModal=${() => this.showBlockUserModal()} .showBlockUserModal=${() => this.showBlockUserModal()}
.showBlockIconFunc=${(props) => this.showBlockIconFunc(props)} .showBlockIconFunc=${(props) => this.showBlockIconFunc(props)}
.showBlockAddressIcon=${this.showBlockAddressIcon} .showBlockAddressIcon=${this.showBlockAddressIcon}
.originalMessageSignature=${this.messageObj.signature} .originalMessage=${this.messageObj}
.setRepliedToSignature=${this.setRepliedToSignature} .setRepliedToMessageObj=${this.setRepliedToMessageObj}
.repliedToSignature=${this.repliedToSignature} .focusChatEditor=${this.focusChatEditor}
@blur=${() => this.showBlockIconFunc(false)} @blur=${() => this.showBlockIconFunc(false)}
> >
</chat-menu> </chat-menu>
@ -300,9 +300,9 @@ class ChatMenu extends LitElement {
toblockaddress: { type: String, attribute: true }, toblockaddress: { type: String, attribute: true },
showBlockIconFunc: {type: Function}, showBlockIconFunc: {type: Function},
showBlockAddressIcon: {type: Boolean}, showBlockAddressIcon: {type: Boolean},
originalMessageSignature: {type: String}, originalMessage: {type: Object},
setRepliedToSignature: {type: Function}, setRepliedToMessageObj: { type: Function },
repliedToSignature: {type: String}, focusChatEditor: {type: Function},
} }
} }
@ -337,7 +337,13 @@ class ChatMenu extends LitElement {
<div class="menu-icon tooltip" data-text="${translate("blockpage.bcchange8")}" @click="${() => this.copyToClipboard(this.toblockaddress)}"> <div class="menu-icon tooltip" data-text="${translate("blockpage.bcchange8")}" @click="${() => this.copyToClipboard(this.toblockaddress)}">
<vaadin-icon icon="vaadin:copy" slot="icon"></vaadin-icon> <vaadin-icon icon="vaadin:copy" slot="icon"></vaadin-icon>
</div> </div>
<div class="menu-icon tooltip" data-text="${translate("blockpage.bcchange11")}" @click="${() => this.setRepliedToSignature(this.originalMessageSignature)}"> <div
class="menu-icon tooltip"
data-text="${translate("blockpage.bcchange11")}"
@click="${() => {
this.setRepliedToMessageObj(this.originalMessage);
this.focusChatEditor();
}}">
<vaadin-icon icon="vaadin:reply" slot="icon"></vaadin-icon> <vaadin-icon icon="vaadin:reply" slot="icon"></vaadin-icon>
</div> </div>
<div class="menu-icon tooltip" data-text="${translate("blockpage.bcchange10")}" @click="${() => this.showBlockIconFunc(true)}"> <div class="menu-icon tooltip" data-text="${translate("blockpage.bcchange10")}" @click="${() => this.showBlockIconFunc(true)}">