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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/main/frontend/components/icon.cljs
View File

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

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

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