Browse Source

Set messages font size

master
morethanwords 4 years ago
parent
commit
d34cbd8e8b
  1. 13
      src/components/sidebarLeft/tabs/generalSettings.ts
  2. 11
      src/lib/appManagers/appImManager.ts
  3. 8
      src/lib/appManagers/appStateManager.ts
  4. 5
      src/lib/rootScope.ts
  5. 11
      src/pages/pageIm.ts
  6. 13
      src/scss/partials/_chatBubble.scss
  7. 3
      src/scss/partials/_document.scss
  8. 5
      src/scss/partials/_leftSidebar.scss
  9. 2
      src/scss/style.scss

13
src/components/sidebarLeft/tabs/generalSettings.ts

@ -5,11 +5,15 @@ import { clamp } from "../../../helpers/number"; @@ -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 { @@ -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 { @@ -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'});

11
src/lib/appManagers/appImManager.ts

@ -145,6 +145,13 @@ export class AppImManager { @@ -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 { @@ -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) {

8
src/lib/appManagers/appStateManager.ts

@ -15,7 +15,7 @@ import { copy, setDeepProperty, isObject, validateInitObject } from '../../helpe @@ -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<AppChatsManager['getChat']>},
@ -38,6 +38,7 @@ type State = Partial<{ @@ -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 = { @@ -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<{ @@ -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<{ @@ -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<T extends keyof State>(key: T, value: State[T]) {

5
src/lib/rootScope.ts

@ -6,6 +6,7 @@ import type { MyDialogFilter } from "./storages/filters"; @@ -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 = { @@ -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 { @@ -83,6 +85,7 @@ class RootScope {
isIDLE: false
};
public connectionStatus: {[name: string]: ConnectionStatusChange} = {};
public settings: State['settings'];
constructor() {
this.on('user_auth', (e) => {

11
src/pages/pageIm.ts

@ -60,17 +60,6 @@ let onFirstMount = () => { @@ -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;

13
src/scss/partials/_chatBubble.scss

@ -755,6 +755,7 @@ $bubble-margin: .25rem; @@ -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; @@ -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; @@ -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; @@ -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; @@ -894,10 +895,6 @@ $bubble-margin: .25rem;
//padding-top: .2675rem;
padding-top: 6px;
}
.emoji {
font-size: 1.2rem;
}
}
.audio {

3
src/scss/partials/_document.scss

@ -94,12 +94,13 @@ @@ -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;
}

5
src/scss/partials/_leftSidebar.scss

@ -875,11 +875,6 @@ @@ -875,11 +875,6 @@
.checkbox-field {
padding: 0 .875rem;
}
.radio-field {
&-main {
}
}
}
&-h2 {

2
src/scss/style.scss

@ -91,6 +91,8 @@ $chat-padding-handhelds: .5rem; @@ -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) {

Loading…
Cancel
Save