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

Merge remote-tracking branch 'justin/feature/implement-UI-edit-reply-messages' into feature/implement-logic-edit-reply-messages

pull/127/head
Phillip Lang Martinez 2 years ago
parent
b6aa3aecac 30cf0b1569
commit
9d9f6602bf
7 changed files with 234 additions and 94 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. 1
      qortal-ui-plugins/plugins/core/components/ChatModals.js
  2. 82
      qortal-ui-plugins/plugins/core/components/ChatPage.js
  3. 48
      qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
  4. 113
      qortal-ui-plugins/plugins/core/components/ChatScroller.js
  5. 12
      qortal-ui-plugins/plugins/core/components/ChatWelcomePage.js
  6. 6
      qortal-ui-plugins/plugins/core/components/NameMenu.js
  7. 22
      qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js

1
qortal-ui-plugins/plugins/core/components/ChatModals.js
Unescape View File

@ -366,7 +366,6 @@ class ChatModals extends LitElement {
<textarea class='textarea' @keydown=${(e) => this._textArea(e)} ?disabled=${this.isLoading} id='messageBox' placeholder='${translate('welcomepage.wcchange5')}' rows='1'></textarea>
</p>
<mwc-button ?disabled='${this.isLoading}' slot='primaryAction' @click=${() => {
console.log("here500");
this._sendMessage();
}
}>${translate('welcomepage.wcchange6')}

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

@ -54,8 +54,9 @@ class ChatPage extends LitElement {
_initialMessages: { type: Array },
isUserDown: { type: Boolean },
isPasteMenuOpen: { type: Boolean },
showNewMesssageBar: { attribute: false },
hideNewMesssageBar: { attribute: false },
showNewMessageBar: { attribute: false },
hideNewMessageBar: { attribute: false },
setOpenPrivateMessage: { attribute: false },
chatEditorPlaceholder: { type: String },
messagesRendered: { type: Array },
repliedToMessageObj: { type: Object },
@ -75,6 +76,8 @@ class ChatPage extends LitElement {
openForwardOpen: {type: Boolean },
userFound: { type: Array },
userFoundModalOpen: { type: Boolean },
webWorker: { type: Object },
webWorkerImage: { type: Object }
}
}
@ -693,10 +696,12 @@ class ChatPage extends LitElement {
name: "",
selected: false
}
this.webWorker = null;
this.webWorkerImage = null;
}
render() {
console.log(25, 'here');
console.log(5, 'Chat Page Here');
return html`
<div class="chat-container">
<div>
@ -799,7 +804,7 @@ class ChatPage extends LitElement {
.onClickFunc=${() => {
this.chatEditorNewChat.resetValue();
this.removeImage();
} }
}}
style=${(this.imageFile && !this.isUploadingImage) ? "display: block" : "display: none"}>
<div>
<div class="dialog-container">
@ -983,6 +988,18 @@ class ChatPage extends LitElement {
`
}
connectedCallback() {
super.connectedCallback();
this.webWorker = new WebWorker();
this.webWorkerImage = new WebWorkerImage();
}
disconnectedCallback() {
super.disconnectedCallback();
this.webWorker.terminate();
this.webWorkerImage.terminate();
}
async userSearch() {
const nameValue = this.shadowRoot.getElementById('sendTo').value;
if (!nameValue) {
@ -1175,9 +1192,6 @@ class ChatPage extends LitElement {
}
}
if (changedProperties && changedProperties.has('forwardActiveChatHeadUrl')) {
console.log(this.forwardActiveChatHeadUrl, "forwardActiveChatHeadUrl here");
}
}
async renderPlaceholder() {
@ -1224,6 +1238,7 @@ class ChatPage extends LitElement {
?isLoadingMessages=${this.isLoadingOldMessages}
.setIsLoadingMessages=${(val) => this.setIsLoadingMessages(val)}
.setForwardProperties=${(forwardedMessage)=> this.setForwardProperties(forwardedMessage)}
.setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}
>
</chat-scroller>
`
@ -1435,7 +1450,7 @@ class ChatPage extends LitElement {
this.messagesRendered = [...this.messagesRendered, newMessage]
await this.getUpdateComplete();
this.showNewMesssageBar();
this.showNewMessageBar();
}
}
@ -1673,7 +1688,6 @@ class ChatPage extends LitElement {
}
async _sendMessage(outSideMsg) {
if(this.isReceipient){
let hasPublicKey = true
if(!this._publicKey.hasPubKey){
@ -1714,7 +1728,7 @@ class ChatPage extends LitElement {
// create new var called repliedToData and use that to modify the UI
// find specific object property in local
let typeMessage = 'regular';
let workerImage;
this.isLoading = true;
this.chatEditor.disable();
this.chatEditorNewChat.disable()
@ -1748,6 +1762,12 @@ class ChatPage extends LitElement {
let compressedFile = ''
var str = "iVBORw0KGgoAAAANSUhEUgAAAsAAAAGMAQMAAADuk4YmAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAADlJREFUeF7twDEBAAAAwiD7p7bGDlgYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAGJrAABgPqdWQAAAABJRU5ErkJggg==";
if (this.webWorkerImage) {
workerImage = this.webWorkerImage;
} else {
this.webWorkerImage = new WebWorkerImage();
}
const b64toBlob = (b64Data, contentType='', sliceSize=512) => {
const byteCharacters = atob(b64Data);
const byteArrays = [];
@ -1795,7 +1815,7 @@ class ChatPage extends LitElement {
metaData: undefined,
uploadType: 'file',
selectedAddress: this.selectedAddress,
worker: new WebWorkerImage()
worker: workerImage
})
this.isDeletingImage = false
} catch (error) {
@ -1839,6 +1859,13 @@ class ChatPage extends LitElement {
this.chatEditorNewChat.enable()
return;
}
if (this.webWorkerImage) {
workerImage = this.webWorkerImage;
} else {
this.webWorkerImage = new WebWorkerImage();
}
const image = this.imageFile
const id = this.uid();
const identifier = `qchat_${id}`;
@ -1878,7 +1905,7 @@ class ChatPage extends LitElement {
metaData: undefined,
uploadType: 'file',
selectedAddress: this.selectedAddress,
worker: new WebWorkerImage()
worker: workerImage
});
this.isUploadingImage = false;
this.imageFile = null;
@ -2162,21 +2189,29 @@ class ChatPage extends LitElement {
const _computePow = async (chatBytes, isForward) => {
const difficulty = this.balance === 0 ? 12 : 8;
const path = window.parent.location.origin + '/memory-pow/memory-pow.wasm.full'
const worker = new WebWorker();
let nonce = null
let chatBytesArray = null
let worker;
if (this.webWorker) {
worker = this.webWorker;
} else {
this.webWorker = new WebWorker();
}
let nonce = null;
let chatBytesArray = null;
await new Promise((res, rej) => {
worker.postMessage({chatBytes, path, difficulty});
worker.onmessage = e => {
worker.terminate()
chatBytesArray = e.data.chatBytesArray
nonce = e.data.nonce
res()
chatBytesArray = e.data.chatBytesArray;
nonce = e.data.nonce;
res();
}
})
});
let _response = await parentEpml.request('sign_chat', {
nonce: this.selectedAddress.nonce,
@ -2184,7 +2219,6 @@ class ChatPage extends LitElement {
chatNonce: nonce
});
getSendChatResponse(_response, isForward);
};
@ -2232,7 +2266,7 @@ class ChatPage extends LitElement {
if (entries[0].isIntersecting) {
this.setIsUserDown(true)
this.hideNewMesssageBar()
this.hideNewMessageBar()
} else {
this.setIsUserDown(false)

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

@ -446,4 +446,52 @@ export const chatStyles = css`
width: 100%;
justify-content: center
}
.delete-image-msg {
font-family: Livvic, sans-serif;
font-size: 20px;
color: var(--chat-bubble-msg-color);
letter-spacing: 0.3px;
font-weight: 300;
text-align: center;
}
.modal-button-row {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.modal-button {
font-family: Roboto, sans-serif;
font-size: 16px;
color: var(--mdc-theme-primary);
background-color: transparent;
padding: 8px 10px;
border-radius: 5px;
border: none;
transition: all 0.3s ease-in-out;
}
.modal-button-red {
font-family: Roboto, sans-serif;
font-size: 16px;
color: #F44336;
background-color: transparent;
padding: 8px 10px;
border-radius: 5px;
border: none;
transition: all 0.3s ease-in-out;
}
.modal-button-red:hover {
cursor: pointer;
background-color: #f4433663;
}
.modal-button:hover {
cursor: pointer;
background-color: #03a8f475;
}
`

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

@ -36,7 +36,8 @@ class ChatScroller extends LitElement {
isLoadingMessages: { type: Boolean},
setIsLoadingMessages: {attribute: false},
chatId: { type: String },
setForwardProperties: {attribute: false},
setForwardProperties: { attribute: false },
setOpenPrivateMessage: { attribute: false },
}
}
@ -53,12 +54,22 @@ class ChatScroller extends LitElement {
render() {
console.log({messages: this.messages})
let formattedMessages = this.messages.reduce((messageArray, message) => {
let formattedMessages = this.messages.reduce((messageArray, message, index) => {
const lastGroupedMessage = messageArray[messageArray.length - 1];
let timestamp;
let sender;
let repliedToData;
let firstMessageInChat;
if (index === 0) {
firstMessageInChat = true;
} else {
firstMessageInChat = false;
}
message = {...message, firstMessageInChat}
if (lastGroupedMessage) {
timestamp = lastGroupedMessage.timestamp;
sender = lastGroupedMessage.sender;
@ -105,6 +116,7 @@ class ChatScroller extends LitElement {
?isLastMessageInGroup=${indexMessage === formattedMessage.messages.length - 1}
.setToggledMessage=${this.setToggledMessage}
.setForwardProperties=${this.setForwardProperties}
.setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}
>
</message-template>`
)
@ -132,11 +144,10 @@ class ChatScroller extends LitElement {
return true;
}
setToggledMessage(message){
toggledMessage = message
setToggledMessage (message) {
toggledMessage = message;
}
async firstUpdated() {
this.emojiPicker.on('emoji', selection => {
@ -144,8 +155,6 @@ class ChatScroller extends LitElement {
type: 'reaction',
editedMessageObj: toggledMessage,
reaction: selection.emoji,
})
});
this.viewElement = this.shadowRoot.getElementById('viewElement');
@ -217,22 +226,24 @@ class MessageTemplate extends LitElement {
emojiPicker: { attribute: false },
escapeHTML: { attribute: false },
hideMessages: { type: Array },
openDialogPrivateMessage: {type: Boolean},
openDialogBlockUser: {type: Boolean},
openDialogPrivateMessage: { type: Boolean },
openDialogBlockUser: { type: Boolean },
showBlockAddressIcon: { type: Boolean },
setRepliedToMessageObj: {attribute: false},
setEditedMessageObj: {attribute: false},
focusChatEditor: {attribute: false},
sendMessage: {attribute: false},
sendMessageForward: {attribute: false},
openDialogImage: {attribute: false},
setRepliedToMessageObj: { attribute: false },
setEditedMessageObj: { attribute: false },
focusChatEditor: { attribute: false },
sendMessage: { attribute: false },
sendMessageForward: { attribute: false },
openDialogImage: { attribute: false },
openDeleteImage: { type: Boolean },
isImageLoaded: { type: Boolean },
isFirstMessage: { type: Boolean },
isSingleMessageInGroup: { type: Boolean },
isLastMessageInGroup: { type: Boolean },
setToggledMessage: {attribute: false},
setForwardProperties: {attribute: false},
viewImage: {type: Boolean}
viewImage: {type: Boolean},
setOpenPrivateMessage : { attribute: false }
}
}
@ -477,12 +488,10 @@ class MessageTemplate extends LitElement {
class=${[`image-container`, !this.isImageLoaded ? 'defaultSize' : ''].join(' ')}
style=${this.isFirstMessage && "margin-top: 10px;"}>
${imageHTML}<vaadin-icon
@click=${() => this.sendMessage({
type: 'delete',
name: image.name,
identifier: image.identifier,
editedMessageObj: this.messageObj,
})}
@click=${() => {
this.openDeleteImage = true;
this.chatE
}}
class="image-delete-icon" icon="vaadin:close" slot="icon"></vaadin-icon>
</div>
` : image && isImageDeleted ? html`
@ -527,6 +536,8 @@ class MessageTemplate extends LitElement {
.emojiPicker=${this.emojiPicker}
.setToggledMessage=${this.setToggledMessage}
.setForwardProperties=${this.setForwardProperties}
?firstMessageInChat=${this.messageObj.firstMessageInChat}
.setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}
>
</chat-menu>
</div>
@ -580,6 +591,31 @@ class MessageTemplate extends LitElement {
${translate("general.close")}
</mwc-button>
</mwc-dialog>
<mwc-dialog
hideActions
?open=${this.openDeleteImage}
@closed=${()=> {
this.openDeleteImage = false;
}}>
<div class="delete-image-msg">
<p>Are you sure you want to delete this image?</p>
</div>
<div class="modal-button-row" @click=${() => this.openDeleteImage = false}>
<button class="modal-button-red">
Cancel
</button>
<button
class="modal-button"
@click=${() => this.sendMessage({
type: 'delete',
name: image.name,
identifier: image.identifier,
editedMessageObj: this.messageObj,
})}>
Yes
</button>
</div>
</mwc-dialog>
`
}
}
@ -601,11 +637,13 @@ class ChatMenu extends LitElement {
focusChatEditor: {attribute: false},
myAddress: { type: Object },
emojiPicker: { attribute: false },
sendMessage: {attribute: false},
version: {type: String},
setToggledMessage: {attribute: false},
sendMessageForward: {attribute: false},
setForwardProperties: {attribute: false}
sendMessage: { attribute: false },
version: { type: String },
setToggledMessage: { attribute: false },
sendMessageForward: { attribute: false },
setForwardProperties: { attribute: false },
firstMessageInChat: { type: Boolean },
setOpenPrivateMessage: { attribute: false }
}
}
@ -684,7 +722,7 @@ class ChatMenu extends LitElement {
return html`
<div class="container">
<div
class="menu-icon tooltip reaction"
class=${`menu-icon reaction ${!this.firstMessageInChat ? "tooltip" : ""}`}
data-text="${translate("blockpage.bcchange13")}"
@click=${(e) => {
if(this.version === '0'){
@ -703,24 +741,27 @@ class ChatMenu extends LitElement {
<vaadin-icon icon="vaadin:smiley-o" slot="icon"></vaadin-icon>
</div>
<div
class="menu-icon tooltip"
class=${`menu-icon ${!this.firstMessageInChat ? "tooltip" : ""}`}
data-text="${translate("blockpage.bcchange14")}"
@click="${() => {
this.messageForwardFunc()
}}">
<vaadin-icon icon="vaadin:arrow-forward" slot="icon"></vaadin-icon>
</div>
<div class="menu-icon tooltip" data-text="${translate("blockpage.bcchange9")}" @click="${() => this.showPrivateMessageModal()}">
<div class=${`menu-icon ${!this.firstMessageInChat ? "tooltip" : ""}`} data-text="${translate("blockpage.bcchange9")}" @click="${() => this.setOpenPrivateMessage({
name: this.originalMessage.senderName ? this.originalMessage.senderName : this.originalMessage.sender,
open: true
})}">
<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)}">
<div class=${`menu-icon ${!this.firstMessageInChat ? "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"
class=${`menu-icon ${!this.firstMessageInChat ? "tooltip" : ""}`}
data-text="${translate("blockpage.bcchange11")}"
@click="${() => {
if(this.version === '0'){
if (this.version === '0') {
this.versionErrorSnack()
return
}
@ -733,7 +774,7 @@ class ChatMenu extends LitElement {
${this.myAddress === this.originalMessage.sender ? (
html`
<div
class="menu-icon tooltip"
class=${`menu-icon ${!this.firstMessageInChat ? "tooltip" : ""}`}
data-text="${translate("blockpage.bcchange12")}"
@click=${() => {
if(this.version === '0'){
@ -747,7 +788,7 @@ class ChatMenu extends LitElement {
</div>
`
) : html`<div></div>`}
<div class="menu-icon tooltip" data-text="${translate("blockpage.bcchange10")}" @click="${() => this.showBlockIconFunc(true)}">
<div class=${`menu-icon ${!this.firstMessageInChat ? "tooltip" : ""}`} data-text="${translate("blockpage.bcchange10")}" @click="${() => this.showBlockIconFunc(true)}">
<vaadin-icon icon="vaadin:ellipsis-dots-h" slot="icon"></vaadin-icon>
</div>
${this.showBlockAddressIcon

12
qortal-ui-plugins/plugins/core/components/ChatWelcomePage.js
Unescape View File

@ -25,7 +25,8 @@ class ChatWelcomePage extends LitElement {
btnDisable: { type: Boolean },
isLoading: { type: Boolean },
balance: { type: Number },
theme: { type: String, reflect: true }
theme: { type: String, reflect: true },
setOpenPrivateMessage: { attribute: false }
}
}
@ -212,7 +213,14 @@ class ChatWelcomePage extends LitElement {
<div class="center-box">
<mwc-icon class="img-icon">chat</mwc-icon><br>
<span style="font-size: 20px; color: var(--black);">${this.myAddress.address}</span>
<div class="start-chat" @click=${() => this.shadowRoot.querySelector('#startSecondChatDialog').show()}>${translate("welcomepage.wcchange2")}</div>
<div
class="start-chat"
@click="${() => this.setOpenPrivateMessage({
name: "",
open: true
})}">
${translate("welcomepage.wcchange2")}
</div>
</div>
</div>

6
qortal-ui-plugins/plugins/core/components/NameMenu.js
Unescape View File

@ -250,15 +250,15 @@ class NameMenu extends LitElement {
}
firstUpdated() {
this.getChatBlockedAdresses()
this.getChatBlockedAdresses();
setInterval(() => {
this.getChatBlockedAdresses();
}, 60000)
window.addEventListener('storage', () => {
const checkLanguage = localStorage.getItem('qortalLanguage')
use(checkLanguage)
const checkLanguage = localStorage.getItem('qortalLanguage');
use(checkLanguage);
})
window.onclick = function(event) {

22
qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js
Unescape View File

@ -70,8 +70,9 @@ class Chat extends LitElement {
this.messages = []
this.btnDisable = false
this.isLoading = false
this.showNewMesssageBar = this.showNewMesssageBar.bind(this)
this.hideNewMesssageBar = this.hideNewMesssageBar.bind(this)
this.showNewMessageBar = this.showNewMessageBar.bind(this)
this.hideNewMessageBar = this.hideNewMessageBar.bind(this)
this.setOpenPrivateMessage = this.setOpenPrivateMessage.bind(this)
this._sendMessage = this._sendMessage.bind(this)
this.insertImage = this.insertImage.bind(this)
this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
@ -399,6 +400,11 @@ class Chat extends LitElement {
parentEpml.imReady()
}
setOpenPrivateMessage(props) {
this.openPrivateMessage = props.open;
this.shadowRoot.getElementById("sendTo").value = props.name
}
async userSearch() {
const nameValue = this.shadowRoot.getElementById('sendTo').value;
if(!nameValue) {
@ -725,7 +731,11 @@ class Chat extends LitElement {
}
renderChatWelcomePage() {
return html`<chat-welcome-page myAddress=${JSON.stringify(this.selectedAddress)}></chat-welcome-page>`
return html`
<chat-welcome-page
myAddress=${JSON.stringify(this.selectedAddress)}
.setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}>
</chat-welcome-page>`
}
renderChatHead(chatHeadArr) {
@ -745,7 +755,7 @@ class Chat extends LitElement {
// Else render Welcome to Q-CHat
// TODO: DONE: Do the above in the ChatPage
return html`<chat-page .chatHeads=${this.chatHeads} .hideNewMesssageBar=${this.hideNewMesssageBar} .showNewMesssageBar=${this.showNewMesssageBar} myAddress=${window.parent.reduxStore.getState().app.selectedAddress.address} chatId=${this.activeChatHeadUrl}></chat-page>`
return html`<chat-page .chatHeads=${this.chatHeads} .hideNewMessageBar=${this.hideNewMessageBar} .showNewMessageBar=${this.showNewMessageBar} myAddress=${window.parent.reduxStore.getState().app.selectedAddress.address} chatId=${this.activeChatHeadUrl} .setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}></chat-page>`
}
setChatHeads(chatObj) {
@ -835,11 +845,11 @@ class Chat extends LitElement {
viewElement.scroll({ top: viewElement.scrollHeight, left: 0, behavior: 'smooth' })
}
showNewMesssageBar() {
showNewMessageBar() {
this.shadowRoot.getElementById('newMessageBar').classList.remove('hide-new-message-bar')
}
hideNewMesssageBar() {
hideNewMessageBar() {
this.shadowRoot.getElementById('newMessageBar').classList.add('hide-new-message-bar')
}
}

Write Preview
Loading…
Cancel
Save