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 1/2] 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`