UI to edit frame names

nilenso · Jun 29, 2024 · e7ef851 · e7ef851
1 parent 1ec9c0f
commit e7ef851
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 8 deletions.
diff --git a/public/css/style.css b/public/css/style.css
@@ -171,15 +171,15 @@ p {
 }
 
 .make-frame-form {
-    margin: auto 0 auto 0;
+    margin: 2px 0 auto 0;
 }
 
-.make-frame-input {
+.frame-name-input {
     border: 1px solid #e9e9ed;
     padding: 4px;
 }
 
-.make-frame-input:active, .make-frame-input:focus {
+.frame-name-input:active, .frame-name-input:focus {
     outline: none;
     /* border: 2px solid #3b5aa3; */
 }

diff --git a/src/bean/ui/events.cljs b/src/bean/ui/events.cljs
@@ -266,6 +266,22 @@
                (update-in [:sheet] #(grid/make-frame % frame-name area)))
       :fx [[:dispatch [::select-frame frame-name]]]})))
 
+(rf/reg-event-db
+ ::renaming-frame
+ (undoable)
+ (fn edit-frame [db [_ frame-name]]
+   (assoc-in db [:ui :renaming-frame] frame-name)))
+
+(rf/reg-event-db
+ ::rename-frame
+ (undoable)
+ (fn edit-frame [db [_ old-name new-name]]
+   (prn new-name)
+   (let [frame (get-in (:sheet db) [:frames old-name])]
+     (-> db
+         (update-in [:sheet :frames] dissoc old-name)
+         (assoc-in [:sheet :frames new-name] frame)))))
+
 (rf/reg-event-db
  ::add-labels
  (undoable)

diff --git a/src/bean/ui/subs.cljs b/src/bean/ui/subs.cljs
@@ -32,6 +32,11 @@
  (fn [db]
    (get-in db [:ui :demo-names])))
 
+(re-frame/reg-sub
+ ::renaming-frame
+ (fn [db]
+   (get-in db [:ui :renaming-frame])))
+
 (re-frame/reg-sub
  ::current-demo-name
  (fn [db]

diff --git a/src/bean/ui/views/sidebar.cljs b/src/bean/ui/views/sidebar.cljs
@@ -8,7 +8,8 @@
 (defn frames-list []
   (fn []
     (let [frames @(rf/subscribe [::subs/frames])
-          selection @(rf/subscribe [::subs/selection])]
+          selection @(rf/subscribe [::subs/selection])
+          renaming-frame @(rf/subscribe [::subs/renaming-frame])]
       [:div
        [:div {:class :frames-header}
         [:img {:src "img/frame-icon.png"
@@ -27,11 +28,28 @@
           (for [[frame-name] frames]
             [:div {:key frame-name
                    :class :frames-list-item}
+             [:img {:src "img/made-frame-icon.png"
+                    :class :frame-icon}]
+             (when (not= renaming-frame frame-name)
+               [:a {:on-click #(rf/dispatch [::events/renaming-frame frame-name])}
+                frame-name])
+             [:div {:class :tables-list-item}
+              [:form
+               {:on-submit #(do (.preventDefault %)
+                                (rf/dispatch [::events/rename-frame
+                                              frame-name
+                                              (.-value (js/document.getElementById "frame-name-input"))]))
+                :class [:make-frame-form]}
+               (when (= renaming-frame frame-name)
+                 [:input {:class :frame-name-input
+                          :id :frame-name-input
+                          :auto-focus true
+                          :on-focus #(.select (.-target %))
+                          :on-blur #(rf/dispatch [::events/renaming-frame nil])
+                          :default-value frame-name
+                          :placeholder "Frame name"}])]]]))]]])))
+
 
-             [:a {:on-click #(rf/dispatch [::events/select-frame frame-name])}
-              [:img {:src "img/made-frame-icon.png"
-                     :class :frame-icon}]
-              frame-name]]))]]])))
 
 (defn sidebar []
   [:div {:class :sidebar}