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

src/main/frontend/components/icon.cljs

@@ -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))]

src/main/frontend/components/property_v2.cljs

@@ -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]