enhance undo/redo styles

repath-project · Mar 3, 2024 · 6f250bd · 6f250bd
1 parent f3d0550
commit 6f250bd
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 39 deletions.
diff --git a/src/renderer/document/views.cljs b/src/renderer/document/views.cljs
@@ -7,48 +7,53 @@
    [renderer.history.views :as history]))
 
 (defn actions []
-  [:div.toolbar
+  (let [undos? @(rf/subscribe [:history/undos?])
+        redos? @(rf/subscribe [:history/redos?])]
+    [:div.toolbar
 
-   [comp/icon-button
-    "file"
-    {:title "New"
-     :on-click #(rf/dispatch [:document/new])}]
+     [comp/icon-button
+      "file"
+      {:title "New"
+       :on-click #(rf/dispatch [:document/new])}]
 
-   [comp/icon-button
-    "folder"
-    {:title "Open"
-     :on-click #(rf/dispatch [:document/open])}]
+     [comp/icon-button
+      "folder"
+      {:title "Open"
+       :on-click #(rf/dispatch [:document/open])}]
 
-   [comp/icon-button
-    "save"
-    {:title "Save"
-     :on-click #(rf/dispatch [:document/save])
-     :disabled @(rf/subscribe [:document/active-saved?])}]
+     [comp/icon-button
+      "save"
+      {:title "Save"
+       :on-click #(rf/dispatch [:document/save])
+       :disabled @(rf/subscribe [:document/active-saved?])}]
 
-   [:span.v-divider]
+     [:span.v-divider]
 
-   [comp/icon-button
-    "undo"
-    {:title "Undo"
-     :style {:margin-right 0}
-     :on-click #(rf/dispatch [:history/undo])
-     :disabled (not @(rf/subscribe [:history/undos?]))}]
+     [:button.icon-button.items-center.px-1.gap-1
+      {:title "Undo"
+       :style {:margin-right 0
+               :width "auto"
+               :display "flex"}
+       :on-click #(rf/dispatch [:history/undo])
+       :disabled (not undos?)}
+      [renderer.components/icon "undo"]
+      [history/select
+       "Undo stack"
+       @(rf/subscribe [:history/undos])
+       (not undos?)]]
 
-   [history/select
-    "Undo stack"
-    @(rf/subscribe [:history/undos])
-    (not @(rf/subscribe [:history/undos?]))]
-
-   [comp/icon-button "redo"
-    {:title "Undo"
-     :style {:margin-right 0}
-     :on-click #(rf/dispatch [:history/redo])
-     :disabled (not @(rf/subscribe [:history/redos?]))}]
-
-   [history/select
-    "Redo stack"
-    @(rf/subscribe [:history/redos])
-    (not @(rf/subscribe [:history/redos?]))]])
+     [:button.icon-button.items-center.px-1.gap-1
+      {:title "Redo"
+       :style {:margin-right 0
+               :width "auto"
+               :display "flex"}
+       :on-click #(rf/dispatch [:history/redo])
+       :disabled (not redos?)}
+      [renderer.components/icon "redo"]
+      [history/select
+       "Redo stack"
+       @(rf/subscribe [:history/redos])
+       (not redos?)]]]))
 
 (defn close-button
   [key saved?]

diff --git a/src/renderer/history/views.cljs b/src/renderer/history/views.cljs
@@ -19,10 +19,11 @@
 
 (defn select
   [label options disabled?]
-  [:> Select/Root {:onValueChange #(rf/dispatch [:history/move (keyword %)])
-                   :disabled disabled?}
+  [:> Select/Root
+   {:onValueChange #(rf/dispatch [:history/move (keyword %)])
+    :disabled disabled?}
    [:> Select/Trigger
-    {:class "select-trigger"
+    {:class "select-trigger hover:top-0.5"
      :aria-label label
      :style {:background "transparent"
              :width "16px"
@@ -34,6 +35,7 @@
     [:> Select/Content
      {:side "top"
       :sideOffset 5
+      :alignOffset -24
       :position "popper"
       :class "menu-content rounded select-content"}
      [:> Select/ScrollUpButton {:class "select-scroll-button"}