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

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

@ -22,6 +22,7 @@ class ChatTextEditor extends LitElement {
iframeId: { type: String },
hasGlobalEvents: { type: Boolean },
chatMessageSize: { type: Number },
isEditMessageOpen: { type: Boolean },
theme: {
type: String,
reflect: true
@ -130,6 +131,16 @@ class ChatTextEditor extends LitElement {
padding: 0;
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() {
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`
<div
class=${["chatbar-container", this.iframeId === "newChat" ? "chatbar-caption" : ""].join(" ")}
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"}">
style="${scrollHeightBool ? 'align-items: flex-end' : "align-items: center"}">
<div class="file-picker-container" @click=${(e) => {
this.preventUserSendingImage(e)
}}>
@ -166,13 +184,16 @@ class ChatTextEditor extends LitElement {
</vaadin-icon>
<div class="file-picker-input-container">
<input
.value="${this.imageFile}"
@change="${e => this.insertImage(e.target.files[0])}"
@change="${e => {
e.preventDefault();
this.insertImage(e.target.files[0]);
}
}"
class="file-picker-input" type="file" name="myImage" accept="image/*" />
</div>
</div>
<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}>
${html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg" />`}
</button>
@ -185,10 +206,6 @@ class ChatTextEditor extends LitElement {
icon="vaadin:check"
slot="icon"
@click=${() => {
if (this.chatMessageSize > 1000 ) {
parentEpml.request('showSnackBar', get("chatpage.cchange29"));
return;
}
this.sendMessageFunc();
}}
>
@ -201,17 +218,13 @@ class ChatTextEditor extends LitElement {
`
) :
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`
<img
src="/img/qchat-send-message-icon.svg"
alt="send-icon"
class="send-icon"
@click=${() => {
if (this.chatMessageSize > 1000 ) {
parentEpml.request('showSnackBar', get("chatpage.cchange29"));
return;
}
this.sendMessageFunc();
}}
/>
@ -225,7 +238,7 @@ class ChatTextEditor extends LitElement {
</div>
${this.chatMessageSize >= 750 ?
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'}">
${`Your message size is of ${this.chatMessageSize} bytes out of a maximum of 1000`}
</div>
@ -312,17 +325,29 @@ class ChatTextEditor extends LitElement {
}
async updated(changedProperties) {
console.log({changedProperties});
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')) {
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");
console.log(this.chatMessageSize, "chat message size");
}
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) {
console.log("here123");
if (this.chatMessageSize > 1000 ) {
parentEpml.request('showSnackBar', get("chatpage.cchange29"));
return;
};
this.chatMessageSize = 0;
this._sendMessage(props);
}
getMessageSize(message){
console.log("super12");
try {
const messageText = message;
// Format and Sanitize Message
@ -381,8 +410,6 @@ 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)
}
@ -664,10 +691,6 @@ class ChatTextEditor extends LitElement {
imageFile: editorConfig.imageFile,
}
);
} else if (this.chatMessageSize > 1000) {
e.preventDefault();
parentEpml.request('showSnackBar', get("chatpage.cchange29"));
return false;
} else {
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);
left: 50%;
top: 0px;
transform: translate(-50%, 40%);
transform: translate(-50%, 10%);
border-radius: 12px;
overflow-y: auto;
animation: 1s cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal forwards running modal_transition;