Browse Source

enhance(ux): polish property editor interaction

charlie 1 year ago
parent
commit
fce692af30

+ 1 - 14
src/main/frontend/components/property.cljs

@@ -234,9 +234,6 @@
             property (db/sub-block (:db/id property))
             built-in? (ldb/built-in? (db/get-db) property)
             disabled? (or built-in? config/publishing?)
-            hide-delete? (or (= (:db/id block) (:db/id property)) ; property page
-                             add-new-property?)
-            class? (contains? (:block/type block) "class")
             property-type (get-in property [:block/schema :type])
             save-property-fn (fn [] (components-pu/update-property! property @*property-name @*property-schema))
             enable-closed-values? (contains? db-property-type/closed-value-property-types (or property-type :default))]
@@ -389,17 +386,7 @@
                                   (swap! *property-schema assoc :description (util/evalue e)))
                  :on-blur       save-property-fn
                  :disabled      disabled?
-                 :default-value (:description @*property-schema)})])]]
-
-          (when-not (or hide-delete? (ldb/built-in-class-property? (db/get-db) block property))
-            (shui/button
-             {:variant :secondary
-              :class "mt-4 hover:text-red-700"
-              :on-click (fn [e]
-                          (util/stop e)
-                          (handle-delete-property! block property {:class? class? :class-schema? class-schema?})
-                          (when toggle-fn (toggle-fn)))}
-             "Delete property from this block"))]]))))
+                 :default-value (:description @*property-schema)})])]]]]))))
 
 (defn- get-property-from-db [name]
   (when-not (string/blank? name)

+ 24 - 20
src/main/frontend/components/property/value.cljs

@@ -109,30 +109,34 @@
         :class "p-0"
         :on-interact-outside #(set-open! false)
         :onEscapeKeyDown #(set-open! false)}
-       (shui/calendar
-        {:mode "single"
-         :initial-focus true
-         :selected initial-day
-         :default-month initial-month
-         :class-names {:months ""}
-         :on-select (fn [^js d]
-                     ;; force local to UTC
-                      (when d
-                        (let [gd (goog.date.Date. (.getFullYear d) (.getMonth d) (.getDate d))]
-                          (let [journal (date/js-date->journal-title gd)]
-                            (p/do!
-                             (when-not (db/entity [:block/name (util/page-name-sanity-lc journal)])
-                               (page-handler/<create! journal {:redirect? false
-                                                               :create-first-block? false}))
-                             (when (fn? on-change)
-                               (on-change (db/entity [:block/name (util/page-name-sanity-lc journal)])))
-                             (set-open! false)
-                             (exit-edit-property))))))})))
+        (let [select-handler! (fn [^js d]
+                                ;; force local to UTC
+                                (when d
+                                  (let [gd (goog.date.Date. (.getFullYear d) (.getMonth d) (.getDate d))]
+                                    (let [journal (date/js-date->journal-title gd)]
+                                      (p/do!
+                                        (when-not (db/entity [:block/name (util/page-name-sanity-lc journal)])
+                                          (page-handler/<create! journal {:redirect? false
+                                                                          :create-first-block? false}))
+                                        (when (fn? on-change)
+                                          (on-change (db/entity [:block/name (util/page-name-sanity-lc journal)])))
+                                        (set-open! false)
+                                        (exit-edit-property))))))]
+          (shui/calendar
+            {:mode "single"
+             :initial-focus true
+             :selected initial-day
+             :default-month initial-month
+             :class-names {:months ""}
+             :on-day-key-down (fn [^js d _ ^js e]
+                                (when (= "Enter" (.-key e))
+                                  (select-handler! d)))
+             :on-select select-handler!}))))
 
      (when page
        (when-let [page-cp (state/get-component :block/page-cp)]
          (page-cp {:disable-preview? true
-                  :hide-close-button? true} page)))]))
+                   :hide-close-button? true} page)))]))
 
 
 (rum/defc property-value-date-picker