greatbody
/
logseq
mirror of https://github.com/logseq/logseq
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

enhance(ux): polish dropdown property editor

pull/11483/head^2
charlie 2024-08-24 16:52:00 +08:00
parent 9a1e6890d8
commit 02d2572ac0
2 changed files with 44 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/main/frontend/components/property.cljs
View File

@ -673,7 +673,7 @@
(util/stop e) (util/stop e)
(shui/popup-show! (.-target e) (shui/popup-show! (.-target e)
(fn [{:keys [id]}] (fn [{:keys [id]}]
(property-v2/dropdown-editor id property (property-v2/dropdown-editor id property block
{:debug? (.-altKey e)})) {:debug? (.-altKey e)}))
{:content-props {:content-props
{:class "ls-property-dropdown-editor as-root"} {:class "ls-property-dropdown-editor as-root"}

54
src/main/frontend/components/property_v2.cljs
View File

@ -264,18 +264,26 @@
{:id :ls-base-edit-form {:id :ls-base-edit-form
:align "start"}))}})])) :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 (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] (let [handle-select! (fn [^js e]
(shui/toast! (.-innerText (.-target e))) (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) (set-sub-open! false)
(restore-root-highlight-item! id)) (restore-root-highlight-item! id)))
item-props {:on-select handle-select!}] item-props {:on-select handle-select!}]
[:div.ls-property-dropdown-editor.ls-property-ui-position-sub-pane [: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}) (for [[k v] position-labels]
(dropdown-editor-menuitem {:icon :layout-align-right :title "Beginning of the block" :item-props item-props}) (dropdown-editor-menuitem (assoc v :item-props (assoc item-props :data-value k))))]))
(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})]))
(defn- property-type-label (defn- property-type-label
[property-type] [property-type]
@ -284,10 +292,24 @@
"Text" "Text"
((comp string/capitalize name) property-type))) ((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 (rum/defc dropdown-editor-impl
"popup-id: dropdown popup id "popup-id: dropdown popup id
property: block entity" property: block entity"
[_popup-id property opts] [_popup-id property owner-block opts]
(let [title (:block/title property) (let [title (:block/title property)
property-schema (:block/schema property) property-schema (:block/schema property)
property-type (get property-schema :type) property-type (get property-schema :type)
@ -317,9 +339,11 @@
(assoc property-schema :cardinality (if many? :one :many)) {})})) (assoc property-schema :cardinality (if many? :one :many)) {})}))
(shui/dropdown-menu-separator) (shui/dropdown-menu-separator)
(dropdown-editor-menuitem {:icon :float-left :title "UI position" :desc "beginning of the block" (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"} :item-props {:class "ui__position-trigger-item"}
:submenu-content (fn [ops] (ui-position-sub-pane property ops))}) :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)) (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) :on-toggle-checked-change #(db-property-handler/upsert-property! (:db/ident property)
(assoc property-schema :hide? %) {})}) (assoc property-schema :hide? %) {})})
@ -336,8 +360,10 @@
:item-props {:class "opacity-60 focus:opacity-100 focus:!text-red-rx-09" :item-props {:class "opacity-60 focus:opacity-100 focus:!text-red-rx-09"
:on-select (fn [^js e] :on-select (fn [^js e]
(util/stop e) (util/stop e)
(-> (shui/dialog-confirm! "remove?") (-> (shui/dialog-confirm! "Are you sure you want to delete property from this node?")
(p/then (fn [] (shui/popup-hide-all!))) (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)))))}}) (p/catch (fn [] (restore-root-highlight-item! :remove-property)))))}})
(when (:debug? opts) (when (:debug? opts)
[:<> [:<>
@ -350,6 +376,6 @@
(shui/popup-hide!))}})])])) (shui/popup-hide!))}})])]))
(rum/defc dropdown-editor < rum/reactive (rum/defc dropdown-editor < rum/reactive
[popup-id property opts] [popup-id property owner-block opts]
(let [property1 (db/sub-block (:db/id property))] (let [property1 (db/sub-block (:db/id property))]
(dropdown-editor-impl popup-id property1 opts))) (dropdown-editor-impl popup-id property1 owner-block opts)))