From 55436f6fc1e682ca2327bc8eda847725c8a4f7b5 Mon Sep 17 00:00:00 2001 From: Justin Ferrari <‘justinwesleyferrari@gmail.com’> Date: Sat, 26 Nov 2022 21:54:24 -0500 Subject: [PATCH] Finish styling of the modal + fixed down arrow bug --- .../plugins/core/components/ChatPage.js | 144 ++++++++++++++---- .../core/components/ChatScroller-css.js | 24 --- .../plugins/core/components/ChatScroller.js | 16 +- .../plugins/core/components/ChatTextEditor.js | 44 ++++-- 4 files changed, 150 insertions(+), 78 deletions(-) diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index b0d36029..ae71f420 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -65,6 +65,7 @@ class ChatPage extends LitElement { chatEditor: { type: Object }, chatEditorNewChat: { type: Object }, userLanguage: { type: String }, + lastMessageRefVisible: { type: Boolean }, } } @@ -82,10 +83,10 @@ class ChatPage extends LitElement { .chat-text-area { display: flex; + position: relative; justify-content: center; min-height: 60px; max-height: 100%; - overflow: hidden; } .chat-text-area .typing-area { @@ -145,7 +146,7 @@ class ChatPage extends LitElement { } .original-message { - color: black; + color: var(--chat-bubble-msg-color); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; @@ -225,7 +226,7 @@ class ChatPage extends LitElement { height: auto; overflow: hidden; justify-content: center; - background: white; + background-color: var(--white); padding: 5px; border-radius: 1px; } @@ -380,12 +381,14 @@ class ChatPage extends LitElement { .marginLoader { margin-right: 8px; } + .smallLoading, .smallLoading:after { border-radius: 50%; width: 2px; height: 2px; } + .smallLoading { border-width: 0.8em; border-style: solid; @@ -397,6 +400,7 @@ class ChatPage extends LitElement { transform: translateZ(0px); animation: 1.1s linear 0s infinite normal none running loadingAnimation; } + @-webkit-keyframes loadingAnimation { 0% { -webkit-transform: rotate(0deg); @@ -407,6 +411,7 @@ class ChatPage extends LitElement { transform: rotate(360deg); } } + @keyframes loadingAnimation { 0% { -webkit-transform: rotate(0deg); @@ -446,9 +451,67 @@ class ChatPage extends LitElement { object-fit: contain; } - .red { - --mdc-theme-primary: #F44336; + .last-message-ref { + position: absolute; + font-size: 18px; + top: -40px; + right: 30px; + width: 50; + height: 50; + z-index: 5; + color: black; + background-color: white; + border-radius: 50%; + transition: all 0.1s ease-in-out; + } + + .last-message-ref:hover { + cursor: pointer; + transform: scale(1.1); + } + + .arrow-down-icon { + transform: scale(1.15); + } + + .modal-button-row { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + } + + .modal-button { + font-family: Roboto, sans-serif; + font-size: 16px; + color: var(--mdc-theme-primary); + background-color: transparent; + padding: 8px 10px; + border-radius: 5px; + border: none; + transition: all 0.3s ease-in-out; + } + + .modal-button-red { + font-family: Roboto, sans-serif; + font-size: 16px; + color: #F44336; + background-color: transparent; + padding: 8px 10px; + border-radius: 5px; + border: none; + transition: all 0.3s ease-in-out; + } + + .modal-button-red:hover { + cursor: pointer; + background-color: #f4433663; } + + .modal-button:hover { + cursor: pointer; + background-color: #03a8f475; + } ` } @@ -486,12 +549,10 @@ class ChatPage extends LitElement { this.imageFile = null this.uid = new ShortUniqueId() this.userLanguage = "" + this.lastMessageRefVisible = false } render() { - console.log(this.chatEditorPlaceholder, "here1123") - const mstring = get("chatpage.cchange8"); - console.log(mstring, "here5040"); return html`
@@ -512,6 +573,17 @@ class ChatPage extends LitElement { this.renderChatScroller()}
+
+ { + this.shadowRoot.querySelector("chat-scroller").shadowRoot.getElementById("downObserver") + .scrollIntoView({ + behavior: 'smooth', + }); + }}> + +
${this.repliedToMessageObj && html`
@@ -613,24 +685,28 @@ class ChatPage extends LitElement {
` : html``} - - +
+ + +
@@ -638,6 +714,10 @@ class ChatPage extends LitElement { ` } + showLastMessageRefScroller(props) { + this.lastMessageRefVisible = props; + } + setChatEditor(editor) { this.chatEditor = editor; } @@ -646,7 +726,7 @@ class ChatPage extends LitElement { this.chatEditorNewChat = editor; } - insertImage(file){ + insertImage(file) { if (file.type.includes('image')) { this.imageFile = file; this.chatEditor.disable(); @@ -663,13 +743,13 @@ class ChatPage extends LitElement { this.chatEditor.enable(); } - changeMsgInput(id){ + changeMsgInput(id) { this.chatEditor.remove() this.chatMessageInput = this.shadowRoot.getElementById(id); this.initChatEditor(); } - + async firstUpdated() { // TODO: Load and fetch messages from localstorage (maybe save messages to localstorage...) @@ -690,7 +770,6 @@ class ChatPage extends LitElement { window.addEventListener('storage', () => { const checkLanguage = localStorage.getItem('qortalLanguage'); use(checkLanguage); - console.log(checkLanguage, "language here"); this.userLanguage = checkLanguage; }) @@ -725,7 +804,6 @@ class ChatPage extends LitElement { this.chatId.includes('direct') === true ? this.isReceipient = true : this.isReceipient = false; this._chatId = this.chatId.split('/')[1]; const mstring = get("chatpage.cchange8"); - console.log(mstring, "here5090"); const placeholder = isRecipient === true ? `Message ${this._chatId}` : `${mstring}`; this.chatEditorPlaceholder = placeholder; @@ -769,7 +847,6 @@ class ChatPage extends LitElement { renderPlaceholder() { const mstring = get("chatpage.cchange8"); - console.log(mstring, "here11"); const placeholder = this.isReceipient === true ? `Message ${this._chatId}` : `${mstring}`; return placeholder; } @@ -783,7 +860,8 @@ class ChatPage extends LitElement { .setRepliedToMessageObj=${(val) => this.setRepliedToMessageObj(val)} .setEditedMessageObj=${(val) => this.setEditedMessageObj(val)} .focusChatEditor=${() => this.focusChatEditor()} - .sendMessage=${(val)=> this._sendMessage(val)} + .sendMessage=${(val) => this._sendMessage(val)} + .showLastMessageRefScroller=${(val) => this.showLastMessageRefScroller(val)} > ` diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js index f740ddb3..54171ceb 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js @@ -44,30 +44,6 @@ export const chatStyles = css` padding: 20px 17px; } - .last-message-ref { - position: fixed; - font-size: 18px; - right: 40px; - bottom: 100px; - width: 50; - height: 50; - z-index: 5; - opacity: 0; - color: black; - background-color: white; - border-radius: 50%; - transition: all 0.1s ease-in-out; - } - - .last-message-ref:hover { - cursor: pointer; - transform: scale(1.1); - } - - .arrow-down-icon { - transform: scale(1.15); - } - .chat-list { overflow-y: auto; overflow-x: hidden; diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index c75c90c5..dfda4116 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -28,7 +28,8 @@ class ChatScroller extends LitElement { setRepliedToMessageObj: { type: Function }, setEditedMessageObj: { type: Function }, focusChatEditor: { type: Function }, - sendMessage: { type: Function} + sendMessage: { type: Function}, + showLastMessageRefScroller: { type: Function }, } } @@ -54,7 +55,6 @@ class ChatScroller extends LitElement { render() { - let formattedMessages = this.messages.reduce((messageArray, message) => { const lastGroupedMessage = messageArray[messageArray.length - 1]; let timestamp; @@ -103,14 +103,6 @@ class ChatScroller extends LitElement { ) })}
-
- { - this.shadowRoot.getElementById('downObserver').scrollIntoView({ - behavior: 'smooth', - }) - }}> - -
` } @@ -151,9 +143,9 @@ class ChatScroller extends LitElement { _downObserverHandler(entries) { if (!entries[0].isIntersecting) { - this.shadowRoot.querySelector(".last-message-ref").style.opacity = '1' + this.showLastMessageRefScroller(true); } else { - this.shadowRoot.querySelector(".last-message-ref").style.opacity = '0' + this.showLastMessageRefScroller(false); } } diff --git a/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js b/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js index 712e4cb6..7d984763 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js +++ b/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js @@ -116,11 +116,11 @@ class ChatTextEditor extends LitElement { cursor: pointer; } - .chatbar-container textarea { + .chatbar-container textarea { display: none; } - .chatbar-container .chat-editor { + .chatbar-container .chat-editor { display: flex; max-height: -webkit-fill-available; width: 100%; @@ -169,9 +169,7 @@ class ChatTextEditor extends LitElement {
- + @@ -259,13 +257,13 @@ class ChatTextEditor extends LitElement { window.addEventListener('storage', () => { const checkTheme = localStorage.getItem('qortalTheme'); - const captionEditor = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('testingId') + const chatbar = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('testingId'); if (checkTheme === 'dark') { this.theme = 'dark'; - captionEditor.style.cssText = "color:#ffffff;" + chatbar.style.cssText = "color:#ffffff;" } else { this.theme = 'light'; - captionEditor.style.cssText = "color:#080808;" + chatbar.style.cssText = "color:#080808;" } }) @@ -416,7 +414,34 @@ class ChatTextEditor extends LitElement { html { cursor: text; } + + .chatbar-body { + display: flex; + align-items: center; + } + .chatbar-body::-webkit-scrollbar-track { + background-color: whitesmoke; + border-radius: 7px; + } + + .chatbar-body::-webkit-scrollbar { + width: 6px; + border-radius: 7px; + background-color: whitesmoke; + } + + .chatbar-body::-webkit-scrollbar-thumb { + background-color: rgb(180, 176, 176); + border-radius: 7px; + transition: all 0.3s ease-in-out; + } + + .chatbar-body::-webkit-scrollbar-thumb:hover { + background-color: rgb(148, 146, 146); + cursor: pointer; + } + div { font-size: 1rem; line-height: 1.38rem; @@ -433,11 +458,11 @@ class ChatTextEditor extends LitElement { div[contentEditable=true]:empty:before { content: attr(data-placeholder); display: block; - color: rgb(103, 107, 113); text-overflow: ellipsis; overflow: hidden; user-select: none; white-space: nowrap; + opacity: 0.7; } div[contentEditable=false]{ @@ -672,6 +697,7 @@ class ChatTextEditor extends LitElement { editor.mirror = editorConfig.mirrorElement; editor.content = (editor.frame.contentDocument || editor.frame.document); + editor.content.body.classList.add("chatbar-body"); let elemDiv = document.createElement('div'); elemDiv.setAttribute('contenteditable', 'true');