forked from Qortal/qortal-ui
Finished design of the replies
This commit is contained in:
Justin Ferrari
parent
4aa9692e0f
commit
2a3da26808
@ -46,7 +46,7 @@ class ChatPage extends LitElement {
|
||||
hideNewMesssageBar: { attribute: false },
|
||||
chatEditorPlaceholder: { type: String },
|
||||
messagesRendered: { type: Array },
|
||||
repliedToSignature: { type: String },
|
||||
repliedToMessageObj: { type: Object },
|
||||
}
|
||||
}
|
||||
|
||||
@ -64,12 +64,11 @@ class ChatPage extends LitElement {
|
||||
|
||||
.chat-text-area .typing-area {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 98%;
|
||||
box-sizing: border-box;
|
||||
padding: 5px;
|
||||
margin-bottom: 8px;
|
||||
border: 1px solid var(--black);
|
||||
border-radius: 10px;
|
||||
@ -91,10 +90,67 @@ class ChatPage extends LitElement {
|
||||
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 {
|
||||
width: 45px;
|
||||
height: 40px;
|
||||
padding: 5px;
|
||||
padding-top: 4px;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
@ -136,20 +192,38 @@ class ChatPage extends LitElement {
|
||||
this.isPasteMenuOpen = false
|
||||
this.chatEditorPlaceholder = this.renderPlaceholder()
|
||||
this.messagesRendered = []
|
||||
this.repliedToSignature = ''
|
||||
this.repliedToMessageObj = null
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
|
||||
return html`
|
||||
${this.isLoadingMessages ? html`<h1>${translate("chatpage.cchange22")}</h1>` : this.renderChatScroller(this._initialMessages)}
|
||||
<div class="chat-text-area">
|
||||
<div class="typing-area">
|
||||
<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 class="typing-area">
|
||||
${this.repliedToMessageObj && html`
|
||||
<div class="repliedTo-container">
|
||||
<div class="repliedTo-subcontainer">
|
||||
<vaadin-icon class="reply-icon" icon="vaadin:reply" slot="icon"></vaadin-icon>
|
||||
<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>
|
||||
`
|
||||
@ -291,8 +365,8 @@ class ChatPage extends LitElement {
|
||||
.emojiPicker=${this.emojiPicker}
|
||||
.escapeHTML=${escape}
|
||||
.getOldMessage=${this.getOldMessage}
|
||||
.setRepliedToSignature=${this.setRepliedToSignature}
|
||||
.repliedToSignature=${this.repliedToSignature}
|
||||
.setRepliedToMessageObj=${(val) => this.setRepliedToMessageObj(val)}
|
||||
.focusChatEditor=${() => this.focusChatEditor()}
|
||||
>
|
||||
</chat-scroller>`
|
||||
}
|
||||
@ -397,10 +471,22 @@ class ChatPage extends LitElement {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
async setRepliedToMessageObj(messageObj) {
|
||||
console.log(messageObj, "Replied To Message Object Here")
|
||||
this.repliedToMessageObj = {...messageObj};
|
||||
this.requestUpdate();
|
||||
await this.updateComplete;
|
||||
console.log(this.repliedToMessageObj);
|
||||
}
|
||||
|
||||
setRepliedToSignature(messageSignature) {
|
||||
console.log(messageSignature, "Replied To Message Signature Here")
|
||||
this.repliedToSignature = messageSignature;
|
||||
closeRepliedToContainer() {
|
||||
this.repliedToMessageObj = null;
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
focusChatEditor() {
|
||||
this.chatEditor.focus();
|
||||
}
|
||||
|
||||
/**
|
||||
@ -454,10 +540,6 @@ class ChatPage extends LitElement {
|
||||
async renderNewMessage(newMessage) {
|
||||
|
||||
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) {
|
||||
|
||||
@ -683,11 +765,11 @@ class ChatPage extends LitElement {
|
||||
this.chatEditor.enable();
|
||||
let err1string = get("chatpage.cchange24");
|
||||
parentEpml.request('showSnackBar', `${err1string}`);
|
||||
} else if(this.repliedToSignature) {
|
||||
} else if (this.repliedToMessageObj) {
|
||||
const messageObject = {
|
||||
messageText,
|
||||
images: [''],
|
||||
repliedTo: this.repliedToSignature,
|
||||
repliedTo: this.repliedToMessageObj.signature,
|
||||
version: 1
|
||||
}
|
||||
const stringifyMessageObject = JSON.stringify(messageObject)
|
||||
|
||||
@ -17,6 +17,10 @@ export const chatStyles = css`
|
||||
--mdc-theme-secondary: var(--mdc-theme-primary);
|
||||
}
|
||||
|
||||
* :focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-track {
|
||||
background: var(--scrollbarBG);
|
||||
}
|
||||
@ -110,6 +114,8 @@ export const chatStyles = css`
|
||||
|
||||
.original-message {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: black;
|
||||
line-height: 19px;
|
||||
overflow-wrap: break-word;
|
||||
@ -120,8 +126,6 @@ export const chatStyles = css`
|
||||
background-color: rgba(209, 209, 209, 0.79);
|
||||
padding: 8px 5px 8px 25px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.original-message:before {
|
||||
@ -131,7 +135,18 @@ export const chatStyles = css`
|
||||
left: 10px;
|
||||
height: 75%;
|
||||
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 {
|
||||
@ -166,7 +181,7 @@ export const chatStyles = css`
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: -38px;
|
||||
right: 20px;
|
||||
right: 25px;
|
||||
}
|
||||
|
||||
.emoji {
|
||||
@ -229,6 +244,10 @@ export const chatStyles = css`
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
@ -238,6 +257,7 @@ export const chatStyles = css`
|
||||
}
|
||||
|
||||
.menu-icon:hover {
|
||||
border-radius: 5px;
|
||||
background-color: #dad9d9;
|
||||
transition: all 0.1s ease-in-out;
|
||||
cursor: pointer;
|
||||
@ -249,11 +269,12 @@ export const chatStyles = css`
|
||||
|
||||
.tooltip:before {
|
||||
content: attr(data-text);
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: -47px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 90px;
|
||||
width: auto;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
background:#fff;
|
||||
@ -262,7 +283,8 @@ export const chatStyles = css`
|
||||
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
|
||||
font-size: 12px;
|
||||
z-index: 5;
|
||||
display: none;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tooltip:hover:before {
|
||||
@ -285,7 +307,7 @@ export const chatStyles = css`
|
||||
}
|
||||
|
||||
.block-user-container {
|
||||
display: block;
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: -5px;
|
||||
}
|
||||
|
||||
@ -25,8 +25,8 @@ class ChatScroller extends LitElement {
|
||||
initialMessages: { type: Array }, // First set of messages to load.. 15 messages max ( props )
|
||||
messages: { type: Array },
|
||||
hideMessages: { type: Array },
|
||||
setRepliedToSignature: {type: Function},
|
||||
repliedToSignature: {type: String},
|
||||
setRepliedToMessageObj: { type: Function },
|
||||
focusChatEditor: { type: Function }
|
||||
}
|
||||
}
|
||||
|
||||
@ -55,8 +55,8 @@ class ChatScroller extends LitElement {
|
||||
.escapeHTML=${this.escapeHTML}
|
||||
.messageObj=${message}
|
||||
.hideMessages=${this.hideMessages}
|
||||
.setRepliedToSignature=${this.setRepliedToSignature}
|
||||
.repliedToSignature=${this.repliedToSignature}
|
||||
.setRepliedToMessageObj=${this.setRepliedToMessageObj}
|
||||
.focusChatEditor=${this.focusChatEditor}
|
||||
>
|
||||
</message-template>`
|
||||
)}
|
||||
@ -149,8 +149,8 @@ class MessageTemplate extends LitElement {
|
||||
openDialogPrivateMessage: {type: Boolean},
|
||||
openDialogBlockUser: {type: Boolean},
|
||||
showBlockAddressIcon: { type: Boolean },
|
||||
setRepliedToSignature: {type: Function},
|
||||
repliedToSignature: {type: String},
|
||||
setRepliedToMessageObj: { type: Function },
|
||||
focusChatEditor: { type: Function },
|
||||
}
|
||||
}
|
||||
|
||||
@ -193,7 +193,6 @@ class MessageTemplate extends LitElement {
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log(this.messageObj, "here244")
|
||||
const hidemsg = this.hideMessages
|
||||
let message = ""
|
||||
let repliedToData = null
|
||||
@ -252,7 +251,8 @@ class MessageTemplate extends LitElement {
|
||||
<div
|
||||
class="original-message"
|
||||
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 id="messageContent" class="message">
|
||||
@ -267,9 +267,9 @@ class MessageTemplate extends LitElement {
|
||||
.showBlockUserModal=${() => this.showBlockUserModal()}
|
||||
.showBlockIconFunc=${(props) => this.showBlockIconFunc(props)}
|
||||
.showBlockAddressIcon=${this.showBlockAddressIcon}
|
||||
.originalMessageSignature=${this.messageObj.signature}
|
||||
.setRepliedToSignature=${this.setRepliedToSignature}
|
||||
.repliedToSignature=${this.repliedToSignature}
|
||||
.originalMessage=${this.messageObj}
|
||||
.setRepliedToMessageObj=${this.setRepliedToMessageObj}
|
||||
.focusChatEditor=${this.focusChatEditor}
|
||||
@blur=${() => this.showBlockIconFunc(false)}
|
||||
>
|
||||
</chat-menu>
|
||||
@ -300,9 +300,9 @@ class ChatMenu extends LitElement {
|
||||
toblockaddress: { type: String, attribute: true },
|
||||
showBlockIconFunc: {type: Function},
|
||||
showBlockAddressIcon: {type: Boolean},
|
||||
originalMessageSignature: {type: String},
|
||||
setRepliedToSignature: {type: Function},
|
||||
repliedToSignature: {type: String},
|
||||
originalMessage: {type: Object},
|
||||
setRepliedToMessageObj: { type: Function },
|
||||
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)}">
|
||||
<vaadin-icon icon="vaadin:copy" slot="icon"></vaadin-icon>
|
||||
</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>
|
||||
</div>
|
||||
<div class="menu-icon tooltip" data-text="${translate("blockpage.bcchange10")}" @click="${() => this.showBlockIconFunc(true)}">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user