From 02d2572ac0bb734d53f94b104e90626b8279aaaa Mon Sep 17 00:00:00 2001 From: charlie Date: Sat, 24 Aug 2024 16:52:00 +0800 Subject: [PATCH] enhance(ux): polish dropdown property editor --- src/main/frontend/components/property.cljs | 2 +- src/main/frontend/components/property_v2.cljs | 60 +++++++++++++------ 2 files changed, 44 insertions(+), 18 deletions(-) diff --git a/src/main/frontend/components/property.cljs b/src/main/frontend/components/property.cljs index 02411ff20..0d09151f5 100644 --- a/src/main/frontend/components/property.cljs +++ b/src/main/frontend/components/property.cljs @@ -673,7 +673,7 @@ (util/stop e) (shui/popup-show! (.-target e) (fn [{:keys [id]}] - (property-v2/dropdown-editor id property + (property-v2/dropdown-editor id property block {:debug? (.-altKey e)})) {:content-props {:class "ls-property-dropdown-editor as-root"} diff --git a/src/main/frontend/components/property_v2.cljs b/src/main/frontend/components/property_v2.cljs index 47a7c5ed8..f155faf73 100644 --- a/src/main/frontend/components/property_v2.cljs +++ b/src/main/frontend/components/property_v2.cljs @@ -264,18 +264,26 @@ {:id :ls-base-edit-form :align "start"}))}})])) +(def position-labels + {:properties {:icon :layout-distribute-horizontal :title "Block properties"} + :block-left {:icon :layout-align-right :title "Beginning of the block"} + :block-right {:icon :layout-align-left :title "End of the block"} + :block-below {:icon :layout-align-top :title "Below of the block"}}) + (rum/defc ui-position-sub-pane - [_property {:keys [id set-sub-open!]}] + [property {:keys [id set-sub-open! _position]}] (let [handle-select! (fn [^js e] - (shui/toast! (.-innerText (.-target e))) - (set-sub-open! false) - (restore-root-highlight-item! id)) + (when-let [v (some-> (.-target e) (.-dataset) (.-value))] + (db-property-handler/upsert-property! + (:db/ident property) + (assoc (:block/schema property) :position (keyword v)) + {:property-name (:block/title property)}) + (set-sub-open! false) + (restore-root-highlight-item! id))) item-props {:on-select handle-select!}] [:div.ls-property-dropdown-editor.ls-property-ui-position-sub-pane - (dropdown-editor-menuitem {:icon :layout-distribute-horizontal :title "Block properties" :item-props item-props}) - (dropdown-editor-menuitem {:icon :layout-align-right :title "Beginning of the block" :item-props item-props}) - (dropdown-editor-menuitem {:icon :layout-align-left :title "End of the block" :item-props item-props}) - (dropdown-editor-menuitem {:icon :layout-align-top :title "Below of the block" :item-props item-props})])) + (for [[k v] position-labels] + (dropdown-editor-menuitem (assoc v :item-props (assoc item-props :data-value k))))])) (defn- property-type-label [property-type] @@ -284,10 +292,24 @@ "Text" ((comp string/capitalize name) property-type))) +(defn- handle-delete-property! + [block property & {:keys [class? class-schema?]}] + (let [class? (or class? (ldb/class? block)) + remove! #(let [repo (state/get-current-repo)] + (if (and class? class-schema?) + (db-property-handler/class-remove-property! (:db/id block) (:db/id property)) + (property-handler/remove-block-property! repo (:block/uuid block) (:db/ident property))))] + (if (and class? class-schema?) + (-> (shui/dialog-confirm! + ;; Only ask for confirmation on class schema properties + [:p (str "Are you sure you want to delete this property?")]) + (p/then remove!)) + (remove!)))) + (rum/defc dropdown-editor-impl "popup-id: dropdown popup id property: block entity" - [_popup-id property opts] + [_popup-id property owner-block opts] (let [title (:block/title property) property-schema (:block/schema property) property-type (get property-schema :type) @@ -317,12 +339,14 @@ (assoc property-schema :cardinality (if many? :one :many)) {})})) (shui/dropdown-menu-separator) - (dropdown-editor-menuitem {:icon :float-left :title "UI position" :desc "beginning of the block" - :item-props {:class "ui__position-trigger-item"} - :submenu-content (fn [ops] (ui-position-sub-pane property ops))}) + (let [position (:position property-schema)] + (dropdown-editor-menuitem {:icon :float-left :title "UI position" :desc (some->> position (get position-labels) (:title)) + :item-props {:class "ui__position-trigger-item"} + :submenu-content (fn [ops] (ui-position-sub-pane property (assoc ops :position position)))})) + (dropdown-editor-menuitem {:icon :eye-off :title "Hide by default" :toggle-checked? (boolean (:hide? property-schema)) :on-toggle-checked-change #(db-property-handler/upsert-property! (:db/ident property) - (assoc property-schema :hide? %) {})}) + (assoc property-schema :hide? %) {})}) (shui/dropdown-menu-separator) (dropdown-editor-menuitem @@ -336,8 +360,10 @@ :item-props {:class "opacity-60 focus:opacity-100 focus:!text-red-rx-09" :on-select (fn [^js e] (util/stop e) - (-> (shui/dialog-confirm! "remove?") - (p/then (fn [] (shui/popup-hide-all!))) + (-> (shui/dialog-confirm! "Are you sure you want to delete property from this node?") + (p/then (fn [] + (handle-delete-property! owner-block property {:class-schema? false}) + (shui/popup-hide-all!))) (p/catch (fn [] (restore-root-highlight-item! :remove-property)))))}}) (when (:debug? opts) [:<> @@ -350,6 +376,6 @@ (shui/popup-hide!))}})])])) (rum/defc dropdown-editor < rum/reactive - [popup-id property opts] + [popup-id property owner-block opts] (let [property1 (db/sub-block (:db/id property))] - (dropdown-editor-impl popup-id property1 opts))) + (dropdown-editor-impl popup-id property1 owner-block opts)))