mirror of https://github.com/logseq/logseq
enhance(ux): WIP interaction for the dropdown property editor
parent
9d62813fbc
commit
21b55fabad
|
@ -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))]
|
||||
|
|
|
@ -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]
|
||||
|
|
Loading…
Reference in New Issue