Qortal/qortal-ui
1
0
Fork 0
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-04-24 20:07:51 +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 },
editedMessageObj: { type: Object },
iframeHeight: { type: Number },
chatMessageSize: { type: Number},
// chatMessageSize: { type: Number},
imageFile: { type: Object },
isUploadingImage: { type: Boolean },
chatEditor: { type: Object },
@ -547,7 +547,7 @@ class ChatPage extends LitElement {
this.repliedToMessageObj = null
this.editedMessageObj = null
this.iframeHeight = 42
this.chatMessageSize = 0
// this.chatMessageSize = 0
this.imageFile = null
this.uid = new ShortUniqueId()
this.userLanguage = ""
@ -630,7 +630,7 @@ class ChatPage extends LitElement {
</div>
</div>
`}
<div class="chatbar" style="${this.chatMessageSize >= 750 && 'padding-bottom: 7px'}">
<div class="chatbar">
<chat-text-editor
?hasGlobalEvents=${true}
iframeId="_chatEditorDOM"
@ -687,15 +687,6 @@ class ChatPage extends LitElement {
?isLoadingMessages=${this.isLoadingMessages}>
</chat-text-editor>
</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">
<button
class="modal-button-red"
@ -1583,13 +1574,15 @@ class ChatPage extends LitElement {
this.isLoading = false;
this.chatEditor.enable();
this.chatEditorNewChat.enable()
} else if (this.chatMessageSize >= 1000) {
this.isLoading = false;
this.chatEditor.enable();
this.chatEditorNewChat.enable()
let err1string = get("chatpage.cchange29");
parentEpml.request('showSnackBar', `${err1string}`);
} else if (this.repliedToMessageObj) {
}
// else if (this.chatMessageSize >= 1000) {
// this.isLoading = false;
// this.chatEditor.enable();
// this.chatEditorNewChat.enable()
// let err1string = get("chatpage.cchange29");
// parentEpml.request('showSnackBar', `${err1string}`);
// }
else if (this.repliedToMessageObj) {
let chatReference = this.repliedToMessageObj.reference
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 {
color: var(--chat-bubble-msg-color);
line-height: 19px;
word-wrap: break-word;
overflow-wrap: anywhere;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;

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

@ -70,8 +70,10 @@ class ChatScroller extends LitElement {
...message
});
}
console.log(messageArray, 'messages here');
return messageArray;
}, [])
return html`
${this.isLoadingMessages ? html`
<div class="spinnerContainer">
@ -154,9 +156,9 @@ class ChatScroller extends LitElement {
_upObserverhandler(entries) {
if (entries[0].isIntersecting) {
this.setIsLoadingMessages(true)
let _scrollElement = entries[0].target.nextElementSibling
this._getOldMessage(_scrollElement)
this.setIsLoadingMessages(true);
let _scrollElement = entries[0].target.nextElementSibling;
this._getOldMessage(_scrollElement);
}
}
@ -174,9 +176,8 @@ class ChatScroller extends LitElement {
rootMargin: '0px',
threshold: 1
};
const observer = new IntersectionObserver(this._upObserverhandler, options)
observer.observe(this.upObserverElement)
const observer = new IntersectionObserver(this._upObserverhandler, options);
observer.observe(this.upObserverElement);
}
downElementObserver() {
@ -185,17 +186,13 @@ class ChatScroller extends LitElement {
rootMargin: '0px',
threshold: 1
}
// identify an element to observe
const elementToObserve = this.downObserverElement
const elementToObserve = this.downObserverElement;
// 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,
// 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}`)
}
render() {
return html`
<div class="container">

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

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