general settings

2021-07-04 14:02:43 +02:00 · 2021-07-04 14:02:43 +02:00 · f9a79bf2c4
parent 809dd897f7
commit f9a79bf2c4
6 changed files with 113 additions and 120 deletions
--- a/app/scripts/comp/settings/settings-manager.ts
+++ b/app/scripts/comp/settings/settings-manager.ts
@ -2,7 +2,7 @@ import { Events } from 'util/events';
 import { Features } from 'util/features';
 import { Locale } from 'util/locale';
 import { ThemeWatcher } from 'comp/browser/theme-watcher';
-import { AppSettings } from 'models/app-settings';
+import { AppSettings, AppSettingsFontSize } from 'models/app-settings';
 import { Logger } from 'util/logger';
 import { Launcher } from 'comp/launcher';
 import { noop } from 'util/fn';
@ -152,7 +152,7 @@ const SettingsManager = {
        }
    },

-    setFontSize(fontSize: number): void {
+    setFontSize(fontSize: AppSettingsFontSize): void {
        const defaultFontSize = Features.isMobile ? 14 : 12;
        const sizeInPx = defaultFontSize + (fontSize || 0) * 2;
        document.documentElement.style.fontSize = `${sizeInPx}px`;
--- a/app/scripts/ui-old/app-view.js
+++ b/app/scripts/ui-old/app-view.js
@ -65,9 +65,6 @@ class AppView extends View {
        this.views.menu.listenDrag(this.views.menuDrag);
        this.views.list.listenDrag(this.views.listDrag);

-        this.listenTo(this.model.settings, 'change:theme', this.setTheme);
-        this.listenTo(this.model.settings, 'change:locale', this.setLocale);
-        this.listenTo(this.model.settings, 'change:fontSize', this.setFontSize);
        this.listenTo(this.model.settings, 'change:autoSaveInterval', this.setupAutoSave);
        this.listenTo(this.model.files, 'change', this.fileListUpdated);

@ -790,23 +787,6 @@ class AppView extends View {
        e.preventDefault();
    }

-    setTheme() {
-        SettingsManager.setTheme(this.model.settings.theme);
-    }
-
-    setFontSize() {
-        SettingsManager.setFontSize(this.model.settings.fontSize);
-    }
-
-    setLocale() {
-        SettingsManager.setLocale(this.model.settings.locale);
-        if (this.views.settings.isVisible()) {
-            this.hideSettings();
-            this.showSettings();
-        }
-        this.$el.find('.app__beta:first').text(Locale.appBeta);
-    }
-
    extLinkClick(e) {
        if (Launcher) {
            e.preventDefault();
--- a/app/scripts/ui-old/settings/settings-general-view.js
+++ b/app/scripts/ui-old/settings/settings-general-view.js
@ -3,11 +3,9 @@ import { View } from 'framework/views/view';
 import { Storage } from 'storage';
 import { Updater } from 'comp/app/updater';
 import { Launcher } from 'comp/launcher';
-import { SettingsManager } from 'comp/settings/settings-manager';
 import { Alerts } from 'comp/ui/alerts';
 import { Links } from 'const/links';
 import { AppSettingsModel } from 'models/app-settings-model';
-import { UpdateModel } from 'models/update-model';
 import { Locale } from 'util/locale';
 import { SettingsLogsView } from 'views/settings/settings-logs-view';
 import { minmax } from 'util/fn';
@ -67,59 +65,6 @@ class SettingsGeneralView extends View {
        'click .settings__general-reload-app-link': 'reloadApp'
    };

-    constructor(model, options) {
-        super(model, options);
-        this.listenTo(UpdateModel, 'change', this.render);
-        this.listenTo(Events, 'theme-applied', this.render);
-    }
-
-    changeTheme(e) {
-        const theme = e.target.closest('.settings__general-theme').dataset.theme;
-        if (theme === '...') {
-            this.goToPlugins();
-        } else {
-            const changedInSettings = AppSettingsModel.theme !== theme;
-            if (changedInSettings) {
-                AppSettingsModel.theme = theme;
-            } else {
-                SettingsManager.setTheme(theme);
-            }
-        }
-    }
-
-    changeAuthSwitchTheme(e) {
-        const autoSwitchTheme = e.target.checked;
-        AppSettingsModel.autoSwitchTheme = autoSwitchTheme;
-        SettingsManager.darkModeChanged();
-        this.render();
-    }
-
-    changeLocale(e) {
-        const locale = e.target.value;
-        if (locale === '...') {
-            e.target.value = AppSettingsModel.locale || 'en-US';
-            this.goToPlugins();
-        } else {
-            AppSettingsModel.locale = locale;
-        }
-    }
-
-    goToPlugins() {
-        this.appModel.menu.select({
-            item: this.appModel.menu.pluginsSection.items[0]
-        });
-    }
-
-    changeFontSize(e) {
-        const fontSize = +e.target.value;
-        AppSettingsModel.fontSize = fontSize;
-    }
-
-    changeTitlebarStyle(e) {
-        const titlebarStyle = e.target.value;
-        AppSettingsModel.titlebarStyle = titlebarStyle;
-    }
-
    changeClipboard(e) {
        const clipboardSeconds = +e.target.value;
        AppSettingsModel.clipboardSeconds = clipboardSeconds;
@ -220,18 +165,6 @@ class SettingsGeneralView extends View {
        AppSettingsModel.lockOnOsLock = lockOnOsLock;
    }

-    changeTableView(e) {
-        const tableView = e.target.checked || false;
-        AppSettingsModel.tableView = tableView;
-        Events.emit('refresh');
-    }
-
-    changeColorfulIcons(e) {
-        const colorfulIcons = e.target.checked || false;
-        AppSettingsModel.colorfulIcons = colorfulIcons;
-        Events.emit('refresh');
-    }
-
    changeUseMarkdown(e) {
        const useMarkdown = e.target.checked || false;
        AppSettingsModel.useMarkdown = useMarkdown;
@ -301,12 +234,6 @@ class SettingsGeneralView extends View {
        });
    }

-    changeExpandGroups(e) {
-        const expand = e.target.checked;
-        AppSettingsModel.expandGroups = expand;
-        Events.emit('refresh');
-    }
-
    changeDisableOfflineStorage(e) {
        const disableOfflineStorage = e.target.checked;
        AppSettingsModel.disableOfflineStorage = disableOfflineStorage;
--- a/app/scripts/ui/settings/general/settings-general-appearance.ts
+++ b/app/scripts/ui/settings/general/settings-general-appearance.ts
@ -3,8 +3,9 @@ import { SettingsGeneralAppearanceView } from 'views/settings/general/settings-g
 import { SettingsManager } from 'comp/settings/settings-manager';
 import { Locale } from 'util/locale';
 import { ThemeWatcher } from 'comp/browser/theme-watcher';
-import { AppSettings } from 'models/app-settings';
+import { AppSettings, AppSettingsFontSize, AppSettingsTitlebarStyle } from 'models/app-settings';
 import { Features } from 'util/features';
+import { Workspace } from 'models/workspace';

 export const SettingsGeneralAppearance: FunctionComponent = () => {
    const getAllThemes = () => {
@ -30,6 +31,57 @@ export const SettingsGeneralAppearance: FunctionComponent = () => {
        return themes;
    };

+    const goToPlugins = () => {
+        Workspace.selectMenu(Workspace.menu.pluginsSection.items[0]);
+    };
+
+    const localeChanged = (locale: string) => {
+        if (locale === '...') {
+            goToPlugins();
+        } else {
+            AppSettings.locale = locale;
+            SettingsManager.setLocale(locale);
+        }
+    };
+
+    const themeChanged = (theme: string) => {
+        if (theme === '...') {
+            goToPlugins();
+        } else {
+            const changedInSettings = AppSettings.theme !== theme;
+            if (changedInSettings) {
+                AppSettings.theme = theme;
+            }
+            SettingsManager.setTheme(theme);
+        }
+    };
+
+    const autoSwitchThemeChanged = () => {
+        AppSettings.autoSwitchTheme = !AppSettings.autoSwitchTheme;
+        SettingsManager.darkModeChanged();
+    };
+
+    const fontSizeChanged = (fontSize: AppSettingsFontSize) => {
+        AppSettings.fontSize = fontSize;
+        SettingsManager.setFontSize(fontSize);
+    };
+
+    const titlebarStyleChanged = (titlebarStyle: AppSettingsTitlebarStyle) => {
+        AppSettings.titlebarStyle = titlebarStyle;
+    };
+
+    const expandGroupsChanged = () => {
+        AppSettings.expandGroups = !AppSettings.expandGroups;
+    };
+
+    const tableViewChanged = () => {
+        AppSettings.tableView = !AppSettings.tableView;
+    };
+
+    const colorfulIconsChanged = () => {
+        AppSettings.colorfulIcons = !AppSettings.colorfulIcons;
+    };
+
    return h(SettingsGeneralAppearanceView, {
        locales: SettingsManager.allLocales,
        activeLocale: Locale.localeName,
@ -43,6 +95,15 @@ export const SettingsGeneralAppearance: FunctionComponent = () => {
        expandGroups: AppSettings.expandGroups,
        canSetTableView: !Features.isMobile,
        tableView: AppSettings.tableView,
-        colorfulIcons: AppSettings.colorfulIcons
+        colorfulIcons: AppSettings.colorfulIcons,
+
+        localeChanged,
+        themeChanged,
+        autoSwitchThemeChanged,
+        fontSizeChanged,
+        titlebarStyleChanged,
+        expandGroupsChanged,
+        tableViewChanged,
+        colorfulIconsChanged
    });
 };
--- a/app/scripts/ui/settings/settings-general.ts
+++ b/app/scripts/ui/settings/settings-general.ts
@ -6,6 +6,7 @@ import { Workspace } from 'models/workspace';

 export const SettingsGeneral: FunctionComponent = () => {
    useModelWatcher(AppSettings);
+
    const selectedItem = useModelField(Workspace.menu, 'selectedItem');

    return h(SettingsGeneralView, {
--- a/app/scripts/views/settings/general/settings-general-appearance-view.tsx
+++ b/app/scripts/views/settings/general/settings-general-appearance-view.tsx
@ -17,6 +17,15 @@ export const SettingsGeneralAppearanceView: FunctionComponent<{
    canSetTableView: boolean;
    tableView: boolean;
    colorfulIcons: boolean;
+
+    localeChanged: (locale: string) => void;
+    themeChanged: (theme: string) => void;
+    autoSwitchThemeChanged: () => void;
+    fontSizeChanged: (fontSize: AppSettingsFontSize) => void;
+    titlebarStyleChanged: (titlebarStyle: AppSettingsTitlebarStyle) => void;
+    expandGroupsChanged: () => void;
+    tableViewChanged: () => void;
+    colorfulIconsChanged: () => void;
 }> = ({
    locales,
    activeLocale,
@ -30,7 +39,16 @@ export const SettingsGeneralAppearanceView: FunctionComponent<{
    expandGroups,
    canSetTableView,
    tableView,
-    colorfulIcons
+    colorfulIcons,
+
+    localeChanged,
+    themeChanged,
+    autoSwitchThemeChanged,
+    fontSizeChanged,
+    titlebarStyleChanged,
+    expandGroupsChanged,
+    tableViewChanged,
+    colorfulIconsChanged
 }) => {
    return (
        <>
@ -40,9 +58,11 @@ export const SettingsGeneralAppearanceView: FunctionComponent<{
                <select
                    class="settings__general-locale settings__select input-base"
                    id="settings__general-locale"
+                    value={activeLocale}
+                    onChange={(e) => localeChanged((e.target as HTMLSelectElement).value)}
                >
                    {Object.entries(locales).map(([key, name]) => (
-                        <option key={key} value={key} selected={key === activeLocale}>
+                        <option key={key} value={key}>
                            {name}
                        </option>
                    ))}
@ -61,7 +81,7 @@ export const SettingsGeneralAppearanceView: FunctionComponent<{
                                'settings__general-theme': true,
                                'settings__general-theme--selected': key === activeTheme
                            })}
-                            data-theme={key}
+                            onClick={() => themeChanged(key)}
                        >
                            <div class="settings__general-theme-name">{name}</div>
                            <button class="settings__general-theme-button">
@ -71,7 +91,7 @@ export const SettingsGeneralAppearanceView: FunctionComponent<{
                    ))}
                    <div
                        class="settings__general-theme settings__general-theme-plugins"
-                        data-theme="..."
+                        onClick={() => themeChanged('...')}
                    >
                        <div class="settings__general-theme-plugins-name">
                            {Locale.setGenMoreThemes}
@ -86,6 +106,7 @@ export const SettingsGeneralAppearanceView: FunctionComponent<{
                    class="settings__input input-base settings__general-auto-switch-theme"
                    id="settings__general-auto-switch-theme"
                    checked={autoSwitchTheme}
+                    onClick={autoSwitchThemeChanged}
                />
                <label for="settings__general-auto-switch-theme">
                    {Locale.setGenAutoSwitchTheme}
@ -96,16 +117,16 @@ export const SettingsGeneralAppearanceView: FunctionComponent<{
                <select
                    class="settings__general-font-size settings__select input-base"
                    id="settings__general-font-size"
+                    value={fontSize}
+                    onChange={(e) =>
+                        fontSizeChanged(
+                            +(e.target as HTMLSelectElement).value as AppSettingsFontSize
+                        )
+                    }
                >
-                    <option value="0" selected={fontSize === 0}>
-                        {Locale.setGenFontSizeNormal}
-                    </option>
-                    <option value="1" selected={fontSize === 1}>
-                        {Locale.setGenFontSizeLarge}
-                    </option>
-                    <option value="2" selected={fontSize === 2}>
-                        {Locale.setGenFontSizeLargest}
-                    </option>
+                    <option value="0">{Locale.setGenFontSizeNormal}</option>
+                    <option value="1">{Locale.setGenFontSizeLarge}</option>
+                    <option value="2">{Locale.setGenFontSizeLargest}</option>
                </select>
            </div>
            {supportsTitleBarStyles ? (
@ -117,18 +138,18 @@ export const SettingsGeneralAppearanceView: FunctionComponent<{
                        <select
                            class="settings__general-titlebar-style settings__select input-base"
                            id="settings__general-titlebar-style"
+                            value={titlebarStyle}
+                            onChange={(e) =>
+                                titlebarStyleChanged(
+                                    (e.target as HTMLSelectElement)
+                                        .value as AppSettingsTitlebarStyle
+                                )
+                            }
                        >
-                            <option value="default" selected={titlebarStyle === 'default'}>
-                                {Locale.setGenTitlebarStyleDefault}
-                            </option>
-                            <option value="hidden" selected={titlebarStyle === 'hidden'}>
-                                {Locale.setGenTitlebarStyleHidden}
-                            </option>
+                            <option value="default">{Locale.setGenTitlebarStyleDefault}</option>
+                            <option value="hidden">{Locale.setGenTitlebarStyleHidden}</option>
                            {supportsCustomTitleBarAndDraggableWindow ? (
-                                <option
-                                    value="hidden-inset"
-                                    selected={titlebarStyle === 'hidden-inset'}
-                                >
+                                <option value="hidden-inset">
                                    {Locale.setGenTitlebarStyleHiddenInset}
                                </option>
                            ) : null}
@ -142,6 +163,7 @@ export const SettingsGeneralAppearanceView: FunctionComponent<{
                    class="settings__input input-base settings__general-expand"
                    id="settings__general-expand"
                    checked={expandGroups}
+                    onClick={expandGroupsChanged}
                />
                <label for="settings__general-expand">{Locale.setGenShowSubgroups}</label>
            </div>
@ -153,6 +175,7 @@ export const SettingsGeneralAppearanceView: FunctionComponent<{
                            class="settings__input input-base settings__general-table-view"
                            id="settings__general-table-view"
                            checked={tableView}
+                            onClick={tableViewChanged}
                        />
                        <label for="settings__general-table-view">{Locale.setGenTableView}</label>
                    </div>
@ -164,6 +187,7 @@ export const SettingsGeneralAppearanceView: FunctionComponent<{
                    class="settings__input input-base settings__general-colorful-icons"
                    id="settings__general-colorful-icons"
                    checked={colorfulIcons}
+                    onClick={colorfulIconsChanged}
                />
                <label for="settings__general-colorful-icons">{Locale.setGenColorfulIcons}</label>
            </div>