enhance: introduce exit full-screen button

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

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

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?)

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

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)]])]))

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%"

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

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