From 448b21c0c42c1ace15550e4e0f6449cd543e608d Mon Sep 17 00:00:00 2001 From: Tienson Qin Date: Mon, 7 Aug 2023 16:41:02 +0800 Subject: [PATCH] enhance: use dropdown instead of modal for property configuration --- src/main/frontend/components/content.cljs | 5 +- src/main/frontend/components/page.cljs | 13 +++-- src/main/frontend/components/property.cljs | 67 ++++++++++++---------- 3 files changed, 47 insertions(+), 38 deletions(-) diff --git a/src/main/frontend/components/content.cljs b/src/main/frontend/components/content.cljs index d98288c5f4..a0d07e3714 100644 --- a/src/main/frontend/components/content.cljs +++ b/src/main/frontend/components/content.cljs @@ -399,8 +399,9 @@ (let [target (gobj/get e "target") block-el (.closest target ".bullet-container[blockid]") block-id (some-> block-el (.getAttribute "blockid")) - property-id (some-> target (.getAttribute "data-propertyid")) - property-block-id (some-> target (.getAttribute "data-blockid")) + property-el (.closest target ".property-k") + property-id (some-> property-el (.getAttribute "data-propertyid")) + property-block-id (some-> property-el (.getAttribute "data-blockid")) {:keys [block block-ref]} (state/sub :block-ref/context) {:keys [page]} (state/sub :page-title/context)] (cond diff --git a/src/main/frontend/components/page.cljs b/src/main/frontend/components/page.cljs index e3e57a657b..a7b32edebf 100644 --- a/src/main/frontend/components/page.cljs +++ b/src/main/frontend/components/page.cljs @@ -468,12 +468,13 @@ (or (seq (:block/properties page)) (seq (:block/alias page)) (seq (:block/tags page)))) - (let [edit-input-id (str "edit-block-" (:block/uuid page) "-schema")] - (component-block/db-properties-cp - {:editor-box editor/box} - page - edit-input-id - {:selected? false}))) + [:div.page-properties.p-2.mb-4 + (let [edit-input-id (str "edit-block-" (:block/uuid page) "-schema")] + (component-block/db-properties-cp + {:editor-box editor/box} + page + edit-input-id + {:selected? false}))]) ;; blocks (let [page (if block? diff --git a/src/main/frontend/components/property.cljs b/src/main/frontend/components/property.cljs index b27d232fce..9c2a0194a7 100644 --- a/src/main/frontend/components/property.cljs +++ b/src/main/frontend/components/property.cljs @@ -65,12 +65,12 @@ built-in-property? (contains? gp-property/db-built-in-properties-keys-str (:block/original-name property)) property (db/sub-block (:db/id property))] [:div.property-configure - [:h1.title + [:p.font-bold.text-xl (if built-in-property? "Built-in property" "Configure property")] - [:div.grid.gap-2.p-1 + [:div.grid.gap-2.p-1.mt-4 [:div.grid.grid-cols-4.gap-1.items-center.leading-8 [:label "Name:"] [:input.form-input @@ -455,41 +455,48 @@ (let [*property-key (::property-key state) *property-value (::property-value state)] (cond - new-property? - [:div#edit-new-property - (property-input block *property-key *property-value opts)] + new-property? + [:div#edit-new-property + (property-input block *property-key *property-value opts)] - (or (seq properties) - (:page-configure? opts)) - [:a {:title "Add another property" - :on-click (fn [] - (property-handler/set-editing-new-property! edit-input-id) - (reset! *property-key nil) - (reset! *property-value nil))} - [:div.block {:style {:height 20 - :width 20}} - [:a.add-button-link.block.mt-1 {:style {:margin-left -4}} - (ui/icon "circle-plus")]]]))) + (or (seq properties) + (:page-configure? opts)) + [:a {:style {:margin-left 3} + :title "Add another property" + :on-click (fn [] + (property-handler/set-editing-new-property! edit-input-id) + (reset! *property-key nil) + (reset! *property-value nil))} + [:div.block {:style {:height 20 + :width 20}} + [:a.add-button-link.block.mt-1 {:style {:margin-left -4}} + (ui/icon "circle-plus")]]]))) (rum/defcs property-key [state block property {:keys [class-schema?]}] (let [repo (state/get-current-repo) icon (pu/get-property property :icon)] - [:a - {:data-propertyid (:block/uuid property) - :data-blockid (:block/uuid block) - :data-class-schema (boolean class-schema?) - :title (str "Configure property: " (:block/original-name property)) - :on-click (fn [] - (state/set-sub-modal! #(property-config repo property)))} - [:div.flex.flex-row.items-center - (or - (when-let [id (:id icon)] - (when (= :emoji (:type icon)) - [:em-emoji {:id id}])) + (ui/dropdown + (fn [{:keys [toggle-fn]}] + [:a.property-k + {:data-propertyid (:block/uuid property) + :data-blockid (:block/uuid block) + :data-class-schema (boolean class-schema?) + :title (str "Configure property: " (:block/original-name property)) + :on-click toggle-fn} + [:div.flex.flex-row.items-center + (or + (when-let [id (:id icon)] + (when (= :emoji (:type icon)) + [:em-emoji {:id id}])) ;; default property icon - (ui/icon "circle-dotted" {:size 16})) - [:div.ml-1 (:block/original-name property)]]])) + (ui/icon "circle-dotted" {:size 16})) + [:div.ml-1 (:block/original-name property)]]]) + (fn [{:keys [toggle-fn]}] + [:div.p-8 + (property-config repo property)]) + {:modal-class (util/hiccup->class + "origin-top-right.absolute.left-0.mt-2.ml-2.rounded-md.shadow-lg")}))) (rum/defcs multiple-value-item < (rum/local false ::show-close?) [state entity property item {:keys [editor-id row?]