mirror of
https://github.com/Qortal/qortal-ui.git
synced 2025-02-12 10:15:50 +00:00
Fixed private message bugs
This commit is contained in:
Justin Ferrari
parent
ddf8a740f9
commit
0dc1f5ec79
@ -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 = ""
|
||||
} }
|
||||
|
||||
@ -174,7 +174,10 @@ 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) => {
|
||||
<div
|
||||
style=${this.iframeId === "privateMessage" ? "display: none" : "display: block"}
|
||||
class="file-picker-container"
|
||||
@click=${(e) => {
|
||||
this.preventUserSendingImage(e)
|
||||
}}>
|
||||
<vaadin-icon
|
||||
@ -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,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>
|
||||
|
||||
@ -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,14 +425,19 @@ class Chat extends LitElement {
|
||||
</div>
|
||||
|
||||
<!-- Start Chatting Dialog -->
|
||||
<mwc-dialog id="startChatDialog" scrimClickAction="${this.isLoading ? '' : 'close'}">
|
||||
<div style="text-align:center">
|
||||
<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}
|
||||
@ -386,36 +445,45 @@ class Chat extends LitElement {
|
||||
placeholder="${translate("chatpage.cchange7")}"
|
||||
rows="1">
|
||||
</textarea>
|
||||
|
||||
<chat-text-editor
|
||||
id="messageBox"
|
||||
iframeId="privateMessage"
|
||||
?hasGlobalEvents=${true}
|
||||
?hasGlobalEvents=${false}
|
||||
placeholder="${translate("chatpage.cchange8")}"
|
||||
.setChatEditor=${(editor)=> this.setChatEditor(editor)}
|
||||
.chatEditor=${this.chatEditor}
|
||||
.imageFile=${this.imageFile}.
|
||||
.imageFile=${this.imageFile}
|
||||
._sendMessage=${this._sendMessage}
|
||||
.insertImage=${this.insertImage}
|
||||
?isLoading=${this.isLoading}>
|
||||
?isLoading=${this.isLoading}
|
||||
.isLoadingMessages=${false}
|
||||
id="messageBox"
|
||||
>
|
||||
</chat-text-editor>
|
||||
|
||||
<mwc-button
|
||||
<div class="modal-button-row">
|
||||
<button
|
||||
class="modal-button-red"
|
||||
@click=${() => {
|
||||
this.chatEditor.resetValue();
|
||||
this.openPrivateMessage = false;
|
||||
}}
|
||||
?disabled="${this.isLoading}"
|
||||
slot="primaryAction"
|
||||
>
|
||||
${translate("chatpage.cchange33")}
|
||||
</button>
|
||||
<button
|
||||
class="modal-button"
|
||||
@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>
|
||||
?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(/ /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);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user