From 1066a8ca748c4c02531c81794a692201a76a92b1 Mon Sep 17 00:00:00 2001 From: Peng Xiao Date: Mon, 4 Sep 2023 17:01:31 +0800 Subject: [PATCH] fix: style fixes to windows app control buttons (#4150) --- .../src/components/pure/header/style.css.tsx | 1 + .../pure/header/windows-app-controls.tsx | 81 ++++++++++++++++++- apps/electron/src/main/main-window.ts | 15 ++++ apps/electron/src/main/ui/events.ts | 6 ++ apps/electron/src/main/ui/handlers.ts | 6 +- apps/electron/src/main/ui/subject.ts | 1 + packages/infra/src/type.ts | 1 + 7 files changed, 106 insertions(+), 5 deletions(-) diff --git a/apps/core/src/components/pure/header/style.css.tsx b/apps/core/src/components/pure/header/style.css.tsx index 8a90c0116d..a3ffcb88af 100644 --- a/apps/core/src/components/pure/header/style.css.tsx +++ b/apps/core/src/components/pure/header/style.css.tsx @@ -97,6 +97,7 @@ export const windowAppControl = style({ alignItems: 'center', justifyContent: 'center', borderRadius: '0', + color: 'var(--affine-icon-color)', selectors: { '&[data-type="close"]': { width: '56px', diff --git a/apps/core/src/components/pure/header/windows-app-controls.tsx b/apps/core/src/components/pure/header/windows-app-controls.tsx index 6a6ea0ca52..24c088b27d 100644 --- a/apps/core/src/components/pure/header/windows-app-controls.tsx +++ b/apps/core/src/components/pure/header/windows-app-controls.tsx @@ -1,8 +1,79 @@ -import { CloseIcon, MinusIcon, RoundedRectangleIcon } from '@blocksuite/icons'; +import { useAtomValue } from 'jotai'; +import { atomWithObservable } from 'jotai/utils'; import { useCallback } from 'react'; +import { Observable } from 'rxjs'; import * as style from './style.css'; +const maximizedAtom = atomWithObservable(() => { + return new Observable(subscriber => { + subscriber.next(false); + return window?.events.ui.onMaximized(maximized => { + return subscriber.next(maximized); + }); + }); +}); + +const minimizeSVG = ( + + + +); + +const closeSVG = ( + + + +); + +const maximizeSVG = ( + + + +); + +const unmaximizedSVG = ( + + + +); + export const WindowsAppControls = () => { const handleMinimizeApp = useCallback(() => { window.apis?.ui.handleMinimizeApp().catch(err => { @@ -20,6 +91,8 @@ export const WindowsAppControls = () => { }); }, []); + const maximized = useAtomValue(maximizedAtom); + return (
{ className={style.windowAppControl} onClick={handleMinimizeApp} > - + {minimizeSVG}
); diff --git a/apps/electron/src/main/main-window.ts b/apps/electron/src/main/main-window.ts index 6b72dd694f..5db24a74d7 100644 --- a/apps/electron/src/main/main-window.ts +++ b/apps/electron/src/main/main-window.ts @@ -8,6 +8,7 @@ import { isMacOS, isWindows } from '../shared/utils'; import { getExposedMeta } from './exposed'; import { ensureHelperProcess } from './helper-process'; import { logger } from './logger'; +import { uiSubjects } from './ui'; import { parseCookie } from './utils'; const IS_DEV: boolean = @@ -111,6 +112,20 @@ async function createWindow() { const size = browserWindow.getSize(); browserWindow.setSize(size[0] + 1, size[1] + 1); browserWindow.setSize(size[0], size[1]); + uiSubjects.onMaximized.next(false); + }); + + browserWindow.on('maximize', () => { + uiSubjects.onMaximized.next(true); + }); + + // full-screen == maximized in UI on windows + browserWindow.on('enter-full-screen', () => { + uiSubjects.onMaximized.next(true); + }); + + browserWindow.on('unmaximize', () => { + uiSubjects.onMaximized.next(false); }); /** diff --git a/apps/electron/src/main/ui/events.ts b/apps/electron/src/main/ui/events.ts index 64f3906df4..bc147dcc35 100644 --- a/apps/electron/src/main/ui/events.ts +++ b/apps/electron/src/main/ui/events.ts @@ -19,4 +19,10 @@ export const uiEvents = { sub.unsubscribe(); }; }, + onMaximized: (fn: (maximized: boolean) => void) => { + const sub = uiSubjects.onMaximized.subscribe(fn); + return () => { + sub.unsubscribe(); + }; + }, } satisfies Record; diff --git a/apps/electron/src/main/ui/handlers.ts b/apps/electron/src/main/ui/handlers.ts index d84a927d70..90c5f60619 100644 --- a/apps/electron/src/main/ui/handlers.ts +++ b/apps/electron/src/main/ui/handlers.ts @@ -26,7 +26,11 @@ export const uiHandlers = { handleMaximizeApp: async () => { const windows = BrowserWindow.getAllWindows(); windows.forEach(w => { - if (w.isMaximized()) { + // allow unmaximize when in full screen mode + if (w.isFullScreen()) { + w.setFullScreen(false); + w.unmaximize(); + } else if (w.isMaximized()) { w.unmaximize(); } else { w.maximize(); diff --git a/apps/electron/src/main/ui/subject.ts b/apps/electron/src/main/ui/subject.ts index dcc8895481..3e42ef9e5b 100644 --- a/apps/electron/src/main/ui/subject.ts +++ b/apps/electron/src/main/ui/subject.ts @@ -3,4 +3,5 @@ import { Subject } from 'rxjs'; export const uiSubjects = { onStartLogin: new Subject<{ email?: string }>(), onFinishLogin: new Subject<{ success: boolean; email?: string }>(), + onMaximized: new Subject(), }; diff --git a/packages/infra/src/type.ts b/packages/infra/src/type.ts index 8067d68183..53563edbda 100644 --- a/packages/infra/src/type.ts +++ b/packages/infra/src/type.ts @@ -270,6 +270,7 @@ export interface UIEvents { onFinishLogin: ( fn: (result: { success: boolean; email?: string }) => void ) => () => void; + onMaximized: (fn: (maximized: boolean) => void) => () => void; } export interface EventMap {