From ec3510c4563c588e2e50ad0cb905f6bc488d575b Mon Sep 17 00:00:00 2001 From: AlphaX-Projects <77661270+AlphaX-Projects@users.noreply.github.com> Date: Mon, 12 Sep 2022 13:53:57 +0200 Subject: [PATCH] one css and buutons position --- .../core/components/ChatScroller-css.js | 285 +++++++++ .../plugins/core/components/ChatScroller.js | 596 +++--------------- 2 files changed, 356 insertions(+), 525 deletions(-) create mode 100644 qortal-ui-plugins/plugins/core/components/ChatScroller-css.js diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js new file mode 100644 index 00000000..c18a6bcc --- /dev/null +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js @@ -0,0 +1,285 @@ +import { css } from 'lit' + +export const chatStyles = css` + html { + --scrollbarBG: #a1a1a1; + --thumbBG: #6a6c75; + } + + *::-webkit-scrollbar { + width: 11px; + } + + * { + scrollbar-width: thin; + scrollbar-color: var(--thumbBG) var(--scrollbarBG); + --mdc-theme-primary: rgb(3, 169, 244); + --mdc-theme-secondary: var(--mdc-theme-primary); + } + + *::-webkit-scrollbar-track { + background: var(--scrollbarBG); + } + + *::-webkit-scrollbar-thumb { + background-color: var(--thumbBG); + border-radius: 6px; + border: 3px solid var(--scrollbarBG); + } + + a { + color: var(--black); + text-decoration: none; + } + + ul { + list-style: none; + margin: 0; + padding: 20px; + } + + .last-message-ref { + position: fixed; + font-size: 20px; + 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); + } + + .chat-list { + overflow-y: auto; + overflow-x: hidden; + height: 92vh; + box-sizing: border-box; + } + + .message-data { + width: 92%; + margin-bottom: 15px; + margin-left: 50px; + } + + .message-data-name { + color: var(--black); + } + + .message-data-time { + color: #a8aab1; + font-size: 13px; + padding-left: 6px; + padding-bottom: 4px; + } + + .message-data-level { + color: #03a9f4; + font-size: 13px; + padding-left: 8px; + padding-bottom: 4px; + } + + .message-container { + position: relative; + } + + .message { + color: black; + padding: 12px 10px; + line-height: 19px; + white-space: pre-line; + word-wrap: break-word; + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; + font-size: 16px; + border-radius: 7px; + margin-bottom: 20px; + width: 90%; + position: relative; + } + + .message:after { + bottom: 100%; + left: 93%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + white-space: pre-line; + word-wrap: break-word; + pointer-events: none; + border-bottom-color: #ddd; + border-width: 10px; + margin-left: -10px; + } + + .message-parent:hover .chat-hover { + display: block; + } + + .message-parent:hover .message{ + filter:brightness(0.90); + } + + .chat-hover { + display: none; + position: absolute; + top: -38px; + left: 88.2%; + } + + .emoji { + width: 1.7em; + height: 1.5em; + margin-bottom: -2px; + vertical-align: bottom; + object-fit: contain; + } + + .my-message { + background: #d1d1d1; + border: 2px solid #eeeeee; + } + + .my-message:after { + border-bottom-color: #d1d1d1; + left: 7%; + } + + .other-message { + background: #f1f1f1; + border: 2px solid #dedede; + } + + .other-message:after { + border-bottom-color: #f1f1f1; + left: 7%; + } + + .align-left { + text-align: left; + } + + .align-right { + text-align: right; + } + + .float-left { + float: left; + } + + .float-right { + float: right; + } + + .clearfix:after { + visibility: hidden; + display: block; + font-size: 0; + content: " "; + clear: both; + height: 0; + } + + img { + border-radius: 25%; + } + + .container { + display: flex; + flex-direction: row; + align-items: center; + gap: 5px; + background-color: white; + border: 1px solid #dad9d9; + border-radius: 5px; + height:100%; + width: 100px; + position: relative; + } + + .menu-icon { + width: 100%; + padding: 5px; + display: flex; + align-items: center; + font-size: 13px; + } + + .menu-icon:hover { + background-color: #dad9d9; + transition: all 0.1s ease-in-out; + cursor: pointer; + } + + .tooltip { + position: relative; + } + + .tooltip:before { + content: attr(data-text); + position: absolute; + top: -47px; + left: 50%; + transform: translateX(-50%); + width: 90px; + padding: 10px; + border-radius: 10px; + background:#fff; + color: #000; + text-align: center; + box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; + font-size: 12px; + z-index: 5; + display: none; + } + + .tooltip:hover:before { + display: block; + } + + .tooltip:after { + content: ""; + position: absolute; + margin-top: -7px; + top: -7px; + border: 10px solid #fff; + border-color: white transparent transparent transparent; + z-index: 5; + display: none; + } + + .tooltip:hover:before, .tooltip:hover:after { + display: block; + } + + .block-user-container { + display: block; + position: absolute; + left: -48px; + } + + .block-user { + justify-content: space-between; + border: 1px solid rgb(218, 217, 217); + border-radius: 5px; + background-color: white; + width: 100%; + height: 32px; + padding: 3px 8px; + box-shadow: rgba(77, 77, 82, 0.2) 0px 7px 29px 0px; + } +` diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index bf7be1a3..8f4884b4 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -1,16 +1,17 @@ -import { LitElement, html, css } from 'lit'; -import { render } from 'lit/html.js'; -import { repeat } from 'lit/directives/repeat.js'; -import { translate, get } from 'lit-translate'; -import { Epml } from "../../../epml"; -import './LevelFounder.js'; -import './NameMenu.js'; -import './ChatModals.js'; -import '@vaadin/icons'; -import '@vaadin/icon'; -import '@material/mwc-button'; -import '@material/mwc-dialog'; -import '@material/mwc-icon'; +import { LitElement, html, css } from 'lit' +import { render } from 'lit/html.js' +import { repeat } from 'lit/directives/repeat.js' +import { translate, get } from 'lit-translate' +import { Epml } from "../../../epml" +import { chatStyles } from './ChatScroller-css.js' +import './LevelFounder.js' +import './NameMenu.js' +import './ChatModals.js' +import '@vaadin/icons' +import '@vaadin/icon' +import '@material/mwc-button' +import '@material/mwc-dialog' +import '@material/mwc-icon' const parentEpml = new Epml({ type: 'WINDOW', source: window.parent }) class ChatScroller extends LitElement { @@ -26,187 +27,7 @@ class ChatScroller extends LitElement { } } - static get styles() { - return css` - html { - --scrollbarBG: #a1a1a1; - --thumbBG: #6a6c75; - } - - *::-webkit-scrollbar { - width: 11px; - } - - * { - scrollbar-width: thin; - scrollbar-color: var(--thumbBG) var(--scrollbarBG); - --mdc-theme-primary: rgb(3, 169, 244); - --mdc-theme-secondary: var(--mdc-theme-primary); - } - - *::-webkit-scrollbar-track { - background: var(--scrollbarBG); - } - - *::-webkit-scrollbar-thumb { - background-color: var(--thumbBG); - border-radius: 6px; - border: 3px solid var(--scrollbarBG); - } - - a { - color: var(--black); - text-decoration: none; - } - - ul { - list-style: none; - margin: 0; - padding: 20px; - } - - .last-message-ref { - position: fixed; - font-size: 20px; - 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); - } - - .chat-list { - overflow-y: auto; - overflow-x: hidden; - height: 92vh; - box-sizing: border-box; - } - - .message-data { - width: 92%; - margin-bottom: 15px; - margin-left: 50px; - } - - .message-data-name { - color: var(--black); - } - - .message-data-time { - color: #a8aab1; - font-size: 13px; - padding-left: 6px; - padding-bottom: 4px; - } - - .message-data-level { - color: #03a9f4; - font-size: 13px; - padding-left: 8px; - padding-bottom: 4px; - } - - .message { - color: black; - padding: 12px 10px; - line-height: 19px; - white-space: pre-line; - word-wrap: break-word; - -webkit-user-select: text; - -moz-user-select: text; - -ms-user-select: text; - user-select: text; - font-size: 16px; - border-radius: 7px; - margin-bottom: 20px; - width: 90%; - position: relative; - } - - .message:after { - bottom: 100%; - left: 93%; - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - white-space: pre-line; - word-wrap: break-word; - pointer-events: none; - border-bottom-color: #ddd; - border-width: 10px; - margin-left: -10px; - } - - .emoji { - width: 1.7em; - height: 1.5em; - margin-bottom: -2px; - vertical-align: bottom; - object-fit: contain; - } - - .my-message { - background: #d1d1d1; - border: 2px solid #eeeeee; - } - - .my-message:after { - border-bottom-color: #d1d1d1; - left: 7%; - } - - .other-message { - background: #f1f1f1; - border: 2px solid #dedede; - } - - .other-message:after { - border-bottom-color: #f1f1f1; - left: 7%; - } - - .align-left { - text-align: left; - } - - .align-right { - text-align: right; - } - - .float-left { - float: left; - } - - .float-right { - float: right; - } - - .clearfix:after { - visibility: hidden; - display: block; - font-size: 0; - content: " "; - clear: both; - height: 0; - } - - img { - border-radius: 25%; - } - ` - } + static styles = [chatStyles] constructor() { super() @@ -222,20 +43,19 @@ class ChatScroller extends LitElement { return html` ` @@ -255,9 +75,7 @@ class ChatScroller extends LitElement { } _getOldMessage(_scrollElement) { - this.getOldMessage(_scrollElement) - - + this.getOldMessage(_scrollElement) } _upObserverhandler(entries) { @@ -269,7 +87,6 @@ class ChatScroller extends LitElement { } _downObserverHandler(entries) { - if (!entries[0].isIntersecting) { this.shadowRoot.querySelector(".last-message-ref").style.opacity = '1' } else { @@ -293,19 +110,19 @@ class ChatScroller extends LitElement { root: this.viewElement, rootMargin: '0px', threshold: 1 - }; - // identify an element to observe - const elementToObserve = this.downObserverElement; + } + + // identify an element to observe + const elementToObserve = this.downObserverElement // passing it a callback function - const observer = new IntersectionObserver(this._downObserverHandler, options); + const observer = new IntersectionObserver(this._downObserverHandler, options) // call `observe()` on that MutationObserver instance, // passing it the element to observe, and the options object - observer.observe(elementToObserve); + observer.observe(elementToObserve) } - } window.customElements.define('chat-scroller', ChatScroller) @@ -318,8 +135,8 @@ class MessageTemplate extends LitElement { hideMessages: { type: Array }, openDialogPrivateMessage: {type: Boolean}, openDialogBlockUser: {type: Boolean}, - showBlockAddressIcon: { type: Boolean }, - }; + showBlockAddressIcon: { type: Boolean } + } } constructor() { @@ -331,189 +148,9 @@ class MessageTemplate extends LitElement { this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address } - static get styles() { - return css` - html { - --scrollbarBG: #a1a1a1; - --thumbBG: #6a6c75; - } - - *::-webkit-scrollbar { - width: 11px; - } - - * { - scrollbar-width: thin; - scrollbar-color: var(--thumbBG) var(--scrollbarBG); - --mdc-theme-primary: rgb(3, 169, 244); - --mdc-theme-secondary: var(--mdc-theme-primary); - } - - *::-webkit-scrollbar-track { - background: var(--scrollbarBG); - } - - *::-webkit-scrollbar-thumb { - background-color: var(--thumbBG); - border-radius: 6px; - border: 3px solid var(--scrollbarBG); - } - - a { - color: var(--black); - text-decoration: none; - } - - ul { - list-style: none; - margin: 0; - padding: 20px; - } - - .chat-list { - overflow-y: auto; - overflow-x: hidden; - height: 92vh; - box-sizing: border-box; - } - - .message-data { - width: 92%; - margin-bottom: 15px; - margin-left: 50px; - } - - .message-data-name { - color: var(--black); - } - - .message-data-time { - color: #a8aab1; - font-size: 13px; - padding-left: 6px; - padding-bottom: 4px; - } - - .message-data-level { - color: #03a9f4; - font-size: 13px; - padding-left: 8px; - padding-bottom: 4px; - } - - .message-container { - position: relative; - } - - .message { - color: black; - padding: 12px 10px; - line-height: 19px; - white-space: pre-line; - word-wrap: break-word; - -webkit-user-select: text; - -moz-user-select: text; - -ms-user-select: text; - user-select: text; - font-size: 16px; - border-radius: 7px; - margin-bottom: 20px; - width: 90%; - position: relative; - } - - .message:after { - bottom: 100%; - left: 93%; - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - white-space: pre-line; - word-wrap: break-word; - pointer-events: none; - border-bottom-color: #ddd; - border-width: 10px; - margin-left: -10px; - } - - .message-parent:hover .chat-hover { - display: block; - } - - .message-parent:hover .message{ - filter:brightness(0.90); - } - - .chat-hover { - display: none; - position: absolute; - top: -32px; - left: 86%; - } - - .emoji { - width: 1.7em; - height: 1.5em; - margin-bottom: -2px; - vertical-align: bottom; - object-fit: contain; - } - - .my-message { - background: #d1d1d1; - border: 2px solid #eeeeee; - } - - .my-message:after { - border-bottom-color: #d1d1d1; - left: 7%; - } - - .other-message { - background: #f1f1f1; - border: 2px solid #dedede; - } - - .other-message:after { - border-bottom-color: #f1f1f1; - left: 7%; - } - - .align-left { - text-align: left; - } - - .align-right { - text-align: right; - } - - .float-left { - float: left; - } - - .float-right { - float: right; - } - - .clearfix:after { - visibility: hidden; - display: block; - font-size: 0; - content: " "; - clear: both; - height: 0; - } - - img { - border-radius: 25%; - } - ` - } + static styles = [chatStyles] // Open & Close Private Message Chat Modal - showPrivateMessageModal() { this.openDialogPrivateMessage = true } @@ -523,7 +160,6 @@ class MessageTemplate extends LitElement { } // Open & Close Block User Chat Modal - showBlockUserModal() { this.openDialogBlockUser = true } @@ -566,7 +202,7 @@ class MessageTemplate extends LitElement { } return hideit ? html`
  • ` : html` -
  • +
  • ${nameMenu} ${levelFounder} @@ -576,29 +212,29 @@ class MessageTemplate extends LitElement {
    ${this.emojiPicker.parse(this.escapeHTML(this.messageObj.decodedMessage))}
    this.showPrivateMessageModal()} - .showBlockUserModal=${() => this.showBlockUserModal()} - .showBlockIconFunc=${(props) => this.showBlockIconFunc(props)} - .showBlockAddressIcon=${this.showBlockAddressIcon} - @blur=${() => this.showBlockIconFunc(false)} + tabindex="0" + class="chat-hover" + style=${this.showBlockAddressIcon && "display: block"} + toblockaddress="${this.messageObj.sender}" + .showPrivateMessageModal=${() => this.showPrivateMessageModal()} + .showBlockUserModal=${() => this.showBlockUserModal()} + .showBlockIconFunc=${(props) => this.showBlockIconFunc(props)} + .showBlockAddressIcon=${this.showBlockAddressIcon} + @blur=${() => this.showBlockIconFunc(false)} >
    • this.hidePrivateMessageModal()} - .hideBlockUserModal=${() => this.hideBlockUserModal()} - toblockaddress=${this.messageObj.sender} + .openDialogPrivateMessage=${this.openDialogPrivateMessage} + .openDialogBlockUser=${this.openDialogBlockUser} + nametodialog="${this.messageObj.senderName ? this.messageObj.senderName : this.messageObj.sender}" + .hidePrivateMessageModal=${() => this.hidePrivateMessageModal()} + .hideBlockUserModal=${() => this.hideBlockUserModal()} + toblockaddress=${this.messageObj.sender} > - `; + ` } } @@ -614,7 +250,7 @@ class ChatMenu extends LitElement { toblockaddress: { type: String, attribute: true }, showBlockIconFunc: {type: Function}, showBlockAddressIcon: {type: Boolean} - }; + } } constructor() { @@ -624,98 +260,9 @@ class ChatMenu extends LitElement { this.showBlockUserModal = () => {}; } - static get styles() { - return css` - .container { - display: flex; - flex-direction: row; - align-items: center; - gap: 5px; - background-color: white; - border: 1px solid #dad9d9; - border-radius: 5px; - height:100%; - width: 100px; - position: relative; - } - - .menu-icon { - width: 100%; - padding: 5px; - display: flex; - align-items: center; - font-size: 13px; - } - - .menu-icon:hover { - background-color: #dad9d9; - transition: all 0.1s ease-in-out; - cursor: pointer; - } - - .tooltip { - position: relative; - } - - .tooltip:before { - content: attr(data-text); - position: absolute; - top: -47px; - left: 50%; - transform: translateX(-50%); - width: 90px; - padding: 10px; - border-radius: 10px; - background:#fff; - color: #000; - text-align: center; - box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; - font-size: 12px; - z-index: 5; - display: none; - } - - .tooltip:hover:before { - display: block; - } - - .tooltip:after { - content: ""; - position: absolute; - margin-top: -7px; - top: -7px; - border: 10px solid #fff; - border-color: white transparent transparent transparent; - z-index: 5; - display: none; - } - - .tooltip:hover:before, .tooltip:hover:after { - display: block; - } - - .block-user-container { - display: block; - position: absolute; - left: -48px; - } - - .block-user { - justify-content: space-between; - border: 1px solid rgb(218, 217, 217); - border-radius: 5px; - background-color: white; - width: 100%; - height: 32px; - padding: 3px 8px; - box-shadow: rgba(77, 77, 82, 0.2) 0px 7px 29px 0px; - } - - ` - } + static styles = [chatStyles] // Copy address to clipboard - async copyToClipboard(text) { try { let copyString1 = get("walletpage.wchange4") @@ -729,33 +276,32 @@ class ChatMenu extends LitElement { } render() { - return html`
    -
    - +
    +
    - +
    - +
    - ${this.showBlockAddressIcon ? html` -
    -
    -

    ${translate("blockpage.bcchange1")}

    - -
    -
    - ` : html` -
    - `} + ${this.showBlockAddressIcon + ? html` +
    +
    +

    ${translate("blockpage.bcchange1")}

    + +
    +
    + ` : html` +
    + ` + }
    ` } } -window.customElements.define('chat-menu', ChatMenu); - +window.customElements.define('chat-menu', ChatMenu)