diff --git a/app/scripts/comp/launcher/launcher-electron.ts b/app/scripts/comp/launcher/launcher-electron.ts index 48099351..4c73c81e 100644 --- a/app/scripts/comp/launcher/launcher-electron.ts +++ b/app/scripts/comp/launcher/launcher-electron.ts @@ -32,6 +32,7 @@ export class LauncherElectron { name = 'electron'; version = process.versions.electron; pendingUpdateFile?: string; + mainWindowMaximized?: boolean; constructor() { this.ipcRenderer.on('log', (e, name, level, ...args) => { diff --git a/app/scripts/ui-old/titlebar-view.js b/app/scripts/ui-old/titlebar-view.js deleted file mode 100644 index 72b379e8..00000000 --- a/app/scripts/ui-old/titlebar-view.js +++ /dev/null @@ -1,62 +0,0 @@ -import { View } from 'framework/views/view'; -import { Events } from 'framework/events'; -import { Launcher } from 'comp/launcher'; -import { KeeWebLogo } from 'const/inline-images'; -import template from 'templates/titlebar.hbs'; - -class TitlebarView extends View { - parent = '.app__titlebar'; - - template = template; - - events = { - 'click .titlebar__minimize': 'clickMinimize', - 'click .titlebar__maximize': 'clickMaximize', - 'click .titlebar__restore': 'clickRestore', - 'click .titlebar__close': 'clickClose' - }; - - constructor() { - super(); - - this.maximized = Launcher.mainWindowMaximized(); - - this.listenTo(Events, 'app-maximized', this.appMaximized); - this.listenTo(Events, 'app-unmaximized', this.appUnmaximized); - } - - render() { - super.render({ - maximized: this.maximized, - iconSrc: KeeWebLogo - }); - } - - clickMinimize() { - Launcher.minimizeMainWindow(); - } - - clickMaximize() { - Launcher.maximizeMainWindow(); - } - - clickRestore() { - Launcher.restoreMainWindow(); - } - - clickClose() { - window.close(); - } - - appMaximized() { - this.maximized = true; - this.render(); - } - - appUnmaximized() { - this.maximized = false; - this.render(); - } -} - -export { TitlebarView }; diff --git a/app/scripts/ui/titlebar.ts b/app/scripts/ui/titlebar.ts new file mode 100644 index 00000000..9981b1e4 --- /dev/null +++ b/app/scripts/ui/titlebar.ts @@ -0,0 +1,28 @@ +import { h, FunctionComponent } from 'preact'; +import { TitlebarView } from 'views/titlebar-view'; +import { Launcher } from 'comp/launcher'; +import { Events } from 'util/events'; +import { useState } from 'preact/hooks'; + +export const Titlebar: FunctionComponent = () => { + const [maximized, setMaximized] = useState(Launcher?.mainWindowMaximized ?? false); + + Events.on('app-maximized', () => setMaximized(true)); + Events.on('app-minimized', () => setMaximized(false)); + + const onMinimize = () => Launcher?.ipcRenderer.invoke('minimize-main-window'); + + const onRestore = () => Launcher?.ipcRenderer.invoke('restore-main-window'); + + const onMaximize = () => Launcher?.ipcRenderer.invoke('maximize-main-window'); + + const onClose = () => window.close(); + + return h(TitlebarView, { + maximized, + onMinimize, + onRestore, + onMaximize, + onClose + }); +}; diff --git a/app/scripts/views/app-view.tsx b/app/scripts/views/app-view.tsx index 7ec514c9..cc5634e4 100644 --- a/app/scripts/views/app-view.tsx +++ b/app/scripts/views/app-view.tsx @@ -1,6 +1,7 @@ import { FunctionComponent } from 'preact'; import { Locale } from 'util/locale'; import { AppSettingsTitlebarStyle } from 'models/app-settings'; +import { Titlebar } from 'ui/titlebar'; export const AppView: FunctionComponent<{ beta: boolean; @@ -15,7 +16,7 @@ export const AppView: FunctionComponent<{ ) : null} {customTitlebar ? ( -
+