Qortal/qortal-ui
4
1
Fork 4
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-02-12 10:15:50 +00:00
Code Issues Projects Releases Wiki Activity

Fixed private message bugs

Browse Source
This commit is contained in:
Justin Ferrari 2022-12-16 11:41:51 -05:00
parent ddf8a740f9
commit 0dc1f5ec79
4 changed files with 153 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -673,9 +673,9 @@ class ChatPage extends LitElement {
</div>
`: ''}
<wrapper-modal
.removeImage=${() => {
this.chatEditorNewChat.resetValue()
this.removeImage()
.onClickFunc=${() => {
this.chatEditorNewChat.resetValue();
this.removeImage();
} }
style=${(this.imageFile && !this.isUploadingImage) ? "display: block" : "display: none"}>
<div>
@ -724,7 +724,7 @@ class ChatPage extends LitElement {
</div>
</wrapper-modal>
<wrapper-modal
.removeImage=${() => {
.onClickFunc=${() => {
this.openForwardOpen = false
this.forwardActiveChatHeadUrl = ""
} }

18
qortal-ui-plugins/plugins/core/components/ChatTextEditor.js
View File

@ -174,9 +174,12 @@ class ChatTextEditor extends LitElement {
<div
class=${["chatbar-container", (this.iframeId === "newChat" || this.iframeId === "privateMessage") ? "chatbar-caption" : ""].join(" ")}
style="${scrollHeightBool ? 'align-items: flex-end' : "align-items: center"}">
<div class="file-picker-container" @click=${(e) => {
this.preventUserSendingImage(e)
}}>
<div
style=${this.iframeId === "privateMessage" ? "display: none" : "display: block"}
class="file-picker-container"
@click=${(e) => {
this.preventUserSendingImage(e)
}}>
<vaadin-icon
class="paperclip-icon"
icon="vaadin:paperclip"
@ -328,7 +331,10 @@ class ChatTextEditor extends LitElement {
});
this.emojiPickerHandler.addEventListener('click', () => this.emojiPicker.togglePicker(this.emojiPickerHandler));
this.emojiPickerHandler.addEventListener('click', () => {
console.log("yo what's up?")
this.emojiPicker.togglePicker(this.emojiPickerHandler)
});
await this.updateComplete;
this.initChatEditor();
@ -366,6 +372,7 @@ class ChatTextEditor extends LitElement {
return;
};
this.chatMessageSize = 0;
this.chatEditor.updateMirror();
this._sendMessage();
}
@ -693,11 +700,10 @@ class ChatTextEditor extends LitElement {
}, 0);
res();
})
// Handle Enter
if (e.keyCode === 13 && !e.shiftKey) {
// Update Mirror
editor.updateMirror();
if (editor.state() === 'false') return false;
if (editorConfig.iframeId === 'newChat') {

5
qortal-ui-plugins/plugins/core/components/WrapperModal.js
View File

@ -5,7 +5,8 @@ import { wrapperModalStyles } from './WrapperModal-css.js'
export class WrapperModal extends LitElement {
static get properties() {
return {
removeImage: { type: Function },
onClickFunc: { attribute: false },
closePrivateMessage: { attribute: false },
}
}
@ -15,7 +16,7 @@ export class WrapperModal extends LitElement {
return html`
<div>
<div class="backdrop" @click=${() => {
this.removeImage()
this.onClickFunc();
}}></div>
<div class="modal-body">
<slot></slot>

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

@ -1,23 +1,24 @@
import { LitElement, html, css } from 'lit'
import { render } from 'lit/html.js'
import { Epml } from '../../../../epml.js'
import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'
import WebWorker from 'web-worker:../../components/computePowWorker.js';
import { LitElement, html, css } from 'lit';
import { render } from 'lit/html.js';
import { Epml } from '../../../../epml.js';
import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate';
import WebWorker from 'web-worker:./computePowWorker.js';
registerTranslateConfig({
loader: lang => fetch(`/language/${lang}.json`).then(res => res.json())
})
import '../../components/ChatWelcomePage.js'
import '../../components/ChatHead.js'
import '../../components/ChatPage.js'
import snackbar from '../../components/snackbar.js'
import '@polymer/paper-spinner/paper-spinner-lite.js'
import '@material/mwc-button'
import '@material/mwc-dialog'
import '@material/mwc-icon'
import '@material/mwc-snackbar'
import '@vaadin/grid'
import '../../components/ChatWelcomePage.js';
import '../../components/ChatHead.js';
import '../../components/ChatPage.js';
import '../../components/WrapperModal.js';
import snackbar from '../../components/snackbar.js';
import '@polymer/paper-spinner/paper-spinner-lite.js';
import '@material/mwc-button';
import '@material/mwc-dialog';
import '@material/mwc-icon';
import '@material/mwc-snackbar';
import '@vaadin/grid';
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
@ -39,7 +40,8 @@ class Chat extends LitElement {
privateMessagePlaceholder: { type: String},
chatEditor: { type: Object },
imageFile: { type: Object },
activeChatHeadUrl: {type: String}
activeChatHeadUrl: {type: String},
openPrivateMessage: { type: Boolean }
}
}
@ -303,6 +305,54 @@ class Chat extends LitElement {
resize: none;
background: #eee;
}
.dialog-container {
position: relative;
display: flex;
align-items: center;
flex-direction: column;
padding: 0 10px;
gap: 10px;
height: 100%;
}
.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;
}
`
}
@ -334,6 +384,7 @@ class Chat extends LitElement {
this.privateMessagePlaceholder = ""
this.imageFile = null
this.activeChatHeadUrl = ''
this.openPrivateMessage = false
}
async setActiveChatHeadUrl(url) {
@ -347,7 +398,10 @@ class Chat extends LitElement {
<div class="container clearfix">
<div class="people-list" id="people-list">
<div class="search">
<div class="create-chat" @click=${() => this.shadowRoot.querySelector('#startChatDialog').show()}>${translate("chatpage.cchange1")}</div>
<div class="create-chat" @click=${() => {
this.openPrivateMessage = true;
}}>${translate("chatpage.cchange1")}
</div>
</div>
<ul class="list">
${this.isEmptyArray(this.chatHeads) ? this.renderLoadingText() : this.renderChatHead(this.chatHeads)}
@ -371,51 +425,65 @@ class Chat extends LitElement {
</div>
<!-- Start Chatting Dialog -->
<mwc-dialog id="startChatDialog" scrimClickAction="${this.isLoading ? '' : 'close'}">
<div style="text-align:center">
<h1>${translate("chatpage.cchange1")}</h1>
<hr>
</div>
<p>${translate("chatpage.cchange6")}</p>
<textarea
class="input"
?disabled=${this.isLoading}
id="sendTo"
placeholder="${translate("chatpage.cchange7")}"
rows="1">
</textarea>
<chat-text-editor
id="messageBox"
iframeId="privateMessage"
?hasGlobalEvents=${true}
placeholder="${translate("chatpage.cchange8")}"
.setChatEditor=${(editor)=> this.setChatEditor(editor)}
.chatEditor=${this.chatEditor}
.imageFile=${this.imageFile}.
._sendMessage=${this._sendMessage}
.insertImage=${this.insertImage}
?isLoading=${this.isLoading}>
</chat-text-editor>
<mwc-button
?disabled="${this.isLoading}"
slot="primaryAction"
@click=${this.sendMessageFunc}
>
${this.isLoading === false ? this.renderSendText() : html`<paper-spinner-lite active></paper-spinner-lite>`}
</mwc-button>
<mwc-button
?disabled="${this.isLoading}"
slot="secondaryAction"
dialogAction="cancel"
class="red"
>
${translate("general.close")}
</mwc-button>
</mwc-dialog>
<wrapper-modal
.onClickFunc=${() => {
this.chatEditor.resetValue();
this.openPrivateMessage = false;
} }
style=${this.openPrivateMessage ? "display: block" : "display: none"}>
<div>
<div class="dialog-container">
<div style="text-align: center">
<h1>${translate("chatpage.cchange1")}</h1>
<hr>
</div>
<p>${translate("chatpage.cchange6")}</p>
<textarea
class="input"
?disabled=${this.isLoading}
id="sendTo"
placeholder="${translate("chatpage.cchange7")}"
rows="1">
</textarea>
<chat-text-editor
iframeId="privateMessage"
?hasGlobalEvents=${false}
placeholder="${translate("chatpage.cchange8")}"
.setChatEditor=${(editor)=> this.setChatEditor(editor)}
.chatEditor=${this.chatEditor}
.imageFile=${this.imageFile}
._sendMessage=${this._sendMessage}
.insertImage=${this.insertImage}
?isLoading=${this.isLoading}
.isLoadingMessages=${false}
id="messageBox"
>
</chat-text-editor>
<div class="modal-button-row">
<button
class="modal-button-red"
@click=${() => {
this.chatEditor.resetValue();
this.openPrivateMessage = false;
}}
?disabled="${this.isLoading}"
>
${translate("chatpage.cchange33")}
</button>
<button
class="modal-button"
@click=${this.sendMessageFunc}
?disabled="${this.isLoading}">
${this.isLoading === false
? this.renderSendText()
: html`
<paper-spinner-lite active></paper-spinner-lite>
`}
</button>
</div>
</div>
</div>
</wrapper-modal>
<!-- Blocked User Dialog -->
<mwc-dialog id="blockedUserDialog">
@ -574,14 +642,12 @@ class Chat extends LitElement {
}
async _sendMessage() {
console.log("here1");
this.isLoading = true;
this.chatEditor.disable();
const messageText = this.chatEditor.mirror.value;
// Format and Sanitize Message
const sanitizedMessage = messageText.replace(/&nbsp;/gi, ' ').replace(/<br\s*[\/]?>/gi, '\n');
const trimmedMessage = sanitizedMessage.trim();
if (/^\s*$/.test(trimmedMessage)) {
this.isLoading = false;
this.chatEditor.enable();
@ -595,11 +661,9 @@ class Chat extends LitElement {
const stringifyMessageObject = JSON.stringify(messageObject)
this.sendMessage(stringifyMessageObject);
}
console.log("here2");
}
async sendMessage(messageText) {
console.log("here3");
this.isLoading = true;
const _recipient = this.shadowRoot.getElementById('sendTo').value;
@ -644,6 +708,7 @@ class Chat extends LitElement {
_publicKey = false;
let err4string = get("chatpage.cchange19");
parentEpml.request('showSnackBar', `${err4string}`);
this.chatEditor.enable();
this.isLoading = false;
} else if (addressPublicKey !== false) {
isEncrypted = 1;
@ -674,7 +739,6 @@ class Chat extends LitElement {
isText: 1
}
});
console.log({chatResponse});
_computePow(chatResponse);
};
@ -682,17 +746,11 @@ class Chat extends LitElement {
const _computePow = async (chatBytes) => {
const difficulty = this.balance === 0 ? 12 : 8;
const path = window.parent.location.origin + '/memory-pow/memory-pow.wasm.full';
console.log("here4");
const worker = new WebWorker();
console.log("here5");
let nonce = null;
let chatBytesArray = null;
await new Promise((res, rej) => {
console.log(chatBytes, "chatBytes");
console.log(path, "path");
console.log(difficulty, "difficulty");
worker.postMessage({chatBytes, path, difficulty});
worker.onmessage = e => {
worker.terminate();
chatBytesArray = e.data.chatBytesArray;
@ -712,6 +770,9 @@ class Chat extends LitElement {
const getSendChatResponse = (response) => {
if (response === true) {
this.setActiveChatHeadUrl(`direct/${recipient}`);
this.shadowRoot.getElementById('sendTo').value = "";
this.openPrivateMessage = false;
this.chatEditor.resetValue();
} else if (response.error) {
parentEpml.request('showSnackBar', response.message);