Qortal/qortal-ui
4
1
Fork 4
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-02-11 17:55:51 +00:00
Code Issues Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/JustinWesleyFerrari/qortal-ui into feature/refactor-chat

Browse Source
This commit is contained in:
Justin Ferrari 2022-09-15 13:50:47 -05:00
commit d37db8fd9c
19 changed files with 389 additions and 530 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
qortal-ui-core/language/de.json
View File

@ -496,7 +496,8 @@
"bcchange6":"Möchten Sie diesen Benutzer wirklich blockieren?",
"bcchange7":"MENÜ",
"bcchange8":"Adresse Kopieren",
"bcchange9":"Private Nachricht"
"bcchange9":"Private Nachricht",
"bcchange10":"Mehr"
},
"grouppage":{
"gchange1":"Qortal-Gruppen",

3
qortal-ui-core/language/es.json
View File

@ -496,7 +496,8 @@
"bcchange6":"Estás seguro de bloquear a este usuario?",
"bcchange7":"MENÚ",
"bcchange8":"Copiar Dirección",
"bcchange9":"Mensaje Privado"
"bcchange9":"Mensaje Privado",
"bcchange10":"Más"
},
"grouppage":{
"gchange1":"Grupos Qortal",

3
qortal-ui-core/language/fr.json
View File

@ -496,7 +496,8 @@
"bcchange6":"Êtes-vous sûr de bloquer cet utilisateur ?",
"bcchange7":"MENU",
"bcchange8":"Copier l'Adresse",
"bcchange9":"Message Privé"
"bcchange9":"Message Privé",
"bcchange10":"Suite"
},
"grouppage":{
"gchange1":"Groupes Qortal",

3
qortal-ui-core/language/hindi.json
View File

@ -497,7 +497,8 @@
"bcchange6":"क्या आप वाकई इस उपयोगकर्ता को ब्लॉक करना चाहते हैं?",
"bcchange7":"मेन्यू",
"bcchange8":"कॉपी पता",
"bcchange9":"निजी संदेश"
"bcchange9":"निजी संदेश",
"bcchange10":"अधिक"
},
"grouppage":{
"gchange1":"क्वॉर्टल समूह",

3
qortal-ui-core/language/hr.json
View File

@ -496,7 +496,8 @@
"bcchange6":"Jeste li sigurni da ćete blokirati ovog korisnika?",
"bcchange7":"MENI",
"bcchange8":"Kopiraj Adresu",
"bcchange9":"Privatna Poruka"
"bcchange9":"Privatna Poruka",
"bcchange10":"Više"
},
"grouppage":{
"gchange1":"Qortal Grupe",

3
qortal-ui-core/language/hu.json
View File

@ -496,7 +496,8 @@
"bcchange6":"Biztosan letiltod ezt a felhasználót?",
"bcchange7":"MENÜ",
"bcchange8":"Cím Másolása",
"bcchange9":"Privát Üzenet"
"bcchange9":"Privát Üzenet",
"bcchange10":"Több"
},
"grouppage":{
"gchange1":"Qortal Csoportok",

3
qortal-ui-core/language/it.json
View File

@ -496,7 +496,8 @@
"bcchange6":"Sei sicuro di bloccare questo utente?",
"bcchange7":"MENÙ",
"bcchange8":"Copia Indirizzo",
"bcchange9":"Messaggio Privato"
"bcchange9":"Messaggio Privato",
"bcchange10":"Di più"
},
"grouppage":{
"gchange1":"Gruppi Qortal",

3
qortal-ui-core/language/ko.json
View File

@ -496,7 +496,8 @@
"bcchange6":"이 사용자를 차단하시겠습니까?",
"bcchange7":"메뉴",
"bcchange8":"주소 복사",
"bcchange9":"개인 메시지"
"bcchange9":"개인 메시지",
"bcchange10":"더"
},
"grouppage":{
"gchange1":"Qortal 그룹",

8
qortal-ui-core/language/no.json
View File

@ -491,7 +491,13 @@
"bcchange1":"blokker",
"bcchange2":"Blokkering av denne brukeren vellykket!",
"bcchange3":"Det oppstod en feil ved forsøk på å blokkere denne brukeren. Prøv på nytt!",
"bcchange4":"Ingen registrert navn"
"bcchange4":"Ingen registrert navn",
"bcchange5":"Blokker brukerforespørsel",
"bcchange6":"Er du sikker på å blokkere denne brukeren ?",
"bcchange7":"MENY",
"bcchange8":"Kopier adresse",
"bcchange9":"Privat melding",
"bcchange10":"Mer"
},
"grouppage":{
"gchange1":"Qortal-grupper",

3
qortal-ui-core/language/pl.json
View File

@ -496,7 +496,8 @@
"bcchange6":"Czy na pewno chcesz zablokować tego użytkownika?",
"bcchange7":"MENU",
"bcchange8":"Kopiuj Adres",
"bcchange9":"Prywatna Wiadomość"
"bcchange9":"Prywatna Wiadomość",
"bcchange10":"Więcej"
},
"grouppage":{
"gchange1":"Grupy Qortal",

3
qortal-ui-core/language/pt.json
View File

@ -496,7 +496,8 @@
"bcchange6":"Tem certeza de bloquear este usuário?",
"bcchange7":"MENU",
"bcchange8":"Copiar Endereço",
"bcchange9":"Mensagem Privada"
"bcchange9":"Mensagem Privada",
"bcchange10":"Mais"
},
"grouppage":{
"gchange1":"Grupos Qortal",

3
qortal-ui-core/language/ro.json
View File

@ -496,7 +496,8 @@
"bcchange6":"Sunteti sigur ca doriti sa blocati acest utilizator ?",
"bcchange7":"MENIU",
"bcchange8":"Copiati adresa",
"bcchange9":"Mesaj privat"
"bcchange9":"Mesaj privat",
"bcchange10":"Mai mult"
},
"grouppage":{
"gchange1":"Grupuri Qortal Groups",

3
qortal-ui-core/language/rs.json
View File

@ -496,7 +496,8 @@
"bcchange6":"Da li ste sigurni da blokirate ovog korisnika?",
"bcchange7":"MENI",
"bcchange8":"Kopiraj Adresu",
"bcchange9":"Privatna Poruka"
"bcchange9":"Privatna Poruka",
"bcchange10":"Više"
},
"grouppage":{
"gchange1":"Qortal Grupe",

8
qortal-ui-core/language/ru.json
View File

@ -491,7 +491,13 @@
"bcchange1":"заблокировать",
"bcchange2":"Успешно заблокирован этот пользователь!",
"bcchange3":"Произошла ошибка при попытке заблокировать этого пользователя. Повторите попытку!",
"bcchange4":"Нет зарегистрированного имени"
"bcchange4":"Нет зарегистрированного имени",
"bcchange5":"Заблокировать запрос пользователя",
"bcchange6":"Вы уверены, что заблокировали этого пользователя?",
"bcchange7":"МЕНЮ",
"bcchange8":"Копировать адрес",
"bcchange9":"Приватное сообщение",
"bcchange10":"Более"
},
"grouppage":{
"gchange1":"Qortal группы",

3
qortal-ui-core/language/us.json
View File

@ -496,7 +496,8 @@
"bcchange6":"Are you sure to block this user ?",
"bcchange7":"MENU",
"bcchange8":"Copy Address",
"bcchange9":"Private Message"
"bcchange9":"Private Message",
"bcchange10":"More"
},
"grouppage":{
"gchange1":"Qortal Groups",

3
qortal-ui-core/language/zhc.json
View File

@ -496,7 +496,8 @@
"bcchange6":"你确定要封锁这个用户吗？",
"bcchange7":"菜单",
"bcchange8":"复制地址",
"bcchange9":"私人信息"
"bcchange9":"私人信息",
"bcchange10":"更多的"
},
"grouppage":{
"gchange1":"Qortal 群组",

3
qortal-ui-core/language/zht.json
View File

@ -496,7 +496,8 @@
"bcchange6":"你確定要封鎖這個用戶嗎？",
"bcchange7":"菜單",
"bcchange8":"複製地址",
"bcchange9":"私人信息"
"bcchange9":"私人信息",
"bcchange10":"更多的"
},
"grouppage":{
"gchange1":"Qortal 群組",

285
qortal-ui-plugins/plugins/core/components/ChatScroller-css.js Normal file
View 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;
}
`

573
qortal-ui-plugins/plugins/core/components/ChatScroller.js
View File

@ -3,6 +3,7 @@ import { render } from 'lit/html.js';
import { repeat } from 'lit/directives/repeat.js';
import { translate, get } from 'lit-translate';
import {unsafeHTML} from 'lit/directives/unsafe-html.js';
import { chatStyles } from './ChatScroller-css.js'
import { Epml } from "../../../epml";
import './LevelFounder.js';
import './NameMenu.js';
@ -27,187 +28,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()
@ -223,19 +44,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=${() => {
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 +76,7 @@ class ChatScroller extends LitElement {
}
_getOldMessage(_scrollElement) {
this.getOldMessage(_scrollElement)
this.getOldMessage(_scrollElement)
}
_upObserverhandler(entries) {
@ -268,7 +87,6 @@ class ChatScroller extends LitElement {
}
_downObserverHandler(entries) {
if (!entries[0].isIntersecting) {
this.shadowRoot.querySelector(".last-message-ref").style.opacity = '1'
} else {
@ -292,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)
@ -319,8 +137,8 @@ class MessageTemplate extends LitElement {
hideMessages: { type: Array },
openDialogPrivateMessage: {type: Boolean},
openDialogBlockUser: {type: Boolean},
showBlockAddressIcon: { type: Boolean },
};
showBlockAddressIcon: { type: Boolean }
}
}
constructor() {
@ -332,189 +150,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
}
@ -524,7 +162,6 @@ class MessageTemplate extends LitElement {
}
// Open & Close Block User Chat Modal
showBlockUserModal() {
this.openDialogBlockUser = true
}
@ -566,7 +203,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 +213,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"}">${unsafeHTML(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 +251,7 @@ class ChatMenu extends LitElement {
toblockaddress: { type: String, attribute: true },
showBlockIconFunc: {type: Function},
showBlockAddressIcon: {type: Boolean}
};
}
}
constructor() {
@ -624,98 +261,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 +277,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="${translate("blockpage.bcchange9")}" @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>
<div class="menu-icon tooltip" data-text="${translate("blockpage.bcchange8")}" @click="${() => this.copyToClipboard(this.toblockaddress)}">
<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>
<div class="menu-icon tooltip" data-text="${translate("blockpage.bcchange10")}" @click="${() => this.showBlockIconFunc(true)}">
<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)