enhance(ui): add support for the shui popup as mask from the target

deps/shui/src/logseq/shui/popup/core.cljs

@@ -74,7 +74,7 @@
 (defonce *last-show-target (atom nil))
 
 (defn show!
-  [^js event content & {:keys [id as-dropdown? as-content? align root-props content-props
+  [^js event content & {:keys [id as-mask? as-dropdown? as-content? align root-props content-props
                                on-before-hide on-after-hide trigger-id] :as opts}]
   (let [id (or id (gen-id))
         *target (volatile! nil)
@@ -97,8 +97,10 @@
                                 :start 0
                                 :end width
                                 (/ width 2)))
-                      (- bottom height)
-                      width height])
+                      (- (- bottom height)
+                        ;; minus default offset
+                        (if as-mask? 6 0))
+                      width (if as-mask? 1 height)])
                    :else [0 0])]
     (reset! *last-show-target @*target)
     (js/setTimeout #(reset! *last-show-target nil) 64)
@@ -143,7 +145,7 @@
 
 (rum/defc x-popup
   [{:keys [id open? content position as-dropdown? as-content? force-popover?
-           auto-side? _auto-focus? _target root-props content-props
+           auto-side? as-mask? _auto-focus? _target root-props content-props
            _on-before-hide _on-after-hide]
     :as _props}]
   (when-let [[x y _ height] position]
@@ -159,7 +161,7 @@
                                "top" "bottom"))))
           auto-side? (if (boolean? auto-side?) auto-side? true)
           content-props (cond-> content-props
-                          auto-side? (assoc :side (auto-side-fn)))
+                          (and (not as-mask?) auto-side?) (assoc :side (auto-side-fn)))
           handle-key-escape! (fn [^js e]
                                (when-not (false? (some-> content-props (:onEscapeKeyDown) (apply [e])))
                                  (hide! id 1)))
@@ -179,6 +181,9 @@
                          :left x}} ""))
        (let [content-props (cond-> (merge content-props {:onEscapeKeyDown handle-key-escape!
                                                          :onPointerDownOutside handle-pointer-outside!})
+                             as-mask?
+                             (assoc :data-as-mask true)
+
                              (and (not force-popover?)
                                   (not as-dropdown?))
                              (assoc :on-key-down (fn [^js e]

src/main/frontend/components/views.cljs

@@ -211,35 +211,36 @@
                         :else
                         (p/do!
                          (shui/popup-show!
-                          (.-target e)
-                          (fn []
-                            (let [width (-> (max 160 width)
-                                            (- 18))]
-                              [:div.ls-table-block.flex.flex-row.items-start
-                               {:style {:width width :max-width width}
-                                :on-click util/stop-propagation}
-                               (block-container {:popup? true
-                                                 :view? true
-                                                 :table-block-title? true} block)
-                               (shui/button
-                                {:variant :ghost
-                                 :title "Open node"
-                                 :on-click (fn [e]
-                                             (util/stop-propagation e)
-                                             (shui/popup-hide!)
-                                             (redirect!))
-                                 :class (str "h-6 w-6 !p-0 text-muted-foreground transition-opacity duration-100 ease-in bg-gray-01 "
-                                             "opacity-" opacity)}
-                                (ui/icon "arrow-right"))]))
-                          {:align :start})
-                         (editor-handler/edit-block! block :max {:container-id :unknown-container}))))))}
+                           (.closest (.-target e) ".ls-table-cell")
+                           (fn []
+                             (let [width (-> (max 160 width)
+                                           (- 18))]
+                               [:div.ls-table-block.flex.flex-row.items-start
+                                {:style {:width width :max-width width :margin-right "6px"}
+                                 :on-click util/stop-propagation}
+                                (block-container {:popup? true
+                                                  :view? true
+                                                  :table-block-title? true} block)
+                                (shui/button
+                                  {:variant :ghost
+                                   :title "Open node"
+                                   :on-click (fn [e]
+                                               (util/stop-propagation e)
+                                               (shui/popup-hide!)
+                                               (redirect!))
+                                   :class (str "h-6 w-6 !p-0 text-muted-foreground transition-opacity duration-100 ease-in bg-gray-01 "
+                                            "opacity-" opacity)}
+                                  (ui/icon "arrow-right"))]))
+                           {:id :ls-table-block-editor
+                            :as-mask? true})
+                          (editor-handler/edit-block! block :max {:container-id :unknown-container}))))))}
      (if block
        [:div
         (inline-title
-         (some->> (:block/title block)
-                  string/trim
-                  string/split-lines
-                  first))]
+          (some->> (:block/title block)
+            string/trim
+            string/split-lines
+            first))]
        [:div])
 
      [:div.absolute.right-0.p-1
@@ -248,11 +249,11 @@
                    (add-to-sidebar!))}
       [:div.flex.items-center
        (shui/button
-        {:variant :ghost
-         :title "Open in sidebar"
-         :class (str "h-5 w-5 !p-0 text-muted-foreground transition-opacity duration-100 ease-in bg-gray-01 "
-                     "opacity-" opacity)}
-        (ui/icon "layout-sidebar-right"))]]]))
+         {:variant :ghost
+          :title "Open in sidebar"
+          :class (str "h-5 w-5 !p-0 text-muted-foreground transition-opacity duration-100 ease-in bg-gray-01 "
+                   "opacity-" opacity)}
+         (ui/icon "layout-sidebar-right"))]]]))
 
 (defn build-columns
   [config properties & {:keys [with-object-name? with-id? add-tags-column?]
@@ -262,30 +263,30 @@
   (let [;; FIXME: Shouldn't file graphs have :block/tags?
         add-tags-column?' (and (config/db-based-graph? (state/get-current-repo)) add-tags-column?)
         properties' (->>
-                     (if (or (some #(= (:db/ident %) :block/tags) properties) (not add-tags-column?'))
-                       properties
-                       (conj properties (db/entity :block/tags)))
-                     (remove nil?))]
+                      (if (or (some #(= (:db/ident %) :block/tags) properties) (not add-tags-column?'))
+                        properties
+                        (conj properties (db/entity :block/tags)))
+                      (remove nil?))]
     (->> (concat
-          [{:id :select
-            :name "Select"
-            :header (fn [table _column] (header-checkbox table))
-            :cell (fn [table row column]
-                    (row-checkbox table row column))
-            :column-list? false
-            :resizable? false}
-           (when with-id?
-             {:id :id
-              :name "ID"
-              :header (fn [_table _column] (header-index))
-              :cell (fn [table row _column]
-                      (inc (.indexOf (:rows table) (:db/id row))))
-              :resizable? false})
-           (when with-object-name?
-             {:id :block/title
-              :name "Name"
-              :type :string
-              :header header-cp
+           [{:id :select
+             :name "Select"
+             :header (fn [table _column] (header-checkbox table))
+             :cell (fn [table row column]
+                     (row-checkbox table row column))
+             :column-list? false
+             :resizable? false}
+            (when with-id?
+              {:id :id
+               :name "ID"
+               :header (fn [_table _column] (header-index))
+               :cell (fn [table row _column]
+                       (inc (.indexOf (:rows table) (:db/id row))))
+               :resizable? false})
+            (when with-object-name?
+              {:id :block/title
+               :name "Name"
+               :type :string
+               :header header-cp
               :cell (fn [_table row _column style]
                       (block-title row {:property-ident :block/title
                                         :sidebar? (:sidebar? config)