Add general chat settings

- Change font size of chat messages
- Change time format of chat messages

plugins/plugins/core/components/ChatPage.js

@@ -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' })
 			}

plugins/plugins/core/components/ChatRightPanelSettings.js

@@ -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)">&nbsp;&nbsp;|&nbsp;&nbsp;</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)">&nbsp;&nbsp;|&nbsp;&nbsp;</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)

plugins/plugins/core/components/ChatScroller.js

@@ -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`
-														${repliedToData.decodedMessage.messageText}
+														<div id="replyFontSize" style=${this.replyFontSize}>
+															${repliedToData.decodedMessage.messageText}
+														</div>
 													`
 													: ''
 												}
 												${+version > 1 && repliedToMessageText ?
 													html`
-														${unsafeHTML(repliedToMessageText)}
+														<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`
-											${messageVersion2WithLink}
+											<div id="fontsize" style=${this.messageFontSize}>
+												${messageVersion2WithLink}
+											<div>
 										`
 										: html`
-											${unsafeHTML(messageVersion2)}
+											<div id="fontsize" style=${this.messageFontSize}>
+												${unsafeHTML(messageVersion2)}
+											<div>
 										`
 										: ''
 									}
 									${version && version.toString() === '1' ?
 										html`
-											${unsafeHTML(this.emojiPicker.parse(replacedMessage))}
+											<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)) {

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;