mirror of
https://github.com/Qortal/qortal-ui.git
synced 2025-02-11 17:55:51 +00:00
one css and buutons position
This commit is contained in:
AlphaX-Projects
parent
a016a3d56c
commit
ec3510c456
285
qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
Normal file
285
qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
Normal file
@ -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;
|
||||
}
|
||||
`
|
||||
@ -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`
|
||||
<ul id="viewElement" class="chat-list clearfix">
|
||||
<div id="upObserver"></div>
|
||||
|
||||
${repeat(
|
||||
this.messages,
|
||||
(message) => message.reference,
|
||||
(message) => html`<message-template .emojiPicker=${this.emojiPicker} .escapeHTML=${this.escapeHTML} .messageObj=${message} .hideMessages=${this.hideMessages}></message-template>`
|
||||
)}
|
||||
this.messages,
|
||||
(message) => message.reference,
|
||||
(message) => html`<message-template .emojiPicker=${this.emojiPicker} .escapeHTML=${this.escapeHTML} .messageObj=${message} .hideMessages=${this.hideMessages}></message-template>`
|
||||
)}
|
||||
<div id='downObserver'></div>
|
||||
<div class='last-message-ref'>
|
||||
<vaadin-icon icon='vaadin:arrow-circle-down' slot='icon' @click=${() => {
|
||||
console.log("yo500")
|
||||
this.shadowRoot.getElementById('downObserver').scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
})
|
||||
}}></vaadin-icon>
|
||||
<vaadin-icon icon='vaadin:arrow-circle-down' slot='icon' @click=${() => {
|
||||
this.shadowRoot.getElementById('downObserver').scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
})
|
||||
}}>
|
||||
</vaadin-icon>
|
||||
</div>
|
||||
</ul>
|
||||
`
|
||||
@ -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`<li class="clearfix"></li>` : html`
|
||||
<li class="clearfix message-parent">
|
||||
<li class="clearfix message-parent">
|
||||
<div class="message-data ${this.messageObj.sender === this.myAddress ? "" : ""}">
|
||||
<span class="message-data-name">${nameMenu}</span>
|
||||
<span class="message-data-level">${levelFounder}</span>
|
||||
@ -576,29 +212,29 @@ class MessageTemplate extends LitElement {
|
||||
<div class="message-container">
|
||||
<div id="messageContent" class="message ${this.messageObj.sender === this.myAddress ? "my-message float-left" : "other-message float-left"}">${this.emojiPicker.parse(this.escapeHTML(this.messageObj.decodedMessage))}</div>
|
||||
<chat-menu
|
||||
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)}
|
||||
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)}
|
||||
>
|
||||
</chat-menu>
|
||||
</div>
|
||||
</li>
|
||||
<chat-modals
|
||||
.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}
|
||||
.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}
|
||||
>
|
||||
</chat-modals>
|
||||
`;
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
@ -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`
|
||||
<div class="container" style=${this.showBlockAddressIcon && "width: 70px" }>
|
||||
<div class="menu-icon tooltip" data-text="Private Message"
|
||||
@click="${() => this.showPrivateMessageModal()}">
|
||||
<vaadin-icon icon="vaadin:paperplane" slot="icon"></vaadin-icon>
|
||||
<div class="menu-icon tooltip" data-text="Private Message" @click="${() => this.showPrivateMessageModal()}">
|
||||
<vaadin-icon icon="vaadin:paperplane" slot="icon"></vaadin-icon>
|
||||
</div>
|
||||
<div class="menu-icon tooltip" data-text="Copy Address" @click="${() => this.copyToClipboard(this.toblockaddress)}">
|
||||
<vaadin-icon icon="vaadin:copy" slot="icon"></vaadin-icon>
|
||||
<vaadin-icon icon="vaadin:copy" slot="icon"></vaadin-icon>
|
||||
</div>
|
||||
<div class="menu-icon tooltip" data-text="More" @click="${() => this.showBlockIconFunc(true)}">
|
||||
<vaadin-icon icon="vaadin:ellipsis-dots-h" slot="icon"></vaadin-icon>
|
||||
<vaadin-icon icon="vaadin:ellipsis-dots-h" slot="icon"></vaadin-icon>
|
||||
</div>
|
||||
${this.showBlockAddressIcon ? html`
|
||||
<div class="block-user-container">
|
||||
<div class="menu-icon block-user" @click="${() => this.showBlockUserModal()}">
|
||||
<p>${translate("blockpage.bcchange1")}</p>
|
||||
<vaadin-icon icon="vaadin:close-circle" slot="icon"></vaadin-icon>
|
||||
</div>
|
||||
</div>
|
||||
` : html`
|
||||
<div></div>
|
||||
`}
|
||||
${this.showBlockAddressIcon
|
||||
? html`
|
||||
<div class="block-user-container">
|
||||
<div class="menu-icon block-user" @click="${() => this.showBlockUserModal()}">
|
||||
<p>${translate("blockpage.bcchange1")}</p>
|
||||
<vaadin-icon icon="vaadin:close-circle" slot="icon"></vaadin-icon>
|
||||
</div>
|
||||
</div>
|
||||
` : html`
|
||||
<div></div>
|
||||
`
|
||||
}
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define('chat-menu', ChatMenu);
|
||||
|
||||
window.customElements.define('chat-menu', ChatMenu)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user