titlebar

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) => {

app/scripts/ui-old/titlebar-view.js

@@ -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 };

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
+    });
+};

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<{
                 </div>
             ) : null}
             {customTitlebar ? (
-                <div class="app__titlebar" />
+                <Titlebar />
             ) : titlebarStyle === 'hidden' ? (
                 <div class="app__titlebar-drag" />
             ) : null}

app/scripts/views/titlebar-view.tsx

@@ -0,0 +1,28 @@
+import { FunctionComponent } from 'preact';
+import { KeeWebLogo } from 'const/inline-images';
+
+export const TitlebarView: FunctionComponent<{
+    maximized: boolean;
+    onMinimize: () => void;
+    onRestore: () => void;
+    onMaximize: () => void;
+    onClose: () => void;
+}> = ({ maximized, onMinimize, onRestore, onMaximize, onClose }) => {
+    return (
+        <div class="titlebar">
+            <div class="titlebar__icon">
+                <img src={KeeWebLogo} alt="logo" class="titlebar__logo" />
+            </div>
+
+            <div class="titlebar__grow" />
+
+            <i class="fa fa-titlebar-minimize titlebar__minimize" onClick={onMinimize} />
+            {maximized ? (
+                <i class="fa fa-titlebar-restore titlebar__restore" onClick={onRestore} />
+            ) : (
+                <i class="fa fa-titlebar-maximize titlebar__maximize" onClick={onMaximize} />
+            )}
+            <i class="fa fa-titlebar-close titlebar__close" onClick={onClose} />
+        </div>
+    );
+};

app/templates/titlebar.hbs

@@ -1,15 +0,0 @@
-<div class="titlebar">
-    <div class="titlebar__icon">
-        <img src="{{iconSrc}}" alt="logo" class="titlebar__logo" />
-    </div>
-
-    <div class="titlebar__grow"></div>
-
-    <i class="fa fa-titlebar-minimize titlebar__minimize"></i>
-    {{#if maximized}}
-        <i class="fa fa-titlebar-restore titlebar__restore"></i>
-    {{else}}
-        <i class="fa fa-titlebar-maximize titlebar__maximize"></i>
-    {{/if}}
-    <i class="fa fa-titlebar-close titlebar__close"></i>
-</div>

desktop/desktop-ipc.d.ts

@@ -116,4 +116,7 @@ export interface DesktopIpcMainCalls {
     'kill-process': (name: string) => void;
     'http-request': (arg: HttpRequestConfig) => HttpResponse;
     'show-main-window': () => void;
+    'minimize-main-window': () => void;
+    'maximize-main-window': () => void;
+    'restore-main-window': () => void;
 }