From 675639576317fbeeb0d0c241a52c6e3a1ae7d308 Mon Sep 17 00:00:00 2001 From: Konstantinos Kaloutas Date: Fri, 26 May 2023 13:25:41 +0300 Subject: [PATCH] enhance: introduce exit full-screen button --- e2e-tests/window.spec.ts | 8 +++- src/electron/electron/handler.cljs | 3 ++ src/main/frontend/components/container.cljs | 3 +- src/main/frontend/components/container.css | 8 ++++ .../frontend/components/window_controls.cljs | 44 ++++++++++++------- src/main/frontend/state.cljs | 1 - src/main/frontend/ui.cljs | 4 +- src/resources/dicts/en.edn | 1 + 8 files changed, 49 insertions(+), 23 deletions(-) diff --git a/e2e-tests/window.spec.ts b/e2e-tests/window.spec.ts index 97eb50f7ff..3e9adc3d64 100644 --- a/e2e-tests/window.spec.ts +++ b/e2e-tests/window.spec.ts @@ -23,8 +23,12 @@ if (!IsMac) { // Keyboard press F11 won't work, probably because it's a chromium shortcut (not a document event) await page.evaluate(`window.document.body.requestFullscreen()`) - await expect(page.locator('.window-controls')).toHaveCount(0) - await page.evaluate(`window.document.exitFullscreen()`) + await expect(page.locator('.window-controls .maximize-toggle')).toHaveCount(0) }) + test('window controls should be visible when we exit fullscreen mode', async ({ page }) => { + await page.click('.window-controls .fullscreen-toggle') + + await expect(page.locator('.window-controls')).toHaveCount(1) + }) } diff --git a/src/electron/electron/handler.cljs b/src/electron/electron/handler.cljs index 805d15c7fb..68410b4b1d 100644 --- a/src/electron/electron/handler.cljs +++ b/src/electron/electron/handler.cljs @@ -608,6 +608,9 @@ (.unmaximize win) (.maximize win))) +(defmethod handle :window-toggle-fullscreen [^js win] + (.setFullScreen win (not (.isFullScreen win)))) + (defmethod handle :window-close [^js win] (.close win)) diff --git a/src/main/frontend/components/container.cljs b/src/main/frontend/components/container.cljs index 6598128efb..c36a996a9e 100644 --- a/src/main/frontend/components/container.cljs +++ b/src/main/frontend/components/container.cljs @@ -731,9 +731,8 @@ indexeddb-support? (state/sub :indexeddb/support?) page? (= :page route-name) home? (= :home route-name) - fullscreen? (state/sub :electron/window-fullscreen?) native-titlebar? (state/sub [:electron/user-cfgs :window/native-titlebar?]) - window-controls? (and (util/electron?) (not util/mac?) (not fullscreen?) (not native-titlebar?)) + window-controls? (and (util/electron?) (not util/mac?) (not native-titlebar?)) edit? (:editor/editing? @state/state) default-home (get-default-home-if-valid) logged? (user-handler/logged-in?) diff --git a/src/main/frontend/components/container.css b/src/main/frontend/components/container.css index 94c64e012a..ed8d157ca0 100644 --- a/src/main/frontend/components/container.css +++ b/src/main/frontend/components/container.css @@ -455,12 +455,20 @@ &.ls-right-sidebar-open { .cp__right-sidebar-topbar { margin-right: 144px; + + .is-fullscreen & { + margin-right: 48px; + } } } &:not(.ls-right-sidebar-open) { .cp__header > .r { margin-right: 144px; + + .is-fullscreen & { + margin-right: 48px; + } } } } diff --git a/src/main/frontend/components/window_controls.cljs b/src/main/frontend/components/window_controls.cljs index ba2d97de0b..8506dc8f3e 100644 --- a/src/main/frontend/components/window_controls.cljs +++ b/src/main/frontend/components/window_controls.cljs @@ -3,6 +3,7 @@ [frontend.components.svg :as svg] [frontend.context.i18n :refer [t]] [frontend.state :as state] + [frontend.ui :as ui] [rum.core :as rum])) (defn minimize @@ -17,24 +18,35 @@ [] (ipc/ipc "window-close")) +(defn toggle-fullscreen + [] + (ipc/ipc "window-toggle-fullscreen")) + (rum/defc container < rum/reactive [] - (let [maximized? (state/sub :electron/window-maximized?)] + (let [maximized? (state/sub :electron/window-maximized?) + fullscreen? (state/sub :electron/window-fullscreen?)] [:div.window-controls.flex - [:button.button.icon.minimize - {:title (t :window/minimize) - :on-click minimize} - (svg/window-minimize)] + (if fullscreen? + [:button.button.icon.fullscreen-toggle + {:title (t :window/exit-fullscreen) + :on-click toggle-fullscreen} + (ui/icon "arrows-minimize")] + [:<> + [:button.button.icon.minimize + {:title (t :window/minimize) + :on-click minimize} + (svg/window-minimize)] - [:button.button.icon.maximize-toggle - {:title (if maximized? (t :window/restore) (t :window/maximize)) - :class (if maximized? "restore" "maximize") - :on-click toggle-maximized} - (if maximized? - (svg/window-restore) - (svg/window-maximize))] + [:button.button.icon.maximize-toggle + {:title (if maximized? (t :window/restore) (t :window/maximize)) + :class (if maximized? "restore" "maximize") + :on-click toggle-maximized} + (if maximized? + (svg/window-restore) + (svg/window-maximize))] - [:button.button.icon.close - {:title (t :window/close) - :on-click close} - (svg/window-close)]])) + [:button.button.icon.close + {:title (t :window/close) + :on-click close} + (svg/window-close)]])])) diff --git a/src/main/frontend/state.cljs b/src/main/frontend/state.cljs index 0245283b81..f87c3c2982 100644 --- a/src/main/frontend/state.cljs +++ b/src/main/frontend/state.cljs @@ -73,7 +73,6 @@ :ui/navigation-item-collapsed? {} ;; right sidebar - :ui/fullscreen? false :ui/settings-open? false :ui/sidebar-open? false :ui/sidebar-width "40%" diff --git a/src/main/frontend/ui.cljs b/src/main/frontend/ui.cljs index a20dd83ada..592299481a 100644 --- a/src/main/frontend/ui.cljs +++ b/src/main/frontend/ui.cljs @@ -367,8 +367,8 @@ (doseq [[event function] [["persist-zoom-level" #(storage/set :zoom-level %)] ["restore-zoom-level" #(when-let [zoom-level (storage/get :zoom-level)] (js/window.apis.setZoomLevel zoom-level))] - ["full-screen" #((js-invoke cl (if (= % "enter") "add" "remove") "is-fullscreen") - (state/set-state! :electron/window-fullscreen? (= % "enter")))] + ["full-screen" #(do (js-invoke cl (if (= % "enter") "add" "remove") "is-fullscreen") + (state/set-state! :electron/window-fullscreen? (= % "enter")))] ["maximize" #(state/set-state! :electron/window-maximized? %)]]] (.on js/window.apis event function)) diff --git a/src/resources/dicts/en.edn b/src/resources/dicts/en.edn index 36b4e61905..bb832f3b6b 100644 --- a/src/resources/dicts/en.edn +++ b/src/resources/dicts/en.edn @@ -386,6 +386,7 @@ :window/maximize "Maximize" :window/restore "Restore" :window/close "Close" + :window/exit-fullscreen "Exit full screen" ;; Commands are nested for now to stay in sync with the shortcuts system. ;; Other languages should not nest keys under :commands