jschulthess/qortal-ui
1
0
Fork 0
forked from Qortal/qortal-ui
Code Issues Pull Requests 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-04 23:14:14 +02:00
commit 2b3b5ce94f
4 changed files with 76 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -60,14 +60,14 @@ 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},
imageFile: { type: Object }, imageFile: { type: Object },
isUploadingImage: { type: Boolean }, isUploadingImage: { type: Boolean },
chatEditor: { type: Object }, chatEditor: { type: Object },
chatEditorNewChat: { type: Object }, chatEditorNewChat: { type: Object },
userLanguage: { type: String }, userLanguage: { type: String },
lastMessageRefVisible: { type: Boolean }, lastMessageRefVisible: { type: Boolean },
isLoadingOldMessages: {type: Boolean} isLoadingOldMessages: {type: Boolean},
isEditMessageOpen: { type: Boolean }
} }
} }
@ -121,14 +121,13 @@ class ChatPage extends LitElement {
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 10px 20px 8px 10px; padding: 10px 10px 8px 10px;
} }
.repliedTo-subcontainer { .repliedTo-subcontainer {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center;
gap: 15px; gap: 15px;
width: 100%; width: 100%;
} }
@ -137,7 +136,7 @@ class ChatPage extends LitElement {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 5px; gap: 5px;
width: 92%; width: 100%;
} }
.senderName { .senderName {
@ -153,6 +152,7 @@ class ChatPage extends LitElement {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
margin: 0; margin: 0;
width: 800px;
} }
.reply-icon { .reply-icon {
@ -160,15 +160,6 @@ class ChatPage extends LitElement {
color: var(--mdc-theme-primary); color: var(--mdc-theme-primary);
} }
.checkmark-icon {
width: 30px;
color: var(--mdc-theme-primary);
margin: 0 8px;
}
.checkmark-icon:hover {
cursor: pointer;
}
.close-icon { .close-icon {
color: #676b71; color: #676b71;
width: 18px; width: 18px;
@ -523,9 +514,7 @@ class ChatPage extends LitElement {
this.getOldMessage = this.getOldMessage.bind(this) this.getOldMessage = this.getOldMessage.bind(this)
this._sendMessage = this._sendMessage.bind(this) this._sendMessage = this._sendMessage.bind(this)
this.insertImage = this.insertImage.bind(this) this.insertImage = this.insertImage.bind(this)
// this.getMessageSize = this.getMessageSize.bind(this)
this._downObserverhandler = this._downObserverhandler.bind(this) this._downObserverhandler = this._downObserverhandler.bind(this)
// this.calculateIFrameHeight = this.calculateIFrameHeight.bind(this)
this.selectedAddress = {} this.selectedAddress = {}
this.chatId = '' this.chatId = ''
this.myAddress = '' this.myAddress = ''
@ -547,11 +536,11 @@ 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.imageFile = null this.imageFile = null
this.uid = new ShortUniqueId() this.uid = new ShortUniqueId()
this.userLanguage = "" this.userLanguage = ""
this.lastMessageRefVisible = false this.lastMessageRefVisible = false
this.isEditMessageOpen = false
this.emojiPicker = new EmojiPicker({ this.emojiPicker = new EmojiPicker({
style: "twemoji", style: "twemoji",
twemojiBaseUrl: '/emoji/', twemojiBaseUrl: '/emoji/',
@ -645,7 +634,7 @@ class ChatPage extends LitElement {
.mirrorChatInput=${this.mirrorChatInput} .mirrorChatInput=${this.mirrorChatInput}
?isLoading=${this.isLoading} ?isLoading=${this.isLoading}
?isLoadingMessages=${this.isLoadingMessages} ?isLoadingMessages=${this.isLoadingMessages}
> ?isEditMessageOpen=${this.isEditMessageOpen}>
</chat-text-editor> </chat-text-editor>
</div> </div>
</div> </div>
@ -666,7 +655,7 @@ class ChatPage extends LitElement {
`: ''} `: ''}
<wrapper-modal <wrapper-modal
.removeImage=${() => this.removeImage()} .removeImage=${() => this.removeImage()}
style=${this.imageFile ? "display: block" : "display: none"}> style=${(this.imageFile && !this.isUploadingImage) ? "display: block" : "display: none"}>
<div> <div>
<div class="dialog-container"> <div class="dialog-container">
${this.imageFile && html` ${this.imageFile && html`
@ -688,13 +677,7 @@ class ChatPage extends LitElement {
</chat-text-editor> </chat-text-editor>
</div> </div>
<div class="modal-button-row"> <div class="modal-button-row">
<button <button class="modal-button-red" @click=${() => this.removeImage()}>
class="modal-button-red"
@click=${()=>{
this.imageFile = null
}}
>
${translate("chatpage.cchange33")} ${translate("chatpage.cchange33")}
</button> </button>
<button <button
@ -753,22 +736,6 @@ class ChatPage extends LitElement {
} }
async firstUpdated() { async firstUpdated() {
// TODO: Load and fetch messages from localstorage (maybe save messages to localstorage...)
// document.addEventListener('keydown', (e) => {
// if (!this.chatEditor.content.body.matches(':focus')) {
// // WARNING: Deprecated methods from KeyBoard Event
// if (e.code === "Space" || e.keyCode === 32 || e.which === 32) {
// this.chatEditor.insertText('&nbsp;');
// } else if (inputKeyCodes.includes(e.keyCode)) {
// this.chatEditor.insertText(e.key);
// return this.chatEditor.focus();
// } else {
// return this.chatEditor.focus();
// }
// }
// });
window.addEventListener('storage', () => { window.addEventListener('storage', () => {
const checkLanguage = localStorage.getItem('qortalLanguage'); const checkLanguage = localStorage.getItem('qortalLanguage');
use(checkLanguage); use(checkLanguage);
@ -846,6 +813,12 @@ class ChatPage extends LitElement {
await new Promise(r => setTimeout(r, 100)); await new Promise(r => setTimeout(r, 100));
this.chatEditorPlaceholder = this.isReceipient === true ? `Message ${this._chatId}` : `${get("chatpage.cchange8")}`; this.chatEditorPlaceholder = this.isReceipient === true ? `Message ${this._chatId}` : `${get("chatpage.cchange8")}`;
} }
// if (changedProperties && changedProperties.has('isEditMessageOpen')) {
// console.log(this.isEditMessageOpen, "1111");
// }
if (changedProperties && changedProperties.has('imageFile')) {
console.log(this.imageFile, "1111");
}
} }
async renderPlaceholder() { async renderPlaceholder() {
@ -1048,8 +1021,8 @@ class ChatPage extends LitElement {
closeEditMessageContainer() { closeEditMessageContainer() {
this.editedMessageObj = null; this.editedMessageObj = null;
this.isEditMessageOpen = !this.isEditMessageOpen;
this.chatEditor.resetValue(); this.chatEditor.resetValue();
this.requestUpdate();
} }
closeRepliedToContainer() { closeRepliedToContainer() {
@ -1496,11 +1469,11 @@ class ChatPage extends LitElement {
if (fileSize > 500000) { if (fileSize > 500000) {
parentEpml.request('showSnackBar', get("chatpage.cchange26")); parentEpml.request('showSnackBar', get("chatpage.cchange26"));
this.isLoading = false; this.isLoading = false;
this.isUploadingImage = false;
this.chatEditor.enable(); this.chatEditor.enable();
this.chatEditorNewChat.enable() this.chatEditorNewChat.enable();
return; return;
} }
try { try {
await publishData({ await publishData({
registeredName: userName, registeredName: userName,
@ -1512,15 +1485,16 @@ class ChatPage extends LitElement {
uploadType: 'file', uploadType: 'file',
selectedAddress: this.selectedAddress, selectedAddress: this.selectedAddress,
worker: new WebWorkerImage() worker: new WebWorkerImage()
}) });
this.isUploadingImage = false;
this.isUploadingImage = false this.imageFile = null;
} catch (error) { } catch (error) {
console.error(error) console.error(error)
this.isLoading = false; this.isLoading = false;
this.isUploadingImage = false;
this.chatEditor.enable(); this.chatEditor.enable();
this.chatEditorNewChat.enable() this.chatEditorNewChat.enable();
return return;
} }
const messageTextWithImage = this.chatEditorNewChat.mirror.value; const messageTextWithImage = this.chatEditorNewChat.mirror.value;
// Format and Sanitize Message // Format and Sanitize Message
@ -1536,7 +1510,7 @@ class ChatPage extends LitElement {
isImageDeleted: false, isImageDeleted: false,
repliedTo: '', repliedTo: '',
version: 1 version: 1
} };
const stringifyMessageObject = JSON.stringify(messageObject); const stringifyMessageObject = JSON.stringify(messageObject);
this.sendMessage(stringifyMessageObject, typeMessage); this.sendMessage(stringifyMessageObject, typeMessage);
} else if (outSideMsg && outSideMsg.type === 'reaction') { } else if (outSideMsg && outSideMsg.type === 'reaction') {
@ -1596,13 +1570,6 @@ class ChatPage extends LitElement {
this.chatEditor.enable(); this.chatEditor.enable();
this.chatEditorNewChat.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.repliedToMessageObj) {
let chatReference = this.repliedToMessageObj.reference let chatReference = this.repliedToMessageObj.reference

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

@ -260,13 +260,6 @@ class MessageTemplate extends LitElement {
} }
showBlockIconFunc(bool) { showBlockIconFunc(bool) {
const chatHover = this.shadowRoot.querySelector(".chat-hover")
if(chatHover){
chatHover.querySelector(".chat-hover").focus({ preventScroll: true })
}
if (bool) { if (bool) {
this.showBlockAddressIcon = true; this.showBlockAddressIcon = true;
} else { } else {

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

@ -22,6 +22,7 @@ class ChatTextEditor extends LitElement {
iframeId: { type: String }, iframeId: { type: String },
hasGlobalEvents: { type: Boolean }, hasGlobalEvents: { type: Boolean },
chatMessageSize: { type: Number }, chatMessageSize: { type: Number },
isEditMessageOpen: { type: Boolean },
theme: { theme: {
type: String, type: String,
reflect: true reflect: true
@ -130,6 +131,16 @@ class ChatTextEditor extends LitElement {
padding: 0; padding: 0;
border: none; border: none;
} }
.checkmark-icon {
width: 30px;
color: var(--mdc-theme-primary);
margin-bottom: 6px;
}
.checkmark-icon:hover {
cursor: pointer;
}
` `
} }
@ -150,11 +161,18 @@ class ChatTextEditor extends LitElement {
} }
render() { render() {
let scrollHeightBool = false;
try {
if (this.chatMessageInput && this.chatMessageInput.contentDocument.body.scrollHeight > 60 && this.shadowRoot.querySelector(".chat-editor").contentDocument.body.querySelector("#chatbarId").innerHTML.trim() !== "") {
scrollHeightBool = true;
}
} catch (error) {
scrollHeightBool = false;
}
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 style="${scrollHeightBool ? 'align-items: flex-end' : "align-items: center"}">
&& 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)
}}> }}>
@ -166,13 +184,16 @@ class ChatTextEditor extends LitElement {
</vaadin-icon> </vaadin-icon>
<div class="file-picker-input-container"> <div class="file-picker-input-container">
<input <input
.value="${this.imageFile}" @change="${e => {
@change="${e => this.insertImage(e.target.files[0])}" e.preventDefault();
this.insertImage(e.target.files[0]);
}
}"
class="file-picker-input" type="file" name="myImage" accept="image/*" /> class="file-picker-input" type="file" name="myImage" accept="image/*" />
</div> </div>
</div> </div>
<textarea style="color: var(--black);" tabindex='1' ?autofocus=${true} ?disabled=${this.isLoading || this.isLoadingMessages} id="messageBox" rows="1"></textarea> <textarea style="color: var(--black);" tabindex='1' ?autofocus=${true} ?disabled=${this.isLoading || this.isLoadingMessages} id="messageBox" rows="1"></textarea>
<iframe id=${this.iframeId} class="chat-editor" tabindex="-1" height=${this.iframeHeight}></iframe> <iframe style=${(this.iframeId === "newChat" && this.iframeHeight > 42) && "height: 100%;"} id=${this.iframeId} class="chat-editor" tabindex="-1" height=${this.iframeHeight}></iframe>
<button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}> <button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}>
${html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg" />`} ${html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg" />`}
</button> </button>
@ -185,10 +206,6 @@ class ChatTextEditor extends LitElement {
icon="vaadin:check" icon="vaadin:check"
slot="icon" slot="icon"
@click=${() => { @click=${() => {
if (this.chatMessageSize > 1000 ) {
parentEpml.request('showSnackBar', get("chatpage.cchange29"));
return;
}
this.sendMessageFunc(); this.sendMessageFunc();
}} }}
> >
@ -201,17 +218,13 @@ class ChatTextEditor extends LitElement {
` `
) : ) :
html` html`
<div style="${this.chatMessageInput && this.chatMessageInput.contentDocument.body.scrollHeight > 60 ? 'margin-bottom: 5px;' : "margin-bottom: 0;"} ${this.iframeId === 'newChat' ? 'display: none;' : 'display: flex;'}"> <div style="${ scrollHeightBool ? 'margin-bottom: 5px;' : "margin-bottom: 0;"} ${this.iframeId === 'newChat' ? 'display: none;' : 'display: flex;'}">
${this.isLoading === false ? html` ${this.isLoading === false ? html`
<img <img
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=${() => { @click=${() => {
if (this.chatMessageSize > 1000 ) {
parentEpml.request('showSnackBar', get("chatpage.cchange29"));
return;
}
this.sendMessageFunc(); this.sendMessageFunc();
}} }}
/> />
@ -225,7 +238,7 @@ class ChatTextEditor extends LitElement {
</div> </div>
${this.chatMessageSize >= 750 ? ${this.chatMessageSize >= 750 ?
html` html`
<div class="message-size-container"> <div class="message-size-container" style=${this.imageFile && "margin-top: 10px;"}>
<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>
@ -312,17 +325,29 @@ class ChatTextEditor extends LitElement {
} }
async updated(changedProperties) { async updated(changedProperties) {
console.log({changedProperties});
if (changedProperties && changedProperties.has('editedMessageObj')) { if (changedProperties && changedProperties.has('editedMessageObj')) {
this.chatEditor.insertText(this.editedMessageObj.message) if (this.editedMessageObj) {
this.chatEditor.insertText(this.editedMessageObj.message);
this.getMessageSize(this.editedMessageObj.message);
} else {
this.chatEditor.insertText("");
this.chatMessageSize = 0;
}
} }
if (changedProperties && changedProperties.has('placeholder')) { if (changedProperties && changedProperties.has('placeholder')) {
const captionEditor = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('chatbarId'); 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")) { if (changedProperties && changedProperties.has("chatMessageSize")) {
console.log(this.chatMessageInput, "chat message input"); console.log(this.chatMessageSize, "chat message size");
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"); if (changedProperties && changedProperties.has("iframeHeight")) {
console.log(this.iframeHeight, "iframe height");
}
if (changedProperties && changedProperties.has("imageFile")) {
console.log(this.imageFile, "imageFile");
this.chatMessageInput = "newChat";
} }
} }
@ -333,12 +358,16 @@ class ChatTextEditor extends LitElement {
} }
sendMessageFunc(props) { sendMessageFunc(props) {
console.log("here123"); if (this.chatMessageSize > 1000 ) {
parentEpml.request('showSnackBar', get("chatpage.cchange29"));
return;
};
this.chatMessageSize = 0; this.chatMessageSize = 0;
this._sendMessage(props); this._sendMessage(props);
} }
getMessageSize(message){ getMessageSize(message){
console.log("super12");
try { try {
const messageText = message; const messageText = message;
// Format and Sanitize Message // Format and Sanitize Message
@ -381,8 +410,6 @@ 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)
} }
@ -664,10 +691,6 @@ class ChatTextEditor extends LitElement {
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();
} }

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

@ -24,7 +24,7 @@ export const wrapperModalStyles = css`
background-color: var(--white); background-color: var(--white);
left: 50%; left: 50%;
top: 0px; top: 0px;
transform: translate(-50%, 40%); transform: translate(-50%, 10%);
border-radius: 12px; border-radius: 12px;
overflow-y: auto; overflow-y: auto;
animation: 1s cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal forwards running modal_transition; animation: 1s cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal forwards running modal_transition;