({
useNavigate: () => mockNavigate,
}));
+global.ResizeObserver = require('resize-observer-polyfill');
+
describe('routes/components/settings/SettingsFooter.tsx', () => {
afterEach(() => {
jest.clearAllMocks();
diff --git a/src/context/App.test.tsx b/src/context/App.test.tsx
index 121fdc68e..0abc4f277 100644
--- a/src/context/App.test.tsx
+++ b/src/context/App.test.tsx
@@ -383,6 +383,7 @@ describe('context/App.tsx', () => {
keyboardShortcut: true,
groupBy: 'REPOSITORY',
filterReasons: [],
+ zoomPercentage: 100,
} as SettingsState,
});
});
@@ -438,6 +439,7 @@ describe('context/App.tsx', () => {
keyboardShortcut: true,
groupBy: 'REPOSITORY',
filterReasons: [],
+ zoomPercentage: 100,
} as SettingsState,
});
});
diff --git a/src/context/App.tsx b/src/context/App.tsx
index 36ea47424..adbcf1e5b 100644
--- a/src/context/App.tsx
+++ b/src/context/App.tsx
@@ -1,3 +1,4 @@
+import { webFrame } from 'electron';
import {
type ReactNode,
createContext,
@@ -42,6 +43,7 @@ import Constants from '../utils/constants';
import { getNotificationCount } from '../utils/notifications';
import { clearState, loadState, saveState } from '../utils/storage';
import { setTheme } from '../utils/theme';
+import { zoomPercentageToLevel } from '../utils/zoom';
const defaultAuth: AuthState = {
accounts: [],
@@ -62,6 +64,7 @@ export const defaultSettings: SettingsState = {
showNotificationsCountInTray: false,
openAtStartup: false,
theme: Theme.SYSTEM,
+ zoomPercentage: 100,
detailedNotifications: true,
markAsDoneOnOpen: false,
showAccountHostname: false,
@@ -244,6 +247,9 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
if (existing.settings) {
setKeyboardShortcut(existing.settings.keyboardShortcut);
setSettings({ ...defaultSettings, ...existing.settings });
+ webFrame.setZoomLevel(
+ zoomPercentageToLevel(existing.settings.zoomPercentage),
+ );
return existing.settings;
}
}, []);
diff --git a/src/electron/main.js b/src/electron/main.js
index 0d04fcf23..8a290881c 100644
--- a/src/electron/main.js
+++ b/src/electron/main.js
@@ -71,9 +71,6 @@ app.whenReady().then(async () => {
mb.tray.popUpContextMenu(contextMenu, { x: bounds.x, y: bounds.y });
});
- // Force the window to retrieve its previous zoom factor
- mb.window.webContents.setZoomFactor(mb.window.webContents.getZoomFactor());
-
// Custom key events
mb.window.webContents.on('before-input-event', (event, input) => {
if (input.key === 'Escape') {
diff --git a/src/routes/Settings.test.tsx b/src/routes/Settings.test.tsx
index 6b645ae85..23aaf2022 100644
--- a/src/routes/Settings.test.tsx
+++ b/src/routes/Settings.test.tsx
@@ -5,6 +5,8 @@ import { mockPlatform } from '../__mocks__/utils';
import { AppContext } from '../context/App';
import { SettingsRoute } from './Settings';
+global.ResizeObserver = require('resize-observer-polyfill');
+
const mockNavigate = jest.fn();
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
diff --git a/src/routes/__snapshots__/Settings.test.tsx.snap b/src/routes/__snapshots__/Settings.test.tsx.snap
index 9f2426b86..c04f6dbc1 100644
--- a/src/routes/__snapshots__/Settings.test.tsx.snap
+++ b/src/routes/__snapshots__/Settings.test.tsx.snap
@@ -154,6 +154,40 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
+
+
+
+
+ 100
+ %
+
+
+
+
diff --git a/src/types.ts b/src/types.ts
index f60c03f7d..fd6f0822b 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -51,7 +51,7 @@ export interface Account {
user: GitifyUser | null;
}
-export type SettingsValue = boolean | Theme | GroupBy | Reason[];
+export type SettingsValue = boolean | Theme | GroupBy | Reason[] | number;
export type SettingsState = AppearanceSettingsState &
NotificationSettingsState &
@@ -60,6 +60,7 @@ export type SettingsState = AppearanceSettingsState &
interface AppearanceSettingsState {
theme: Theme;
+ zoomPercentage: number;
detailedNotifications: boolean;
showAccountHostname: boolean;
showPills: boolean;
diff --git a/src/utils/zoom.test.ts b/src/utils/zoom.test.ts
new file mode 100644
index 000000000..84220c2aa
--- /dev/null
+++ b/src/utils/zoom.test.ts
@@ -0,0 +1,21 @@
+import { zoomLevelToPercentage, zoomPercentageToLevel } from './zoom';
+
+describe('utils/zoom.ts', () => {
+ it('should convert percentage to zoom level', () => {
+ expect(zoomPercentageToLevel(100)).toBe(0);
+ expect(zoomPercentageToLevel(50)).toBe(-1);
+ expect(zoomPercentageToLevel(0)).toBe(-2);
+ expect(zoomPercentageToLevel(150)).toBe(1);
+
+ expect(zoomPercentageToLevel(undefined)).toBe(0);
+ });
+
+ it('should convert zoom level to percentage', () => {
+ expect(zoomLevelToPercentage(0)).toBe(100);
+ expect(zoomLevelToPercentage(-1)).toBe(50);
+ expect(zoomLevelToPercentage(-2)).toBe(0);
+ expect(zoomLevelToPercentage(1)).toBe(150);
+
+ expect(zoomLevelToPercentage(undefined)).toBe(100);
+ });
+});
diff --git a/src/utils/zoom.ts b/src/utils/zoom.ts
new file mode 100644
index 000000000..17bdbf8ec
--- /dev/null
+++ b/src/utils/zoom.ts
@@ -0,0 +1,22 @@
+const RECOMMENDED = 100;
+const MULTIPLIER = 2;
+
+/**
+ * Zoom percentage to level. 100% is the recommended zoom level (0). If somehow the percentage is not set, it will return 0, the default zoom level.
+ * @param percentage 0-150
+ * @returns zoomLevel -2 to 0.5
+ */
+export const zoomPercentageToLevel = (percentage: number): number => {
+ if (typeof percentage === 'undefined') return 0;
+ return ((percentage - RECOMMENDED) * MULTIPLIER) / 100;
+};
+
+/**
+ * Zoom level to percentage. 0 is the recommended zoom level (100%). If somehow the zoom level is not set, it will return 100, the default zoom percentage.
+ * @param zoom -2 to 0.5
+ * @returns percentage 0-150
+ */
+export const zoomLevelToPercentage = (zoom: number): number => {
+ if (typeof zoom === 'undefined') return 100;
+ return (zoom / MULTIPLIER) * 100 + RECOMMENDED;
+};