Qortal/qortal-ui
1
0
Fork 0
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-04-23 11:27:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Phillip Lang Martinez 2022-12-01 15:50:58 +02:00
commit 9fa91ce66f
4 changed files with 104 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -60,7 +60,7 @@ class ChatPage extends LitElement {
repliedToMessageObj: { type: Object }, repliedToMessageObj: { type: Object },
editedMessageObj: { type: Object }, editedMessageObj: { type: Object },
iframeHeight: { type: Number }, iframeHeight: { type: Number },
chatMessageSize: { type: Number}, // chatMessageSize: { type: Number},
imageFile: { type: Object }, imageFile: { type: Object },
isUploadingImage: { type: Boolean }, isUploadingImage: { type: Boolean },
chatEditor: { type: Object }, chatEditor: { type: Object },
@ -547,7 +547,7 @@ class ChatPage extends LitElement {
this.repliedToMessageObj = null this.repliedToMessageObj = null
this.editedMessageObj = null this.editedMessageObj = null
this.iframeHeight = 42 this.iframeHeight = 42
this.chatMessageSize = 0 // this.chatMessageSize = 0
this.imageFile = null this.imageFile = null
this.uid = new ShortUniqueId() this.uid = new ShortUniqueId()
this.userLanguage = "" this.userLanguage = ""
@ -630,7 +630,7 @@ class ChatPage extends LitElement {
</div> </div>
</div> </div>
`} `}
<div class="chatbar" style="${this.chatMessageSize >= 750 && 'padding-bottom: 7px'}"> <div class="chatbar">
<chat-text-editor <chat-text-editor
?hasGlobalEvents=${true} ?hasGlobalEvents=${true}
iframeId="_chatEditorDOM" iframeId="_chatEditorDOM"
@ -687,15 +687,6 @@ class ChatPage extends LitElement {
?isLoadingMessages=${this.isLoadingMessages}> ?isLoadingMessages=${this.isLoadingMessages}>
</chat-text-editor> </chat-text-editor>
</div> </div>
${this.chatMessageSize >= 750 ?
html`
<div class="message-size-container">
<div class="message-size" style="${this.chatMessageSize >= 1000 && 'color: #bd1515'}">
${`Your message size is of ${this.chatMessageSize} bytes out of a maximum of 1000`}
</div>
</div>
` :
html``}
<div class="modal-button-row"> <div class="modal-button-row">
<button <button
class="modal-button-red" class="modal-button-red"
@ -1583,13 +1574,15 @@ class ChatPage extends LitElement {
this.isLoading = false; this.isLoading = false;
this.chatEditor.enable(); this.chatEditor.enable();
this.chatEditorNewChat.enable() this.chatEditorNewChat.enable()
} else if (this.chatMessageSize >= 1000) { }
this.isLoading = false; // else if (this.chatMessageSize >= 1000) {
this.chatEditor.enable(); // this.isLoading = false;
this.chatEditorNewChat.enable() // this.chatEditor.enable();
let err1string = get("chatpage.cchange29"); // this.chatEditorNewChat.enable()
parentEpml.request('showSnackBar', `${err1string}`); // let err1string = get("chatpage.cchange29");
} else if (this.repliedToMessageObj) { // parentEpml.request('showSnackBar', `${err1string}`);
// }
else if (this.repliedToMessageObj) {
let chatReference = this.repliedToMessageObj.reference let chatReference = this.repliedToMessageObj.reference
if(this.repliedToMessageObj.chatReference){ if(this.repliedToMessageObj.chatReference){

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

@ -188,7 +188,7 @@ export const chatStyles = css`
.message { .message {
color: var(--chat-bubble-msg-color); color: var(--chat-bubble-msg-color);
line-height: 19px; line-height: 19px;
word-wrap: break-word; overflow-wrap: anywhere;
-webkit-user-select: text; -webkit-user-select: text;
-moz-user-select: text; -moz-user-select: text;
-ms-user-select: text; -ms-user-select: text;

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

@ -70,8 +70,10 @@ class ChatScroller extends LitElement {
...message ...message
}); });
} }
console.log(messageArray, 'messages here');
return messageArray; return messageArray;
}, []) }, [])
return html` return html`
${this.isLoadingMessages ? html` ${this.isLoadingMessages ? html`
<div class="spinnerContainer"> <div class="spinnerContainer">
@ -154,9 +156,9 @@ class ChatScroller extends LitElement {
_upObserverhandler(entries) { _upObserverhandler(entries) {
if (entries[0].isIntersecting) { if (entries[0].isIntersecting) {
this.setIsLoadingMessages(true) this.setIsLoadingMessages(true);
let _scrollElement = entries[0].target.nextElementSibling let _scrollElement = entries[0].target.nextElementSibling;
this._getOldMessage(_scrollElement) this._getOldMessage(_scrollElement);
} }
} }
@ -174,9 +176,8 @@ class ChatScroller extends LitElement {
rootMargin: '0px', rootMargin: '0px',
threshold: 1 threshold: 1
}; };
const observer = new IntersectionObserver(this._upObserverhandler, options);
const observer = new IntersectionObserver(this._upObserverhandler, options) observer.observe(this.upObserverElement);
observer.observe(this.upObserverElement)
} }
downElementObserver() { downElementObserver() {
@ -185,17 +186,13 @@ class ChatScroller extends LitElement {
rootMargin: '0px', rootMargin: '0px',
threshold: 1 threshold: 1
} }
// identify an element to observe // identify an element to observe
const elementToObserve = this.downObserverElement const elementToObserve = this.downObserverElement;
// passing it a callback function // passing it a callback function
const observer = new IntersectionObserver(this._downObserverHandler, options) const observer = new IntersectionObserver(this._downObserverHandler, options);
// call `observe()` on that MutationObserver instance, // call `observe()` on that MutationObserver instance,
// passing it the element to observe, and the options object // passing it the element to observe, and the options object
observer.observe(elementToObserve) observer.observe(elementToObserve);
} }
} }
@ -592,8 +589,6 @@ class ChatMenu extends LitElement {
parentEpml.request('showSnackBar', `${errorMsg}`) parentEpml.request('showSnackBar', `${errorMsg}`)
} }
render() { render() {
return html` return html`
<div class="container"> <div class="container">
@ -615,7 +610,7 @@ class ChatMenu extends LitElement {
}} }}
> >
<vaadin-icon icon="vaadin:smiley-o" slot="icon"></vaadin-icon> <vaadin-icon icon="vaadin:smiley-o" slot="icon"></vaadin-icon>
</div> </div>
<div class="menu-icon tooltip" data-text="${translate("blockpage.bcchange9")}" @click="${() => this.showPrivateMessageModal()}"> <div class="menu-icon tooltip" data-text="${translate("blockpage.bcchange9")}" @click="${() => this.showPrivateMessageModal()}">
<vaadin-icon icon="vaadin:paperplane" slot="icon"></vaadin-icon> <vaadin-icon icon="vaadin:paperplane" slot="icon"></vaadin-icon>
</div> </div>

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

@ -21,6 +21,7 @@ class ChatTextEditor extends LitElement {
setChatEditor: { attribute: false }, setChatEditor: { attribute: false },
iframeId: { type: String }, iframeId: { type: String },
hasGlobalEvents: { type: Boolean }, hasGlobalEvents: { type: Boolean },
chatMessageSize: { type: Number },
theme: { theme: {
type: String, type: String,
reflect: true reflect: true
@ -139,19 +140,21 @@ class ChatTextEditor extends LitElement {
this.getMessageSize = this.getMessageSize.bind(this) this.getMessageSize = this.getMessageSize.bind(this)
this.calculateIFrameHeight = this.calculateIFrameHeight.bind(this) this.calculateIFrameHeight = this.calculateIFrameHeight.bind(this)
this.addGlobalEventListener = this.addGlobalEventListener.bind(this) this.addGlobalEventListener = this.addGlobalEventListener.bind(this)
this.sendMessageFunc = this.sendMessageFunc.bind(this)
this.removeGlobalEventListener = this.removeGlobalEventListener.bind(this) this.removeGlobalEventListener = this.removeGlobalEventListener.bind(this)
this.initialChat = this.initialChat.bind(this) this.initialChat = this.initialChat.bind(this)
this.iframeHeight = 42 this.iframeHeight = 42
this.userName = window.parent.reduxStore.getState().app.accountInfo.names[0]; this.chatMessageSize = 0
this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'; this.userName = window.parent.reduxStore.getState().app.accountInfo.names[0]
this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
} }
render() { render() {
console.log(this.theme)
return html` return html`
<div <div
class=${["chatbar-container", this.iframeId === "newChat" ? "chatbar-caption" : ""].join(" ")} class=${["chatbar-container", this.iframeId === "newChat" ? "chatbar-caption" : ""].join(" ")}
style="${this.chatMessageInput && this.chatMessageInput.contentDocument.body.scrollHeight > 60 ? 'align-items: flex-end' : "align-items: center"}"> style="${(this.chatMessageInput && this.chatMessageInput.contentDocument.body.scrollHeight > 60
&& this.shadowRoot.querySelector(".chat-editor").contentDocument.body.querySelector("#chatbarId").innerHTML.trim() !== "") ? 'align-items: flex-end' : "align-items: center"}">
<div class="file-picker-container" @click=${(e) => { <div class="file-picker-container" @click=${(e) => {
this.preventUserSendingImage(e) this.preventUserSendingImage(e)
}}> }}>
@ -176,17 +179,23 @@ class ChatTextEditor extends LitElement {
${this.editedMessageObj ? ( ${this.editedMessageObj ? (
html` html`
<div> <div>
${this.isLoading === false ? html` ${this.isLoading === false ? html`
<vaadin-icon <vaadin-icon
class="checkmark-icon" class="checkmark-icon"
icon="vaadin:check" icon="vaadin:check"
slot="icon" slot="icon"
@click=${() => this._sendMessage()} @click=${() => {
> if (this.chatMessageSize > 1000 ) {
</vaadin-icon> parentEpml.request('showSnackBar', get("chatpage.cchange29"));
` : return;
html` }
<paper-spinner-lite active></paper-spinner-lite> this.sendMessageFunc();
}}
>
</vaadin-icon>
` :
html`
<paper-spinner-lite active></paper-spinner-lite>
`} `}
</div> </div>
` `
@ -198,7 +207,14 @@ class ChatTextEditor extends LitElement {
src="/img/qchat-send-message-icon.svg" src="/img/qchat-send-message-icon.svg"
alt="send-icon" alt="send-icon"
class="send-icon" class="send-icon"
@click=${() => this._sendMessage()} /> @click=${() => {
if (this.chatMessageSize > 1000 ) {
parentEpml.request('showSnackBar', get("chatpage.cchange29"));
return;
}
this.sendMessageFunc();
}}
/>
` : ` :
html` html`
<paper-spinner-lite active></paper-spinner-lite> <paper-spinner-lite active></paper-spinner-lite>
@ -207,16 +223,16 @@ class ChatTextEditor extends LitElement {
` `
} }
</div> </div>
${this.chatMessageSize >= 750 ? ${this.chatMessageSize >= 750 ?
html` html`
<div class="message-size-container"> <div class="message-size-container">
<div class="message-size" style="${this.chatMessageSize >= 1000 && 'color: #bd1515'}"> <div class="message-size" style="${this.chatMessageSize > 1000 && 'color: #bd1515'}">
${`Your message size is of ${this.chatMessageSize} bytes out of a maximum of 1000`} ${`Your message size is of ${this.chatMessageSize} bytes out of a maximum of 1000`}
</div>
</div> </div>
</div> ` :
` :
html``} html``}
</div> </div>
` `
} }
@ -256,7 +272,7 @@ class ChatTextEditor extends LitElement {
window.addEventListener('storage', () => { window.addEventListener('storage', () => {
const checkTheme = localStorage.getItem('qortalTheme'); const checkTheme = localStorage.getItem('qortalTheme');
const chatbar = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('testingId'); const chatbar = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('chatbarId');
if (checkTheme === 'dark') { if (checkTheme === 'dark') {
this.theme = 'dark'; this.theme = 'dark';
chatbar.style.cssText = "color:#ffffff;" chatbar.style.cssText = "color:#ffffff;"
@ -300,9 +316,14 @@ class ChatTextEditor extends LitElement {
this.chatEditor.insertText(this.editedMessageObj.message) this.chatEditor.insertText(this.editedMessageObj.message)
} }
if (changedProperties && changedProperties.has('placeholder')) { if (changedProperties && changedProperties.has('placeholder')) {
const captionEditor = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('testingId'); const captionEditor = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('chatbarId');
captionEditor.setAttribute('data-placeholder', this.placeholder); captionEditor.setAttribute('data-placeholder', this.placeholder);
} }
if (changedProperties && changedProperties.has("chatMessageSize")) {
console.log(this.chatMessageInput, "chat message input");
console.log(this.chatMessageInput.contentDocument.body.scrollHeight > 60, "scroll height > 60");
console.log( this.shadowRoot.querySelector(".chat-editor").contentDocument.body.querySelector("#chatbarId").innerHTML !== "", "content body text");
}
} }
shouldUpdate(changedProperties) { shouldUpdate(changedProperties) {
@ -311,6 +332,12 @@ class ChatTextEditor extends LitElement {
return true return true
} }
sendMessageFunc(props) {
console.log("here123");
this.chatMessageSize = 0;
this._sendMessage(props);
}
getMessageSize(message){ getMessageSize(message){
try { try {
const messageText = message; const messageText = message;
@ -354,6 +381,7 @@ class ChatTextEditor extends LitElement {
const stringified = JSON.stringify(messageObject); const stringified = JSON.stringify(messageObject);
const size = new Blob([stringified]).size; const size = new Blob([stringified]).size;
this.chatMessageSize = size; this.chatMessageSize = size;
console.log(this.chatMessageSize, "here600");
} catch (error) { } catch (error) {
console.error(error) console.error(error)
@ -363,13 +391,13 @@ class ChatTextEditor extends LitElement {
calculateIFrameHeight(height) { calculateIFrameHeight(height) {
setTimeout(()=> { setTimeout(()=> {
const editorTest = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('testingId').scrollHeight; const editorTest = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('chatbarId').scrollHeight;
this.iframeHeight = editorTest + 20; this.iframeHeight = editorTest + 20;
}, 50) }, 50)
} }
initChatEditor() { initChatEditor() {
const ChatEditor = function (editorConfig) { const ChatEditor = function (editorConfig) {
const ChatEditor = function () { const ChatEditor = function () {
const editor = this; const editor = this;
editor.init(); editor.init();
@ -588,10 +616,15 @@ class ChatTextEditor extends LitElement {
editorConfig.insertImage(file) editorConfig.insertImage(file)
} else { } else {
navigator.clipboard.readText().then(clipboardText => { navigator.clipboard.readText()
.then(clipboardText => {
let escapedText = editorConfig.escape(clipboardText); let escapedText = editorConfig.escape(clipboardText);
editor.insertText(escapedText); editor.insertText(escapedText);
}).catch(err => { })
.then(() => {
editorConfig.getMessageSize(editorConfig.editableElement.contentDocument.body.querySelector("#chatbarId").innerHTML);
})
.catch(err => {
// Fallback if everything fails... // Fallback if everything fails...
let textData = (e.originalEvent || e).clipboardData.getData('text/plain'); let textData = (e.originalEvent || e).clipboardData.getData('text/plain');
editor.insertText(textData); editor.insertText(textData);
@ -609,9 +642,14 @@ class ChatTextEditor extends LitElement {
} }
if (e.type === 'keydown') { if (e.type === 'keydown') {
editorConfig.calculateIFrameHeight(editorConfig.editableElement.contentDocument.body.scrollHeight); await new Promise((res, rej) => {
editorConfig.getMessageSize(editorConfig.editableElement.contentDocument.body.innerHTML); setTimeout(() => {
console.log(editorConfig.editableElement.contentDocument.body.querySelector("#chatbarId").innerHTML, "here 18");
editorConfig.calculateIFrameHeight(editorConfig.editableElement.contentDocument.body.scrollHeight);
editorConfig.getMessageSize(editorConfig.editableElement.contentDocument.body.querySelector("#chatbarId").innerHTML);
}, 0);
res();
})
// Handle Enter // Handle Enter
if (e.keyCode === 13 && !e.shiftKey) { if (e.keyCode === 13 && !e.shiftKey) {
@ -619,17 +657,21 @@ class ChatTextEditor extends LitElement {
editor.updateMirror(); editor.updateMirror();
if (editor.state() === 'false') return false; if (editor.state() === 'false') return false;
if(editorConfig.iframeId === 'newChat'){ if (editorConfig.iframeId === 'newChat') {
editorConfig.sendFunc( editorConfig.sendFunc(
{ {
type: 'image', type: 'image',
imageFile: editorConfig.imageFile, imageFile: editorConfig.imageFile,
} }
); );
} else if (this.chatMessageSize > 1000) {
e.preventDefault();
parentEpml.request('showSnackBar', get("chatpage.cchange29"));
return false;
} else { } else {
editorConfig.sendFunc(); editorConfig.sendFunc();
} }
e.preventDefault(); e.preventDefault();
return false; return false;
} }
@ -701,7 +743,7 @@ class ChatTextEditor extends LitElement {
elemDiv.setAttribute('spellcheck', 'false'); elemDiv.setAttribute('spellcheck', 'false');
elemDiv.setAttribute('data-placeholder', editorConfig.placeholder); elemDiv.setAttribute('data-placeholder', editorConfig.placeholder);
elemDiv.style.cssText = `width:100%; ${editorConfig.theme === "dark" ? "color:#ffffff;" : "color: #080808"}`; elemDiv.style.cssText = `width:100%; ${editorConfig.theme === "dark" ? "color:#ffffff;" : "color: #080808"}`;
elemDiv.id = 'testingId'; elemDiv.id = 'chatbarId';
editor.content.body.appendChild(elemDiv); editor.content.body.appendChild(elemDiv);
editor.contentDiv = editor.frame.contentDocument.body.firstChild; editor.contentDiv = editor.frame.contentDocument.body.firstChild;
editor.styles(); editor.styles();
@ -721,7 +763,7 @@ class ChatTextEditor extends LitElement {
calculateIFrameHeight: this.calculateIFrameHeight, calculateIFrameHeight: this.calculateIFrameHeight,
mirrorElement: this.mirrorChatInput, mirrorElement: this.mirrorChatInput,
editableElement: this.chatMessageInput, editableElement: this.chatMessageInput,
sendFunc: this._sendMessage, sendFunc: this.sendMessageFunc,
emojiPicker: this.emojiPicker, emojiPicker: this.emojiPicker,
escape: escape, escape: escape,
unescape: unescape, unescape: unescape,