diff --git a/qortal-ui-core/font/switch-theme.css b/qortal-ui-core/font/switch-theme.css index 6190e2f4..986d5815 100644 --- a/qortal-ui-core/font/switch-theme.css +++ b/qortal-ui-core/font/switch-theme.css @@ -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; diff --git a/qortal-ui-core/src/styles/switch-theme.css b/qortal-ui-core/src/styles/switch-theme.css index 26c78fd8..b388ac76 100644 --- a/qortal-ui-core/src/styles/switch-theme.css +++ b/qortal-ui-core/src/styles/switch-theme.css @@ -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; diff --git a/qortal-ui-plugins/plugins/core/components/ChatHead.js b/qortal-ui-plugins/plugins/core/components/ChatHead.js index 4ec0fab2..178f4b99 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatHead.js +++ b/qortal-ui-plugins/plugins/core/components/ChatHead.js @@ -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 {
  • this.getUrl(this.chatInfo.url)} class="clearfix ${this.activeChatHeadUrl === this.chatInfo.url ? 'active' : ''}"> account_circle
    -
    ${this.chatInfo.groupName ? this.chatInfo.groupName : this.chatInfo.name !== undefined ? this.chatInfo.name : this.chatInfo.address.substr(0, 15)} ${this.chatInfo.groupId !== undefined ? 'lock_open' : 'lock'}
    +
    ${this.chatInfo.groupName ? this.chatInfo.groupName : this.chatInfo.name !== undefined ? this.chatInfo.name : this.chatInfo.address.substr(0, 15)} ${this.chatInfo.groupId !== undefined ? 'lock_open' : 'lock'}
    • ` diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index c8ebf65c..b0d36029 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -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`
    @@ -516,69 +510,6 @@ class ChatPage extends LitElement {
    ` : this.renderChatScroller()} - { - this.imageFile = null; - this.chatEditor.enable() - - }}> -
    -
    - ${this.imageFile && html` - dialog-img - `} -
    - this.setChatEditorNewChat(editor)} - .chatEditor=${this.chatEditorNewChat} - .imageFile=${this.imageFile} - .insertImage=${this.insertImage} - .editedMessageObj=${this.editedMessageObj} - ?isLoading=${this.isLoading} - ?isLoadingMessages=${this.isLoadingMessages}> - -
    - ${this.chatMessageSize >= 750 ? - html` -
    -
    - ${`Your message size is of ${this.chatMessageSize} bytes out of a maximum of 1000`} -
    -
    - ` : - html``} -
    - { - this.imageFile = null - }} - > - ${translate("chatpage.cchange33")} - - { - this._sendMessage({ - type: 'image', - imageFile: this.imageFile, - }) - }} - > - ${translate("chatpage.cchange9")} - -
    @@ -630,7 +561,8 @@ class ChatPage extends LitElement { .editedMessageObj=${this.editedMessageObj} .mirrorChatInput=${this.mirrorChatInput} ?isLoading=${this.isLoading} - ?isLoadingMessages=${this.isLoadingMessages}> + ?isLoadingMessages=${this.isLoadingMessages} + >
    @@ -648,32 +580,87 @@ class ChatPage extends LitElement { - `: ''} + `: ''} + this.removeImage()} + style=${this.imageFile ? "display: block" : "display: none"}> +
    +
    + ${this.imageFile && html` + dialog-img + `} +
    + this.setChatEditorNewChat(editor)} + .chatEditor=${this.chatEditorNewChat} + .imageFile=${this.imageFile} + .insertImage=${this.insertImage} + .editedMessageObj=${this.editedMessageObj} + ?isLoading=${this.isLoading} + ?isLoadingMessages=${this.isLoadingMessages}> + +
    + ${this.chatMessageSize >= 750 ? + html` +
    +
    + ${`Your message size is of ${this.chatMessageSize} bytes out of a maximum of 1000`} +
    +
    + ` : + html``} + + +
    +
    +     ` } - 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 - } - - parentEpml.request('showSnackBar', get("chatpage.cchange28")) - + return; + } + 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) => { @@ -701,9 +687,11 @@ class ChatPage extends LitElement { // } // }); - window.addEventListener('storage', () => { - const checkLanguage = localStorage.getItem('qortalLanguage') - use(checkLanguage) + window.addEventListener('storage', () => { + 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) { diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js index 753c5230..f740ddb3 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js @@ -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; diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index 448ce883..c75c90c5 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -416,8 +416,7 @@ class MessageTemplate extends LitElement { ${image && !isImageDeleted ? html`
    + style=${this.isFirstMessage && "margin-top: 10px;"}> ${imageHTML} this.sendMessage({ type: 'delete', @@ -427,6 +426,8 @@ class MessageTemplate extends LitElement { })} class="image-delete-icon" icon="vaadin:close" slot="icon">
    + ` : image && isImageDeleted ? html` +

    This image has been deleted

    ` : html``}
    -
    +

    ${translate("blockpage.bcchange1")}

    diff --git a/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js b/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js index a46088fd..712e4cb6 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js +++ b/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js @@ -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` -
    +
    { + this.preventUserSendingImage(e) + }}> + + +
    + +
    +
    + + + + ${this.editedMessageObj ? ( + html` +
    + ${this.isLoading === false ? html` + this._sendMessage()} > -
    - - -
    - -
    -
    - - - - ${this.editedMessageObj ? ( - html` -
    - ${this.isLoading === false ? html` - this._sendMessage()} - > - - ` : - html` - - `} -
    - ` - ) : - html` -
    - ${this.isLoading === false ? html` - send-icon this._sendMessage()} /> - ` : - html` - - `} -
    - ` - } -
    - ${this.chatMessageSize >= 750 ? - html` -
    -
    - ${`Your message size is of ${this.chatMessageSize} bytes out of a maximum of 1000`} -
    -
    - ` : - html``} + + ` : + html` + + `} +
    + ` + ) : + html` +
    + ${this.isLoading === false ? html` + send-icon this._sendMessage()} /> + ` : + html` + + `}
    + ` + } +
    + ${this.chatMessageSize >= 750 ? + html` +
    +
    + ${`Your message size is of ${this.chatMessageSize} bytes out of a maximum of 1000`} +
    +
    + ` : + html``} +
    ` } + 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,14 +252,27 @@ 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.chatMessageInput = this.shadowRoot.getElementById(this.iframeId); this.emojiPicker = new EmojiPicker({ style: "twemoji", @@ -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) { - + 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); } } diff --git a/qortal-ui-plugins/plugins/core/components/WrapperModal-css.js b/qortal-ui-plugins/plugins/core/components/WrapperModal-css.js new file mode 100644 index 00000000..bc8413e4 --- /dev/null +++ b/qortal-ui-plugins/plugins/core/components/WrapperModal-css.js @@ -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; + } + } +` \ No newline at end of file diff --git a/qortal-ui-plugins/plugins/core/components/WrapperModal.js b/qortal-ui-plugins/plugins/core/components/WrapperModal.js new file mode 100644 index 00000000..23b6c040 --- /dev/null +++ b/qortal-ui-plugins/plugins/core/components/WrapperModal.js @@ -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` +
    +
    { + this.removeImage() + }}>
    +
    + +
    +
    + `; + } +} +customElements.define('wrapper-modal', WrapperModal);