mirror of
https://github.com/Qortal/qortal-ui.git
synced 2025-03-27 07:45:54 +00:00
Merge branch 'master' of https://github.com/JustinWesleyFerrari/qortal-ui into feature/refactor-chat
This commit is contained in:
Justin Ferrari
commit
d37db8fd9c
@ -496,7 +496,8 @@
|
|||||||
"bcchange6":"Möchten Sie diesen Benutzer wirklich blockieren?",
|
"bcchange6":"Möchten Sie diesen Benutzer wirklich blockieren?",
|
||||||
"bcchange7":"MENÜ",
|
"bcchange7":"MENÜ",
|
||||||
"bcchange8":"Adresse Kopieren",
|
"bcchange8":"Adresse Kopieren",
|
||||||
"bcchange9":"Private Nachricht"
|
"bcchange9":"Private Nachricht",
|
||||||
|
"bcchange10":"Mehr"
|
||||||
},
|
},
|
||||||
"grouppage":{
|
"grouppage":{
|
||||||
"gchange1":"Qortal-Gruppen",
|
"gchange1":"Qortal-Gruppen",
|
||||||
|
|||||||
@ -496,7 +496,8 @@
|
|||||||
"bcchange6":"Estás seguro de bloquear a este usuario?",
|
"bcchange6":"Estás seguro de bloquear a este usuario?",
|
||||||
"bcchange7":"MENÚ",
|
"bcchange7":"MENÚ",
|
||||||
"bcchange8":"Copiar Dirección",
|
"bcchange8":"Copiar Dirección",
|
||||||
"bcchange9":"Mensaje Privado"
|
"bcchange9":"Mensaje Privado",
|
||||||
|
"bcchange10":"Más"
|
||||||
},
|
},
|
||||||
"grouppage":{
|
"grouppage":{
|
||||||
"gchange1":"Grupos Qortal",
|
"gchange1":"Grupos Qortal",
|
||||||
|
|||||||
@ -496,7 +496,8 @@
|
|||||||
"bcchange6":"Êtes-vous sûr de bloquer cet utilisateur ?",
|
"bcchange6":"Êtes-vous sûr de bloquer cet utilisateur ?",
|
||||||
"bcchange7":"MENU",
|
"bcchange7":"MENU",
|
||||||
"bcchange8":"Copier l'Adresse",
|
"bcchange8":"Copier l'Adresse",
|
||||||
"bcchange9":"Message Privé"
|
"bcchange9":"Message Privé",
|
||||||
|
"bcchange10":"Suite"
|
||||||
},
|
},
|
||||||
"grouppage":{
|
"grouppage":{
|
||||||
"gchange1":"Groupes Qortal",
|
"gchange1":"Groupes Qortal",
|
||||||
|
|||||||
@ -497,7 +497,8 @@
|
|||||||
"bcchange6":"क्या आप वाकई इस उपयोगकर्ता को ब्लॉक करना चाहते हैं?",
|
"bcchange6":"क्या आप वाकई इस उपयोगकर्ता को ब्लॉक करना चाहते हैं?",
|
||||||
"bcchange7":"मेन्यू",
|
"bcchange7":"मेन्यू",
|
||||||
"bcchange8":"कॉपी पता",
|
"bcchange8":"कॉपी पता",
|
||||||
"bcchange9":"निजी संदेश"
|
"bcchange9":"निजी संदेश",
|
||||||
|
"bcchange10":"अधिक"
|
||||||
},
|
},
|
||||||
"grouppage":{
|
"grouppage":{
|
||||||
"gchange1":"क्वॉर्टल समूह",
|
"gchange1":"क्वॉर्टल समूह",
|
||||||
|
|||||||
@ -496,7 +496,8 @@
|
|||||||
"bcchange6":"Jeste li sigurni da ćete blokirati ovog korisnika?",
|
"bcchange6":"Jeste li sigurni da ćete blokirati ovog korisnika?",
|
||||||
"bcchange7":"MENI",
|
"bcchange7":"MENI",
|
||||||
"bcchange8":"Kopiraj Adresu",
|
"bcchange8":"Kopiraj Adresu",
|
||||||
"bcchange9":"Privatna Poruka"
|
"bcchange9":"Privatna Poruka",
|
||||||
|
"bcchange10":"Više"
|
||||||
},
|
},
|
||||||
"grouppage":{
|
"grouppage":{
|
||||||
"gchange1":"Qortal Grupe",
|
"gchange1":"Qortal Grupe",
|
||||||
|
|||||||
@ -496,7 +496,8 @@
|
|||||||
"bcchange6":"Biztosan letiltod ezt a felhasználót?",
|
"bcchange6":"Biztosan letiltod ezt a felhasználót?",
|
||||||
"bcchange7":"MENÜ",
|
"bcchange7":"MENÜ",
|
||||||
"bcchange8":"Cím Másolása",
|
"bcchange8":"Cím Másolása",
|
||||||
"bcchange9":"Privát Üzenet"
|
"bcchange9":"Privát Üzenet",
|
||||||
|
"bcchange10":"Több"
|
||||||
},
|
},
|
||||||
"grouppage":{
|
"grouppage":{
|
||||||
"gchange1":"Qortal Csoportok",
|
"gchange1":"Qortal Csoportok",
|
||||||
|
|||||||
@ -496,7 +496,8 @@
|
|||||||
"bcchange6":"Sei sicuro di bloccare questo utente?",
|
"bcchange6":"Sei sicuro di bloccare questo utente?",
|
||||||
"bcchange7":"MENÙ",
|
"bcchange7":"MENÙ",
|
||||||
"bcchange8":"Copia Indirizzo",
|
"bcchange8":"Copia Indirizzo",
|
||||||
"bcchange9":"Messaggio Privato"
|
"bcchange9":"Messaggio Privato",
|
||||||
|
"bcchange10":"Di più"
|
||||||
},
|
},
|
||||||
"grouppage":{
|
"grouppage":{
|
||||||
"gchange1":"Gruppi Qortal",
|
"gchange1":"Gruppi Qortal",
|
||||||
|
|||||||
@ -496,7 +496,8 @@
|
|||||||
"bcchange6":"이 사용자를 차단하시겠습니까?",
|
"bcchange6":"이 사용자를 차단하시겠습니까?",
|
||||||
"bcchange7":"메뉴",
|
"bcchange7":"메뉴",
|
||||||
"bcchange8":"주소 복사",
|
"bcchange8":"주소 복사",
|
||||||
"bcchange9":"개인 메시지"
|
"bcchange9":"개인 메시지",
|
||||||
|
"bcchange10":"더"
|
||||||
},
|
},
|
||||||
"grouppage":{
|
"grouppage":{
|
||||||
"gchange1":"Qortal 그룹",
|
"gchange1":"Qortal 그룹",
|
||||||
|
|||||||
@ -491,7 +491,13 @@
|
|||||||
"bcchange1":"blokker",
|
"bcchange1":"blokker",
|
||||||
"bcchange2":"Blokkering av denne brukeren vellykket!",
|
"bcchange2":"Blokkering av denne brukeren vellykket!",
|
||||||
"bcchange3":"Det oppstod en feil ved forsøk på å blokkere denne brukeren. Prøv på nytt!",
|
"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":{
|
"grouppage":{
|
||||||
"gchange1":"Qortal-grupper",
|
"gchange1":"Qortal-grupper",
|
||||||
|
|||||||
@ -496,7 +496,8 @@
|
|||||||
"bcchange6":"Czy na pewno chcesz zablokować tego użytkownika?",
|
"bcchange6":"Czy na pewno chcesz zablokować tego użytkownika?",
|
||||||
"bcchange7":"MENU",
|
"bcchange7":"MENU",
|
||||||
"bcchange8":"Kopiuj Adres",
|
"bcchange8":"Kopiuj Adres",
|
||||||
"bcchange9":"Prywatna Wiadomość"
|
"bcchange9":"Prywatna Wiadomość",
|
||||||
|
"bcchange10":"Więcej"
|
||||||
},
|
},
|
||||||
"grouppage":{
|
"grouppage":{
|
||||||
"gchange1":"Grupy Qortal",
|
"gchange1":"Grupy Qortal",
|
||||||
|
|||||||
@ -496,7 +496,8 @@
|
|||||||
"bcchange6":"Tem certeza de bloquear este usuário?",
|
"bcchange6":"Tem certeza de bloquear este usuário?",
|
||||||
"bcchange7":"MENU",
|
"bcchange7":"MENU",
|
||||||
"bcchange8":"Copiar Endereço",
|
"bcchange8":"Copiar Endereço",
|
||||||
"bcchange9":"Mensagem Privada"
|
"bcchange9":"Mensagem Privada",
|
||||||
|
"bcchange10":"Mais"
|
||||||
},
|
},
|
||||||
"grouppage":{
|
"grouppage":{
|
||||||
"gchange1":"Grupos Qortal",
|
"gchange1":"Grupos Qortal",
|
||||||
|
|||||||
@ -496,7 +496,8 @@
|
|||||||
"bcchange6":"Sunteti sigur ca doriti sa blocati acest utilizator ?",
|
"bcchange6":"Sunteti sigur ca doriti sa blocati acest utilizator ?",
|
||||||
"bcchange7":"MENIU",
|
"bcchange7":"MENIU",
|
||||||
"bcchange8":"Copiati adresa",
|
"bcchange8":"Copiati adresa",
|
||||||
"bcchange9":"Mesaj privat"
|
"bcchange9":"Mesaj privat",
|
||||||
|
"bcchange10":"Mai mult"
|
||||||
},
|
},
|
||||||
"grouppage":{
|
"grouppage":{
|
||||||
"gchange1":"Grupuri Qortal Groups",
|
"gchange1":"Grupuri Qortal Groups",
|
||||||
|
|||||||
@ -496,7 +496,8 @@
|
|||||||
"bcchange6":"Da li ste sigurni da blokirate ovog korisnika?",
|
"bcchange6":"Da li ste sigurni da blokirate ovog korisnika?",
|
||||||
"bcchange7":"MENI",
|
"bcchange7":"MENI",
|
||||||
"bcchange8":"Kopiraj Adresu",
|
"bcchange8":"Kopiraj Adresu",
|
||||||
"bcchange9":"Privatna Poruka"
|
"bcchange9":"Privatna Poruka",
|
||||||
|
"bcchange10":"Više"
|
||||||
},
|
},
|
||||||
"grouppage":{
|
"grouppage":{
|
||||||
"gchange1":"Qortal Grupe",
|
"gchange1":"Qortal Grupe",
|
||||||
|
|||||||
@ -491,7 +491,13 @@
|
|||||||
"bcchange1":"заблокировать",
|
"bcchange1":"заблокировать",
|
||||||
"bcchange2":"Успешно заблокирован этот пользователь!",
|
"bcchange2":"Успешно заблокирован этот пользователь!",
|
||||||
"bcchange3":"Произошла ошибка при попытке заблокировать этого пользователя. Повторите попытку!",
|
"bcchange3":"Произошла ошибка при попытке заблокировать этого пользователя. Повторите попытку!",
|
||||||
"bcchange4":"Нет зарегистрированного имени"
|
"bcchange4":"Нет зарегистрированного имени",
|
||||||
|
"bcchange5":"Заблокировать запрос пользователя",
|
||||||
|
"bcchange6":"Вы уверены, что заблокировали этого пользователя?",
|
||||||
|
"bcchange7":"МЕНЮ",
|
||||||
|
"bcchange8":"Копировать адрес",
|
||||||
|
"bcchange9":"Приватное сообщение",
|
||||||
|
"bcchange10":"Более"
|
||||||
},
|
},
|
||||||
"grouppage":{
|
"grouppage":{
|
||||||
"gchange1":"Qortal группы",
|
"gchange1":"Qortal группы",
|
||||||
|
|||||||
@ -496,7 +496,8 @@
|
|||||||
"bcchange6":"Are you sure to block this user ?",
|
"bcchange6":"Are you sure to block this user ?",
|
||||||
"bcchange7":"MENU",
|
"bcchange7":"MENU",
|
||||||
"bcchange8":"Copy Address",
|
"bcchange8":"Copy Address",
|
||||||
"bcchange9":"Private Message"
|
"bcchange9":"Private Message",
|
||||||
|
"bcchange10":"More"
|
||||||
},
|
},
|
||||||
"grouppage":{
|
"grouppage":{
|
||||||
"gchange1":"Qortal Groups",
|
"gchange1":"Qortal Groups",
|
||||||
|
|||||||
@ -496,7 +496,8 @@
|
|||||||
"bcchange6":"你确定要封锁这个用户吗？",
|
"bcchange6":"你确定要封锁这个用户吗？",
|
||||||
"bcchange7":"菜单",
|
"bcchange7":"菜单",
|
||||||
"bcchange8":"复制地址",
|
"bcchange8":"复制地址",
|
||||||
"bcchange9":"私人信息"
|
"bcchange9":"私人信息",
|
||||||
|
"bcchange10":"更多的"
|
||||||
},
|
},
|
||||||
"grouppage":{
|
"grouppage":{
|
||||||
"gchange1":"Qortal 群组",
|
"gchange1":"Qortal 群组",
|
||||||
|
|||||||
@ -496,7 +496,8 @@
|
|||||||
"bcchange6":"你確定要封鎖這個用戶嗎？",
|
"bcchange6":"你確定要封鎖這個用戶嗎？",
|
||||||
"bcchange7":"菜單",
|
"bcchange7":"菜單",
|
||||||
"bcchange8":"複製地址",
|
"bcchange8":"複製地址",
|
||||||
"bcchange9":"私人信息"
|
"bcchange9":"私人信息",
|
||||||
|
"bcchange10":"更多的"
|
||||||
},
|
},
|
||||||
"grouppage":{
|
"grouppage":{
|
||||||
"gchange1":"Qortal 群組",
|
"gchange1":"Qortal 群組",
|
||||||
|
|||||||
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;
|
||||||
|
}
|
||||||
|
`
|
||||||
@ -3,6 +3,7 @@ import { render } from 'lit/html.js';
|
|||||||
import { repeat } from 'lit/directives/repeat.js';
|
import { repeat } from 'lit/directives/repeat.js';
|
||||||
import { translate, get } from 'lit-translate';
|
import { translate, get } from 'lit-translate';
|
||||||
import {unsafeHTML} from 'lit/directives/unsafe-html.js';
|
import {unsafeHTML} from 'lit/directives/unsafe-html.js';
|
||||||
|
import { chatStyles } from './ChatScroller-css.js'
|
||||||
import { Epml } from "../../../epml";
|
import { Epml } from "../../../epml";
|
||||||
import './LevelFounder.js';
|
import './LevelFounder.js';
|
||||||
import './NameMenu.js';
|
import './NameMenu.js';
|
||||||
@ -27,187 +28,7 @@ class ChatScroller extends LitElement {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
static get styles() {
|
static styles = [chatStyles]
|
||||||
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%;
|
|
||||||
}
|
|
||||||
`
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
super()
|
super()
|
||||||
@ -223,19 +44,19 @@ class ChatScroller extends LitElement {
|
|||||||
return html`
|
return html`
|
||||||
<ul id="viewElement" class="chat-list clearfix">
|
<ul id="viewElement" class="chat-list clearfix">
|
||||||
<div id="upObserver"></div>
|
<div id="upObserver"></div>
|
||||||
|
|
||||||
${repeat(
|
${repeat(
|
||||||
this.messages,
|
this.messages,
|
||||||
(message) => message.reference,
|
(message) => message.reference,
|
||||||
(message) => html`<message-template .emojiPicker=${this.emojiPicker} .escapeHTML=${this.escapeHTML} .messageObj=${message} .hideMessages=${this.hideMessages}></message-template>`
|
(message) => html`<message-template .emojiPicker=${this.emojiPicker} .escapeHTML=${this.escapeHTML} .messageObj=${message} .hideMessages=${this.hideMessages}></message-template>`
|
||||||
)}
|
)}
|
||||||
<div id='downObserver'></div>
|
<div id='downObserver'></div>
|
||||||
<div class='last-message-ref'>
|
<div class='last-message-ref'>
|
||||||
<vaadin-icon icon='vaadin:arrow-circle-down' slot='icon' @click=${() => {
|
<vaadin-icon icon='vaadin:arrow-circle-down' slot='icon' @click=${() => {
|
||||||
this.shadowRoot.getElementById('downObserver').scrollIntoView({
|
this.shadowRoot.getElementById('downObserver').scrollIntoView({
|
||||||
behavior: 'smooth',
|
behavior: 'smooth',
|
||||||
})
|
})
|
||||||
}}></vaadin-icon>
|
}}>
|
||||||
|
</vaadin-icon>
|
||||||
</div>
|
</div>
|
||||||
</ul>
|
</ul>
|
||||||
`
|
`
|
||||||
@ -255,9 +76,7 @@ class ChatScroller extends LitElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
_getOldMessage(_scrollElement) {
|
_getOldMessage(_scrollElement) {
|
||||||
this.getOldMessage(_scrollElement)
|
this.getOldMessage(_scrollElement)
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
_upObserverhandler(entries) {
|
_upObserverhandler(entries) {
|
||||||
@ -268,7 +87,6 @@ class ChatScroller extends LitElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
_downObserverHandler(entries) {
|
_downObserverHandler(entries) {
|
||||||
|
|
||||||
if (!entries[0].isIntersecting) {
|
if (!entries[0].isIntersecting) {
|
||||||
this.shadowRoot.querySelector(".last-message-ref").style.opacity = '1'
|
this.shadowRoot.querySelector(".last-message-ref").style.opacity = '1'
|
||||||
} else {
|
} else {
|
||||||
@ -292,19 +110,19 @@ class ChatScroller extends LitElement {
|
|||||||
root: this.viewElement,
|
root: this.viewElement,
|
||||||
rootMargin: '0px',
|
rootMargin: '0px',
|
||||||
threshold: 1
|
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
|
// 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,
|
// call `observe()` on that MutationObserver instance,
|
||||||
// passing it the element to observe, and the options object
|
// passing it the element to observe, and the options object
|
||||||
observer.observe(elementToObserve);
|
observer.observe(elementToObserve)
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
window.customElements.define('chat-scroller', ChatScroller)
|
window.customElements.define('chat-scroller', ChatScroller)
|
||||||
@ -319,8 +137,8 @@ class MessageTemplate extends LitElement {
|
|||||||
hideMessages: { type: Array },
|
hideMessages: { type: Array },
|
||||||
openDialogPrivateMessage: {type: Boolean},
|
openDialogPrivateMessage: {type: Boolean},
|
||||||
openDialogBlockUser: {type: Boolean},
|
openDialogBlockUser: {type: Boolean},
|
||||||
showBlockAddressIcon: { type: Boolean },
|
showBlockAddressIcon: { type: Boolean }
|
||||||
};
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
@ -332,189 +150,9 @@ class MessageTemplate extends LitElement {
|
|||||||
this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address
|
this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address
|
||||||
}
|
}
|
||||||
|
|
||||||
static get styles() {
|
static styles = [chatStyles]
|
||||||
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%;
|
|
||||||
}
|
|
||||||
`
|
|
||||||
}
|
|
||||||
|
|
||||||
// Open & Close Private Message Chat Modal
|
// Open & Close Private Message Chat Modal
|
||||||
|
|
||||||
showPrivateMessageModal() {
|
showPrivateMessageModal() {
|
||||||
this.openDialogPrivateMessage = true
|
this.openDialogPrivateMessage = true
|
||||||
}
|
}
|
||||||
@ -524,7 +162,6 @@ class MessageTemplate extends LitElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Open & Close Block User Chat Modal
|
// Open & Close Block User Chat Modal
|
||||||
|
|
||||||
showBlockUserModal() {
|
showBlockUserModal() {
|
||||||
this.openDialogBlockUser = true
|
this.openDialogBlockUser = true
|
||||||
}
|
}
|
||||||
@ -566,7 +203,7 @@ class MessageTemplate extends LitElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return hideit ? html`<li class="clearfix"></li>` : html`
|
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 ? "" : ""}">
|
<div class="message-data ${this.messageObj.sender === this.myAddress ? "" : ""}">
|
||||||
<span class="message-data-name">${nameMenu}</span>
|
<span class="message-data-name">${nameMenu}</span>
|
||||||
<span class="message-data-level">${levelFounder}</span>
|
<span class="message-data-level">${levelFounder}</span>
|
||||||
@ -576,29 +213,29 @@ class MessageTemplate extends LitElement {
|
|||||||
<div class="message-container">
|
<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>
|
<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
|
<chat-menu
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
class="chat-hover"
|
class="chat-hover"
|
||||||
style=${this.showBlockAddressIcon && "display: block"}
|
style=${this.showBlockAddressIcon && "display: block"}
|
||||||
toblockaddress=${this.messageObj.sender}
|
toblockaddress="${this.messageObj.sender}"
|
||||||
.showPrivateMessageModal=${() => this.showPrivateMessageModal()}
|
.showPrivateMessageModal=${() => this.showPrivateMessageModal()}
|
||||||
.showBlockUserModal=${() => this.showBlockUserModal()}
|
.showBlockUserModal=${() => this.showBlockUserModal()}
|
||||||
.showBlockIconFunc=${(props) => this.showBlockIconFunc(props)}
|
.showBlockIconFunc=${(props) => this.showBlockIconFunc(props)}
|
||||||
.showBlockAddressIcon=${this.showBlockAddressIcon}
|
.showBlockAddressIcon=${this.showBlockAddressIcon}
|
||||||
@blur=${() => this.showBlockIconFunc(false)}
|
@blur=${() => this.showBlockIconFunc(false)}
|
||||||
>
|
>
|
||||||
</chat-menu>
|
</chat-menu>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<chat-modals
|
<chat-modals
|
||||||
.openDialogPrivateMessage=${this.openDialogPrivateMessage}
|
.openDialogPrivateMessage=${this.openDialogPrivateMessage}
|
||||||
.openDialogBlockUser=${this.openDialogBlockUser}
|
.openDialogBlockUser=${this.openDialogBlockUser}
|
||||||
nametodialog="${this.messageObj.senderName ? this.messageObj.senderName : this.messageObj.sender}"
|
nametodialog="${this.messageObj.senderName ? this.messageObj.senderName : this.messageObj.sender}"
|
||||||
.hidePrivateMessageModal=${() => this.hidePrivateMessageModal()}
|
.hidePrivateMessageModal=${() => this.hidePrivateMessageModal()}
|
||||||
.hideBlockUserModal=${() => this.hideBlockUserModal()}
|
.hideBlockUserModal=${() => this.hideBlockUserModal()}
|
||||||
toblockaddress=${this.messageObj.sender}
|
toblockaddress=${this.messageObj.sender}
|
||||||
>
|
>
|
||||||
</chat-modals>
|
</chat-modals>
|
||||||
`;
|
`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -614,7 +251,7 @@ class ChatMenu extends LitElement {
|
|||||||
toblockaddress: { type: String, attribute: true },
|
toblockaddress: { type: String, attribute: true },
|
||||||
showBlockIconFunc: {type: Function},
|
showBlockIconFunc: {type: Function},
|
||||||
showBlockAddressIcon: {type: Boolean}
|
showBlockAddressIcon: {type: Boolean}
|
||||||
};
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
@ -624,98 +261,9 @@ class ChatMenu extends LitElement {
|
|||||||
this.showBlockUserModal = () => {};
|
this.showBlockUserModal = () => {};
|
||||||
}
|
}
|
||||||
|
|
||||||
static get styles() {
|
static styles = [chatStyles]
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
`
|
|
||||||
}
|
|
||||||
|
|
||||||
// Copy address to clipboard
|
// Copy address to clipboard
|
||||||
|
|
||||||
async copyToClipboard(text) {
|
async copyToClipboard(text) {
|
||||||
try {
|
try {
|
||||||
let copyString1 = get("walletpage.wchange4")
|
let copyString1 = get("walletpage.wchange4")
|
||||||
@ -729,33 +277,32 @@ class ChatMenu extends LitElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<div class="container" style=${this.showBlockAddressIcon && "width: 70px" }>
|
<div class="container" style=${this.showBlockAddressIcon && "width: 70px" }>
|
||||||
<div class="menu-icon tooltip" data-text="Private Message"
|
<div class="menu-icon tooltip" data-text="${translate("blockpage.bcchange9")}" @click="${() => this.showPrivateMessageModal()}">
|
||||||
@click="${() => this.showPrivateMessageModal()}">
|
<vaadin-icon icon="vaadin:paperplane" slot="icon"></vaadin-icon>
|
||||||
<vaadin-icon icon="vaadin:paperplane" slot="icon"></vaadin-icon>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="menu-icon tooltip" data-text="Copy Address" @click="${() => this.copyToClipboard(this.toblockaddress)}">
|
<div class="menu-icon tooltip" data-text="${translate("blockpage.bcchange8")}" @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>
|
||||||
<div class="menu-icon tooltip" data-text="More" @click="${() => this.showBlockIconFunc(true)}">
|
<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>
|
<vaadin-icon icon="vaadin:ellipsis-dots-h" slot="icon"></vaadin-icon>
|
||||||
</div>
|
</div>
|
||||||
${this.showBlockAddressIcon ? html`
|
${this.showBlockAddressIcon
|
||||||
<div class="block-user-container">
|
? html`
|
||||||
<div class="menu-icon block-user" @click="${() => this.showBlockUserModal()}">
|
<div class="block-user-container">
|
||||||
<p>${translate("blockpage.bcchange1")}</p>
|
<div class="menu-icon block-user" @click="${() => this.showBlockUserModal()}">
|
||||||
<vaadin-icon icon="vaadin:close-circle" slot="icon"></vaadin-icon>
|
<p>${translate("blockpage.bcchange1")}</p>
|
||||||
</div>
|
<vaadin-icon icon="vaadin:close-circle" slot="icon"></vaadin-icon>
|
||||||
</div>
|
</div>
|
||||||
` : html`
|
</div>
|
||||||
<div></div>
|
` : html`
|
||||||
`}
|
<div></div>
|
||||||
|
`
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
window.customElements.define('chat-menu', ChatMenu);
|
window.customElements.define('chat-menu', ChatMenu)
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user