enhance disabled state of menubar items

Author: sprocketc

src/renderer/document/subs.cljs

@@ -8,18 +8,18 @@
  ::recent
  :-> :recent)
 
+(rf/reg-sub
+ ::documents?
+ :<- [:documents]
+ (fn [documents _]
+   (seq documents)))
+
 (rf/reg-sub
  ::recent?
  :<- [::recent]
  (fn [recent _]
    (seq recent)))
 
-(rf/reg-sub
- ::recent-disabled?
- :<- [::recent?]
- (fn [recent? _]
-   (not recent?)))
-
 (rf/reg-sub
  ::active
  :<- [:documents]

src/renderer/menubar/styles.css

@@ -47,7 +47,7 @@
   user-select: none;
 }
 
-.sub-menu-tem  {
+.sub-menu-tem {
   padding-right: 15px !important;
 }
 
@@ -67,9 +67,14 @@
 .menu-item[data-disabled],
 .menu-sub-trigger[data-disabled],
 .menu-checkbox-item[data-disabled],
-.menu-radio-item[data-disabled] {
-  color: var(--font-color-muted);
+.menu-radio-item[data-disabled],
+.menubar-trigger[data-disabled] {
+  color: var(--font-color-disabled);
   pointer-events: none;
+
+  .right-slot {
+    @apply opacity-50;
+  }
 }
 
 .menu-item-indicator {
@@ -95,7 +100,7 @@
   color: inherit;
 }
 
-[data-highlighted] > .right-slot {
+[data-highlighted]>.right-slot {
   color: var(--font-color-active);
 }
 

src/renderer/menubar/views.cljs

@@ -8,8 +8,10 @@
    [renderer.document.events :as-alias document.e]
    [renderer.document.subs :as-alias document.s]
    [renderer.element.events :as-alias element.e]
+   [renderer.element.subs :as-alias element.s]
    [renderer.frame.events :as-alias frame.e]
    [renderer.history.events :as-alias history.e]
+   [renderer.history.subs :as-alias history.s]
    [renderer.window.events :as-alias window.e]
    [renderer.window.subs :as-alias window.s]))
 
@@ -47,34 +49,39 @@
            {:key :recent
             :label "Recent"
             :type :sub-menu
-            :disabled? [::document.s/recent-disabled?]
+            :disabled? (not @(rf/subscribe [::document.s/recent?]))
             :items (recent-submenu)}
            {:key :divider-2
             :type :separator}
            {:key :save
             :label "Save"
             :icon "save"
             :action [::document.e/save]
-            :disabled? [::document.s/active-saved?]}
+            :disabled? (or (not @(rf/subscribe [::document.s/documents?]))
+                           @(rf/subscribe [::document.s/active-saved?]))}
            {:key :save-as
             :label "Save as…"
             :icon "save-as"
-            :action [::document.e/save-as]}
+            :action [::document.e/save-as]
+            :disabled? (not @(rf/subscribe [::document.s/documents?]))}
            {:key :download
             :icon "download"
             :label "Download"
+            :disabled? (not @(rf/subscribe [::document.s/documents?]))
             :action [::document.e/download]}
            {:key :divider-3
             :type :separator}
            {:key :export
             :label "Export as SVG"
             :icon "export"
+            :disabled? (not @(rf/subscribe [::document.s/documents?]))
             :action [::element.e/export]}
            {:key :divider-4
             :type :separator}
            {:key :close
             :label "Close"
             :icon "times"
+            :disabled? (not @(rf/subscribe [::document.s/documents?]))
             :action [::document.e/close-active]}
            {:key :exit
             :label "Exit"
@@ -86,22 +93,27 @@
   {:key :edit
    :label "Edit"
    :type :root
+   :disabled? (not @(rf/subscribe [::document.s/documents?]))
    :items [{:key :undo
             :label "Undo"
             :icon "undo"
+            :disabled? (not @(rf/subscribe [::history.s/undos?]))
             :action [::history.e/undo]}
            {:key :redo
             :label "Redo"
             :icon "redo"
+            :disabled? (not @(rf/subscribe [::history.s/redos?]))
             :action [::history.e/redo]}
            {:key :divider-1
             :type :separator}
            {:key :cut
             :label "Cut"
+            :disabled? (not @(rf/subscribe [::element.s/selected?]))
             :action [::element.e/cut]}
            {:key :copy
             :icon "copy"
             :label "Copy"
+            :disabled? (not @(rf/subscribe [::element.s/selected?]))
             :action [::element.e/copy]}
            {:key :paste
             :label "Paste"
@@ -120,6 +132,7 @@
            {:key :duplicate
             :icon "copy"
             :label "Duplicate"
+            :disabled? (not @(rf/subscribe [::element.s/selected?]))
             :action [::element.e/duplicate-in-place]}
            {:key :divider-3
             :type :separator}
@@ -130,26 +143,30 @@
            {:key :deselect-all
             :icon "deselect-all"
             :label "Deselect all"
+            :disabled? (not @(rf/subscribe [::element.s/selected?]))
             :action [::element.e/deselect-all]}
            {:key :invert-selection
             :label "Invert selection"
             :action [::element.e/invert-selection]}
            {:key :select-same-tags
             :icon "select-same"
             :label "Select same tags"
+            :disabled? (not @(rf/subscribe [::element.s/selected?]))
             :action [::element.e/select-same-tags]}
            {:key :divider-4
             :type :separator}
            {:key :delete
             :icon "delete"
             :label "Delete"
+            :disabled? (not @(rf/subscribe [::element.s/selected?]))
             :action [::element.e/delete]}]})
 
 (defn align-submenu
   []
   [{:key :align-left
     :label "Left"
     :icon "objects-align-left"
+    :disabled @(rf/subscribe [::element.s/top-level?])
     :action [::element.e/align :left]}
    {:key :align-center-horizontally
     :label "Center horizontally"
@@ -235,63 +252,77 @@
   {:key :object
    :label "Object"
    :type :root
+   :disabled? (not @(rf/subscribe [::document.s/documents?]))
    :items [{:key :to-path
             :label "Object to path"
+            :disabled? (not @(rf/subscribe [::element.s/selected?]))
             :action [::element.e/->path]}
            {:key :stroke-to-path
             :label "Stroke to path"
+            :disabled? (not @(rf/subscribe [::element.s/selected?]))
             :action [::element.e/stroke->path]}
            {:key :divider-1
             :type :separator}
            {:key :group
             :label "Group"
             :icon "group"
+            :disabled? (not @(rf/subscribe [::element.s/selected?]))
             :action [::element.e/group]}
            {:key :ungroup
             :label "Ungroup"
             :icon "ungroup"
+            :disabled? (not @(rf/subscribe [::element.s/selected?]))
             :action [::element.e/ungroup]}
            {:key :divider-2
             :type :separator}
            {:key :lock
             :label "Lock"
             :icon "lock"
+            :disabled? (not @(rf/subscribe [::element.s/selected?]))
             :action [::element.e/lock]}
            {:key :unlock
             :label "Unlock"
             :icon "unlock"
+            :disabled? (not @(rf/subscribe [::element.s/selected?]))
             :action [::element.e/unlock]}
            {:key :divider-3
             :type :separator}
            {:key :path
             :label "Align"
             :type :sub-menu
+            :disabled? @(rf/subscribe [::element.s/top-level?])
             :items (align-submenu)}
            {:key :boolean
             :label "Animate"
             :type :sub-menu
+            :disabled? (not @(rf/subscribe [::element.s/selected?]))
             :items (animate-submenu)}
            {:key :boolean
             :label "Boolean operation"
             :type :sub-menu
+            :disabled? (not @(rf/subscribe [::element.s/multiple-selected?]))
             :items (boolean-submenu)}
            {:key :divider-4
             :type :separator}
            {:key :raise
             :label "Raise"
             :icon "bring-forward"
+            :disabled? (not @(rf/subscribe [::element.s/selected?]))
             :action [::element.e/raise]}
            {:key :lower
             :label "Lower"
             :icon "send-backward"
+            :disabled? (not @(rf/subscribe [::element.s/selected?]))
             :action [::element.e/lower]}
            {:key :raise-to-top
             :label "Raise to top"
             :icon "bring-front"
+            :disabled? (not @(rf/subscribe [::element.s/selected?]))
             :action [::element.e/raise-to-top]}
            {:key :lower-to-bottom
             :label "Lower to bottom"
             :icon "send-back"
+            :disabled? (not @(rf/subscribe [::element.s/selected?]))
             :action [::element.e/lower-to-bottom]}
            {:key :divider-5
             :type :separator}
@@ -392,6 +423,7 @@
   {:key :view
    :label "View"
    :type :root
+   :disabled? (not @(rf/subscribe [::document.s/documents?]))
    :items [{:key :zoom
             :label "Zoom"
             :type :sub-menu
@@ -497,7 +529,7 @@
   [:> Menubar/Sub
    [:> Menubar/SubTrigger
     {:class "sub-menu-item menu-item"
-     :disabled (when disabled? @(rf/subscribe disabled?))}
+     :disabled disabled?}
     label
     [:div.right-slot.sub-menu-chevron
      [comp/icon "chevron-right" {:class "icon small"}]]]
@@ -509,11 +541,12 @@
           (map menu-item items))]])
 
 (defmethod menu-item :root
-  [{:keys [label items key action]}]
+  [{:keys [label items key action disabled?]}]
   [:> Menubar/Menu
    [:> Menubar/Trigger
     {:class "menubar-trigger"
      :id (name key)
+     :disabled disabled?
      :on-click (when action #(rf/dispatch action))
      :on-key-down (fn [e]
                     ; FIXME: Doesn't work when the menu content is open.
@@ -534,7 +567,7 @@
    {:class "menu-item"
     :onSelect #(do (rf/dispatch action)
                    (rf/dispatch [:focus nil]))
-    :disabled (when disabled? @(rf/subscribe disabled?))}
+    :disabled disabled?}
    label
    [:div.right-slot
     [comp/shortcuts action]]])

src/renderer/theme.css

@@ -1,10 +1,9 @@
-
 :root {
   --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)',
-  'Roboto', 'Helvetica Neue', 'Open Sans (Custom)', system-ui, sans-serif,
-  'Apple Color Emoji', 'Segoe UI Emoji';
+    'Roboto', 'Helvetica Neue', 'Open Sans (Custom)', system-ui, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji';
   --font-mono: 'Consolas (Custom)', 'Bitstream Vera Sans Mono', monospace,
-  'Apple Color Emoji', 'Segoe UI Emoji';
+    'Apple Color Emoji', 'Segoe UI Emoji';
   --font-size: 13px;
 
   --bg-secondary: #222;