feat(settings): merge zoom factor with desktop app settings

This commit is contained in:
Elian Doran 2024-12-09 22:51:27 +02:00
parent f1241b2ebf
commit efae109e35
No known key found for this signature in database
4 changed files with 18 additions and 33 deletions

View File

@ -1,6 +1,5 @@
import TypeWidget from "./type_widget.js";
import ZoomFactorOptions from "./options/appearance/zoom_factor.js";
import NativeTitleBarOptions from "./options/appearance/electron_integration.js";
import ElectronIntegrationOptions from "./options/appearance/electron_integration.js";
import ThemeOptions from "./options/appearance/theme.js";
import FontsOptions from "./options/appearance/fonts.js";
import MaxContentWidthOptions from "./options/appearance/max_content_width.js";
@ -62,8 +61,7 @@ const CONTENT_WIDGETS = {
ThemeOptions,
FontsOptions,
CodeBlockOptions,
ZoomFactorOptions,
NativeTitleBarOptions,
ElectronIntegrationOptions,
MaxContentWidthOptions,
RibbonOptions
],

View File

@ -6,6 +6,15 @@ const TPL = `
<div class="options-section">
<h4>${t("electron_integration.desktop-application")}</h4>
<div class="form-group row">
<div class="col-12">
<label>${t("electron_integration.zoom-factor")}</label>
<input type="number" class="zoom-factor-select form-control options-number-input" min="0.3" max="2.0" step="0.1"/>
<p>${t("zoom_factor.description")}</p>
</div>
</div>
<hr />
<div class="side-checkbox">
<label class="form-check">
<input type="checkbox" class="native-title-bar form-check-input" />
@ -29,6 +38,10 @@ const TPL = `
export default class ElectronIntegrationOptions extends OptionsWidget {
doRender() {
this.$widget = $(TPL);
this.$zoomFactorSelect = this.$widget.find(".zoom-factor-select");
this.$zoomFactorSelect.on('change', () => { appContext.triggerCommand('setZoomFactorAndSave', {zoomFactor: this.$zoomFactorSelect.val()}); });
this.$nativeTitleBar = this.$widget.find("input.native-title-bar");
this.$nativeTitleBar.on("change", () => this.updateCheckboxOption("nativeTitleBarVisible", this.$nativeTitleBar));
@ -48,6 +61,7 @@ export default class ElectronIntegrationOptions extends OptionsWidget {
}
async optionsLoaded(options) {
this.$zoomFactorSelect.val(options.zoomFactor);
this.setCheckboxState(this.$nativeTitleBar, options.nativeTitleBarVisible);
this.setCheckboxState(this.$backgroundEffects, options.backgroundEffects);
}

View File

@ -1,28 +0,0 @@
import appContext from "../../../../components/app_context.js";
import OptionsWidget from "../options_widget.js";
import utils from "../../../../services/utils.js";
import { t } from "../../../../services/i18n.js";
const TPL = `
<div class="options-section">
<h4>${t("zoom_factor.title")}</h4>
<input type="number" class="zoom-factor-select form-control options-number-input" min="0.3" max="2.0" step="0.1"/>
<p>${t("zoom_factor.description")}</p>
</div>`;
export default class ZoomFactorOptions extends OptionsWidget {
isEnabled() {
return super.isEnabled() && utils.isElectron();
}
doRender() {
this.$widget = $(TPL);
this.$zoomFactorSelect = this.$widget.find(".zoom-factor-select");
this.$zoomFactorSelect.on('change', () => { appContext.triggerCommand('setZoomFactorAndSave', {zoomFactor: this.$zoomFactorSelect.val()}); });
}
async optionsLoaded(options) {
this.$zoomFactorSelect.val(options.zoomFactor);
}
}

View File

@ -1581,6 +1581,7 @@
"native-title-bar-description": "For Windows and macOS, keeping the native title bar off makes the application look more compact. On Linux, keeping the native title bar on integrates better with the rest of the system.",
"background-effects": "Enable background effects (Windows 11 only)",
"background-effects-description": "The Mica effect adds a blurred, stylish background to app windows, creating depth and a modern look.",
"restart-app-button": "Restart the application to view the changes"
"restart-app-button": "Restart the application to view the changes",
"zoom-factor": "Zoom factor"
}
}