Combine merge/unmerge buttons, add shadow for pressed buttons

public/css/style.css

@@ -315,7 +315,7 @@ a {
 }
 
 .controls-background-buttons {
-    margin: auto 0px auto 20px;
+    margin: auto 0px auto 0px;
     display: flex;
     vertical-align: middle;
 }
@@ -335,10 +335,22 @@ a {
     border: none;
     border-radius: 2px;
     color: var(--btn-foreground);
-    background-color: var(--btn-background);
     padding: 0 10px 0 10px;
     height: 24px;
     margin-top: auto;
     margin-bottom: auto;
-    margin-left: 20px;
+    margin-right: 20px;
+}
+
+.controls-btn:hover {
+    background-color: var(--btn-background);
+}
+
+.controls-btn.pressed {
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
 }
+
+.button:active {
+    /* Change the inset shadow to give the effect of the button being pressed */
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
+  }

src/bean/grid.cljs

@@ -171,8 +171,11 @@
 (defn set-cell-backgrounds [sheet addresses background]
   (reduce #(set-cell-style %1 %2 :background background) sheet addresses))
 
+(defn all-bold? [sheet addresses]
+  (every? #(get-cell-style sheet % :bold) addresses))
+
 (defn toggle-cell-bolds [sheet addresses]
-  (if (every? #(get-cell-style sheet % :bold) addresses)
+  (if (all-bold? sheet addresses)
     (reduce #(unset-cell-style %1 %2 :bold) sheet addresses)
     (reduce #(set-cell-style %1 %2 :bold true) sheet addresses)))
 
@@ -212,20 +215,26 @@
                  sheet)]
     (set-cell-style sheet* address :merged-with merge-with)))
 
-(defn merge-cells [sheet {:keys [start end] :as area}]
-  (let [addresses (area/area->addresses area)
-        merged-already (map #(get-cell-style sheet % :merged-with) addresses)
+(defn mergeable? [sheet addresses]
+  (let [merged-already (map #(get-cell-style sheet % :merged-with) addresses)
         all-merged-addresses (mapcat #(get-cell-style
                                        sheet
                                        (get-cell-style sheet % :merged-with)
                                        :merged-addresses) merged-already)]
-    (if (every? #(get addresses %) all-merged-addresses)
-      (->  (reduce #(merge-cell %1 %2 start) sheet addresses)
-           (set-cell-style start :merged-until end)
-           (set-cell-style start :merged-addresses addresses)
-           (tables/merge-labels start addresses))
+    (every? #(get addresses %) all-merged-addresses)))
+
+(defn merge-cells [sheet {:keys [start end] :as area}]
+  (let [addresses (area/area->addresses area)]
+    (if (mergeable? sheet addresses)
+      (-> (reduce #(merge-cell %1 %2 start) sheet addresses)
+          (set-cell-style start :merged-until end)
+          (set-cell-style start :merged-addresses addresses)
+          (tables/merge-labels start addresses))
       sheet)))
 
+(defn unmergeable? [sheet addresses]
+  (some #(get-cell-style sheet % :merged-with) addresses))
+
 (defn unmerge-cells [sheet addresses]
   (->> addresses
        (filter #(get-cell-style sheet % :merged-with))

src/bean/ui/events.cljs

@@ -42,10 +42,11 @@
    {:db (update-in db [:sheet] #(grid/merge-cells % area))
     :fx [[:dispatch [::edit-cell (:start area)]]]}))
 
-(rf/reg-event-db
+(rf/reg-event-fx
  ::unmerge-cells
- (fn merge-cells [db [_ addresses]]
-   (update-in db [:sheet] #(grid/unmerge-cells % addresses))))
+ (fn unmerge-cells [{:keys [db]} [_ addresses]]
+   {:db (update-in db [:sheet] #(grid/unmerge-cells % addresses))
+    :fx [[:dispatch [::edit-cell (first addresses)]]]}))
 
 (rf/reg-event-db
  ::set-cell-backgrounds

src/bean/ui/views/sheet.cljs

@@ -1,6 +1,7 @@
 (ns bean.ui.views.sheet
-  (:require [bean.tables :as tables]
-            [bean.area :as area]
+  (:require [bean.area :as area]
+            [bean.grid :as grid]
+            [bean.tables :as tables]
             [bean.ui.events :as events]
             [bean.ui.features :as features]
             [bean.ui.styles :as styles]
@@ -776,12 +777,21 @@
    pixi-app])
 
 (defn controls []
-  (let [selection @(rf/subscribe [::subs/selection])]
+  (let [selection @(rf/subscribe [::subs/selection])
+        sheet @(rf/subscribe [::subs/sheet])]
     [:div {:class :controls-container}
-     [:button {:class :controls-btn
+     [:button {:class [:controls-btn
+                       (when (grid/all-bold? sheet (area/area->addresses selection))
+                         :pressed)]
                :on-click #(rf/dispatch [::events/toggle-cell-bold
                                         (area/area->addresses selection)])}
       "B"]
+     (let [unmergeable? (grid/unmergeable? sheet (area/area->addresses selection))]
+       [:button {:class [:controls-btn (when unmergeable? :pressed)]
+                 :on-click #(if unmergeable?
+                              (rf/dispatch [::events/unmerge-cells (area/area->addresses selection)])
+                              (rf/dispatch [::events/merge-cells selection]))}
+        (if unmergeable? "Unmerge" "Merge")])
      [:div {:class :controls-background-buttons}
       (for [color styles/cell-background-colors]
         [:button {:class :set-background-btn
@@ -792,14 +802,7 @@
                   :on-mouse-down #(when selection
                                     (rf/dispatch [::events/set-cell-backgrounds
                                                   (area/area->addresses selection)
-                                                  color]))} ""])]
-     [:button {:class :controls-btn
-               :on-click #(rf/dispatch [::events/merge-cells selection])}
-      "Merge"]
-     [:button {:class :controls-btn
-               :on-click #(rf/dispatch [::events/unmerge-cells
-                                        (area/area->addresses selection)])}
-      "Unmerge"]]))
+                                                  color]))} ""])]]))
 
 (defonce ^:private pixi-app* (atom nil))