From d34cbd8e8b3078cab5ad2b85ba0723251d9b636d Mon Sep 17 00:00:00 2001 From: morethanwords Date: Sun, 3 Jan 2021 16:02:35 +0400 Subject: [PATCH] Set messages font size --- src/components/sidebarLeft/tabs/generalSettings.ts | 13 ++++++++++++- src/lib/appManagers/appImManager.ts | 11 +++++++++-- src/lib/appManagers/appStateManager.ts | 8 +++++++- src/lib/rootScope.ts | 5 ++++- src/pages/pageIm.ts | 11 ----------- src/scss/partials/_chatBubble.scss | 13 +++++-------- src/scss/partials/_document.scss | 3 ++- src/scss/partials/_leftSidebar.scss | 5 ----- src/scss/style.scss | 2 ++ 9 files changed, 41 insertions(+), 30 deletions(-) diff --git a/src/components/sidebarLeft/tabs/generalSettings.ts b/src/components/sidebarLeft/tabs/generalSettings.ts index c12ebf74..1c2ffbcc 100644 --- a/src/components/sidebarLeft/tabs/generalSettings.ts +++ b/src/components/sidebarLeft/tabs/generalSettings.ts @@ -5,11 +5,15 @@ import { clamp } from "../../../helpers/number"; import Button from "../../button"; import CheckboxField from "../../checkbox"; import RadioField from "../../radioField"; +import appStateManager from "../../../lib/appManagers/appStateManager"; +import rootScope from "../../../lib/rootScope"; export class RangeSettingSelector { public container: HTMLDivElement; private range: RangeSelector; + public onChange: (value: number) => void; + constructor(name: string, step: number, initialValue: number, minValue: number, maxValue: number) { const BASE_CLASS = 'range-setting-selector'; this.container = document.createElement('div'); @@ -32,6 +36,10 @@ export class RangeSettingSelector { this.range.setListeners(); this.range.setHandlers({ onScrub: value => { + if(this.onChange) { + this.onChange(value); + } + //console.log('font size scrub:', value); valueDiv.innerText = '' + value; } @@ -73,7 +81,10 @@ export default class AppGeneralSettingsTab extends SliderSuperTab { { const container = generateSection('Settings'); - const range = new RangeSettingSelector('Message Text Size', 1, 16, 12, 20); + const range = new RangeSettingSelector('Message Text Size', 1, rootScope.settings.messagesTextSize, 12, 20); + range.onChange = (value) => { + appStateManager.setByKey('settings.messagesTextSize', value); + }; const chatBackgroundButton = Button('btn-primary btn-transparent', {icon: 'photo', text: 'Chat Background'}); diff --git a/src/lib/appManagers/appImManager.ts b/src/lib/appManagers/appImManager.ts index 01c242f4..7df86636 100644 --- a/src/lib/appManagers/appImManager.ts +++ b/src/lib/appManagers/appImManager.ts @@ -145,6 +145,13 @@ export class AppImManager { location.hash = ''; }); + + this.setSettings(); + rootScope.on('settings_updated', () => this.setSettings()); + } + + private setSettings() { + document.documentElement.style.setProperty('--messages-text-size', rootScope.settings.messagesTextSize + 'px'); } private chatsSelectTab(tab: HTMLElement) { @@ -199,11 +206,11 @@ export class AppImManager { return; } else if(e.code === 'ArrowUp') { if(!chat.input.editMsgId) { - const history = appMessagesManager.getHistoryStorage(chat.peerId); + const history = appMessagesManager.getHistoryStorage(chat.peerId, chat.threadId); if(history.history.length) { let goodMid: number; for(const mid of history.history) { - const message = appMessagesManager.getMessageByPeer(chat.peerId, mid); + const message = chat.getMessage(mid); const good = this.myId === chat.peerId ? message.fromId === this.myId : message.pFlags.out; if(good) { diff --git a/src/lib/appManagers/appStateManager.ts b/src/lib/appManagers/appStateManager.ts index 6aaa509c..e1cad97f 100644 --- a/src/lib/appManagers/appStateManager.ts +++ b/src/lib/appManagers/appStateManager.ts @@ -15,7 +15,7 @@ import { copy, setDeepProperty, isObject, validateInitObject } from '../../helpe const REFRESH_EVERY = 24 * 60 * 60 * 1000; // 1 day const STATE_VERSION = App.version; -type State = Partial<{ +export type State = Partial<{ dialogs: Dialog[], allDialogsLoaded: DialogsStorage['allDialogsLoaded'], chats: {[peerId: string]: ReturnType}, @@ -38,6 +38,7 @@ type State = Partial<{ authState: AuthState, hiddenPinnedMessages: {[peerId: string]: number}, settings: { + messagesTextSize: number, sendShortcut: 'enter' | 'ctrlEnter', animationsEnabled: boolean, autoDownload: { @@ -78,6 +79,7 @@ const STATE_INIT: State = { }, hiddenPinnedMessages: {}, settings: { + messagesTextSize: 16, sendShortcut: 'enter', animationsEnabled: true, autoDownload: { @@ -154,6 +156,9 @@ export class AppStateManager extends EventListenerBase<{ this.state = state; this.state.version = STATE_VERSION; + // ! probably there is better place for it + rootScope.settings = this.state.settings; + this.log('state res', state); //return resolve(); @@ -206,6 +211,7 @@ export class AppStateManager extends EventListenerBase<{ public setByKey(key: string, value: any) { setDeepProperty(this.state, key, value); + rootScope.broadcast('settings_updated', {key, value}); } public pushToState(key: T, value: State[T]) { diff --git a/src/lib/rootScope.ts b/src/lib/rootScope.ts index 8bca794e..2cc9d2dd 100644 --- a/src/lib/rootScope.ts +++ b/src/lib/rootScope.ts @@ -6,6 +6,7 @@ import type { MyDialogFilter } from "./storages/filters"; import type { ConnectionStatusChange } from "../types"; import type { UserTyping } from "./appManagers/appChatsManager"; import { DEBUG, MOUNT_CLASS_TO, UserAuth } from "./mtproto/mtproto_config"; +import { State } from "./appManagers/appStateManager"; type BroadcastEvents = { 'user_update': number, @@ -72,7 +73,8 @@ type BroadcastEvents = { 'apiUpdate': Update, 'download_progress': any, - 'connection_status_change': ConnectionStatusChange + 'connection_status_change': ConnectionStatusChange, + 'settings_updated': {key: string, value: any}, //'draft_updated': any, }; @@ -83,6 +85,7 @@ class RootScope { isIDLE: false }; public connectionStatus: {[name: string]: ConnectionStatusChange} = {}; + public settings: State['settings']; constructor() { this.on('user_auth', (e) => { diff --git a/src/pages/pageIm.ts b/src/pages/pageIm.ts index 15e44dab..55161b5e 100644 --- a/src/pages/pageIm.ts +++ b/src/pages/pageIm.ts @@ -60,17 +60,6 @@ let onFirstMount = () => { }, 'image/jpeg', 1); }; }); */ - - /* toggleEmoticons.onclick = (e) => { - if(!emoticonsDropdown) { - emoticonsDropdown = initEmoticonsDropdown(pageEl, appImManager, - appMessagesManager, messageInput, toggleEmoticons); - } else { - emoticonsDropdown.classList.toggle('active'); - } - - toggleEmoticons.classList.toggle('active'); - }; */ //}); return promise; diff --git a/src/scss/partials/_chatBubble.scss b/src/scss/partials/_chatBubble.scss index badae539..53d7a973 100644 --- a/src/scss/partials/_chatBubble.scss +++ b/src/scss/partials/_chatBubble.scss @@ -755,6 +755,7 @@ $bubble-margin: .25rem; .name { letter-spacing: -.3px; display: block; + font-size: calc(1rem - 1px); html.no-touch &:hover { text-decoration: underline; @@ -767,7 +768,7 @@ $bubble-margin: .25rem; line-height: 1.2; letter-spacing: -.3px; margin-top: 2px; - font-size: .965rem; + font-size: var(--messages-secondary-text-size); } .quote { @@ -780,7 +781,7 @@ $bubble-margin: .25rem; } .web, .reply { - font-size: .95rem; + font-size: var(--messages-secondary-text-size); //transition: anim(background-color); /* &:hover { @@ -873,14 +874,14 @@ $bubble-margin: .25rem; } .message { - font-size: 16px; + font-size: var(--messages-text-size); //padding: 0 9px .2675rem 9px; padding: 0 9px 6px 9px; /* overflow: hidden; text-overflow: ellipsis; */ max-width: 100%; color: #000; - line-height: 21px; + line-height: 1.3125; // 21 / 16 word-break: break-word; white-space: pre-wrap; // * fix spaces on line begin position: relative; @@ -894,10 +895,6 @@ $bubble-margin: .25rem; //padding-top: .2675rem; padding-top: 6px; } - - .emoji { - font-size: 1.2rem; - } } .audio { diff --git a/src/scss/partials/_document.scss b/src/scss/partials/_document.scss index c0f9d1c4..81e8bb67 100644 --- a/src/scss/partials/_document.scss +++ b/src/scss/partials/_document.scss @@ -94,12 +94,13 @@ white-space: nowrap; font-weight: 500; line-height: 1.3; + font-size: 1rem; } &-size { white-space: nowrap; color: $color-gray; - font-size: 14px; + font-size: .875rem; //padding-right: 32px; line-height: 1.3; } diff --git a/src/scss/partials/_leftSidebar.scss b/src/scss/partials/_leftSidebar.scss index a6062c3e..9d756ea5 100644 --- a/src/scss/partials/_leftSidebar.scss +++ b/src/scss/partials/_leftSidebar.scss @@ -875,11 +875,6 @@ .checkbox-field { padding: 0 .875rem; } - - .radio-field { - &-main { - } - } } &-h2 { diff --git a/src/scss/style.scss b/src/scss/style.scss index 5bc0804b..2a92cd58 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -91,6 +91,8 @@ $chat-padding-handhelds: .5rem; --message-beside-button-margin: 2.875rem; --message-time-background: rgba(0, 0, 0, .35); --messages-container-width: #{$messages-container-width}; + --messages-text-size: 16px; + --messages-secondary-text-size: calc(var(--messages-text-size) - 1px); --esg-sticker-size: 80px; @include respond-to(handhelds) {