refactor(ui): WIP refactor the perperty editor with the shui pupops

deps/shui/src/logseq/shui/demo2.cljs

@@ -8,9 +8,9 @@
   [:div.sm:p-10
    [:h1.text-3xl.font-bold.border-b.pb-4 "UI X Popup"]
 
-   (rum/portal
-     (install-popups)
-     js/document.body)
+   ;(rum/portal
+   ;  (install-popups)
+   ;  js/document.body)
 
    (let [[emoji set-emoji!] (rum/use-state nil)
          [q set-q!] (rum/use-state "")

src/main/frontend/components/container.cljs

@@ -44,6 +44,7 @@
             [logseq.shui.ui :as shui]
             [logseq.shui.toaster.core :as shui-toaster]
             [logseq.shui.dialog.core :as shui-dialog]
+            [logseq.shui.popup.core :as shui-popup]
             [frontend.util :as util]
             [frontend.util.cursor :as cursor]
             [frontend.components.window-controls :as window-controls]
@@ -943,6 +944,8 @@
       (ui/sub-modal)
       (shui-toaster/install-toaster)
       (shui-dialog/install-modals)
+      (shui-popup/install-popups)
+
       (select/select-modal)
       (custom-context-menu)
       (plugins/custom-js-installer {:t t

src/main/frontend/components/db_based/page.cljs

@@ -29,7 +29,7 @@
         has-viewable-properties? (db-property-handler/block-has-viewable-properties? page)
         has-class-properties? (seq (:properties (:block/schema page)))]
     (when (or configure? has-viewable-properties? has-class-properties? property?)
-      [:div.ls-page-properties.mb-4
+      [:div.ls-page-properties
        (cond
          (= mode :class)
          (if (and config/publishing? (not configure?))
@@ -171,9 +171,9 @@
       [:div.page-info {:on-mouse-over #(reset! *hover? true)
                        :on-mouse-leave #(reset! *hover? false)}
        (when (or hover-or-expanded? has-tags? has-properties? class?)
-         [:div.p-2 {:class (if (or @*hover? (not collapsed?))
-                                     "border rounded"
-                                     "border rounded border-transparent")}
+         [:div.py-2 {:class (if (or @*hover? (not collapsed?))
+                              "border rounded"
+                              "border rounded border-transparent")}
           [:div.info-title.cursor {:on-click
                                    (if config/publishing?
                                      (fn [_]

src/main/frontend/components/page.css

@@ -392,6 +392,10 @@ html.is-native-ios {
     margin-left: -21px;
 }
 
+.sidebar-item .page-info {
+  margin: 0 8px;
+}
+
 .page-info-title-placeholder {
     min-height: 28px;
 }

src/main/frontend/components/property.cljs

@@ -20,6 +20,7 @@
             [frontend.state :as state]
             [frontend.ui :as ui]
             [frontend.util :as util]
+            [logseq.shui.ui :as shui]
             [logseq.db.frontend.property :as db-property]
             [logseq.db.frontend.property.type :as db-property-type]
             [rum.core :as rum]
@@ -503,6 +504,7 @@
                          :else
                          "control-hide")}
          (ui/rotating-arrow collapsed?)]])
+
      (ui/dropdown
       (fn [{:keys [toggle-fn]}]
         [:button.flex {:on-click toggle-fn}
@@ -523,31 +525,31 @@
                  (toggle-fn))))})])
       {:modal-class (util/hiccup->class
                      "origin-top-right.absolute.left-0.rounded-md.shadow-lg.mt-2")})
-     (ui/dropdown
-      (if config/publishing?
-        (fn [_opts]
-          [:a.property-k
-           {:on-click #(route-handler/redirect-to-page! (:block/name property))}
-           [:div {:style {:padding-left 6}} (:block/original-name property)]])
-        (fn [{:keys [toggle-fn]}]
-          [:a.property-k
-           {:title (str "Configure property: " (:block/original-name property))
-            :on-mouse-down (fn [e]
-                             (when (util/meta-key? e)
-                               (route-handler/redirect-to-page! (:block/name property))
-                               (.preventDefault e)))
-            :on-click toggle-fn}
-           [:div {:style {:padding-left 6}} (:block/original-name property)]]))
-      (fn [{:keys [toggle-fn]}]
-        [:div.p-8 {:style {:min-width 700}}
-         [:h2.title "Configure property"]
-         (property-config block property
-                          {:toggle-fn toggle-fn
-                           :inline-text inline-text
-                           :page-cp page-cp
-                           :class-schema? class-schema?})])
-      {:modal-class (util/hiccup->class
-                     "origin-top-right.absolute.left-0.rounded-md.shadow-lg")})]))
+
+     (if config/publishing?
+       [:a.property-k
+        {:on-click #(route-handler/redirect-to-page! (:block/name property))}
+        [:div {:style {:padding-left 6}} (:block/original-name property)]]
+
+       [:a.property-k
+        {:title         (str "Configure property: " (:block/original-name property))
+         :on-mouse-down (fn [^js e]
+                          (when (util/meta-key? e)
+                            (route-handler/redirect-to-page! (:block/name property))
+                            (.preventDefault e)))
+         :on-click      (fn [^js e]
+                          (shui/popup-show! (.-target e)
+                            (fn [{:keys [id]}]
+                              [:div.p-2
+                               [:h2.text-lg.font-bold.mb-1 "Configure property"]
+                               (property-config block property
+                                 {:inline-text inline-text
+                                  :page-cp page-cp
+                                  :class-schema? class-schema?
+                                  :toggle-fn #(shui/popup-hide! id)})])
+                            {:content-props {:class "property-configure-popup-content"}
+                             :as-menu? true}))}
+        [:div {:style {:padding-left 6}} (:block/original-name property)]])]))
 
 (defn- resolve-linked-block-if-exists
   "Properties will be updated for the linked page instead of the refed block.

src/main/frontend/components/property.css

@@ -12,6 +12,13 @@
     min-height: 24px;
 }
 
+.property-configure-popup-content {
+    @apply min-w-[700px] p-2 overflow-auto;
+
+    /*noinspection CssUnresolvedCustomProperty*/
+    max-height: var(--radix-dropdown-menu-content-available-height);
+}
+
 /* .property-value-content:hover { */
 /*     background: var(--ls-secondary-background-color); */
 /* } */