Qortal
/
qortal-ui
mirror of https://github.com/qortal/qortal-ui
4
1
Fork 4
Code Issues Projects Releases Wiki Activity
Browse Source

Finished design of the replies

pull/127/head
Justin Ferrari 2 years ago
parent
4aa9692e0f
commit
2a3da26808
3 changed files with 156 additions and 46 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 128
      qortal-ui-plugins/plugins/core/components/ChatPage.js
  2. 36
      qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
  3. 36
      qortal-ui-plugins/plugins/core/components/ChatScroller.js

128
qortal-ui-plugins/plugins/core/components/ChatPage.js
Unescape 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
Unescape 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
Unescape 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)}">

Write Preview
Loading…
Cancel
Save