Add support for win32 custom titleBar

src/electron/electron/handler.cljs

@@ -629,6 +629,17 @@
   (when-let [web-content (.-webContents win)]
     (.reload web-content)))
 
+(defmethod handle :window-minimize [^js win]
+  (.minimize win))
+
+(defmethod handle :window-maximize-restore [^js win]
+  (if (.isMaximized win)
+    (.unmaximize win)
+    (.maximize win)))
+
+(defmethod handle :window-close [^js win]
+  (.close win))
+
 ;;;;;;;;;;;;;;;;;;;;;;;
 ;; file-sync-rs-apis ;;
 ;;;;;;;;;;;;;;;;;;;;;;;

src/electron/electron/window.cljs

@@ -187,7 +187,9 @@
 
       (doto win
         (.on "enter-full-screen" #(.send web-contents "full-screen" "enter"))
-        (.on "leave-full-screen" #(.send web-contents "full-screen" "leave")))
+        (.on "leave-full-screen" #(.send web-contents "full-screen" "leave"))
+        (.on "maximize" #(if win32? (.send web-contents "maximize" true) ()))
+        (.on "unmaximize" #(if win32? (.send web-contents "maximize" false) ())))
 
       ;; clear
       (fn []

src/main/frontend/components/container.cljs

@@ -12,6 +12,7 @@
             [frontend.components.svg :as svg]
             [frontend.components.theme :as theme]
             [frontend.components.widgets :as widgets]
+            [frontend.components.win32-title-bar :as win32-title-bar]
             [frontend.config :as config]
             [frontend.context.i18n :refer [t]]
             [frontend.db :as db]
@@ -33,14 +34,14 @@
             [frontend.modules.shortcut.data-helper :as shortcut-dh]
             [frontend.state :as state]
             [frontend.ui :as ui]
-            [frontend.util :as util]
+            [frontend.util :as util :refer [win32?]]
             [frontend.util.cursor :as cursor]
             [goog.dom :as gdom]
             [goog.object :as gobj]
+            [logseq.common.path :as path]
             [react-draggable]
             [reitit.frontend.easy :as rfe]
-            [rum.core :as rum]
-            [logseq.common.path :as path]))
+            [rum.core :as rum]))
 
 (rum/defc nav-content-item < rum/reactive
   [name {:keys [class]} child]
@@ -284,8 +285,8 @@
                               (when (< touching-x-offset 0)
                                 (max touching-x-offset (- 0 (:width el-rect))))))
         offset-ratio (and (number? touching-x-offset)
-                            (some->> (:width el-rect)
-                                     (/ touching-x-offset)))]
+                          (some->> (:width el-rect)
+                                   (/ touching-x-offset)))]
 
     (rum/use-effect!
      #(js/setTimeout
@@ -725,6 +726,7 @@
         onboarding-state (state/sub :file-sync/onboarding-state)
         right-sidebar-blocks (state/sub-right-sidebar-blocks)
         route-name (get-in route-match [:data :name])
+        fullscreen? (state/sub :win32-title-bar/window-is-fullscreen?)
         margin-less-pages? (boolean (#{:graph :whiteboard} route-name))
         db-restoring? (state/sub :db/restoring?)
         indexeddb-support? (state/sub :indexeddb/support?)
@@ -771,6 +773,12 @@
       [:div.#app-container
        [:div#left-container
         {:class (if (state/sub :ui/sidebar-open?) "overflow-hidden" "w-full")}
+
+        (if win32?
+          (if fullscreen?
+            ()
+            (win32-title-bar/container)) ())
+
         (header/header {:open-fn        open-fn
                         :light?         light?
                         :current-repo   current-repo

src/main/frontend/components/container.css

@@ -93,6 +93,7 @@
     height: calc(100vh - var(--ls-headbar-inner-top-padding) - 50px);
     margin-top: 30px;
     width: 100%;
+    padding-top: var(--ls-win32-title-bar-height);
 
     > .fake-bar {
       @apply w-full px-5 pt-1 sm:hidden;

src/main/frontend/components/header.cljs

@@ -29,7 +29,7 @@
   []
   (ui/with-shortcut :go/home "left"
     [:button.button.icon.inline
-     {:title "Home"
+     {:title (t :home)
       :on-click #(do
                    (when (mobile-util/native-iphone?)
                      (state/set-left-sidebar-open! false))

src/main/frontend/components/win32_title_bar.cljs

@@ -1,42 +1,50 @@
 (ns frontend.components.win32-title-bar
-  (:require [rum.core :as rum]
+  (:require [electron.ipc :as ipc]
             [frontend.components.svg :as svg]
-            [frontend.state :as state]))
-
-(rum/defc container
-  []
-  [:div.cp__win32-title-bar#win32-title-bar
-    {}
-    [:div.left-side
-      {}
-      [:div.logo
-        {}
-        (svg/logo)]
-      [:div.title
-        {}
-        "Logseq"]]
-    [:div.right-side
-      {}
-      [:div.minimize
-        {:on-click ()}
-        (svg/chrome-minimize)]
-      [:div.max-restore
-        {:on-click ()}
-        (if (state/sub :win32-title-bar/window-is-maximized?)
-          (svg/chrome-restore)
-          (svg/chrome-maximize))]
-      [:div.close
-        {:on-click ()}
-        (svg/chrome-close)]]])
+            [frontend.state :as state]
+            [goog.string :as gstring]
+            [rum.core :as rum]))
 
 (defn minimize
   []
-  ())
+  (ipc/ipc "window-minimize"))
 
 (defn max-restore
   []
-  ())
+  (ipc/ipc "window-maximize-restore"))
 
 (defn close
   []
-  ())
+  (ipc/ipc "window-close"))
+
+(rum/defc container < rum/reactive
+  []
+  (let [maximized?  (state/sub :win32-title-bar/window-is-maximized?)]
+    [:div.cp__win32-title-bar#win32-title-bar
+     {}
+     [:div.left-side
+      {}
+      [:div.logo
+       {}
+       (svg/logo)]]
+     [:div.middle
+      {}
+      [:span#win32-title-bar-page-title
+       {}
+       (.-title js/document)]
+      [:span#win32-title-bar-logseq-text
+       {}
+       (gstring/unescapeEntities "&nbsp;") "-" (gstring/unescapeEntities "&nbsp;") "Logseq"]]
+     [:div.right-side
+      {}
+      [:div.minimize
+       {:on-click minimize}
+       (svg/chrome-minimize)]
+      [:div.max-restore
+       {:on-click max-restore}
+       (if maximized?
+         (svg/chrome-restore)
+         (svg/chrome-maximize))]
+      [:div.close
+       {:on-click close}
+       (svg/chrome-close)]]]))

src/main/frontend/components/win32_title_bar.css

@@ -1,37 +1,57 @@
-.cp__win32-title-bar {
+.cp__win32-title-bar:not(:fullscreen) {
   z-index: var(--ls-z-index-level-5);
   position: fixed;
   left: 0;
   right: 0;
   top: 0;
   height: var(--ls-win32-title-bar-height);
+  background-color: var(--ls-secondary-background-color);
   display: flex;
   justify-content: space-between;
   user-select: none;
   -webkit-app-region: drag;
 
-  > .left-side {
+  >.left-side {
     display: flex;
-    align-items: flex-end;
+    align-items: center;
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+    width: 28px;
 
-    > .logo {
-      width: 50px;
+    >.logo {
+      width: 24px;
       display: flex;
-      align-items: flex-end;
+      align-items: center;
       justify-content: center;
+      padding-left: 4px;
     }
+  }
+
+  >.middle {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    overflow: hidden;
 
-    > .title {
-      font-size: 12px;
+    >span#win32-title-bar-page-title {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      min-width: 0;
+    }
+
+    >span#win32-title-bar-logseq-text {
+      flex-shrink: 0;
+      flex-wrap: nowrap;
     }
   }
 
-  > .right-side {
+  >.right-side {
     display: flex;
     width: 138px;
     -webkit-app-region: no-drag;
 
-    > * {
+    >* {
       color: var(--ls-primary-text-color);
       width: 100%;
       display: flex;
@@ -47,7 +67,7 @@
       }
     }
 
-    > .close {
+    >.close {
       &:hover {
         color: #fff;
         background: #c42b1c;
@@ -61,6 +81,6 @@
   }
 }
 
-.is-win32.is-electron {
+.is-win32.is-electron:not(.is-fullscreen) {
   --ls-win32-title-bar-height: 36px;
-}
+}

src/main/frontend/dicts.cljc

@@ -256,7 +256,11 @@
         :whiteboard/link-whiteboard-or-block "Link whiteboard/page/block"
         :page-search "Search in the current page"
         :graph-search "Search graph"
+        :home "Home"
+        :page "Page"
         :new-page "New page"
+        :whiteboard "Whiteboard"
+        :whiteboards "Whiteboards"
         :new-whiteboard "New whiteboard"
         :new-graph "Add new graph"
         :graph "Graph"
@@ -2289,7 +2293,11 @@
         :search "Buscar o Crear Página"
         :page-search "Buscar en la página actual"
         :graph-search "Buscar grafo"
+        :home "Inicio"
+        :page "Página"
         :new-page "Nueva página"
+        :whiteboard "Pizarra"
+        :whiteboards "Pizarras"
         :new-graph "Añadir nuevo grafo"
         :graph "Grafo"
         :graph/persist "Logseq está sincronizando su estado interno, por favor espere unos segundos."

src/main/frontend/handler/route.cljs

@@ -98,7 +98,9 @@
   [name path-params]
   (case name
     :home
-    "Logseq"
+    (t :home)
+    :whiteboards
+    (t :whiteboards)
     :repos
     "Repos"
     :repo-add
@@ -129,6 +131,15 @@
         (let [page (db/pull [:block/name (util/page-name-sanity-lc name)])]
           (or (util/get-page-original-name page)
               "Logseq"))))
+    :whiteboard
+    (let [name (:name path-params)
+          block? (util/uuid-string? name)]
+      (str
+       (if block?
+         (t :untitled)
+         (let [page (db/pull [:block/name (util/page-name-sanity-lc name)])]
+           (or (util/get-page-original-name page)
+               "Logseq"))) " - " (t :whiteboard)))
     :tag
     (str "#"  (:name path-params))
     :diff

src/main/frontend/state.cljs

@@ -280,8 +280,8 @@
      :history/page-only-mode?               false
 
      ;; win32 title bar
-     ;; TODO: get window info from ipc
      :win32-title-bar/window-is-maximized?  false
+     :win32-title-bar/window-is-fullscreen? false
      ;; db tx-id -> editor cursor
      :history/tx->editor-cursor             {}})))
 

src/main/frontend/ui.cljs

@@ -367,7 +367,9 @@
       (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")]]]
+               ["full-screen" #((js-invoke cl (if (= % "enter") "add" "remove") "is-fullscreen")
+                                (state/set-state! :win32-title-bar/window-is-fullscreen? (if (= % "enter") true false)))]
+               ["maximize" #(state/set-state! :win32-title-bar/window-is-maximized? %)]]]
         (.on js/window.apis event function))
 
       (p/then (ipc/ipc :getAppBaseInfo) #(let [{:keys [isFullScreen]} (js->clj % :keywordize-keys true)]