refactor(ui): polish dropdown menu from the right sidebar block card

This commit is contained in:
charlie
2024-01-03 17:58:08 +08:00
parent a56dba21f3
commit 03b0c1dc20

View File

@@ -193,23 +193,24 @@
(rum/defc x-menu-content (rum/defc x-menu-content
[db-id idx type collapsed? block-count toggle-fn as-dropdown?] [db-id idx type collapsed? block-count toggle-fn as-dropdown?]
(let [menu-content (if as-dropdown? shui/dropdown-menu-content shui/context-menu-content) (let [menu-content (if as-dropdown? shui/dropdown-menu-content shui/context-menu-content)
menu-item (if as-dropdown? shui/dropdown-menu-item shui/context-menu-content)] menu-item (if as-dropdown? shui/dropdown-menu-item shui/context-menu-content)
multi-items? (> block-count 1)]
(menu-content (menu-content
{:on-click toggle-fn :class "w-48" :align "end"} {:on-click toggle-fn :class "w-48" :align "end"}
(menu-item {:on-click #(state/sidebar-remove-block! idx)} (t :right-side-bar/pane-close)) (menu-item {:on-click #(state/sidebar-remove-block! idx)} (t :right-side-bar/pane-close))
(when (> block-count 1) (menu-item {:on-click #(state/sidebar-remove-rest! db-id)} (t :right-side-bar/pane-close-others))) (when multi-items? (menu-item {:on-click #(state/sidebar-remove-rest! db-id)} (t :right-side-bar/pane-close-others)))
(when (> block-count 1) (menu-item {:on-click (fn [] (when multi-items? (menu-item {:on-click (fn []
(state/clear-sidebar-blocks!) (state/clear-sidebar-blocks!)
(state/hide-right-sidebar!))} (t :right-side-bar/pane-close-all))) (state/hide-right-sidebar!))} (t :right-side-bar/pane-close-all)))
(when (or (not collapsed?) (> block-count 1)) [:hr.menu-separator]) (when (and (not collapsed?) multi-items?) [:hr.menu-separator])
(when-not collapsed? (menu-item {:on-click #(state/sidebar-block-toggle-collapse! db-id)} (t :right-side-bar/pane-collapse))) (when-not collapsed? (menu-item {:on-click #(state/sidebar-block-toggle-collapse! db-id)} (t :right-side-bar/pane-collapse)))
(when (> block-count 1) (menu-item {:on-click #(state/sidebar-block-collapse-rest! db-id)} (t :right-side-bar/pane-collapse-others))) (when multi-items? (menu-item {:on-click #(state/sidebar-block-collapse-rest! db-id)} (t :right-side-bar/pane-collapse-others)))
(when (> block-count 1) (menu-item {:on-click #(state/sidebar-block-set-collapsed-all! true)} (t :right-side-bar/pane-collapse-all))) (when multi-items? (menu-item {:on-click #(state/sidebar-block-set-collapsed-all! true)} (t :right-side-bar/pane-collapse-all)))
(when (or collapsed? (> block-count 1)) [:hr.menu-separator]) (when (and collapsed? multi-items?) [:hr.menu-separator])
(when collapsed? (menu-item {:on-click #(state/sidebar-block-toggle-collapse! db-id)} (t :right-side-bar/pane-expand))) (when collapsed? (menu-item {:on-click #(state/sidebar-block-toggle-collapse! db-id)} (t :right-side-bar/pane-expand)))
(when (> block-count 1) (menu-item {:on-click #(state/sidebar-block-set-collapsed-all! false)} (t :right-side-bar/pane-expand-all))) (when multi-items? (menu-item {:on-click #(state/sidebar-block-set-collapsed-all! false)} (t :right-side-bar/pane-expand-all)))
(when (= type :page) [:hr.menu-separator]) (when (= type :page) [:hr.menu-separator])
(when (= type :page) (when (= type :page)
(let [name (:block/name (db/entity db-id))] (let [name (:block/name (db/entity db-id))]
@@ -268,11 +269,8 @@
(reset! *drag-from nil)) (reset! *drag-from nil))
:on-mouse-up (fn [event] :on-mouse-up (fn [event]
(when (= (.-which (.-nativeEvent event)) 2) (when (= (.-which (.-nativeEvent event)) 2)
(state/sidebar-remove-block! idx))) (state/sidebar-remove-block! idx)))}
;:on-context-menu (fn [e]
; (util/stop e)
; (common-handler/show-custom-context-menu! e (context-menu-content db-id idx block-type collapsed? block-count #())))
}
[:button.flex.flex-row.p-2.items-center.w-full.overflow-hidden [:button.flex.flex-row.p-2.items-center.w-full.overflow-hidden
{:aria-expanded (str (not collapsed?)) {:aria-expanded (str (not collapsed?))
:id (str "sidebar-panel-header-" idx) :id (str "sidebar-panel-header-" idx)
@@ -287,8 +285,10 @@
[:.item-actions.flex.items-center [:.item-actions.flex.items-center
(shui/dropdown-menu (shui/dropdown-menu
(shui/dropdown-menu-trigger (shui/dropdown-menu-trigger
{:as-child true}
(shui/button (shui/button
{:title (t :right-side-bar/pane-more) {:title (t :right-side-bar/pane-more)
:class "px-3"
:variant :text} :variant :text}
(ui/icon "dots"))) (ui/icon "dots")))
(x-menu-content db-id idx block-type collapsed? block-count #() true)) (x-menu-content db-id idx block-type collapsed? block-count #() true))
@@ -296,6 +296,7 @@
(shui/button (shui/button
{:title (t :right-side-bar/pane-close) {:title (t :right-side-bar/pane-close)
:variant :text :variant :text
:class "px-3"
:on-click #(state/sidebar-remove-block! idx)} :on-click #(state/sidebar-remove-block! idx)}
(ui/icon "x"))]] (ui/icon "x"))]]