Browse Source

Merge pull request #1 from JustinWesleyFerrari/feature/replies

Feature/replies
q-apps
JustinWesleyFerrari 2 years ago committed by GitHub
parent
commit
e10256eb75
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 1285
      qortal-ui-core/language/us.json
  2. 155
      qortal-ui-plugins/plugins/core/components/ChatPage.js
  3. 114
      qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
  4. 79
      qortal-ui-plugins/plugins/core/components/ChatScroller.js

1285
qortal-ui-core/language/us.json

File diff suppressed because it is too large Load Diff

155
qortal-ui-plugins/plugins/core/components/ChatPage.js

@ -46,6 +46,7 @@ class ChatPage extends LitElement {
hideNewMesssageBar: { attribute: false },
chatEditorPlaceholder: { type: String },
messagesRendered: { type: Array },
repliedToMessageObj: { type: Object },
}
}
@ -63,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;
@ -90,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;
@ -135,18 +192,38 @@ class ChatPage extends LitElement {
this.isPasteMenuOpen = false
this.chatEditorPlaceholder = this.renderPlaceholder()
this.messagesRendered = []
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>
`
@ -281,7 +358,17 @@ class ChatPage extends LitElement {
}
renderChatScroller(initialMessages) {
return html`<chat-scroller .initialMessages=${initialMessages} .messages=${this.messagesRendered} .emojiPicker=${this.emojiPicker} .escapeHTML=${escape} .getOldMessage=${this.getOldMessage} > </chat-scroller>`
return html`
<chat-scroller
.initialMessages=${initialMessages}
.messages=${this.messagesRendered}
.emojiPicker=${this.emojiPicker}
.escapeHTML=${escape}
.getOldMessage=${this.getOldMessage}
.setRepliedToMessageObj=${(val) => this.setRepliedToMessageObj(val)}
.focusChatEditor=${() => this.focusChatEditor()}
>
</chat-scroller>`
}
async getUpdateComplete() {
@ -384,6 +471,23 @@ 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);
}
closeRepliedToContainer() {
this.repliedToMessageObj = null;
this.requestUpdate();
}
focusChatEditor() {
this.chatEditor.focus();
}
/**
* New Message Template implementation, takes in a message object.
@ -436,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) {
@ -642,6 +742,13 @@ class ChatPage extends LitElement {
}
_sendMessage() {
// have params to determine if it's a reply or not
// have variable to determine if it's a response, holds signature in constructor
// need original message signature
// need whole original message object, transform the data and put it in local storage
// create new var called repliedToData and use that to modify the UI
// find specific object property in local
this.isLoading = true;
this.chatEditor.disable();
const messageText = this.mirrorChatInput.value;
@ -658,8 +765,24 @@ class ChatPage extends LitElement {
this.chatEditor.enable();
let err1string = get("chatpage.cchange24");
parentEpml.request('showSnackBar', `${err1string}`);
} else if (this.repliedToMessageObj) {
const messageObject = {
messageText,
images: [''],
repliedTo: this.repliedToMessageObj.signature,
version: 1
}
const stringifyMessageObject = JSON.stringify(messageObject)
this.sendMessage(stringifyMessageObject);
} else {
this.sendMessage(trimmedMessage);
const messageObject = {
messageText,
images: [''],
repliedTo: '',
version: 1
}
const stringifyMessageObject = JSON.stringify(messageObject)
this.sendMessage(stringifyMessageObject);
}
}

114
qortal-ui-plugins/plugins/core/components/ChatScroller-css.js

@ -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);
}
@ -68,7 +72,7 @@ export const chatStyles = css`
.message-data {
width: 92%;
margin-bottom: 15px;
margin-left: 50px;
margin-left: 55px;
}
.message-data-name {
@ -89,48 +93,87 @@ export const chatStyles = css`
padding-bottom: 4px;
}
.chat-bubble-container {
display:flex;
gap: 7px;
}
.message-container {
position: relative;
display: flex;
flex-grow: 0;
flex-direction: column;
align-items: flex-start;
justify-content: center;
background-color: whitesmoke;
border-radius: 5px;
padding: 10px 15px;
gap: 10px;
margin-bottom: 20px;
}
.original-message {
position: relative;
display: flex;
flex-direction: column;
color: black;
line-height: 19px;
overflow-wrap: break-word;
user-select: text;
font-size: 16px;
width: 90%;
border-radius: 5px;
background-color: rgba(209, 209, 209, 0.79);
padding: 8px 5px 8px 25px;
white-space: nowrap;
}
.original-message:before {
content: "";
position: absolute;
top: 5px;
left: 10px;
height: 75%;
width: 2.6px;
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 {
color: black;
padding: 12px 10px;
line-height: 19px;
white-space: pre-line;
word-wrap: break-word;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
font-size: 16px;
border-radius: 7px;
margin-bottom: 20px;
width: 90%;
position: relative;
}
.message:after {
bottom: 100%;
left: 93%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
white-space: pre-line;
word-wrap: break-word;
pointer-events: none;
border-bottom-color: #ddd;
border-width: 10px;
margin-left: -10px;
.message-data-avatar {
margin: 0px 8px 3px 3px;
width: 42px;
height: 42px;
float: left;
}
.message-parent:hover .chat-hover {
display: block;
}
.message-parent:hover .message{
.message-parent:hover .message-container {
filter:brightness(0.90);
}
@ -138,7 +181,7 @@ export const chatStyles = css`
display: none;
position: absolute;
top: -38px;
left: 88.2%;
right: 25px;
}
.emoji {
@ -154,21 +197,11 @@ export const chatStyles = css`
border: 2px solid #eeeeee;
}
.my-message:after {
border-bottom-color: #d1d1d1;
left: 7%;
}
.other-message {
background: #f1f1f1;
border: 2px solid #dedede;
}
.other-message:after {
border-bottom-color: #f1f1f1;
left: 7%;
}
.align-left {
text-align: left;
}
@ -211,6 +244,10 @@ export const chatStyles = css`
position: relative;
}
.container:focus-visible {
outline: none;
}
.menu-icon {
width: 100%;
padding: 5px;
@ -220,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;
@ -231,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;
@ -244,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 {
@ -267,9 +307,9 @@ export const chatStyles = css`
}
.block-user-container {
display: block;
display: none;
position: absolute;
left: -48px;
left: -5px;
}
.block-user {
@ -277,7 +317,7 @@ export const chatStyles = css`
border: 1px solid rgb(218, 217, 217);
border-radius: 5px;
background-color: white;
width: 100%;
width: 90px;
height: 32px;
padding: 3px 8px;
box-shadow: rgba(77, 77, 82, 0.2) 0px 7px 29px 0px;

79
qortal-ui-plugins/plugins/core/components/ChatScroller.js

@ -24,7 +24,9 @@ class ChatScroller extends LitElement {
escapeHTML: { attribute: false },
initialMessages: { type: Array }, // First set of messages to load.. 15 messages max ( props )
messages: { type: Array },
hideMessages: { type: Array }
hideMessages: { type: Array },
setRepliedToMessageObj: { type: Function },
focusChatEditor: { type: Function }
}
}
@ -47,7 +49,16 @@ class ChatScroller extends LitElement {
${repeat(
this.messages,
(message) => message.reference,
(message) => html`<message-template .emojiPicker=${this.emojiPicker} .escapeHTML=${this.escapeHTML} .messageObj=${message} .hideMessages=${this.hideMessages}></message-template>`
(message) => html`
<message-template
.emojiPicker=${this.emojiPicker}
.escapeHTML=${this.escapeHTML}
.messageObj=${message}
.hideMessages=${this.hideMessages}
.setRepliedToMessageObj=${this.setRepliedToMessageObj}
.focusChatEditor=${this.focusChatEditor}
>
</message-template>`
)}
<div id='downObserver'></div>
<div class='last-message-ref'>
@ -137,7 +148,9 @@ class MessageTemplate extends LitElement {
hideMessages: { type: Array },
openDialogPrivateMessage: {type: Boolean},
openDialogBlockUser: {type: Boolean},
showBlockAddressIcon: { type: Boolean }
showBlockAddressIcon: { type: Boolean },
setRepliedToMessageObj: { type: Function },
focusChatEditor: { type: Function },
}
}
@ -181,7 +194,28 @@ class MessageTemplate extends LitElement {
render() {
const hidemsg = this.hideMessages
let message = ""
let repliedToData = null
try {
const parsedMessageObj = JSON.parse(this.messageObj.decodedMessage)
message = parsedMessageObj.messageText
repliedToData = {
"timestamp": 1663419371885,
"txGroupId": 0,
"reference": "5LuncmE2RsGVdQizkZLnjgqU8QozR2hHhkiSujUgywEfqAvm6RW4xZ7c9XjuMnb76bNmX2ntRNhnBF4ErvawM1dW",
"senderPublicKey": "xmZXCYzGU2t3S6Ehm2zp4pVm83q9d143NKRgmiU1dXW",
"sender": "Qj9aLrdK2FLQY6YssRQUkDmXNJCko2zF7e",
"senderName": "GiseleH",
"data": "3JLP9vViLoRPJ1Pqt2uC6Ufqf7wgTrs4HuV4Ltgwdnf5ekcBCCf5MTm2Sg3sXHeuVnCpoJAyVdqgAbr7tcBoq3soNZTjteusXjjW3NSMNcJEAadaTYC68xGXGmvK1jRyioPqGaKiXKzR2jPPRV5SyiPd66788Z2Rqt3VQB98rvronX5w5tE9UUWRor6bmMeVL3dj7fHYhLPPE5VBpCS9Eskti7vnTgDUQxnjfr",
"isText": true,
"isEncrypted": false,
"signature": "3jWvhQKSDt4Zqeup5sLfyNksVVphFW5iF11PsTZzXQLCCPH9pDMqwNoKE2oe3DPYz47VbbLgJaAWMVA44z9dUr9U",
"decodedMessage": "for TrentB512 who computer crashed your registered name in qortal for your level 3 account was TrentB512 https://exqlorer.com/address/Qf58otnEXeoyvD7dvYmfEGpQ64oMD3uvwM"
}
} catch (error) {
message = this.messageObj.decodedMessage
}
let avatarImg = ''
let nameMenu = ''
let levelFounder = ''
@ -209,9 +243,21 @@ class MessageTemplate extends LitElement {
<span class="message-data-level">${levelFounder}</span>
<span class="message-data-time"><message-time timestamp=${this.messageObj.timestamp}></message-time></span>
</div>
<div class="message-data-avatar" style="width:42px; height:42px; ${this.messageObj.sender === this.myAddress ? "float:left;" : "float:left;"} margin:3px;">${avatarImg}</div>
<div class="message-container">
<div id="messageContent" class="message ${this.messageObj.sender === this.myAddress ? "my-message float-left" : "other-message float-left"}">${unsafeHTML(this.emojiPicker.parse(this.escapeHTML(this.messageObj.decodedMessage)))}</div>
<div class="message-data-avatar">
${avatarImg}
</div>
<div class="message-container ${this.messageObj.sender === this.myAddress ? "my-message" : "other-message"}">
${repliedToData && html`
<div
class="original-message"
style=${this.messageObj.sender === this.myAddress && "background-color: rgb(179 179 179 / 79%)"}>
<p class="original-message-sender">${repliedToData.sendName ?? repliedToData.sender}</p>
<p class="replied-message">${repliedToData.decodedMessage}</p>
</div>
`}
<div id="messageContent" class="message">
${unsafeHTML(this.emojiPicker.parse(this.escapeHTML(message)))}
</div>
<chat-menu
tabindex="0"
class="chat-hover"
@ -221,6 +267,9 @@ class MessageTemplate extends LitElement {
.showBlockUserModal=${() => this.showBlockUserModal()}
.showBlockIconFunc=${(props) => this.showBlockIconFunc(props)}
.showBlockAddressIcon=${this.showBlockAddressIcon}
.originalMessage=${this.messageObj}
.setRepliedToMessageObj=${this.setRepliedToMessageObj}
.focusChatEditor=${this.focusChatEditor}
@blur=${() => this.showBlockIconFunc(false)}
>
</chat-menu>
@ -250,7 +299,10 @@ class ChatMenu extends LitElement {
showBlockUserModal: {type: Function},
toblockaddress: { type: String, attribute: true },
showBlockIconFunc: {type: Function},
showBlockAddressIcon: {type: Boolean}
showBlockAddressIcon: {type: Boolean},
originalMessage: {type: Object},
setRepliedToMessageObj: { type: Function },
focusChatEditor: {type: Function},
}
}
@ -278,13 +330,22 @@ class ChatMenu extends LitElement {
render() {
return html`
<div class="container" style=${this.showBlockAddressIcon && "width: 70px" }>
<div class="container">
<div class="menu-icon tooltip" data-text="${translate("blockpage.bcchange9")}" @click="${() => this.showPrivateMessageModal()}">
<vaadin-icon icon="vaadin:paperplane" slot="icon"></vaadin-icon>
</div>
<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.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)}">
<vaadin-icon icon="vaadin:ellipsis-dots-h" slot="icon"></vaadin-icon>
</div>

Loading…
Cancel
Save