mirror of
https://github.com/Qortal/qortal-ui.git
synced 2025-02-12 02:05:51 +00:00
Merge remote-tracking branch 'justin/feature/implement-UI-edit-reply-messages' into feature/implement-logic-edit-reply-messages
This commit is contained in:
commit
d3fde31e61
@ -7,9 +7,17 @@ html {
|
||||
--border: #d0d6de;
|
||||
--border2: #dde2e8;
|
||||
--copybutton: #707584;
|
||||
--chat-group: #080808;
|
||||
--chat-bubble: #9f9f9f0a;
|
||||
--chat-bubble-bg: #f3f3f3;
|
||||
--chat-bubble-msg-color: #080808;
|
||||
--reaction-bubble-outline: #6b6969;
|
||||
--chat-menu-bg: #ffffff;
|
||||
--chat-menu-outline: #dad9d9;
|
||||
--chat-menu-icon: #3b3b3c;
|
||||
--chat-menu-icon-hover: #dad9d9;
|
||||
--block-user-bg-hover: #dad9d9;
|
||||
--paperclip-icon: #494949;
|
||||
--sectxt: #576374;
|
||||
--vdicon: #707b8a;
|
||||
--tradehead: #6a6c75;
|
||||
@ -46,9 +54,17 @@ html[theme="dark"] {
|
||||
--border: #0b305e;
|
||||
--border2: #0b305e;
|
||||
--copybutton: #d0d6de;
|
||||
--chat-group: #ffffff;
|
||||
--chat-bubble: #9694941a;
|
||||
--chat-bubble-bg: #2d3749;
|
||||
--chat-bubble-msg-color: #ffffff;
|
||||
--reaction-bubble-outline: #ffffff;
|
||||
--chat-menu-bg: #32394c;
|
||||
--chat-menu-outline: #32394c;
|
||||
--chat-menu-icon: #ffffff;
|
||||
--chat-menu-icon-hover: #a49a9a36;
|
||||
--block-user-bg-hover: #121a2f;
|
||||
--paperclip-icon: #d0c9c9;
|
||||
--sectxt: #bbc3cd;
|
||||
--vdicon: #d0d6de;
|
||||
--tradehead: #008fd5;
|
||||
|
||||
@ -7,9 +7,17 @@ html {
|
||||
--border: #d0d6de;
|
||||
--border2: #dde2e8;
|
||||
--copybutton: #707584;
|
||||
--chat-group: #080808;
|
||||
--chat-bubble: #9f9f9f0a;
|
||||
--chat-bubble-bg: #f3f3f3;
|
||||
--chat-bubble-msg-color: #080808;
|
||||
--reaction-bubble-outline: #6b6969;
|
||||
--chat-menu-bg: #ffffff;
|
||||
--chat-menu-outline: #dad9d9;
|
||||
--chat-menu-icon: #3b3b3c;
|
||||
--chat-menu-icon-hover: #dad9d9;
|
||||
--block-user-bg-hover: #dad9d9;
|
||||
--paperclip-icon: #494949;
|
||||
--sectxt: #576374;
|
||||
--vdicon: #707b8a;
|
||||
--tradehead: #6a6c75;
|
||||
@ -45,9 +53,17 @@ html[theme="dark"] {
|
||||
--border: #0b305e;
|
||||
--border2: #0b305e;
|
||||
--copybutton: #d0d6de;
|
||||
--chat-group: #ffffff;
|
||||
--chat-bubble: #9694941a;
|
||||
--chat-bubble-bg: #2d3749;
|
||||
--chat-bubble-msg-color: #ffffff;
|
||||
--reaction-bubble-outline: #ffffff;
|
||||
--chat-menu-bg: #32394c;
|
||||
--chat-menu-outline: #32394c;
|
||||
--chat-menu-icon: #ffffff;
|
||||
--chat-menu-icon-hover: #a49a9a36;
|
||||
--block-user-bg-hover: #121a2f;
|
||||
--paperclip-icon: #d0c9c9;
|
||||
--sectxt: #bbc3cd;
|
||||
--vdicon: #d0d6de;
|
||||
--tradehead: #008fd5;
|
||||
|
||||
@ -36,7 +36,7 @@ class ChatHead extends LitElement {
|
||||
.img-icon {
|
||||
float: left;
|
||||
font-size:40px;
|
||||
color: var(--black);
|
||||
color: var(--chat-group);
|
||||
}
|
||||
|
||||
.about {
|
||||
@ -82,7 +82,7 @@ class ChatHead extends LitElement {
|
||||
<li @click=${() => this.getUrl(this.chatInfo.url)} class="clearfix ${this.activeChatHeadUrl === this.chatInfo.url ? 'active' : ''}">
|
||||
<mwc-icon class="img-icon">account_circle</mwc-icon>
|
||||
<div class="about">
|
||||
<div class="name"><span style="float:left; padding-left: 8px; color: var(--black);">${this.chatInfo.groupName ? this.chatInfo.groupName : this.chatInfo.name !== undefined ? this.chatInfo.name : this.chatInfo.address.substr(0, 15)} </span> <mwc-icon style="float:right; padding: 0 1rem; color: var(--black);">${this.chatInfo.groupId !== undefined ? 'lock_open' : 'lock'}</mwc-icon> </div>
|
||||
<div class="name"><span style="float:left; padding-left: 8px; color: var(--chat-group);">${this.chatInfo.groupName ? this.chatInfo.groupName : this.chatInfo.name !== undefined ? this.chatInfo.name : this.chatInfo.address.substr(0, 15)} </span> <mwc-icon style="float:right; padding: 0 1rem; color: var(--chat-group);">${this.chatInfo.groupId !== undefined ? 'lock_open' : 'lock'}</mwc-icon> </div>
|
||||
</div>
|
||||
</li>
|
||||
`
|
||||
|
||||
@ -1,24 +1,25 @@
|
||||
import { LitElement, html, css } from 'lit'
|
||||
import { render } from 'lit/html.js'
|
||||
import { Epml } from '../../../epml.js'
|
||||
import { use, get, translate, registerTranslateConfig } from 'lit-translate'
|
||||
import { LitElement, html, css } from 'lit';
|
||||
import { render } from 'lit/html.js';
|
||||
import { Epml } from '../../../epml.js';
|
||||
import { use, get, translate, registerTranslateConfig } from 'lit-translate';
|
||||
import localForage from "localforage";
|
||||
registerTranslateConfig({
|
||||
loader: lang => fetch(`/language/${lang}.json`).then(res => res.json())
|
||||
})
|
||||
});
|
||||
import ShortUniqueId from 'short-unique-id';
|
||||
import Compressor from 'compressorjs';
|
||||
import { escape, unescape } from 'html-escaper';
|
||||
import { inputKeyCodes } from '../../utils/keyCodes.js'
|
||||
import './ChatScroller.js'
|
||||
import './LevelFounder.js'
|
||||
import './NameMenu.js'
|
||||
import './TimeAgo.js'
|
||||
import './ChatTextEditor'
|
||||
import '@polymer/paper-spinner/paper-spinner-lite.js'
|
||||
import '@material/mwc-button'
|
||||
import '@material/mwc-dialog'
|
||||
import '@material/mwc-icon'
|
||||
import { inputKeyCodes } from '../../utils/keyCodes.js';
|
||||
import './ChatScroller.js';
|
||||
import './LevelFounder.js';
|
||||
import './NameMenu.js';
|
||||
import './TimeAgo.js';
|
||||
import './ChatTextEditor';
|
||||
import './WrapperModal';
|
||||
import '@polymer/paper-spinner/paper-spinner-lite.js';
|
||||
import '@material/mwc-button';
|
||||
import '@material/mwc-dialog';
|
||||
import '@material/mwc-icon';
|
||||
import { replaceMessagesEdited } from '../../utils/replace-messages-edited.js';
|
||||
import { publishData } from '../../utils/publish-image.js';
|
||||
import WebWorker from 'web-worker:./computePowWorker.js';
|
||||
@ -61,21 +62,14 @@ class ChatPage extends LitElement {
|
||||
chatMessageSize: { type: Number},
|
||||
imageFile: { type: Object },
|
||||
isUploadingImage: { type: Boolean },
|
||||
caption: { type: String },
|
||||
chatEditor: { type: Object },
|
||||
chatEditorNewChat: { type: Object }
|
||||
chatEditorNewChat: { type: Object },
|
||||
userLanguage: { type: String },
|
||||
}
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
* {
|
||||
/* Styling mdc dialog native props */
|
||||
--mdc-dialog-min-width: 300px;
|
||||
--mdc-dialog-box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
|
||||
--mdc-dialog-z-index: 5
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
@ -100,10 +94,9 @@ class ChatPage extends LitElement {
|
||||
width: 98%;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 8px;
|
||||
border: 1px solid var(--black);
|
||||
border: 1px solid var(--chat-bubble-bg);
|
||||
border-radius: 10px;
|
||||
background: #f1f1f1;
|
||||
color: var(--black);
|
||||
background: var(--chat-bubble-bg);
|
||||
}
|
||||
|
||||
.chat-text-area .typing-area textarea {
|
||||
@ -425,10 +418,6 @@ class ChatPage extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
.mdc-dialog .mdc-dialog__surface {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* Add Image Modal Dialog Styling */
|
||||
|
||||
.dialog-container {
|
||||
@ -452,7 +441,9 @@ class ChatPage extends LitElement {
|
||||
|
||||
.dialog-image {
|
||||
width: 100%;
|
||||
max-height: 300px;
|
||||
border-radius: 0;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.red {
|
||||
@ -486,7 +477,7 @@ class ChatPage extends LitElement {
|
||||
this.isLoading = false
|
||||
this.isUserDown = false
|
||||
this.isPasteMenuOpen = false
|
||||
this.chatEditorPlaceholder = this.renderPlaceholder()
|
||||
this.chatEditorPlaceholder = ""
|
||||
this.messagesRendered = []
|
||||
this.repliedToMessageObj = null
|
||||
this.editedMessageObj = null
|
||||
@ -494,10 +485,13 @@ class ChatPage extends LitElement {
|
||||
this.chatMessageSize = 0
|
||||
this.imageFile = null
|
||||
this.uid = new ShortUniqueId()
|
||||
this.caption = ""
|
||||
this.userLanguage = ""
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log(this.chatEditorPlaceholder, "here1123")
|
||||
const mstring = get("chatpage.cchange8");
|
||||
console.log(mstring, "here5040");
|
||||
return html`
|
||||
<div class="chat-container">
|
||||
<div>
|
||||
@ -516,69 +510,6 @@ class ChatPage extends LitElement {
|
||||
</div>
|
||||
` :
|
||||
this.renderChatScroller()}
|
||||
<mwc-dialog
|
||||
|
||||
id="showDialogPublicKey"
|
||||
?open=${this.imageFile}
|
||||
|
||||
@closed=${() => {
|
||||
this.imageFile = null;
|
||||
this.chatEditor.enable()
|
||||
|
||||
}}>
|
||||
<div class="dialog-header"></div>
|
||||
<div class="dialog-container mdc-dialog mdc-dialog__surface">
|
||||
${this.imageFile && html`
|
||||
<img src=${URL.createObjectURL(this.imageFile)} alt="dialog-img" class="dialog-image" />
|
||||
`}
|
||||
<div class="caption-container">
|
||||
<chat-text-editor
|
||||
iframeId="newChat"
|
||||
?hasGlobalEvents=${false}
|
||||
placeholder=${this.chatEditorPlaceholder}
|
||||
._sendMessage=${this._sendMessage}
|
||||
.setChatEditor=${(editor)=> this.setChatEditorNewChat(editor)}
|
||||
.chatEditor=${this.chatEditorNewChat}
|
||||
.imageFile=${this.imageFile}
|
||||
.insertImage=${this.insertImage}
|
||||
.editedMessageObj=${this.editedMessageObj}
|
||||
?isLoading=${this.isLoading}
|
||||
?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>
|
||||
<mwc-button
|
||||
slot="primaryAction"
|
||||
dialogAction="cancel"
|
||||
class="red"
|
||||
@click=${()=>{
|
||||
this.imageFile = null
|
||||
}}
|
||||
>
|
||||
${translate("chatpage.cchange33")}
|
||||
</mwc-button>
|
||||
<mwc-button
|
||||
slot="primaryAction"
|
||||
dialogAction="cancel"
|
||||
@click=${()=> {
|
||||
this._sendMessage({
|
||||
type: 'image',
|
||||
imageFile: this.imageFile,
|
||||
})
|
||||
}}
|
||||
>
|
||||
${translate("chatpage.cchange9")}
|
||||
</mwc-button>
|
||||
</mwc-dialog>
|
||||
</div>
|
||||
<div class="chat-text-area" style="${`${(this.repliedToMessageObj || this.editedMessageObj) && "min-height: 120px"}`}">
|
||||
<div class="typing-area">
|
||||
@ -630,7 +561,8 @@ class ChatPage extends LitElement {
|
||||
.editedMessageObj=${this.editedMessageObj}
|
||||
.mirrorChatInput=${this.mirrorChatInput}
|
||||
?isLoading=${this.isLoading}
|
||||
?isLoadingMessages=${this.isLoadingMessages}>
|
||||
?isLoadingMessages=${this.isLoadingMessages}
|
||||
>
|
||||
</chat-text-editor>
|
||||
</div>
|
||||
</div>
|
||||
@ -649,31 +581,86 @@ class ChatPage extends LitElement {
|
||||
</div>
|
||||
</div>
|
||||
`: ''}
|
||||
<wrapper-modal
|
||||
.removeImage=${() => this.removeImage()}
|
||||
style=${this.imageFile ? "display: block" : "display: none"}>
|
||||
<div>
|
||||
<div class="dialog-container">
|
||||
${this.imageFile && html`
|
||||
<img src=${URL.createObjectURL(this.imageFile)} alt="dialog-img" class="dialog-image" />
|
||||
`}
|
||||
<div class="caption-container">
|
||||
<chat-text-editor
|
||||
iframeId="newChat"
|
||||
?hasGlobalEvents=${false}
|
||||
placeholder=${this.chatEditorPlaceholder}
|
||||
._sendMessage=${this._sendMessage}
|
||||
.setChatEditor=${(editor)=> this.setChatEditorNewChat(editor)}
|
||||
.chatEditor=${this.chatEditorNewChat}
|
||||
.imageFile=${this.imageFile}
|
||||
.insertImage=${this.insertImage}
|
||||
.editedMessageObj=${this.editedMessageObj}
|
||||
?isLoading=${this.isLoading}
|
||||
?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``}
|
||||
<button
|
||||
class="red"
|
||||
@click=${()=>{
|
||||
this.imageFile = null
|
||||
}}
|
||||
>
|
||||
${translate("chatpage.cchange33")}
|
||||
</button>
|
||||
<button
|
||||
@click=${()=> {
|
||||
this._sendMessage({
|
||||
type: 'image',
|
||||
imageFile: this.imageFile,
|
||||
})
|
||||
}}
|
||||
>
|
||||
${translate("chatpage.cchange9")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</wrapper-modal>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
setChatEditor(editor){
|
||||
this.chatEditor = editor
|
||||
setChatEditor(editor) {
|
||||
this.chatEditor = editor;
|
||||
}
|
||||
|
||||
setChatEditorNewChat(editor){
|
||||
this.chatEditorNewChat = editor
|
||||
setChatEditorNewChat(editor) {
|
||||
this.chatEditorNewChat = editor;
|
||||
}
|
||||
|
||||
insertImage(file){
|
||||
|
||||
if(file.type.includes('image')){
|
||||
this.imageFile = file
|
||||
this.chatEditor.disable()
|
||||
if (file.type.includes('image')) {
|
||||
this.imageFile = file;
|
||||
this.chatEditor.disable();
|
||||
// this.changeMsgInput('newChat')
|
||||
// this.initChatEditor();
|
||||
// this.chatEditor.disable();
|
||||
return
|
||||
return;
|
||||
}
|
||||
parentEpml.request('showSnackBar', get("chatpage.cchange28"));
|
||||
}
|
||||
|
||||
parentEpml.request('showSnackBar', get("chatpage.cchange28"))
|
||||
|
||||
removeImage() {
|
||||
this.imageFile = null;
|
||||
this.chatEditor.enable();
|
||||
}
|
||||
|
||||
changeMsgInput(id){
|
||||
@ -684,7 +671,6 @@ class ChatPage extends LitElement {
|
||||
}
|
||||
|
||||
async firstUpdated() {
|
||||
|
||||
// TODO: Load and fetch messages from localstorage (maybe save messages to localstorage...)
|
||||
|
||||
// document.addEventListener('keydown', (e) => {
|
||||
@ -702,8 +688,10 @@ class ChatPage extends LitElement {
|
||||
// });
|
||||
|
||||
window.addEventListener('storage', () => {
|
||||
const checkLanguage = localStorage.getItem('qortalLanguage')
|
||||
use(checkLanguage)
|
||||
const checkLanguage = localStorage.getItem('qortalLanguage');
|
||||
use(checkLanguage);
|
||||
console.log(checkLanguage, "language here");
|
||||
this.userLanguage = checkLanguage;
|
||||
})
|
||||
|
||||
const getAddressPublicKey = () => {
|
||||
@ -733,14 +721,15 @@ class ChatPage extends LitElement {
|
||||
};
|
||||
|
||||
setTimeout(() => {
|
||||
const isRecipient = this.chatId.includes('direct') === true ? true : false;
|
||||
this.chatId.includes('direct') === true ? this.isReceipient = true : this.isReceipient = false;
|
||||
this._chatId = this.chatId.split('/')[1];
|
||||
|
||||
const mstring = get("chatpage.cchange8")
|
||||
const placeholder = this.isReceipient === true ? `Message ${this._chatId}` : `${mstring}`;
|
||||
const mstring = get("chatpage.cchange8");
|
||||
console.log(mstring, "here5090");
|
||||
const placeholder = isRecipient === true ? `Message ${this._chatId}` : `${mstring}`;
|
||||
this.chatEditorPlaceholder = placeholder;
|
||||
|
||||
this.isReceipient ? getAddressPublicKey() : this.fetchChatMessages(this._chatId);
|
||||
isRecipient ? getAddressPublicKey() : this.fetchChatMessages(this._chatId);
|
||||
|
||||
// Init ChatEditor
|
||||
// this.initChatEditor();
|
||||
@ -771,26 +760,16 @@ class ChatPage extends LitElement {
|
||||
parentEpml.imReady();
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
onCaptionChange(e) {
|
||||
this.caption = e;
|
||||
}
|
||||
|
||||
changeLanguage() {
|
||||
const checkLanguage = localStorage.getItem('qortalLanguage')
|
||||
|
||||
if (checkLanguage === null || checkLanguage.length === 0) {
|
||||
localStorage.setItem('qortalLanguage', 'us')
|
||||
use('us')
|
||||
} else {
|
||||
use(checkLanguage)
|
||||
async updated(changedProperties) {
|
||||
if (changedProperties && changedProperties.has('userLanguage')) {
|
||||
await new Promise(r => setTimeout(r, 100));
|
||||
this.chatEditorPlaceholder = this.isReceipient === true ? `Message ${this._chatId}` : `${get("chatpage.cchange8")}`;
|
||||
}
|
||||
}
|
||||
|
||||
renderPlaceholder() {
|
||||
const mstring = get("chatpage.cchange8")
|
||||
const mstring = get("chatpage.cchange8");
|
||||
console.log(mstring, "here11");
|
||||
const placeholder = this.isReceipient === true ? `Message ${this._chatId}` : `${mstring}`;
|
||||
return placeholder;
|
||||
}
|
||||
@ -832,10 +811,10 @@ class ChatPage extends LitElement {
|
||||
|
||||
const replacedMessages = await replaceMessagesEdited({
|
||||
decodedMessages: decodeMsgs,
|
||||
parentEpml,
|
||||
isReceipient: this.isReceipient,
|
||||
decodeMessageFunc: this.decodeMessage,
|
||||
_publicKey: this._publicKey
|
||||
parentEpml,
|
||||
isReceipient: this.isReceipient,
|
||||
decodeMessageFunc: this.decodeMessage,
|
||||
_publicKey: this._publicKey
|
||||
})
|
||||
this.messagesRendered = [...replacedMessages, ...this.messagesRendered].sort(function (a, b) {
|
||||
return a.timestamp
|
||||
@ -858,10 +837,10 @@ class ChatPage extends LitElement {
|
||||
|
||||
const replacedMessages = await replaceMessagesEdited({
|
||||
decodedMessages: decodeMsgs,
|
||||
parentEpml,
|
||||
isReceipient: this.isReceipient,
|
||||
decodeMessageFunc: this.decodeMessage,
|
||||
_publicKey: this._publicKey
|
||||
parentEpml,
|
||||
isReceipient: this.isReceipient,
|
||||
decodeMessageFunc: this.decodeMessage,
|
||||
_publicKey: this._publicKey
|
||||
})
|
||||
|
||||
this.messagesRendered = [...replacedMessages, ...this.messagesRendered].sort(function (a, b) {
|
||||
@ -892,7 +871,7 @@ class ChatPage extends LitElement {
|
||||
})
|
||||
|
||||
if (isInitial) {
|
||||
|
||||
this.chatEditorPlaceholder = this.renderPlaceholder();
|
||||
const replacedMessages = await replaceMessagesEdited({
|
||||
decodedMessages: decodedMessages,
|
||||
parentEpml,
|
||||
@ -932,7 +911,6 @@ class ChatPage extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// set replied to message in chat editor
|
||||
|
||||
setRepliedToMessageObj(messageObj) {
|
||||
|
||||
@ -168,7 +168,7 @@ export const chatStyles = css`
|
||||
|
||||
.message-reactions {
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
width: calc(100% - 54px);
|
||||
margin-left: 54px;
|
||||
}
|
||||
|
||||
@ -296,8 +296,8 @@ export const chatStyles = css`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
background-color: white;
|
||||
border: 1px solid #dad9d9;
|
||||
background-color: var(--chat-menu-bg);
|
||||
border: 1px solid var(--chat-menu-outline);
|
||||
border-radius: 5px;
|
||||
height:100%;
|
||||
position: relative;
|
||||
@ -313,11 +313,12 @@ export const chatStyles = css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
color: var(--chat-menu-icon);
|
||||
}
|
||||
|
||||
.menu-icon:hover {
|
||||
border-radius: 5px;
|
||||
background-color: #dad9d9;
|
||||
background-color: var(--chat-menu-icon-hover);
|
||||
transition: all 0.1s ease-in-out;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -372,16 +373,28 @@ export const chatStyles = css`
|
||||
}
|
||||
|
||||
.block-user {
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 5px 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
color: var(--chat-menu-icon);
|
||||
justify-content: space-evenly;
|
||||
border: 1px solid rgb(218, 217, 217);
|
||||
border-radius: 5px;
|
||||
background-color: white;
|
||||
width: 90px;
|
||||
background-color: var(--chat-menu-bg);
|
||||
width: 150px;
|
||||
height: 32px;
|
||||
padding: 3px 8px;
|
||||
box-shadow: rgba(77, 77, 82, 0.2) 0px 7px 29px 0px;
|
||||
}
|
||||
|
||||
.block-user:hover {
|
||||
cursor:pointer;
|
||||
background-color: var(--block-user-bg-hover);
|
||||
transition: all 0.1s ease-in-out 0s;
|
||||
}
|
||||
|
||||
.reactions-bg {
|
||||
background-color: #d5d5d5;
|
||||
border-radius: 10px;
|
||||
@ -394,7 +407,7 @@ export const chatStyles = css`
|
||||
}
|
||||
|
||||
.reactions-bg:hover {
|
||||
border: 0.5px solid #6b6969;
|
||||
border: 0.5px solid var(--reaction-bubble-outline);
|
||||
}
|
||||
|
||||
.image-container {
|
||||
@ -412,6 +425,15 @@ export const chatStyles = css`
|
||||
height: 40vh;
|
||||
}
|
||||
|
||||
.image-deleted-msg {
|
||||
font-family: Roboto, sans-serif;
|
||||
font-size: 14px;
|
||||
font-style: italic;
|
||||
color: var(--chat-bubble-msg-color);
|
||||
margin: 0;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.image-delete-icon {
|
||||
margin-left: 5px;
|
||||
height: 20px;
|
||||
|
||||
@ -418,8 +418,7 @@ class MessageTemplate extends LitElement {
|
||||
${image && !isImageDeleted ? html`
|
||||
<div
|
||||
class=${[`image-container`, !this.isImageLoaded ? 'defaultSize' : ''].join(' ')}
|
||||
style=${this.isFirstMessage && "margin-top: 10px;"}
|
||||
>
|
||||
style=${this.isFirstMessage && "margin-top: 10px;"}>
|
||||
${imageHTML}<vaadin-icon
|
||||
@click=${() => this.sendMessage({
|
||||
type: 'delete',
|
||||
@ -429,6 +428,8 @@ class MessageTemplate extends LitElement {
|
||||
})}
|
||||
class="image-delete-icon" icon="vaadin:close" slot="icon"></vaadin-icon>
|
||||
</div>
|
||||
` : image && isImageDeleted ? html`
|
||||
<p class="image-deleted-msg">This image has been deleted</p>
|
||||
` : html``}
|
||||
<div
|
||||
id="messageContent"
|
||||
@ -652,7 +653,7 @@ editedMessageObj: this.originalMessage,
|
||||
${this.showBlockAddressIcon
|
||||
? html`
|
||||
<div class="block-user-container">
|
||||
<div class="menu-icon block-user" @click="${() => this.showBlockUserModal()}">
|
||||
<div class="block-user" @click="${() => this.showBlockUserModal()}">
|
||||
<p>${translate("blockpage.bcchange1")}</p>
|
||||
<vaadin-icon icon="vaadin:close-circle" slot="icon"></vaadin-icon>
|
||||
</div>
|
||||
|
||||
@ -1,25 +1,30 @@
|
||||
import { LitElement, html, css } from "lit"
|
||||
import { render } from "lit/html.js"
|
||||
import { LitElement, html, css } from "lit";
|
||||
import { get } from 'lit-translate';
|
||||
import { escape, unescape } from 'html-escaper';
|
||||
import { EmojiPicker } from 'emoji-picker-js';
|
||||
import { inputKeyCodes } from '../../utils/keyCodes.js'
|
||||
|
||||
import { inputKeyCodes } from '../../utils/keyCodes.js';
|
||||
import { Epml } from '../../../epml.js';
|
||||
|
||||
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent });
|
||||
class ChatTextEditor extends LitElement {
|
||||
static get properties() {
|
||||
return {
|
||||
isLoading: { type: Boolean },
|
||||
isLoadingMessages: { type: Boolean },
|
||||
_sendMessage: {attribute: false},
|
||||
placeholder: {type: String},
|
||||
imageFile: {type: Object},
|
||||
insertImage: {attribute: false},
|
||||
_sendMessage: { attribute: false },
|
||||
placeholder: { type: String },
|
||||
imageFile: { type: Object },
|
||||
insertImage: { attribute: false },
|
||||
iframeHeight: { type: Number },
|
||||
editedMessageObj: {type: Object},
|
||||
chatEditor: {type: Object},
|
||||
setChatEditor: {attribute: false},
|
||||
iframeId: {type: String},
|
||||
hasGlobalEvents: {type: Boolean}
|
||||
editedMessageObj: { type: Object },
|
||||
chatEditor: { type: Object },
|
||||
setChatEditor: { attribute: false },
|
||||
iframeId: { type: String },
|
||||
hasGlobalEvents: { type: Boolean },
|
||||
theme: {
|
||||
type: String,
|
||||
reflect: true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -42,6 +47,10 @@ class ChatTextEditor extends LitElement {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chatbar-caption {
|
||||
border-bottom: 2px solid var(--mdc-theme-primary);
|
||||
}
|
||||
|
||||
.emoji-button {
|
||||
width: 45px;
|
||||
height: 40px;
|
||||
@ -65,8 +74,9 @@ class ChatTextEditor extends LitElement {
|
||||
font-size: 12px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.paperclip-icon {
|
||||
color: #494949;
|
||||
color: var(--paperclip-icon);
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
@ -132,81 +142,93 @@ class ChatTextEditor extends LitElement {
|
||||
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';
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log(this.theme)
|
||||
return html`
|
||||
<div class="chatbar-container" style="${this.chatMessageInput && this.chatMessageInput.contentDocument.body.scrollHeight > 60 ? 'align-items: flex-end' : "align-items: center"}"
|
||||
<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"}">
|
||||
<div class="file-picker-container" @click=${(e) => {
|
||||
this.preventUserSendingImage(e)
|
||||
}}>
|
||||
<vaadin-icon
|
||||
class="paperclip-icon"
|
||||
icon="vaadin:paperclip"
|
||||
slot="icon"
|
||||
>
|
||||
</vaadin-icon>
|
||||
<div class="file-picker-input-container">
|
||||
<input
|
||||
.value="${this.imageFile}"
|
||||
@change="${e => 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>
|
||||
<button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}>
|
||||
${html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg" />`}
|
||||
</button>
|
||||
${this.editedMessageObj ? (
|
||||
html`
|
||||
<div>
|
||||
${this.isLoading === false ? html`
|
||||
<vaadin-icon
|
||||
class="checkmark-icon"
|
||||
icon="vaadin:check"
|
||||
slot="icon"
|
||||
@click=${() => this._sendMessage()}
|
||||
>
|
||||
<div class="file-picker-container">
|
||||
<vaadin-icon
|
||||
class="paperclip-icon"
|
||||
icon="vaadin:paperclip"
|
||||
slot="icon"
|
||||
>
|
||||
</vaadin-icon>
|
||||
<div class="file-picker-input-container">
|
||||
<input
|
||||
.value="${this.imageFile}"
|
||||
@change="${e => 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>
|
||||
<button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}>
|
||||
${html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg" />`}
|
||||
</button>
|
||||
${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>
|
||||
`}
|
||||
</div>
|
||||
`
|
||||
) :
|
||||
html`
|
||||
<div style="display:flex; ${this.chatMessageInput && this.chatMessageInput.contentDocument.body.scrollHeight > 60 ? 'margin-bottom: 5px' : "margin-bottom: 0"}">
|
||||
${this.isLoading === false ? html`
|
||||
<img
|
||||
src="/img/qchat-send-message-icon.svg"
|
||||
alt="send-icon"
|
||||
class="send-icon"
|
||||
@click=${() => this._sendMessage()} />
|
||||
` :
|
||||
html`
|
||||
<paper-spinner-lite active></paper-spinner-lite>
|
||||
`}
|
||||
</div>
|
||||
`
|
||||
}
|
||||
</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``}
|
||||
</vaadin-icon>
|
||||
` :
|
||||
html`
|
||||
<paper-spinner-lite active></paper-spinner-lite>
|
||||
`}
|
||||
</div>
|
||||
`
|
||||
) :
|
||||
html`
|
||||
<div style="${this.chatMessageInput && this.chatMessageInput.contentDocument.body.scrollHeight > 60 ? '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=${() => this._sendMessage()} />
|
||||
` :
|
||||
html`
|
||||
<paper-spinner-lite active></paper-spinner-lite>
|
||||
`}
|
||||
</div>
|
||||
`
|
||||
}
|
||||
</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>
|
||||
`
|
||||
}
|
||||
|
||||
preventUserSendingImage(e) {
|
||||
if (!this.userName) {
|
||||
e.preventDefault();
|
||||
parentEpml.request('showSnackBar', get("chatpage.cchange27"));
|
||||
};
|
||||
}
|
||||
|
||||
initialChat(e) {
|
||||
if (!this.chatEditor?.contentDiv.matches(':focus')) {
|
||||
// WARNING: Deprecated methods from KeyBoard Event
|
||||
@ -230,15 +252,28 @@ class ChatTextEditor extends LitElement {
|
||||
}
|
||||
|
||||
async firstUpdated() {
|
||||
if(this.hasGlobalEvents){
|
||||
this.addGlobalEventListener()
|
||||
console.log(this.placeholder, "here500");
|
||||
if (this.hasGlobalEvents) {
|
||||
this.addGlobalEventListener();
|
||||
}
|
||||
|
||||
window.addEventListener('storage', () => {
|
||||
const checkTheme = localStorage.getItem('qortalTheme');
|
||||
const captionEditor = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('testingId')
|
||||
if (checkTheme === 'dark') {
|
||||
this.theme = 'dark';
|
||||
captionEditor.style.cssText = "color:#ffffff;"
|
||||
} else {
|
||||
this.theme = 'light';
|
||||
captionEditor.style.cssText = "color:#080808;"
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
this.emojiPickerHandler = this.shadowRoot.querySelector('.emoji-button');
|
||||
this.mirrorChatInput = this.shadowRoot.getElementById('messageBox');
|
||||
this.chatMessageInput = this.shadowRoot.getElementById(this.iframeId);
|
||||
|
||||
|
||||
this.emojiPicker = new EmojiPicker({
|
||||
style: "twemoji",
|
||||
twemojiBaseUrl: '/emoji/',
|
||||
@ -267,7 +302,11 @@ class ChatTextEditor extends LitElement {
|
||||
if (changedProperties && changedProperties.has('editedMessageObj')) {
|
||||
this.chatEditor.insertText(this.editedMessageObj.message)
|
||||
}
|
||||
|
||||
if (changedProperties && changedProperties.has('placeholder')) {
|
||||
console.log(this.placeholder, "here600");
|
||||
const captionEditor = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('testingId');
|
||||
captionEditor.setAttribute('data-placeholder', this.placeholder);
|
||||
}
|
||||
}
|
||||
|
||||
shouldUpdate(changedProperties) {
|
||||
@ -327,20 +366,15 @@ class ChatTextEditor extends LitElement {
|
||||
}
|
||||
|
||||
calculateIFrameHeight(height) {
|
||||
|
||||
setTimeout(()=> {
|
||||
const editorTest = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('testingId').scrollHeight
|
||||
|
||||
|
||||
this.iframeHeight = editorTest + 20
|
||||
const editorTest = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('testingId').scrollHeight;
|
||||
this.iframeHeight = editorTest + 20;
|
||||
}, 50)
|
||||
|
||||
|
||||
}
|
||||
|
||||
initChatEditor() {
|
||||
const ChatEditor = function (editorConfig) {
|
||||
|
||||
console.log(editorConfig.placeholder, "here5600");
|
||||
const ChatEditor = function () {
|
||||
const editor = this;
|
||||
editor.init();
|
||||
@ -382,6 +416,7 @@ class ChatTextEditor extends LitElement {
|
||||
html {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
div {
|
||||
font-size: 1rem;
|
||||
line-height: 1.38rem;
|
||||
@ -394,6 +429,7 @@ class ChatTextEditor extends LitElement {
|
||||
outline: none;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
div[contentEditable=true]:empty:before {
|
||||
content: attr(data-placeholder);
|
||||
display: block;
|
||||
@ -403,9 +439,11 @@ class ChatTextEditor extends LitElement {
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
div[contentEditable=false]{
|
||||
background: rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
img.emoji {
|
||||
width: 1.7em;
|
||||
height: 1.5em;
|
||||
@ -611,7 +649,6 @@ class ChatTextEditor extends LitElement {
|
||||
}
|
||||
|
||||
editor.content.addEventListener('click', function (event) {
|
||||
|
||||
event.preventDefault();
|
||||
editor.focus();
|
||||
});
|
||||
@ -619,7 +656,7 @@ class ChatTextEditor extends LitElement {
|
||||
|
||||
ChatEditor.prototype.remove = function () {
|
||||
const editor = this;
|
||||
var old_element = editor.content.body
|
||||
var old_element = editor.content.body;
|
||||
var new_element = old_element.cloneNode(true);
|
||||
editor.content.body.parentNode.replaceChild(new_element, old_element);
|
||||
while (editor.content.body.firstChild) {
|
||||
@ -640,10 +677,10 @@ class ChatTextEditor extends LitElement {
|
||||
elemDiv.setAttribute('contenteditable', 'true');
|
||||
elemDiv.setAttribute('spellcheck', 'false');
|
||||
elemDiv.setAttribute('data-placeholder', editorConfig.placeholder);
|
||||
elemDiv.style.cssText = 'width:100%';
|
||||
elemDiv.id = 'testingId'
|
||||
editor.content.body.appendChild(elemDiv);
|
||||
editor.contentDiv = editor.frame.contentDocument.body.firstChild
|
||||
elemDiv.style.cssText = `width:100%; ${editorConfig.theme === "dark" ? "color:#ffffff;" : "color: #080808"}`;
|
||||
elemDiv.id = 'testingId';
|
||||
editor.content.body.appendChild(elemDiv);
|
||||
editor.contentDiv = editor.frame.contentDocument.body.firstChild;
|
||||
editor.styles();
|
||||
editor.listenChanges();
|
||||
|
||||
@ -672,10 +709,11 @@ editor.content.body.appendChild(elemDiv);
|
||||
chatMessageSize: this.chatMessageSize,
|
||||
addGlobalEventListener: this.addGlobalEventListener,
|
||||
removeGlobalEventListener: this.removeGlobalEventListener,
|
||||
iframeId: this.iframeId
|
||||
iframeId: this.iframeId,
|
||||
theme: this.theme
|
||||
};
|
||||
const newChat = new ChatEditor(editorConfig)
|
||||
this.setChatEditor(newChat)
|
||||
const newChat = new ChatEditor(editorConfig);
|
||||
this.setChatEditor(newChat);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1,55 @@
|
||||
import { css } from 'lit'
|
||||
|
||||
export const wrapperModalStyles = css`
|
||||
.backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: rgb(186 186 186 / 26%);
|
||||
overflow: hidden;
|
||||
animation: backdrop_blur cubic-bezier(0.22, 1, 0.36, 1) 1s forwards;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
height: auto;
|
||||
position: fixed;
|
||||
box-shadow: rgb(60 64 67 / 30%) 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 2px 6px 2px;
|
||||
width: 500px;
|
||||
z-index: 5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px;
|
||||
background-color: var(--white);
|
||||
left: 50%;
|
||||
top: 0px;
|
||||
transform: translate(-50%, 40%);
|
||||
border-radius: 12px;
|
||||
overflow-y: auto;
|
||||
animation: 1s cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal forwards running modal_transition;
|
||||
max-height: 80%;
|
||||
}
|
||||
|
||||
@keyframes backdrop_blur {
|
||||
0% {
|
||||
backdrop-filter: blur(0px);
|
||||
background: transparent;
|
||||
}
|
||||
100% {
|
||||
backdrop-filter: blur(5px);
|
||||
background: rgb(186 186 186 / 26%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes modal_transition {
|
||||
0% {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
`
|
||||
27
qortal-ui-plugins/plugins/core/components/WrapperModal.js
Normal file
27
qortal-ui-plugins/plugins/core/components/WrapperModal.js
Normal file
@ -0,0 +1,27 @@
|
||||
import { LitElement, html } from 'lit';
|
||||
import { render } from 'lit/html.js';
|
||||
import { wrapperModalStyles } from './WrapperModal-css.js'
|
||||
|
||||
export class WrapperModal extends LitElement {
|
||||
static get properties() {
|
||||
return {
|
||||
removeImage: { type: Function },
|
||||
}
|
||||
}
|
||||
|
||||
static styles = [wrapperModalStyles]
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div>
|
||||
<div class="backdrop" @click=${() => {
|
||||
this.removeImage()
|
||||
}}></div>
|
||||
<div class="modal-body">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
customElements.define('wrapper-modal', WrapperModal);
|
||||
Loading…
x
Reference in New Issue
Block a user