Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-08-31 13:09:21 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Allow user theme font selection #562

Browse source
This commit is contained in:
the-djmaze 2022-10-20 09:33:44 +02:00
parent a9ea62abc2
commit b690370557
43 changed files with 208 additions and 189 deletions
Download patch file Download diff file Expand all files Collapse all files

19
dev/Settings/User/Themes.js
View file

@ -22,6 +22,25 @@ addObservablesTo(themeBackground, {
export class UserSettingsThemes /*extends AbstractViewSettings*/ {
constructor() {
this.fontSansSerif = ThemeStore.fontSansSerif;
this.fontSerif = ThemeStore.fontSerif;
this.fontMono = ThemeStore.fontMono;
ThemeStore.fontSansSerif.subscribe(value => {
Remote.saveSettings(null, {
fontSansSerif: value
});
});
ThemeStore.fontSerif.subscribe(value => {
Remote.saveSettings(null, {
fontSerif: value
});
});
ThemeStore.fontMono.subscribe(value => {
Remote.saveSettings(null, {
fontMono: value
});
});
this.theme = ThemeStore.theme;
this.themes = ThemeStore.themes;
this.themesObjects = ko.observableArray();

42
dev/Stores/Theme.js
View file

@ -1,5 +1,5 @@
import ko from 'ko';
import { doc, $htmlCL, leftPanelDisabled, Settings, SettingsGet } from 'Common/Globals';
import { doc, $htmlCL, elementById, leftPanelDisabled, Settings, SettingsGet } from 'Common/Globals';
import { isArray } from 'Common/Utils';
import { serverRequestRaw } from 'Common/Links';
@ -8,6 +8,9 @@ export const ThemeStore = {
themes: ko.observableArray(),
userBackgroundName: ko.observable(''),
userBackgroundHash: ko.observable(''),
fontSansSerif: ko.observable(''),
fontSerif: ko.observable(''),
fontMono: ko.observable(''),
isMobile: ko.observable($htmlCL.contains('rl-mobile')),
populate: () => {
@ -19,6 +22,9 @@ export const ThemeStore = {
ThemeStore.userBackgroundName(SettingsGet('UserBackgroundName'));
ThemeStore.userBackgroundHash(SettingsGet('UserBackgroundHash'));
}
ThemeStore.fontSansSerif(SettingsGet('fontSansSerif'));
ThemeStore.fontSerif(SettingsGet('fontSerif'));
ThemeStore.fontMono(SettingsGet('fontMono'));
leftPanelDisabled(ThemeStore.isMobile());
}
@ -26,6 +32,40 @@ export const ThemeStore = {
ThemeStore.isMobile.subscribe(value => $htmlCL.toggle('rl-mobile', value));
ThemeStore.fontSansSerif.subscribe(value => {
if (null != value) {
let cl = elementById('rl-app').classList;
cl.forEach(name => {
if ('font' === name.slice(0,4) && !/font(Serif|Mono)/.test(name)) {
cl.remove(name);
}
});
value && cl.add('font'+value);
}
});
ThemeStore.fontSerif.subscribe(value => {
if (null != value) {
let cl = elementById('rl-app').classList;
cl.forEach(name => {
if ('fontSerif' === name.slice(0,9)) {
cl.remove(name);
}
});
value && cl.add('fontSerif'+value);
}
});
ThemeStore.fontMono.subscribe(value => {
if (null != value) {
let cl = elementById('rl-app').classList;
cl.forEach(name => {
if ('fontMono' === name.slice(0,9)) {
cl.remove(name);
}
});
value && cl.add('fontMono'+value);
}
});
ThemeStore.userBackgroundHash.subscribe(value => {
if (value) {
$htmlCL.add('UserBackground');

31
dev/Styles/@Boot.css
View file

@ -4,6 +4,37 @@
--fontMono: "Liberation Mono", Monaco, Menlo, Consolas, "Courier New", FreeMono, Courier, monospace;
}
#rl-app.fontArial {
--fontSans: "Nimbus Sans L", "Liberation sans", "Arial Unicode MS", Arial, Helvetica, Garuda, Utkal, FreeSans, sans-serif;
}
#rl-app.fontTahoma {
--fontSans: "Luxi Sans", Tahoma, Loma, Geneva, Meera, sans-serif;
}
#rl-app.fontTrebuchet {
--fontSans: "DejaVu Sans Condensed", Trebuchet, "Trebuchet MS", sans-serif;
}
#rl-app.fontLucida {
--fontSans: "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "DejaVu LGC Sans", sans-serif;
}
#rl-app.fontVerdana {
--fontSans: "DejaVu Sans", Verdana, Geneva, "Bitstream Vera Sans", "DejaVu LGC Sans", sans-serif;
}
#rl-app.fontMonoCourier {
--fontMono: "Liberation Mono", "Courier New", FreeMono, Courier, monospace;
}
#rl-app.fontMonoLucida {
--fontMono: "DejaVu Sans Mono", "DejaVu LGC Sans Mono", "Bitstream Vera Sans Mono", "Lucida Console", Monaco, monospace;
}
#rl-app.fontSerifTimes {
--fontSerif: "Nimbus Roman No9 L", "Times New Roman", Times, FreeSerif, serif;
}
#rl-app.fontSerifPalatino {
--fontSerif: "Bitstream Charter", "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Times, serif;
}
#rl-app.fontSerifGeorgia {
--fontSerif: "URW Palladio L", Georgia, Times, serif;
}
html, body {
margin: 0;
padding: 0;