enhance(ux): WIP interaction for the dropdown property editor

pull/11483/head
charlie 2024-08-20 21:51:41 +08:00
parent 9d62813fbc
commit 21b55fabad
2 changed files with 14 additions and 8 deletions

View File

@ -7,6 +7,7 @@
[clojure.string :as string]
[frontend.search :as search]
[frontend.storage :as storage]
[medley.core :as m]
[rum.core :as rum]
[frontend.ui :as ui]
[logseq.shui.ui :as shui]
@ -416,7 +417,7 @@
(:native (first (:skins @*hover))))]])]]))
(rum/defc icon-picker
[icon-value {:keys [disabled? on-chosen icon-props]}]
[icon-value {:keys [disabled? on-chosen icon-props popup-opts]}]
(let [content-fn
(if config/publishing?
(constantly [])
@ -434,9 +435,11 @@
:on-click (fn [^js e]
(when-not disabled?
(shui/popup-show! (.-target e) content-fn
{:id :ls-icon-picker
:content-props {:class "ls-icon-picker"
:onEscapeKeyDown #(.preventDefault %)}})))}
(m/deep-merge
{:id :ls-icon-picker
:content-props {:class "ls-icon-picker"
:onEscapeKeyDown #(.preventDefault %)}}
popup-opts))))}
(if has-icon?
[:span {:style {:color (or (:color icon-value) "inherit")}}
(icon icon-value (merge {:size 18} icon-props))]

View File

@ -27,7 +27,9 @@
(db-property-handler/upsert-property!
(:db/ident property)
(:block/schema property)
{:properties {:logseq.property/icon icon}}))})
{:properties {:logseq.property/icon icon}}))
:popup-opts {:align "start"}})
(shui/input {:ref *input-ref :size "sm" :default-value title})]
[:div.pt-2 (shui/textarea {:placeholder "description"})]
[:div.pt-2.flex.justify-end
@ -44,7 +46,7 @@
(let [[sub-open? set-sub-open!] (rum/use-state false)
toggle? (boolean? toggle-checked?)
id1 (str "d1-" (or id icon))
id1 (str (or id icon (random-uuid)))
id2 (str "d2-" id1)
or-close-menu-sub! (fn []
(when-not (popup-core/get-popup :ls-icon-picker)
@ -126,12 +128,13 @@
(shui/dropdown-menu-separator)
(dropdown-editor-menuitem
{:icon :square-x :title "Remove property" :desc "" :disabled? false
{:id :remove-property :icon :square-x :title "Remove property" :desc "" :disabled? false
:item-props {:class "opacity-50 focus:opacity-100 focus:!text-red-rx-08"
:on-select (fn [^js e]
(util/stop e)
(-> (shui/dialog-confirm! "remove?")
(p/then (fn [] (shui/popup-hide! popup-id)))))}})]))
(p/then (fn [] (shui/popup-hide-all!)))
(p/catch (fn [] (restore-root-highlight-item! :remove-property)))))}})]))
(rum/defc dropdown-editor < rum/reactive
[popup-id property]