From 5454d821a008081d6793a4e662a46ae44006db6e Mon Sep 17 00:00:00 2001 From: charlie Date: Sun, 27 Apr 2025 10:53:04 +0800 Subject: [PATCH] enhance(ui): add support for the shui popup as mask from the target --- deps/shui/src/logseq/shui/popup/core.cljs | 15 ++- src/main/frontend/components/views.cljs | 109 +++++++++++----------- 2 files changed, 65 insertions(+), 59 deletions(-) diff --git a/deps/shui/src/logseq/shui/popup/core.cljs b/deps/shui/src/logseq/shui/popup/core.cljs index 1fdf87512d..f76f857b9d 100644 --- a/deps/shui/src/logseq/shui/popup/core.cljs +++ b/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] diff --git a/src/main/frontend/components/views.cljs b/src/main/frontend/components/views.cljs index 37b848b5da..735853a223 100644 --- a/src/main/frontend/components/views.cljs +++ b/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)