jschulthess
/
qortal-ui
forked from Qortal/qortal-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

q-apps
Phillip Lang Martinez 2 years ago
parent
a4af679bdc 09b7adff26
commit
9fa91ce66f
4 changed files with 104 additions and 74 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. 31
      qortal-ui-plugins/plugins/core/components/ChatPage.js
  2. 2
      qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
  3. 27
      qortal-ui-plugins/plugins/core/components/ChatScroller.js
  4. 118
      qortal-ui-plugins/plugins/core/components/ChatTextEditor.js

31
qortal-ui-plugins/plugins/core/components/ChatPage.js
Unescape 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
Unescape 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;

27
qortal-ui-plugins/plugins/core/components/ChatScroller.js
Unescape 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">
@ -615,7 +610,7 @@ class ChatMenu extends LitElement {
}}
>
<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()}">
<vaadin-icon icon="vaadin:paperplane" slot="icon"></vaadin-icon>
</div>

118
qortal-ui-plugins/plugins/core/components/ChatTextEditor.js
Unescape 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,13 +391,13 @@ 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)
}
initChatEditor() {
const ChatEditor = function (editorConfig) {
const ChatEditor = function (editorConfig) {
const ChatEditor = function () {
const editor = this;
editor.init();
@ -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,17 +657,21 @@ 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();
}
e.preventDefault();
return false;
}
@ -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,

Write Preview
Loading…
Cancel
Save