`
: ''
}
${version && version.toString() === '1' ?
html`
- ${unsafeHTML(this.emojiPicker.parse(replacedMessage))}
+
+ ${unsafeHTML(this.emojiPicker.parse(replacedMessage))}
+
`
: ''
}
@@ -1508,12 +1647,40 @@ class MessageTemplate extends LitElement {
${isEdited ? html`
${edited}` : ''}
- ${this.isInProgress ? html`
${translate('chatpage.cchange91')}
` : html`${new Date(this.messageObj.timestamp).toLocaleString()}`}
+ ${this.isInProgress ? html`
+
${translate('chatpage.cchange91')}
+ ` : this.isAgo ? html`
+
+
+
+
+
+ ` : this.isIso ? html`
+
+
+ ${new Date(this.messageObj.timestamp).toLocaleString()}
+
+
+ ` : this.isBoth ? html`
+
+
+ ${new Date(this.messageObj.timestamp).toLocaleString()}
+ ( )
+
+
+ ` : ''
+ }
@@ -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 = `
+
+
+
+ `
+ })
+ } 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 = `
+
+ ${new Date(this.messageObj.timestamp).toLocaleString()}
+
+ `
+ })
+ } 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 = `
+
+ ${new Date(this.messageObj.timestamp).toLocaleString()}
+ ( )
+
+ `
+ })
+ }
+ }
+
+ 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)) {
diff --git a/plugins/plugins/core/components/plugins-css.js b/plugins/plugins/core/components/plugins-css.js
index 9de78759..11d70271 100644
--- a/plugins/plugins/core/components/plugins-css.js
+++ b/plugins/plugins/core/components/plugins-css.js
@@ -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;