chore(global_menu): indicate external changes to zoom

This commit is contained in:
Elian Doran 2025-09-22 20:19:00 +03:00
parent 5249911ddb
commit 13e9fcbfba
No known key found for this signature in database

View File

@ -1,6 +1,6 @@
import Dropdown from "../react/Dropdown"; import Dropdown from "../react/Dropdown";
import "./global_menu.css"; import "./global_menu.css";
import { useStaticTooltip, useStaticTooltipWithKeyboardShortcut, useTriliumOption, useTriliumOptionBool } from "../react/hooks"; import { useStaticTooltip, useStaticTooltipWithKeyboardShortcut, useTriliumOption, useTriliumOptionBool, useTriliumOptionInt } from "../react/hooks";
import { useContext, useEffect, useRef, useState } from "preact/hooks"; import { useContext, useEffect, useRef, useState } from "preact/hooks";
import { t } from "../../services/i18n"; import { t } from "../../services/i18n";
import { FormDropdownDivider, FormDropdownSubmenu, FormListItem } from "../react/FormList"; import { FormDropdownDivider, FormDropdownSubmenu, FormListItem } from "../react/FormList";
@ -142,18 +142,7 @@ function VerticalLayoutIcon() {
} }
function ZoomControls({ parentComponent }: { parentComponent?: Component | null }) { function ZoomControls({ parentComponent }: { parentComponent?: Component | null }) {
const [ zoomLevel, setZoomLevel ] = useState(100); const [ zoomLevel ] = useTriliumOption("zoomFactor");
function updateZoomState() {
if (!isElectron()) {
return;
}
const zoomFactor = dynamicRequire("electron").webFrame.getZoomFactor();
setZoomLevel(Math.round(zoomFactor * 100));
}
useEffect(updateZoomState, []);
function ZoomControlButton({ command, title, icon, children, dismiss }: { command: KeyboardActionNames, title: string, icon?: string, children?: ComponentChildren, dismiss?: boolean }) { function ZoomControlButton({ command, title, icon, children, dismiss }: { command: KeyboardActionNames, title: string, icon?: string, children?: ComponentChildren, dismiss?: boolean }) {
const linkRef = useRef<HTMLAnchorElement>(null); const linkRef = useRef<HTMLAnchorElement>(null);
@ -167,7 +156,6 @@ function ZoomControls({ parentComponent }: { parentComponent?: Component | null
tabIndex={0} tabIndex={0}
onClick={(e) => { onClick={(e) => {
parentComponent?.triggerCommand(command); parentComponent?.triggerCommand(command);
setTimeout(() => updateZoomState(), 300);
if (!dismiss) { if (!dismiss) {
e.stopPropagation(); e.stopPropagation();
} }
@ -190,7 +178,7 @@ function ZoomControls({ parentComponent }: { parentComponent?: Component | null
<ZoomControlButton command="toggleFullscreen" title={t("global_menu.toggle_fullscreen")} icon="bx bx-expand-alt" dismiss /> <ZoomControlButton command="toggleFullscreen" title={t("global_menu.toggle_fullscreen")} icon="bx bx-expand-alt" dismiss />
&nbsp; &nbsp;
<ZoomControlButton command="zoomOut" title={t("global_menu.zoom_out")} icon="bx bx-minus" /> <ZoomControlButton command="zoomOut" title={t("global_menu.zoom_out")} icon="bx bx-minus" />
<ZoomControlButton command="zoomReset" title={t("global_menu.reset_zoom_level")}>{zoomLevel}{t("units.percentage")}</ZoomControlButton> <ZoomControlButton command="zoomReset" title={t("global_menu.reset_zoom_level")}>{(parseFloat(zoomLevel) * 100).toFixed(0)}{t("units.percentage")}</ZoomControlButton>
<ZoomControlButton command="zoomIn" title={t("global_menu.zoom_in")} icon="bx bx-plus" /> <ZoomControlButton command="zoomIn" title={t("global_menu.zoom_in")} icon="bx bx-plus" />
</div> </div>
</> </>