AlphaX
/
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
c33b16e7ff 8988bdb6fa
commit
2b3b5ce94f
4 changed files with 76 additions and 93 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. 83
      qortal-ui-plugins/plugins/core/components/ChatPage.js
  2. 9
      qortal-ui-plugins/plugins/core/components/ChatScroller.js
  3. 75
      qortal-ui-plugins/plugins/core/components/ChatTextEditor.js
  4. 2
      qortal-ui-plugins/plugins/core/components/WrapperModal-css.js

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

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

@ -260,14 +260,7 @@ class MessageTemplate extends LitElement {
}
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;
} else {
this.showBlockAddressIcon = false;

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

Write Preview
Loading…
Cancel
Save