Add general chat settings
- Change font size of chat messages - Change time format of chat messages
This commit is contained in:
AlphaX-Projects
parent
6d7be2f40b
commit
9691e3f6d0
@ -1319,5 +1319,15 @@
|
||||
"tour20": "Blocks dahinter. Möchten Sie eine Aktualisierung (Bootstrap) durchführen, um den Synchronisierungsprozess zu beschleunigen?",
|
||||
"tour21": "Verbleibende Blöcke.",
|
||||
"tour22": "Aktualisierung (Bootstrap) angefordert. Bitte warten."
|
||||
},
|
||||
"chatsettings": {
|
||||
"cs1": "Chat-Einstellungen",
|
||||
"cs2": "Allgemeine Chat-Einstellungen",
|
||||
"cs3": "Zeitstempel der Chat-Nachricht",
|
||||
"cs4": "Vorherige Zeit",
|
||||
"cs5": "Ortszeit",
|
||||
"cs6": "Schriftgröße der Chat-Nachricht",
|
||||
"cs7": "Standard",
|
||||
"cs8": "px"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1319,5 +1319,15 @@
|
||||
"tour20": "bloques detrás. ¿Le gustaría actualizar (arrancar) para acelerar el proceso de sincronización?",
|
||||
"tour21": "bloques restantes.",
|
||||
"tour22": "Se solicitó actualización (arranque). Espere."
|
||||
},
|
||||
"chatsettings": {
|
||||
"cs1": "Configuración de chat",
|
||||
"cs2": "Configuración general del chat",
|
||||
"cs3": "Marca de tiempo del mensaje de chat",
|
||||
"cs4": "Hace tiempo",
|
||||
"cs5": "Hora local",
|
||||
"cs6": "Tamaño de fuente del mensaje de chat",
|
||||
"cs7": "Estándar",
|
||||
"cs8": "px"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1319,5 +1319,15 @@
|
||||
"tour20": "blokeerib taga. Kas soovite sünkroonimisprotsessi kiirendamiseks värskendada (bootstrap)?",
|
||||
"tour21": "jäänud plokke.",
|
||||
"tour22": "Taotleb värskendamist (bootstrap). Palun oodake."
|
||||
},
|
||||
"chatsettings": {
|
||||
"cs1": "Vestluse seaded",
|
||||
"cs2": "Üldised vestluse seaded",
|
||||
"cs3": "Vestlussõnumi ajatempel",
|
||||
"cs4": "Aeg tagasi",
|
||||
"cs5": "Kohalik aeg",
|
||||
"cs6": "Vestlussõnumi fondi suurus",
|
||||
"cs7": "Standardne",
|
||||
"cs8": "px"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1319,5 +1319,15 @@
|
||||
"tour20": "blokkeja takana. Haluatko päivittää (bootstrap) nopeuttaaksesi synkronointiprosessia?",
|
||||
"tour21": "jäljellä olevat lohkot.",
|
||||
"tour22": "Pyydellään päivitystä (bootstrap). Odota."
|
||||
},
|
||||
"chatsettings": {
|
||||
"cs1": "Pikaviestiasetukset",
|
||||
"cs2": "Yleiset chat-asetukset",
|
||||
"cs3": "Pikaviestin aikaleima",
|
||||
"cs4": "Aika sitten",
|
||||
"cs5": "Paikallinen aika",
|
||||
"cs6": "Chat-viestin kirjasinkoko",
|
||||
"cs7": "Vakio",
|
||||
"cs8": "px"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1319,5 +1319,15 @@
|
||||
"tour20": "blocs derrière. Souhaitez-vous actualiser (bootstrap) pour accélérer le processus de synchronisation ?",
|
||||
"tour21": "blocs restants.",
|
||||
"tour22": "Actualisation (bootstrap) demandée. Veuillez patienter."
|
||||
},
|
||||
"chatsettings": {
|
||||
"cs1": "Paramètres de discussion",
|
||||
"cs2": "Paramètres généraux de discussion",
|
||||
"cs3": "Horodatage du message de discussion",
|
||||
"cs4": "Il y a du temps",
|
||||
"cs5": "Heure locale",
|
||||
"cs6": "Taille de la police des messages de discussion",
|
||||
"cs7": "Standard",
|
||||
"cs8": "px"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1319,5 +1319,15 @@
|
||||
"tour20": "पीछे ब्लॉक। क्या आप सिंकिंग प्रक्रिया को तेज करने के लिए रीफ्रेश (बूटस्ट्रैप) करना चाहेंगे?",
|
||||
"tour21": "ब्लॉक शेष हैं।",
|
||||
"tour22": "रिफ्रेश (बूटस्ट्रैप) का अनुरोध किया गया। कृपया प्रतीक्षा करें।"
|
||||
},
|
||||
"chatsettings": {
|
||||
"cs1": "चैट सेटिंग",
|
||||
"cs2": "सामान्य चैट सेटिंग",
|
||||
"cs3": "चैट संदेश टाइमस्टैम्प",
|
||||
"cs4": "समय पहले",
|
||||
"cs5": "स्थानीय समय",
|
||||
"cs6": "चैट संदेश फ़ॉन्ट आकार",
|
||||
"cs7": "मानक",
|
||||
"cs8": "px"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1319,5 +1319,15 @@
|
||||
"tour20": "blokovi iza. Želite li osvježiti (bootstrap) da ubrzate proces sinkronizacije?",
|
||||
"tour21": "preostali blokovi.",
|
||||
"tour22": "Zatraženo je osvježavanje (bootstrap). Molimo pričekajte."
|
||||
},
|
||||
"chatsettings": {
|
||||
"cs1": "Postavke chata",
|
||||
"cs2": "Opće postavke chata",
|
||||
"cs3": "Vremenska oznaka poruke chata",
|
||||
"cs4": "Prije vremena",
|
||||
"cs5": "Lokalno vrijeme",
|
||||
"cs6": "Veličina fonta poruke chata",
|
||||
"cs7": "Standardno",
|
||||
"cs8": "px"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1319,5 +1319,15 @@
|
||||
"tour20": "blokkok mögött. Szeretne frissíteni (bootstrap) a szinkronizálási folyamat felgyorsítása érdekében?",
|
||||
"tour21": "még blokkok.",
|
||||
"tour22": "Frissítés (bootstrap) kérve. Kérjük, várjon."
|
||||
},
|
||||
"chatsettings": {
|
||||
"cs1": "Csevegés beállításai",
|
||||
"cs2": "Általános csevegési beállítások",
|
||||
"cs3": "Csevegési üzenet időbélyege",
|
||||
"cs4": "Idővel ezelőtt",
|
||||
"cs5": "Helyi idő",
|
||||
"cs6": "Csevegési üzenet betűmérete",
|
||||
"cs7": "Normál",
|
||||
"cs8": "px"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1319,5 +1319,15 @@
|
||||
"tour20": "blocchi dietro. Vuoi aggiornare (bootstrap) per accelerare il processo di sincronizzazione?",
|
||||
"tour21": "blocchi rimanenti.",
|
||||
"tour22": "Aggiornamento (bootstrap) richiesto. Attendi prego."
|
||||
},
|
||||
"chatsettings": {
|
||||
"cs1": "Impostazioni chat",
|
||||
"cs2": "Impostazioni generali della chat",
|
||||
"cs3": "Timestamp del messaggio di chat",
|
||||
"cs4": "Tempo fa",
|
||||
"cs5": "Ora locale",
|
||||
"cs6": "Dimensione carattere messaggio chat",
|
||||
"cs7": "Standard",
|
||||
"cs8": "px"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1319,5 +1319,15 @@
|
||||
"tour20": "ブロックが遅れています。同期プロセスを高速化するために更新 (ブートストラップ) しますか?",
|
||||
"tour21": "残りのブロック。",
|
||||
"tour22": "更新 (ブートストラップ) が要求されました。お待ちください。"
|
||||
},
|
||||
"chatsettings": {
|
||||
"cs1": "チャット設定",
|
||||
"cs2": "一般チャット設定",
|
||||
"cs3": "チャットメッセージのタイムスタンプ",
|
||||
"cs4": "過去時間",
|
||||
"cs5": "現地時間",
|
||||
"cs6": "チャットメッセージのフォントサイズ",
|
||||
"cs7": "標準",
|
||||
"cs8": "px"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1319,5 +1319,15 @@
|
||||
"tour20": "뒤에 차단되어 있습니다. 동기화 프로세스 속도를 높이기 위해 새로 고치시겠습니까(부트스트랩)?",
|
||||
"tour21": "남은 블록입니다.",
|
||||
"tour22": "새로 고침(부트스트랩)이 요청되었습니다. 잠시 기다려 주십시오."
|
||||
},
|
||||
"chatsettings": {
|
||||
"cs1": "채팅 설정",
|
||||
"cs2": "일반 채팅 설정",
|
||||
"cs3": "채팅 메시지 타임스탬프",
|
||||
"cs4": "옛날",
|
||||
"cs5": "현지 시간",
|
||||
"cs6": "채팅 메시지 글꼴 크기",
|
||||
"cs7": "표준",
|
||||
"cs8": "px"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1319,5 +1319,15 @@
|
||||
"tour20": "blokken achterstand. Wenst U te herladen ('bootstrap') om het synchronisatie-proces te versnellen?",
|
||||
"tour21": "blokken te gaan.",
|
||||
"tour22": "Herladen ('bootstrap') werd aangevraagd. Gelive te wachten."
|
||||
},
|
||||
"chatsettings": {
|
||||
"cs1": "Chatinstellingen",
|
||||
"cs2": "Algemene chatinstellingen",
|
||||
"cs3": "Tijdstempel van chatbericht",
|
||||
"cs4": "Tijd geleden",
|
||||
"cs5": "Lokale tijd",
|
||||
"cs6": "Lettergrootte chatbericht",
|
||||
"cs7": "Standaard",
|
||||
"cs8": "px"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1319,5 +1319,15 @@
|
||||
"tour20": "blokker bak. Vil du oppdatere (bootstrap) for å fremskynde synkroniseringsprosessen?",
|
||||
"tour21": "blokker igjen.",
|
||||
"tour22": "Oppdater (bootstrap) forespurt. Vennligst vent."
|
||||
},
|
||||
"chatsettings": {
|
||||
"cs1": "Chatinnstillinger",
|
||||
"cs2": "Generelle chatinnstillinger",
|
||||
"cs3": "Tidsstempel for chatmelding",
|
||||
"cs4": "For tid siden",
|
||||
"cs5": "Lokal tid",
|
||||
"cs6": "Skriftstørrelse for chatmelding",
|
||||
"cs7": "Standard",
|
||||
"cs8": "px"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1319,5 +1319,15 @@
|
||||
"tour20": "bloki za sobą. Czy chcesz odświeżyć (bootstrap), aby przyspieszyć proces synchronizacji?",
|
||||
"tour21": "pozostałe bloki.",
|
||||
"tour22": "Zażądano odświeżenia (bootstrap). Proszę czekać."
|
||||
},
|
||||
"chatsettings": {
|
||||
"cs1": "Ustawienia czatu",
|
||||
"cs2": "Ogólne ustawienia czatu",
|
||||
"cs3": "Sygnatura czasowa wiadomości czatu",
|
||||
"cs4": "Czas temu",
|
||||
"cs5": "Czas lokalny",
|
||||
"cs6": "Rozmiar czcionki wiadomości czatu",
|
||||
"cs7": "Standardowy",
|
||||
"cs8": "px"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1319,5 +1319,15 @@
|
||||
"tour20": "blocos atrás. Gostaria de atualizar (inicializar) para acelerar o processo de sincronização?",
|
||||
"tour21": "blocos restantes.",
|
||||
"tour22": "Atualização (bootstrap) solicitada. Aguarde."
|
||||
},
|
||||
"chatsettings": {
|
||||
"cs1": "Configurações de bate-papo",
|
||||
"cs2": "Configurações gerais de bate-papo",
|
||||
"cs3": "Data e hora da mensagem de bate-papo",
|
||||
"cs4": "Tempo atrás",
|
||||
"cs5": "Hora Local",
|
||||
"cs6": "Tamanho da fonte da mensagem de bate-papo",
|
||||
"cs7": "Padrão",
|
||||
"cs8": "px"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1319,5 +1319,15 @@
|
||||
"tour20": "se blochează în urmă. Doriți să reîmprospătați (bootstrap) pentru a accelera procesul de sincronizare?",
|
||||
"tour21": "blocuri rămase.",
|
||||
"tour22": "Reîmprospătare (bootstrap) solicitată. Vă rugăm să așteptați."
|
||||
},
|
||||
"chatsettings": {
|
||||
"cs1": "Setări chat",
|
||||
"cs2": "Setări generale de chat",
|
||||
"cs3": "Marca temporală a mesajului de chat",
|
||||
"cs4": "Timp în urmă",
|
||||
"cs5": "Ora locală",
|
||||
"cs6": "Dimensiunea fontului mesajului de chat",
|
||||
"cs7": "Standard",
|
||||
"cs8": "px"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1319,5 +1319,15 @@
|
||||
"tour20": "blokovi iza. Da li želite da osvežite (bootstrap) da biste ubrzali proces sinhronizacije?",
|
||||
"tour21": "preostali blokovi.",
|
||||
"tour22": "Zatraženo je osvežavanje (bootstrap). Molimo sačekajte."
|
||||
},
|
||||
"chatsettings": {
|
||||
"cs1": "Podešavanja ćaskanja",
|
||||
"cs2": "Opšta podešavanja ćaskanja",
|
||||
"cs3": "Vremenska oznaka poruke ćaskanja",
|
||||
"cs4": "pre vremena",
|
||||
"cs5": "Lokalno vreme",
|
||||
"cs6": "Veličina fonta poruke ćaskanja",
|
||||
"cs7": "Standard",
|
||||
"cs8": "pk"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1319,5 +1319,15 @@
|
||||
"tour20": "блоки позади. Хотите обновить (загрузочную загрузку), чтобы ускорить процесс синхронизации?",
|
||||
"tour21": "осталось блоков.",
|
||||
"tour22": "Запрошено обновление (загрузочная загрузка). Пожалуйста, подождите."
|
||||
},
|
||||
"chatsettings": {
|
||||
"cs1": "Настройки чата",
|
||||
"cs2": "Общие настройки чата",
|
||||
"cs3": "Временная метка сообщения чата",
|
||||
"cs4": "Время назад",
|
||||
"cs5": "Местное время",
|
||||
"cs6": "Размер шрифта сообщения чата",
|
||||
"cs7": "Стандартный",
|
||||
"cs8": "px"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1319,5 +1319,15 @@
|
||||
"tour20": "blocks behind. Would you like to refresh (bootstrap) to speed up the syncing process?",
|
||||
"tour21": "blocks remaining.",
|
||||
"tour22": "Refresh (bootstrap) requested. Please wait."
|
||||
},
|
||||
"chatsettings": {
|
||||
"cs1": "Chat Settings",
|
||||
"cs2": "General Chat Settings",
|
||||
"cs3": "Chat Message Timestamp",
|
||||
"cs4": "Time Ago",
|
||||
"cs5": "Local Time",
|
||||
"cs6": "Chat Message Font Size",
|
||||
"cs7": "Standard",
|
||||
"cs8": "px"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1319,5 +1319,15 @@
|
||||
"tour20": "落后了。您想刷新（引导）以加快同步过程吗？",
|
||||
"tour21": "剩余块数。",
|
||||
"tour22": "已请求刷新（引导）。请稍候。"
|
||||
},
|
||||
"chatsettings": {
|
||||
"cs1": "聊天设置",
|
||||
"cs2": "常规聊天设置",
|
||||
"cs3": "聊天消息时间戳",
|
||||
"cs4": "时间前",
|
||||
"cs5": "当地时间",
|
||||
"cs6": "聊天消息字体大小",
|
||||
"cs7": "标准",
|
||||
"cs8": "px"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1319,5 +1319,15 @@
|
||||
"tour20": "落後了。您想刷新（引導）以加快同步過程嗎？",
|
||||
"tour21": "剩餘塊數。",
|
||||
"tour22": "已要求刷新（引導）。請稍候。"
|
||||
},
|
||||
"chatsettings": {
|
||||
"cs1": "聊天設定",
|
||||
"cs2": "常規聊天設定",
|
||||
"cs3": "聊天訊息時間戳",
|
||||
"cs4": "很久以前",
|
||||
"cs5": "當地時間",
|
||||
"cs6": "聊天訊息字體大小",
|
||||
"cs7": "標準",
|
||||
"cs8": "px"
|
||||
}
|
||||
}
|
||||
|
||||
@ -34,12 +34,14 @@ import './ChatLeaveGroup'
|
||||
import './ChatGroupSettings'
|
||||
import './ChatRightPanel'
|
||||
import './ChatRightPanelResources'
|
||||
import './ChatRightPanelSettings'
|
||||
import './ChatSearchResults'
|
||||
import '@material/mwc-button'
|
||||
import '@material/mwc-dialog'
|
||||
import '@material/mwc-icon'
|
||||
import '@polymer/paper-dialog/paper-dialog.js'
|
||||
import '@polymer/paper-spinner/paper-spinner-lite.js'
|
||||
import '@vaadin/tooltip'
|
||||
|
||||
// Multi language support
|
||||
import { get, translate } from '../../../../core/translate'
|
||||
@ -108,6 +110,7 @@ class ChatPage extends LitElement {
|
||||
groupMembers: { type: Array },
|
||||
shifted: { type: Boolean },
|
||||
shiftedResources: { type: Boolean },
|
||||
shiftedSettings: { type: Boolean },
|
||||
groupInfo: { type: Object },
|
||||
setActiveChatHeadUrl: { attribute: false },
|
||||
userFound: { type: Array },
|
||||
@ -200,6 +203,7 @@ class ChatPage extends LitElement {
|
||||
this.groupMembers = []
|
||||
this.shifted = false
|
||||
this.shiftedResources = false
|
||||
this.shiftedSettings = false
|
||||
this.groupInfo = {}
|
||||
this.pageNumber = 1
|
||||
this.userFoundModalOpen = false
|
||||
@ -258,6 +262,8 @@ class ChatPage extends LitElement {
|
||||
}
|
||||
</div>
|
||||
<div style="display: flex; height: 100%; align-items: center">
|
||||
<mwc-icon id="chatsettings" class="top-bar-icon" @click=${this._toggleSettings} style="margin: 0px 10px">settings</mwc-icon>
|
||||
<vaadin-tooltip for="chatsettings" text=${translate("chatsettings.cs1")} position="start"></vaadin-tooltip>
|
||||
${(!this.isReceipient && +this._chatId !== 0) ?
|
||||
html`
|
||||
<mwc-icon class="top-bar-icon" @click=${this.copyJoinGroupLinkToClipboard} style="margin: 0px 10px">link</mwc-icon>
|
||||
@ -661,7 +667,12 @@ class ChatPage extends LitElement {
|
||||
}}
|
||||
>
|
||||
${this.forwardActiveChatHeadUrl.selected ?
|
||||
(html`<div class="user-verified"><p >${translate("chatpage.cchange38")}</p><vaadin-icon icon="vaadin:check-circle-o" slot="icon"></vaadin-icon></div>`)
|
||||
(html`
|
||||
<div class="user-verified">
|
||||
<p>${translate("chatpage.cchange38")}</p>
|
||||
<vaadin-icon icon="vaadin:check-circle-o" slot="icon"></vaadin-icon>
|
||||
</div>
|
||||
`)
|
||||
: (html`<vaadin-icon @click=${this.userSearch} slot="icon" icon="vaadin:open-book" class="search-icon"></vaadin-icon>`)
|
||||
}
|
||||
</div>
|
||||
@ -695,7 +706,9 @@ class ChatPage extends LitElement {
|
||||
return html`
|
||||
<chat-select
|
||||
activeChatHeadUrl=${this.forwardActiveChatHeadUrl.url}
|
||||
.setActiveChatHeadUrl=${(val) => {this.forwardActiveChatHeadUrl = {...this.forwardActiveChatHeadUrl, url: val}; this.userFound = [];}}
|
||||
.setActiveChatHeadUrl=${
|
||||
(val) => {this.forwardActiveChatHeadUrl = {...this.forwardActiveChatHeadUrl, url: val}; this.userFound = [];}
|
||||
}
|
||||
chatInfo=${JSON.stringify(item)}
|
||||
>
|
||||
</chat-select>
|
||||
@ -780,6 +793,12 @@ class ChatPage extends LitElement {
|
||||
>
|
||||
</chat-right-panel-resources>
|
||||
</div>
|
||||
<div class="chat-right-panel ${this.shiftedSettings ? "movedin" : "movedout"}" ${animate()}>
|
||||
<chat-right-panel-settings
|
||||
.toggle=${(val) => this._toggleSettings(val)}
|
||||
>
|
||||
</chat-right-panel-settings>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
@ -787,6 +806,14 @@ class ChatPage extends LitElement {
|
||||
async firstUpdated() {
|
||||
this.changeTheme()
|
||||
|
||||
if (localStorage.getItem('timestampForChats') === null) {
|
||||
localStorage.setItem('timestampForChats', 'ago')
|
||||
}
|
||||
|
||||
if (localStorage.getItem('fontsizeForChats') === null) {
|
||||
localStorage.setItem('fontsizeForChats', 'font16')
|
||||
}
|
||||
|
||||
window.addEventListener('storage', () => {
|
||||
const checkLanguage = localStorage.getItem('qortalLanguage')
|
||||
const checkTheme = localStorage.getItem('qortalTheme')
|
||||
@ -838,6 +865,11 @@ class ChatPage extends LitElement {
|
||||
this.requestUpdate()
|
||||
}
|
||||
|
||||
_toggleSettings(value) {
|
||||
this.shiftedSettings = value === (false || true) ? value : !this.shiftedSettings
|
||||
this.requestUpdate()
|
||||
}
|
||||
|
||||
setOpenTipUser(props) {
|
||||
this.openTipUser = props
|
||||
}
|
||||
@ -1376,7 +1408,12 @@ class ChatPage extends LitElement {
|
||||
await this.getUpdateComplete()
|
||||
|
||||
const marginElements = Array.from(this.shadowRoot.querySelector('chat-scroller').shadowRoot.querySelectorAll('message-template'))
|
||||
const findMessage2 = marginElements.find((item) => item.messageObj.signature === message.signature) || marginElements.find((item) => item.messageObj.originalSignature === message.signature) || marginElements.find((item) => item.messageObj.signature === message.originalSignature) || marginElements.find((item) => item.messageObj.originalSignature === message.originalSignature)
|
||||
const findMessage2 = marginElements.find((item) =>
|
||||
item.messageObj.signature === message.signature) || marginElements.find(
|
||||
(item) => item.messageObj.originalSignature === message.signature
|
||||
)
|
||||
|| marginElements.find((item) => item.messageObj.signature === message.originalSignature)
|
||||
|| marginElements.find((item) => item.messageObj.originalSignature === message.originalSignature)
|
||||
if (findMessage2) {
|
||||
findMessage2.scrollIntoView({ block: 'center' })
|
||||
}
|
||||
|
||||
271
plugins/plugins/core/components/ChatRightPanelSettings.js
Normal file
271
plugins/plugins/core/components/ChatRightPanelSettings.js
Normal file
@ -0,0 +1,271 @@
|
||||
import { html, LitElement } from 'lit'
|
||||
import { Epml } from '../../../epml'
|
||||
import { chatRightPanelSettingsStyles } from './plugins-css'
|
||||
import './WrapperModal'
|
||||
import '@material/mwc-button'
|
||||
import '@material/mwc-icon'
|
||||
import '@vaadin/button'
|
||||
|
||||
// Multi language support
|
||||
import { translate } from '../../../../core/translate'
|
||||
|
||||
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
|
||||
|
||||
class ChatRightPanelSettings extends LitElement {
|
||||
static get properties() {
|
||||
return {
|
||||
toggle: { attribute: false },
|
||||
agoTime: { type: Boolean },
|
||||
isoTime: { type: Boolean },
|
||||
bothTime: { type: Boolean },
|
||||
currentFontSize16: { type: Boolean },
|
||||
currentFontSize18: { type: Boolean },
|
||||
currentFontSize20: { type: Boolean },
|
||||
currentFontSize22: { type: Boolean } }
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return [chatRightPanelSettingsStyles]
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
this.agoTime = false
|
||||
this.isoTime = false
|
||||
this.bothTime = false
|
||||
this.currentFontSize16 = false
|
||||
this.currentFontSize18 = false
|
||||
this.currentFontSize20 = false
|
||||
this.currentFontSize22 = false
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div class="container">
|
||||
<div class="close-row" style="margin-top: 15px">
|
||||
<vaadin-icon class="top-bar-icon" @click=${() => this.toggle(false)} style="margin: 0px 10px" icon="vaadin:close" slot="icon"></vaadin-icon>
|
||||
</div>
|
||||
<div class="container-body">
|
||||
<div style="margin-top: 5px;">
|
||||
<p class="group-name">${translate("chatsettings.cs2")}</p>
|
||||
<hr style="color: var(--black);">
|
||||
</div>
|
||||
<div class="group-info">
|
||||
<p class="group-description">${translate("chatsettings.cs3")}</p>
|
||||
<div class="checkbox-row">
|
||||
<label for="agoButton" id="agoButtonLabel" style="color: var(--black);">${translate("chatsettings.cs4")}</label>
|
||||
<mwc-checkbox
|
||||
style="margin-right: -15px;"
|
||||
id="agoButton"
|
||||
@click=${(e) => this.setAgo(e)}
|
||||
?checked=${this.agoTime}
|
||||
></mwc-checkbox>
|
||||
</div>
|
||||
<div class="checkbox-row" style="margin-top: -20px;">
|
||||
<label for="isoButton" id="isoButtonLabel" style="color: var(--black);">${translate("chatsettings.cs5")}</label>
|
||||
<mwc-checkbox
|
||||
style="margin-right: -15px;"
|
||||
id="agoButton"
|
||||
@click=${(e) => this.setIso(e)}
|
||||
?checked=${this.isoTime}
|
||||
></mwc-checkbox>
|
||||
</div>
|
||||
<div class="checkbox-row" style="margin-top: -20px;">
|
||||
<label for="bothButton" id="bothButtonLabel" style="color: var(--black);">${translate("chatsettings.cs5")} + ${translate("chatsettings.cs4")}</label>
|
||||
<mwc-checkbox
|
||||
style="margin-right: -15px;"
|
||||
id="agoButton"
|
||||
@click=${(e) => this.setBoth(e)}
|
||||
?checked=${this.bothTime}
|
||||
></mwc-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<div><hr style="color: var(--black);"></div>
|
||||
<div class="group-info">
|
||||
<p class="group-description">${translate("chatsettings.cs6")}</p>
|
||||
<div class="checkbox-row">
|
||||
<label for="font16Button" id="font16ButtonLabel" style="color: var(--black);">${translate("chatsettings.cs7")} 16${translate("chatsettings.cs8")}</label>
|
||||
<mwc-checkbox
|
||||
style="margin-right: -15px;"
|
||||
id="font16Button"
|
||||
@click=${(e) => this.setFont16(e)}
|
||||
?checked=${this.currentFontSize16}
|
||||
></mwc-checkbox>
|
||||
</div>
|
||||
<div class="checkbox-row" style="margin-top: -20px;">
|
||||
<label for="font18Button" id="font18ButtonLabel" style="color: var(--black);">18${translate("chatsettings.cs8")}</label>
|
||||
<mwc-checkbox
|
||||
style="margin-right: -15px;"
|
||||
id="font18Button"
|
||||
@click=${(e) => this.setFont18(e)}
|
||||
?checked=${this.currentFontSize18}
|
||||
></mwc-checkbox>
|
||||
<span style="color: var(--black)"> | </span>
|
||||
<label for="font24Button" id="font20ButtonLabel" style="color: var(--black);">20${translate("chatsettings.cs8")}</label>
|
||||
<mwc-checkbox
|
||||
style="margin-right: -15px;"
|
||||
id="font20Button"
|
||||
@click=${(e) => this.setFont20(e)}
|
||||
?checked=${this.currentFontSize20}
|
||||
></mwc-checkbox>
|
||||
<span style="color: var(--black)"> | </span>
|
||||
<label for="font22Button" id="font22ButtonLabel" style="color: var(--black);">22${translate("chatsettings.cs8")}</label>
|
||||
<mwc-checkbox
|
||||
style="margin-right: -15px;"
|
||||
id="font22Button"
|
||||
@click=${(e) => this.setFont22(e)}
|
||||
?checked=${this.currentFontSize22}
|
||||
></mwc-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
firstUpdated() {
|
||||
this.setTimeFormat()
|
||||
this.setFontFormat()
|
||||
}
|
||||
|
||||
setTimeFormat() {
|
||||
if (localStorage.getItem('timestampForChats') === 'ago') {
|
||||
this.agoTime = true
|
||||
this.isoTime = false
|
||||
this.bothTime = false
|
||||
} else if (localStorage.getItem('timestampForChats') === 'iso') {
|
||||
this.agoTime = false
|
||||
this.isoTime = true
|
||||
this.bothTime = false
|
||||
} else if (localStorage.getItem('timestampForChats') === 'both') {
|
||||
this.agoTime = false
|
||||
this.isoTime = false
|
||||
this.bothTime = true
|
||||
}
|
||||
}
|
||||
|
||||
setAgo(e) {
|
||||
if (!e.target.checked) {
|
||||
window.localStorage.setItem('timestampForChats', 'ago')
|
||||
window.dispatchEvent( new Event('storage') )
|
||||
this.setTimeFormat()
|
||||
} else {
|
||||
window.localStorage.setItem('timestampForChats', 'ago')
|
||||
window.dispatchEvent( new Event('storage') )
|
||||
this.setTimeFormat()
|
||||
}
|
||||
}
|
||||
|
||||
setIso(e) {
|
||||
if (!e.target.checked) {
|
||||
window.localStorage.setItem('timestampForChats', 'iso')
|
||||
window.dispatchEvent( new Event('storage') )
|
||||
this.setTimeFormat()
|
||||
} else {
|
||||
window.localStorage.setItem('timestampForChats', 'ago')
|
||||
window.dispatchEvent( new Event('storage') )
|
||||
this.setTimeFormat()
|
||||
}
|
||||
}
|
||||
|
||||
setBoth(e) {
|
||||
if (!e.target.checked) {
|
||||
window.localStorage.setItem('timestampForChats', 'both')
|
||||
window.dispatchEvent( new Event('storage') )
|
||||
this.setTimeFormat()
|
||||
} else {
|
||||
window.localStorage.setItem('timestampForChats', 'ago')
|
||||
window.dispatchEvent( new Event('storage') )
|
||||
this.setTimeFormat()
|
||||
}
|
||||
}
|
||||
|
||||
setFontFormat() {
|
||||
if (localStorage.getItem('fontsizeForChats') === 'font16') {
|
||||
this.currentFontSize16 = true
|
||||
this.currentFontSize18 = false
|
||||
this.currentFontSize20 = false
|
||||
this.currentFontSize22 = false
|
||||
} else if (localStorage.getItem('fontsizeForChats') === 'font18') {
|
||||
this.currentFontSize16 = false
|
||||
this.currentFontSize18 = true
|
||||
this.currentFontSize20 = false
|
||||
this.currentFontSize22 = false
|
||||
} else if (localStorage.getItem('fontsizeForChats') === 'font20') {
|
||||
this.currentFontSize16 = false
|
||||
this.currentFontSize18 = false
|
||||
this.currentFontSize20 = true
|
||||
this.currentFontSize22 = false
|
||||
} else if (localStorage.getItem('fontsizeForChats') === 'font22') {
|
||||
this.currentFontSize16 = false
|
||||
this.currentFontSize18 = false
|
||||
this.currentFontSize20 = false
|
||||
this.currentFontSize22 = true
|
||||
}
|
||||
}
|
||||
|
||||
setFont16(e) {
|
||||
if (!e.target.checked) {
|
||||
window.localStorage.setItem('fontsizeForChats', 'font16')
|
||||
window.dispatchEvent( new Event('storage') )
|
||||
this.setFontFormat()
|
||||
} else {
|
||||
window.localStorage.setItem('fontsizeForChats', 'font16')
|
||||
window.dispatchEvent( new Event('storage') )
|
||||
this.setFontFormat()
|
||||
}
|
||||
}
|
||||
|
||||
setFont18(e) {
|
||||
if (!e.target.checked) {
|
||||
window.localStorage.setItem('fontsizeForChats', 'font18')
|
||||
window.dispatchEvent( new Event('storage') )
|
||||
this.setFontFormat()
|
||||
} else {
|
||||
window.localStorage.setItem('fontsizeForChats', 'font16')
|
||||
window.dispatchEvent( new Event('storage') )
|
||||
this.setFontFormat()
|
||||
}
|
||||
}
|
||||
|
||||
setFont20(e) {
|
||||
if (!e.target.checked) {
|
||||
window.localStorage.setItem('fontsizeForChats', 'font20')
|
||||
window.dispatchEvent( new Event('storage') )
|
||||
this.setFontFormat()
|
||||
} else {
|
||||
window.localStorage.setItem('fontsizeForChats', 'font16')
|
||||
window.dispatchEvent( new Event('storage') )
|
||||
this.setFontFormat()
|
||||
}
|
||||
}
|
||||
|
||||
setFont22(e) {
|
||||
if (!e.target.checked) {
|
||||
window.localStorage.setItem('fontsizeForChats', 'font22')
|
||||
window.dispatchEvent( new Event('storage') )
|
||||
this.setFontFormat()
|
||||
} else {
|
||||
window.localStorage.setItem('fontsizeForChats', 'font16')
|
||||
window.dispatchEvent( new Event('storage') )
|
||||
this.setFontFormat()
|
||||
}
|
||||
}
|
||||
|
||||
// Standard functions
|
||||
getApiKey() {
|
||||
const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]
|
||||
return myNode.apiKey
|
||||
}
|
||||
|
||||
isEmptyArray(arr) {
|
||||
if (!arr) { return true }
|
||||
return arr.length === 0
|
||||
}
|
||||
|
||||
round(number) {
|
||||
return (Math.round(parseFloat(number) * 1e8) / 1e8).toFixed(8)
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define('chat-right-panel-settings', ChatRightPanelSettings)
|
||||
@ -241,8 +241,7 @@ class ChatScroller extends LitElement {
|
||||
isLoadingAfter: { type: Boolean },
|
||||
messageQueue: { type: Array },
|
||||
loggedInUserName: { type: String },
|
||||
loggedInUserAddress: { type: String }
|
||||
}
|
||||
loggedInUserAddress: { type: String } }
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
@ -384,6 +383,7 @@ class ChatScroller extends LitElement {
|
||||
|
||||
async firstUpdated() {
|
||||
this.changeTheme()
|
||||
|
||||
window.addEventListener('storage', () => {
|
||||
const checkTheme = localStorage.getItem('qortalTheme')
|
||||
|
||||
@ -1015,7 +1015,14 @@ class MessageTemplate extends LitElement {
|
||||
addSeenMessage: { attribute: false },
|
||||
chatId: { type: String },
|
||||
isInProgress: { type: Boolean },
|
||||
id: { type: String }
|
||||
id: { type: String },
|
||||
timeId: { type: String },
|
||||
isAgo: { type: Boolean },
|
||||
isIso: { type: Boolean },
|
||||
isBoth: { type: Boolean },
|
||||
fontSize: { type: String },
|
||||
messageFontSize: { type: String },
|
||||
replyFontSize: { type: String }
|
||||
}
|
||||
}
|
||||
|
||||
@ -1045,6 +1052,13 @@ class MessageTemplate extends LitElement {
|
||||
this.openDeleteGif = false
|
||||
this.openDeleteAttachment = false
|
||||
this.openDeleteFile = false
|
||||
this.timeId = localStorage.getItem('timestampForChats') ? localStorage.getItem('timestampForChats') : 'ago'
|
||||
this.isAgo = false
|
||||
this.isIso = false
|
||||
this.isBoth = false
|
||||
this.fontSize = localStorage.getItem('fontsizeForChats') ? localStorage.getItem('fontsizeForChats') : 'font16'
|
||||
this.messageFontSize = ''
|
||||
this.replyFontSize = ''
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -1067,6 +1081,7 @@ class MessageTemplate extends LitElement {
|
||||
let isForwarded = false
|
||||
let isEdited = false
|
||||
|
||||
|
||||
try {
|
||||
const parsedMessageObj = JSON.parse(this.messageObj.decodedMessage)
|
||||
|
||||
@ -1182,11 +1197,54 @@ class MessageTemplate extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
nameMenu = html`<span class="${this.messageObj.sender === this.myAddress && 'message-data-my-name'}">${this.messageObj.senderName ? this.messageObj.senderName : cropAddress(this.messageObj.sender)}</span>`
|
||||
nameMenu = html`
|
||||
<div id="namesize" style=${this.messageFontSize}>
|
||||
<span class="${this.messageObj.sender === this.myAddress && 'message-data-my-name'}">
|
||||
${this.messageObj.senderName ? this.messageObj.senderName : cropAddress(this.messageObj.sender)}
|
||||
</span>
|
||||
</div>
|
||||
`
|
||||
|
||||
forwarded = html`<span class="${this.messageObj.sender === this.myAddress && 'message-data-forward'}">${translate('blockpage.bcchange17')}</span>`
|
||||
forwarded = html`
|
||||
<span class="${this.messageObj.sender === this.myAddress && 'message-data-forward'}">
|
||||
${translate('blockpage.bcchange17')}
|
||||
</span>
|
||||
`
|
||||
|
||||
edited = html`<span class="edited-message-style">${translate('chatpage.cchange68')} <message-time timestamp=${(this.messageObj.editedTimestamp === undefined ? Date.now() : this.messageObj.editedTimestamp)}></message-time></span>`
|
||||
if (this.timeId === 'ago') {
|
||||
this.isAgo = true
|
||||
this.isIso = false
|
||||
this.isBoth = false
|
||||
} else if (this.timeId === 'iso') {
|
||||
this.isAgo = false
|
||||
this.isIso = true
|
||||
this.isBoth = false
|
||||
} else if (this.timeId === 'both') {
|
||||
this.isAgo = false
|
||||
this.isIso = false
|
||||
this.isBoth = true
|
||||
}
|
||||
|
||||
if (this.fontSize === 'font16') {
|
||||
this.messageFontSize = "font-size: 16px"
|
||||
this.replyFontSize = "font-size: 14px"
|
||||
} else if (this.fontSize === 'font18') {
|
||||
this.messageFontSize = "font-size: 18px"
|
||||
this.replyFontSize = "font-size: 16px"
|
||||
} else if (this.fontSize === 'font20') {
|
||||
this.messageFontSize = "font-size: 20px"
|
||||
this.replyFontSize = "font-size: 18px"
|
||||
} else if (this.fontSize === 'font22') {
|
||||
this.messageFontSize = "font-size: 22px"
|
||||
this.replyFontSize = "font-size: 20px"
|
||||
}
|
||||
|
||||
edited = html`
|
||||
<span class="edited-message-style">
|
||||
${translate('chatpage.cchange68')}
|
||||
<message-time timestamp=${(this.messageObj.editedTimestamp === undefined ? Date.now() : this.messageObj.editedTimestamp)}></message-time>
|
||||
</span>
|
||||
`
|
||||
|
||||
if (repliedToData) {
|
||||
try {
|
||||
@ -1212,7 +1270,16 @@ class MessageTemplate extends LitElement {
|
||||
}
|
||||
|
||||
return hideit ? html`<li class="clearfix"></li>` : html`
|
||||
<li class="clearfix message-parent" style="${ this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false && reactions.length === 0 ? 'padding-bottom: 0;' : null} ${this.isFirstMessage && 'margin-top: 20px;'}">
|
||||
<li
|
||||
class="clearfix message-parent"
|
||||
style="${
|
||||
this.isSingleMessageInGroup === true
|
||||
&& this.isLastMessageInGroup === false
|
||||
&& reactions.length === 0 ?
|
||||
'padding-bottom: 0;' : null
|
||||
}
|
||||
${this.isFirstMessage && 'margin-top: 20px;'}"
|
||||
>
|
||||
<div>
|
||||
<div class="message-container" style="${this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false && 'margin-bottom: 0'}">
|
||||
<div class=${`message-subcontainer1 ${this.isInProgress ? 'message-sending' : ''}`}>
|
||||
@ -1238,20 +1305,46 @@ class MessageTemplate extends LitElement {
|
||||
message-subcontainer2
|
||||
${this.myAddress === this.messageObj.sender && 'message-myBg'}
|
||||
${
|
||||
((this.isFirstMessage === true && this.isSingleMessageInGroup === false) || (this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true)) && this.myAddress !== this.messageObj.sender ? 'message-triangle'
|
||||
: ((this.isFirstMessage === true && this.isSingleMessageInGroup === false) || (this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true)) && this.myAddress === this.messageObj.sender ? 'message-myTriangle'
|
||||
(
|
||||
(this.isFirstMessage === true && this.isSingleMessageInGroup === false)
|
||||
|| (this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true)
|
||||
) && this.myAddress !== this.messageObj.sender ?
|
||||
'message-triangle'
|
||||
: (
|
||||
(this.isFirstMessage === true && this.isSingleMessageInGroup === false)
|
||||
|| (this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true)
|
||||
) && this.myAddress === this.messageObj.sender ?
|
||||
'message-myTriangle'
|
||||
: null
|
||||
}
|
||||
`}"
|
||||
style="${
|
||||
this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false ? 'margin-bottom: 0;' : null}
|
||||
style="
|
||||
${
|
||||
this.isFirstMessage === false && this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false ? 'border-radius: 8px 25px 25px 8px;'
|
||||
: this.isFirstMessage === true && this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false ? 'border-radius: 27px 25px 25px 12px;'
|
||||
: this.isFirstMessage === false && this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true ? 'border-radius: 10px 25px 25px 0;'
|
||||
: this.isFirstMessage === true && this.isSingleMessageInGroup === false && this.isLastMessageInGroup === true ? 'border-radius: 25px 25px 25px 0px;'
|
||||
this.isSingleMessageInGroup === true
|
||||
&& this.isLastMessageInGroup === false ?
|
||||
'margin-bottom: 0;'
|
||||
: null
|
||||
}"
|
||||
}
|
||||
${
|
||||
this.isFirstMessage === false
|
||||
&& this.isSingleMessageInGroup === true
|
||||
&& this.isLastMessageInGroup === false ?
|
||||
'border-radius: 8px 25px 25px 8px;'
|
||||
: this.isFirstMessage === true
|
||||
&& this.isSingleMessageInGroup === true
|
||||
&& this.isLastMessageInGroup === false ?
|
||||
'border-radius: 27px 25px 25px 12px;'
|
||||
: this.isFirstMessage === false
|
||||
&& this.isSingleMessageInGroup === true
|
||||
&& this.isLastMessageInGroup === true ?
|
||||
'border-radius: 10px 25px 25px 0;'
|
||||
: this.isFirstMessage === true
|
||||
&& this.isSingleMessageInGroup === false
|
||||
&& this.isLastMessageInGroup === true ?
|
||||
'border-radius: 25px 25px 25px 0px;'
|
||||
: null
|
||||
}
|
||||
"
|
||||
>
|
||||
<div class="message-user-info">
|
||||
${this.isFirstMessage ?
|
||||
@ -1285,20 +1378,35 @@ class MessageTemplate extends LitElement {
|
||||
</div>
|
||||
${repliedToData &&
|
||||
html`
|
||||
<div class="original-message" @click=${() => {this.goToRepliedMessage(repliedToData, this.messageObj);}}>
|
||||
<p style=${'cursor: pointer; margin: 0 0 5px 0;'} class=${this.myAddress !== repliedToData.sender ? 'original-message-sender' : 'message-data-my-name'}>
|
||||
<div
|
||||
id="replyNameSize"
|
||||
class="original-message"
|
||||
style=${this.replyFontSize}
|
||||
@click=${() => {this.goToRepliedMessage(repliedToData, this.messageObj);}}
|
||||
>
|
||||
<p
|
||||
style=${'cursor: pointer; margin: 0 0 5px 0;'}
|
||||
class=${
|
||||
this.myAddress !== repliedToData.sender ?
|
||||
'original-message-sender' : 'message-data-my-name'
|
||||
}
|
||||
>
|
||||
${repliedToData.senderName ? repliedToData.senderName : cropAddress(repliedToData.sender)}
|
||||
</p>
|
||||
<p class="replied-message">
|
||||
${version && version.toString() === '1' ?
|
||||
html`
|
||||
<div id="replyFontSize" style=${this.replyFontSize}>
|
||||
${repliedToData.decodedMessage.messageText}
|
||||
</div>
|
||||
`
|
||||
: ''
|
||||
}
|
||||
${+version > 1 && repliedToMessageText ?
|
||||
html`
|
||||
<div id="replyFontSize" style=${this.replyFontSize}>
|
||||
${unsafeHTML(repliedToMessageText)}
|
||||
</div>
|
||||
`
|
||||
: ''
|
||||
}
|
||||
@ -1313,7 +1421,17 @@ class MessageTemplate extends LitElement {
|
||||
class=${[`image-container`, !this.isImageLoaded ? 'defaultSize' : '',].join(' ')}
|
||||
style=${this.isFirstMessage && 'margin-top: 10px;'}
|
||||
>
|
||||
<div style="display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; cursor: pointer; color: var(--black);">
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
color: var(--black);
|
||||
"
|
||||
>
|
||||
${translate('chatpage.cchange40')}
|
||||
</div>
|
||||
</div>
|
||||
@ -1356,7 +1474,17 @@ class MessageTemplate extends LitElement {
|
||||
class=${[`image-container`, !this.isGifoaded ? 'defaultSize' : '', ].join(' ')}
|
||||
style=${this.isFirstMessage && 'margin-top: 10px;'}
|
||||
>
|
||||
<div style="display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; cursor: pointer; color: var(--black);">
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
color: var(--black);
|
||||
"
|
||||
>
|
||||
${translate('gifs.gchange25')}
|
||||
</div>
|
||||
</div>
|
||||
@ -1365,7 +1493,12 @@ class MessageTemplate extends LitElement {
|
||||
}
|
||||
${gif && !isGifDeleted && (this.viewImage || this.myAddress === this.messageObj.sender) ?
|
||||
html`
|
||||
<div class=${[`image-container`, !this.isGifLoaded ? 'defaultSize' : '',].join(' ')} style=${this.isFirstMessage && 'margin-top: 10px;'}>
|
||||
<div
|
||||
class=${
|
||||
[`image-container`, !this.isGifLoaded ? 'defaultSize' : '',].join(' ')
|
||||
}
|
||||
style=${this.isFirstMessage && 'margin-top: 10px;'}
|
||||
>
|
||||
${gifHTML}
|
||||
${this.myAddress === this.messageObj.sender ?
|
||||
html`
|
||||
@ -1486,16 +1619,22 @@ class MessageTemplate extends LitElement {
|
||||
<div id="messageContent" class="message" style=${image && replacedMessage !== '' && 'margin-top: 15px;'}>
|
||||
${+version > 1 ? messageVersion2WithLink ?
|
||||
html`
|
||||
<div id="fontsize" style=${this.messageFontSize}>
|
||||
${messageVersion2WithLink}
|
||||
<div>
|
||||
`
|
||||
: html`
|
||||
<div id="fontsize" style=${this.messageFontSize}>
|
||||
${unsafeHTML(messageVersion2)}
|
||||
<div>
|
||||
`
|
||||
: ''
|
||||
}
|
||||
${version && version.toString() === '1' ?
|
||||
html`
|
||||
<div id="fontsize" style=${this.messageFontSize}>
|
||||
${unsafeHTML(this.emojiPicker.parse(replacedMessage))}
|
||||
<div>
|
||||
`
|
||||
: ''
|
||||
}
|
||||
@ -1508,12 +1647,40 @@ class MessageTemplate extends LitElement {
|
||||
<div
|
||||
style=${isEdited ? 'justify-content: space-between;' : 'justify-content: flex-end;'}
|
||||
class="${
|
||||
(this.isFirstMessage === false && this .isSingleMessageInGroup === true && this.isLastMessageInGroup === true) ||
|
||||
(this.isFirstMessage === true && this.isSingleMessageInGroup === false && this.isLastMessageInGroup === true) ? 'message-data-time' : 'message-data-time-hidden'
|
||||
(this.isFirstMessage === false
|
||||
&& this .isSingleMessageInGroup === true
|
||||
&& this.isLastMessageInGroup === true
|
||||
) ||
|
||||
(this.isFirstMessage === true
|
||||
&& this.isSingleMessageInGroup === false
|
||||
&& this.isLastMessageInGroup === true
|
||||
) ? 'message-data-time' : 'message-data-time-hidden'
|
||||
}"
|
||||
>
|
||||
${isEdited ? html`<span>${edited}</span>` : ''}
|
||||
${this.isInProgress ? html`<p>${translate('chatpage.cchange91')}</p>` : html`${new Date(this.messageObj.timestamp).toLocaleString()}`}
|
||||
${this.isInProgress ? html`
|
||||
<p>${translate('chatpage.cchange91')}</p>
|
||||
` : this.isAgo ? html`
|
||||
<div id="timeformat">
|
||||
<span>
|
||||
<message-time timestamp=${this.messageObj.timestamp}></message-time>
|
||||
</span>
|
||||
</div>
|
||||
` : this.isIso ? html`
|
||||
<div id="timeformat">
|
||||
<span>
|
||||
${new Date(this.messageObj.timestamp).toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
` : this.isBoth ? html`
|
||||
<div id="timeformat">
|
||||
<span>
|
||||
${new Date(this.messageObj.timestamp).toLocaleString()}
|
||||
( <message-time timestamp=${this.messageObj.timestamp}></message-time> )
|
||||
</span>
|
||||
</div>
|
||||
` : ''
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1719,6 +1886,140 @@ class MessageTemplate extends LitElement {
|
||||
}
|
||||
|
||||
firstUpdated() {
|
||||
window.addEventListener('storage', () => {
|
||||
if (localStorage.getItem('timestampForChats') !== this.timeId) {
|
||||
this.timeId = localStorage.getItem('timestampForChats')
|
||||
|
||||
if (this.timeId === 'ago') {
|
||||
this.isAgo = true
|
||||
this.isIso = false
|
||||
this.isBoth = false
|
||||
const setTimeFormatAgo = this.shadowRoot.querySelectorAll('#timeformat')
|
||||
setTimeFormatAgo.forEach((replaceToAgo) => {
|
||||
replaceToAgo.innerHTML = `
|
||||
<span>
|
||||
<message-time timestamp=${this.messageObj.timestamp}></message-time>
|
||||
</span>
|
||||
`
|
||||
})
|
||||
} else if (this.timeId === 'iso') {
|
||||
this.isAgo = false
|
||||
this.isIso = true
|
||||
this.isBoth = false
|
||||
const setTimeFormatIso = this.shadowRoot.querySelectorAll('#timeformat')
|
||||
setTimeFormatIso.forEach((replaceToIso) => {
|
||||
replaceToIso.innerHTML = `
|
||||
<span>
|
||||
${new Date(this.messageObj.timestamp).toLocaleString()}
|
||||
</span>
|
||||
`
|
||||
})
|
||||
} else if (this.timeId === 'both') {
|
||||
this.isAgo = false
|
||||
this.isIso = false
|
||||
this.isBoth = true
|
||||
const setTimeFormatBoth = this.shadowRoot.querySelectorAll('#timeformat')
|
||||
setTimeFormatBoth.forEach((replaceToBoth) => {
|
||||
replaceToBoth.innerHTML = `
|
||||
<span>
|
||||
${new Date(this.messageObj.timestamp).toLocaleString()}
|
||||
( <message-time timestamp=${this.messageObj.timestamp}></message-time> )
|
||||
</span>
|
||||
`
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (localStorage.getItem('fontsizeForChats') !== this.messageFontSize) {
|
||||
this.messageFontSize = localStorage.getItem('fontsizeForChats')
|
||||
if (this.messageFontSize === 'font16') {
|
||||
const setFontSize16 = this.shadowRoot.querySelectorAll('#fontsize')
|
||||
setFontSize16.forEach((replaceFontSizeTo16) => {
|
||||
replaceFontSizeTo16.removeAttribute("style")
|
||||
replaceFontSizeTo16.setAttribute("style", "font-size: 16px;")
|
||||
})
|
||||
const setNameSize16 = this.shadowRoot.querySelectorAll('#namesize')
|
||||
setNameSize16.forEach((replaceNameSizeTo16) => {
|
||||
replaceNameSizeTo16.removeAttribute("style")
|
||||
replaceNameSizeTo16.setAttribute("style", "font-size: 16px;")
|
||||
})
|
||||
const setReplyFontSize16 = this.shadowRoot.querySelectorAll('#replyFontSize')
|
||||
setReplyFontSize16.forEach((replaceReplayFontSizeTo16) => {
|
||||
replaceReplayFontSizeTo16.removeAttribute("style")
|
||||
replaceReplayFontSizeTo16.setAttribute("style", "font-size: 14px;")
|
||||
})
|
||||
const setReplyNameSize16 = this.shadowRoot.querySelectorAll('#replyNameSize')
|
||||
setReplyNameSize16.forEach((replaceReplayNameSizeTo16) => {
|
||||
replaceReplayNameSizeTo16.removeAttribute("style")
|
||||
replaceReplayNameSizeTo16.setAttribute("style", "font-size: 14px;")
|
||||
})
|
||||
} else if (this.messageFontSize === 'font18') {
|
||||
const setFontSize18 = this.shadowRoot.querySelectorAll('#fontsize')
|
||||
setFontSize18.forEach((replaceFontSizeTo18) => {
|
||||
replaceFontSizeTo18.removeAttribute("style")
|
||||
replaceFontSizeTo18.setAttribute("style", "font-size: 18px;")
|
||||
})
|
||||
const setNameSize18 = this.shadowRoot.querySelectorAll('#namesize')
|
||||
setNameSize18.forEach((replaceNameSizeTo18) => {
|
||||
replaceNameSizeTo18.removeAttribute("style")
|
||||
replaceNameSizeTo18.setAttribute("style", "font-size: 18px;")
|
||||
})
|
||||
const setReplyFontSize18 = this.shadowRoot.querySelectorAll('#replyFontSize')
|
||||
setReplyFontSize18.forEach((replaceReplayFontSizeTo18) => {
|
||||
replaceReplayFontSizeTo18.removeAttribute("style")
|
||||
replaceReplayFontSizeTo18.setAttribute("style", "font-size: 16px;")
|
||||
})
|
||||
const setReplyNameSize18 = this.shadowRoot.querySelectorAll('#replyNameSize')
|
||||
setReplyNameSize18.forEach((replaceReplayNameSizeTo18) => {
|
||||
replaceReplayNameSizeTo18.removeAttribute("style")
|
||||
replaceReplayNameSizeTo18.setAttribute("style", "font-size: 16px;")
|
||||
})
|
||||
} else if (this.messageFontSize === 'font20') {
|
||||
const setFontSize20 = this.shadowRoot.querySelectorAll('#fontsize')
|
||||
setFontSize20.forEach((replaceFontSizeTo20) => {
|
||||
replaceFontSizeTo20.removeAttribute("style")
|
||||
replaceFontSizeTo20.setAttribute("style", "font-size: 20px;")
|
||||
})
|
||||
const setNameSize20 = this.shadowRoot.querySelectorAll('#namesize')
|
||||
setNameSize20.forEach((replaceNameSizeTo20) => {
|
||||
replaceNameSizeTo20.removeAttribute("style")
|
||||
replaceNameSizeTo20.setAttribute("style", "font-size: 20px;")
|
||||
})
|
||||
const setReplyFontSize20 = this.shadowRoot.querySelectorAll('#replyFontSize')
|
||||
setReplyFontSize20.forEach((replaceReplayFontSizeTo20) => {
|
||||
replaceReplayFontSizeTo20.removeAttribute("style")
|
||||
replaceReplayFontSizeTo20.setAttribute("style", "font-size: 18px;")
|
||||
})
|
||||
const setReplyNameSize20 = this.shadowRoot.querySelectorAll('#replyNameSize')
|
||||
setReplyNameSize20.forEach((replaceReplayNameSizeTo20) => {
|
||||
replaceReplayNameSizeTo20.removeAttribute("style")
|
||||
replaceReplayNameSizeTo20.setAttribute("style", "font-size: 18px;")
|
||||
})
|
||||
} else if (this.messageFontSize === 'font22') {
|
||||
const setFontSize22 = this.shadowRoot.querySelectorAll('#fontsize')
|
||||
setFontSize22.forEach((replaceFontSizeTo22) => {
|
||||
replaceFontSizeTo22.removeAttribute("style")
|
||||
replaceFontSizeTo22.setAttribute("style", "font-size: 22px;")
|
||||
})
|
||||
const setNameSize22 = this.shadowRoot.querySelectorAll('#namesize')
|
||||
setNameSize22.forEach((replaceNameSizeTo22) => {
|
||||
replaceNameSizeTo22.removeAttribute("style")
|
||||
replaceNameSizeTo22.setAttribute("style", "font-size: 22px;")
|
||||
})
|
||||
const setReplyFontSize22 = this.shadowRoot.querySelectorAll('#replyFontSize')
|
||||
setReplyFontSize22.forEach((replaceReplayFontSizeTo22) => {
|
||||
replaceReplayFontSizeTo22.removeAttribute("style")
|
||||
replaceReplayFontSizeTo22.setAttribute("style", "font-size: 20px;")
|
||||
})
|
||||
const setReplyNameSize22 = this.shadowRoot.querySelectorAll('#replyNameSize')
|
||||
setReplyNameSize22.forEach((replaceReplayNameSizeTo22) => {
|
||||
replaceReplayNameSizeTo22.removeAttribute("style")
|
||||
replaceReplayNameSizeTo22.setAttribute("style", "font-size: 20px;")
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const autoSeeChatList = window.parent.reduxStore.getState().app.autoLoadImageChats
|
||||
|
||||
if (autoSeeChatList.includes(this.chatId) || this.listSeenMessages.includes(this.messageObj.signature)) {
|
||||
|
||||
@ -2755,6 +2755,178 @@ export const levelFounderStyles = css`
|
||||
}
|
||||
`
|
||||
|
||||
export const chatRightPanelSettingsStyles = css`
|
||||
.top-bar-icon {
|
||||
cursor: pointer;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
color: var(--black);
|
||||
transition: 0.2s all;
|
||||
}
|
||||
|
||||
.top-bar-icon:hover {
|
||||
color: #F44336;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: #F44336;
|
||||
}
|
||||
|
||||
.green {
|
||||
color: #198754;
|
||||
}
|
||||
|
||||
.modal-button {
|
||||
font-family: Roboto, sans-serif;
|
||||
font-size: 16px;
|
||||
color: var(--mdc-theme-primary);
|
||||
background-color: transparent;
|
||||
padding: 8px 10px;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.close-row {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
height: 50px;
|
||||
flex: 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.container-body {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
overflow: auto;
|
||||
margin-top: 5px;
|
||||
padding: 0px 6px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.container-body::-webkit-scrollbar-track {
|
||||
background-color: whitesmoke;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.container-body::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
border-radius: 7px;
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
|
||||
.container-body::-webkit-scrollbar-thumb {
|
||||
background-color: rgb(180, 176, 176);
|
||||
border-radius: 7px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.container-body::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgb(148, 146, 146);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--black);
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.chat-right-panel-label {
|
||||
font-family: Montserrat, sans-serif;
|
||||
color: var(--group-header);
|
||||
padding: 5px;
|
||||
font-size: 13px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.group-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.group-name {
|
||||
font-family: Raleway, sans-serif;
|
||||
font-size: 20px;
|
||||
color: var(--chat-bubble-msg-color);
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.group-description {
|
||||
font-family: Roboto, sans-serif;
|
||||
color: var(--chat-bubble-msg-color);
|
||||
letter-spacing: 0.3px;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
margin-top: 15px;
|
||||
word-break: break-word;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.group-subheader {
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-size: 14px;
|
||||
color: var(--chat-bubble-msg-color);
|
||||
}
|
||||
|
||||
.group-data {
|
||||
font-family: Roboto, sans-serif;
|
||||
letter-spacing: 0.3px;
|
||||
font-weight: 300;
|
||||
font-size: 14px;
|
||||
color: var(--chat-bubble-msg-color);
|
||||
}
|
||||
|
||||
.message-myBg {
|
||||
background-color: var(--chat-bubble-myBg) !important;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.message-data-name {
|
||||
user-select: none;
|
||||
color: #03a9f4;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.message-user-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.hideImg {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.checkbox-row {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-weight: 600;
|
||||
color: var(--black);
|
||||
padding-left: 5px;
|
||||
}
|
||||
`
|
||||
|
||||
export const chatRightPanelResourcesStyles = css`
|
||||
.top-bar-icon {
|
||||
cursor: pointer;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user