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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 130
      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

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

@ -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)

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);
}
* :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;
}

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 )
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)}">

Write Preview
Loading…
Cancel
Save