Add zoom slider, match offical client zoom
This commit is contained in:
parent
6993b2a7d4
commit
54dd33dea5
7 changed files with 123 additions and 9 deletions
|
@ -93,6 +93,10 @@ handle(IpcEvents.MAXIMIZE, e => {
|
|||
}
|
||||
});
|
||||
|
||||
handle(IpcEvents.SET_ZOOM, (e, zoom: number) => {
|
||||
mainWin.webContents.setZoomFactor(zoom);
|
||||
});
|
||||
|
||||
handle(IpcEvents.SPELLCHECK_SET_LANGUAGES, (_, languages: string[]) => {
|
||||
const ses = session.defaultSession;
|
||||
|
||||
|
|
|
@ -9,6 +9,7 @@ import {
|
|||
BrowserWindow,
|
||||
BrowserWindowConstructorOptions,
|
||||
dialog,
|
||||
globalShortcut,
|
||||
Menu,
|
||||
MenuItemConstructorOptions,
|
||||
nativeTheme,
|
||||
|
@ -229,14 +230,14 @@ function initMenuBar(win: BrowserWindow) {
|
|||
click() {
|
||||
app.quit();
|
||||
}
|
||||
},
|
||||
// See https://github.com/electron/electron/issues/14742 and https://github.com/electron/electron/issues/5256
|
||||
{
|
||||
label: "Zoom in (hidden, hack for Qwertz and others)",
|
||||
accelerator: "CmdOrCtrl+=",
|
||||
role: "zoomIn",
|
||||
visible: false
|
||||
}
|
||||
// See https://github.com/electron/electron/issues/14742 and https://github.com/electron/electron/issues/5256
|
||||
// {
|
||||
// label: "Zoom in (hidden, hack for Qwertz and others)",
|
||||
// accelerator: "CmdOrCtrl+=",
|
||||
// role: "zoomIn",
|
||||
// visible: false
|
||||
// }
|
||||
] satisfies MenuItemList;
|
||||
|
||||
const menu = Menu.buildFromTemplate([
|
||||
|
@ -440,6 +441,35 @@ function createMainWindow() {
|
|||
|
||||
const runVencordMain = once(() => require(join(VENCORD_FILES_DIR, "vencordDesktopMain.js")));
|
||||
|
||||
const allowedZoomFactors = [0.5, 0.67, 0.75, 0.8, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2];
|
||||
|
||||
function handleZoomIn() {
|
||||
const zoomFactor = Settings.store.zoomFactor ?? 1;
|
||||
const currentIndex = allowedZoomFactors.indexOf(zoomFactor);
|
||||
if (currentIndex < allowedZoomFactors.length - 1) {
|
||||
const newZoomFactor = allowedZoomFactors[currentIndex + 1];
|
||||
Settings.setData({ zoomFactor: newZoomFactor });
|
||||
mainWin.webContents.setZoomFactor(newZoomFactor);
|
||||
mainWin.webContents.send("zoomChanged", newZoomFactor);
|
||||
}
|
||||
}
|
||||
|
||||
function handleZoomOut() {
|
||||
const zoomFactor = Settings.store.zoomFactor ?? 1;
|
||||
const currentIndex = allowedZoomFactors.indexOf(zoomFactor);
|
||||
if (currentIndex > 0) {
|
||||
const newZoomFactor = allowedZoomFactors[currentIndex - 1];
|
||||
Settings.setData({ zoomFactor: newZoomFactor });
|
||||
mainWin.webContents.setZoomFactor(newZoomFactor);
|
||||
mainWin.webContents.send("zoomChanged", newZoomFactor);
|
||||
}
|
||||
}
|
||||
|
||||
function resetZoom() {
|
||||
Settings.setData({ zoomFactor: 1 });
|
||||
mainWin.webContents.setZoomFactor(1);
|
||||
}
|
||||
|
||||
export async function createWindows() {
|
||||
const startMinimized = process.argv.includes("--start-minimized");
|
||||
const splash = createSplashWindow(startMinimized);
|
||||
|
@ -453,6 +483,8 @@ export async function createWindows() {
|
|||
mainWin.webContents.on("did-finish-load", () => {
|
||||
splash.destroy();
|
||||
|
||||
mainWin.webContents.setZoomFactor(Settings.store.zoomFactor ?? 1);
|
||||
|
||||
if (!startMinimized) {
|
||||
mainWin!.show();
|
||||
if (State.store.maximized && !isDeckGameMode) mainWin!.maximize();
|
||||
|
@ -470,6 +502,32 @@ export async function createWindows() {
|
|||
mainWin!.maximize();
|
||||
}
|
||||
});
|
||||
|
||||
mainWin.on("focus", () => {
|
||||
globalShortcut.register("CommandOrControl+0", () => {
|
||||
resetZoom();
|
||||
});
|
||||
globalShortcut.register("CommandOrControl+plus", () => {
|
||||
handleZoomIn();
|
||||
});
|
||||
globalShortcut.register("CommandOrControl+=", () => {
|
||||
handleZoomIn();
|
||||
});
|
||||
globalShortcut.register("CommandOrControl+-", () => {
|
||||
handleZoomOut();
|
||||
});
|
||||
globalShortcut.register("CommandOrControl+_", () => {
|
||||
handleZoomOut();
|
||||
});
|
||||
});
|
||||
|
||||
mainWin.on("blur", () => {
|
||||
globalShortcut.unregister("CommandOrControl+0");
|
||||
globalShortcut.unregister("CommandOrControl+plus");
|
||||
globalShortcut.unregister("CommandOrControl+=");
|
||||
globalShortcut.unregister("CommandOrControl+-");
|
||||
globalShortcut.unregister("CommandOrControl+_");
|
||||
});
|
||||
});
|
||||
|
||||
initArRPC();
|
||||
|
|
|
@ -54,7 +54,8 @@ export const VesktopNative = {
|
|||
focus: () => invoke<void>(IpcEvents.FOCUS),
|
||||
close: (key?: string) => invoke<void>(IpcEvents.CLOSE, key),
|
||||
minimize: () => invoke<void>(IpcEvents.MINIMIZE),
|
||||
maximize: () => invoke<void>(IpcEvents.MAXIMIZE)
|
||||
maximize: () => invoke<void>(IpcEvents.MAXIMIZE),
|
||||
zoom: (zoom: number) => invoke<void>(IpcEvents.SET_ZOOM, zoom)
|
||||
},
|
||||
capturer: {
|
||||
getLargeThumbnail: (id: string) => invoke<string>(IpcEvents.CAPTURER_GET_LARGE_THUMBNAIL, id)
|
||||
|
|
|
@ -17,6 +17,10 @@ require(ipcRenderer.sendSync(IpcEvents.GET_VENCORD_PRELOAD_FILE));
|
|||
webFrame.executeJavaScript(ipcRenderer.sendSync(IpcEvents.GET_VENCORD_RENDERER_SCRIPT));
|
||||
webFrame.executeJavaScript(ipcRenderer.sendSync(IpcEvents.GET_RENDERER_SCRIPT));
|
||||
|
||||
ipcRenderer.on("zoomChanged", (event, newZoomFactor) => {
|
||||
window.dispatchEvent(new CustomEvent("zoomChanged", { detail: newZoomFactor }));
|
||||
});
|
||||
|
||||
// #region css
|
||||
const rendererCss = ipcRenderer.sendSync(IpcEvents.GET_RENDERER_CSS_FILE);
|
||||
|
||||
|
|
|
@ -7,7 +7,17 @@
|
|||
import "./settings.css";
|
||||
|
||||
import { Margins } from "@vencord/types/utils";
|
||||
import { Button, Forms, Select, Switch, Text, Toasts, useState } from "@vencord/types/webpack/common";
|
||||
import {
|
||||
Button,
|
||||
Forms,
|
||||
Select,
|
||||
Slider,
|
||||
Switch,
|
||||
Text,
|
||||
Toasts,
|
||||
useEffect,
|
||||
useState
|
||||
} from "@vencord/types/webpack/common";
|
||||
import { setBadge } from "renderer/appBadge";
|
||||
import { useSettings } from "renderer/settings";
|
||||
import { isMac } from "renderer/utils";
|
||||
|
@ -19,6 +29,20 @@ export default function SettingsUi() {
|
|||
|
||||
const { autostart } = VesktopNative;
|
||||
const [autoStartEnabled, setAutoStartEnabled] = useState(autostart.isEnabled());
|
||||
const [zoomFactor, setZoomFactor] = useState(Settings.zoomFactor ?? 1);
|
||||
|
||||
useEffect(() => {
|
||||
const handleZoomChange = event => {
|
||||
console.log("zoom changed", event.detail);
|
||||
setZoomFactor(event.detail);
|
||||
};
|
||||
|
||||
window.addEventListener("zoomChanged", handleZoomChange);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("zoomChanged", handleZoomChange);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const allSwitches: Array<false | [keyof typeof Settings, string, string, boolean?, (() => boolean)?]> = [
|
||||
[
|
||||
|
@ -153,6 +177,27 @@ export default function SettingsUi() {
|
|||
</>
|
||||
)}
|
||||
|
||||
<>
|
||||
<Forms.FormTitle className={Margins.top16 + " " + Margins.bottom8}>Zoom Level</Forms.FormTitle>
|
||||
<Slider
|
||||
className={Margins.top20}
|
||||
initialValue={zoomFactor}
|
||||
defaultValue={1}
|
||||
onValueChange={v => {
|
||||
Settings.zoomFactor = v;
|
||||
VesktopNative.win.zoom(v);
|
||||
setZoomFactor(v);
|
||||
}}
|
||||
minValue={0.5}
|
||||
maxValue={2}
|
||||
markers={[0.5, 0.67, 0.75, 0.8, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2]}
|
||||
stickToMarkers={true}
|
||||
onMarkerRender={v => (v === 1 ? "100" : `${Math.round(v * 100)}`)}
|
||||
></Slider>
|
||||
</>
|
||||
|
||||
<Forms.FormDivider className={Margins.top16 + " " + Margins.bottom16} />
|
||||
|
||||
<Forms.FormTitle>Vencord Location</Forms.FormTitle>
|
||||
<Forms.FormText>
|
||||
Vencord files are loaded from{" "}
|
||||
|
|
|
@ -18,6 +18,7 @@ export const enum IpcEvents {
|
|||
FOCUS = "VCD_FOCUS",
|
||||
MINIMIZE = "VCD_MINIMIZE",
|
||||
MAXIMIZE = "VCD_MAXIMIZE",
|
||||
SET_ZOOM = "VCD_ZOOM",
|
||||
|
||||
SHOW_ITEM_IN_FOLDER = "VCD_SHOW_ITEM_IN_FOLDER",
|
||||
GET_SETTINGS = "VCD_GET_SETTINGS",
|
||||
|
|
1
src/shared/settings.d.ts
vendored
1
src/shared/settings.d.ts
vendored
|
@ -20,6 +20,7 @@ export interface Settings {
|
|||
arRPC?: boolean;
|
||||
appBadge?: boolean;
|
||||
disableMinSize?: boolean;
|
||||
zoomFactor?: number;
|
||||
|
||||
/** @deprecated use customTitleBar */
|
||||
discordWindowsTitleBar?: boolean;
|
||||
|
|
Loading…
Reference in a new issue