clone/logseq
1
0
Fork 0
mirror of https://github.com/logseq/logseq.git synced 2026-05-27 22:24:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
charlie
2024-01-03 17:58:08 +08:00
parent a56dba21f3
commit 03b0c1dc20
1 changed files with 38 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/main/frontend/components/right_sidebar.cljs
View File

@@ -193,29 +193,30 @@
(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))]
(menu-item {:href (if (db-model/whiteboard-page? name) (menu-item {:href (if (db-model/whiteboard-page? name)
(rfe/href :whiteboard {:name name}) (rfe/href :whiteboard {:name name})
(rfe/href :page {:name name}))} (t :right-side-bar/pane-open-as-page))))))) (rfe/href :page {:name name}))} (t :right-side-bar/pane-open-as-page)))))))
(rum/defc drop-indicator (rum/defc drop-indicator
[idx drag-to] [idx drag-to]
@@ -257,29 +258,26 @@
(let [[title component] item] (let [[title component] item]
[:div.flex.flex-col.w-full.relative [:div.flex.flex-col.w-full.relative
[:.flex.flex-row.justify-between.pr-2.sidebar-item-header.color-level.rounded-t-md [:.flex.flex-row.justify-between.pr-2.sidebar-item-header.color-level.rounded-t-md
{:class (when collapsed? "rounded-b-md") {:class (when collapsed? "rounded-b-md")
:draggable true :draggable true
:on-drag-start (fn [event] :on-drag-start (fn [event]
(editor-handler/block->data-transfer! (:block/name (db/entity db-id)) event) (editor-handler/block->data-transfer! (:block/name (db/entity db-id)) event)
(reset! *drag-from idx)) (reset! *drag-from idx))
:on-drag-end (fn [_event] :on-drag-end (fn [_event]
(when drag-to (state/sidebar-move-block! idx drag-to)) (when drag-to (state/sidebar-move-block! idx drag-to))
(reset! *drag-to nil) (reset! *drag-to nil)
(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)
:aria-controls (str "sidebar-panel-content-" idx) :aria-controls (str "sidebar-panel-content-" idx)
:on-click (fn [event] :on-click (fn [event]
(util/stop event) (util/stop event)
(state/sidebar-block-toggle-collapse! db-id))} (state/sidebar-block-toggle-collapse! db-id))}
[:span.opacity-50.hover:opacity-100.flex.items-center.pr-1 [:span.opacity-50.hover:opacity-100.flex.items-center.pr-1
(ui/rotating-arrow collapsed?)] (ui/rotating-arrow collapsed?)]
[:div.ml-1.font-medium.overflow-hidden [:div.ml-1.font-medium.overflow-hidden
@@ -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,17 +296,18 @@
(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"))]]
[:div {:role "region" [:div {:role "region"
:id (str "sidebar-panel-content-" idx) :id (str "sidebar-panel-content-" idx)
:aria-labelledby (str "sidebar-panel-header-" idx) :aria-labelledby (str "sidebar-panel-header-" idx)
:class (util/classnames [{:hidden collapsed? :class (util/classnames [{:hidden collapsed?
:initial (not collapsed?) :initial (not collapsed?)
:p-4 (not (contains? #{:page :block :contents :search :shortcut-settings} block-type)) :p-4 (not (contains? #{:page :block :contents :search :shortcut-settings} block-type))
:pt-4 (not (contains? #{:search :shortcut-settings} block-type)) :pt-4 (not (contains? #{:search :shortcut-settings} block-type))
:p-1 (not (contains? #{:search :shortcut-settings} block-type))}])} :p-1 (not (contains? #{:search :shortcut-settings} block-type))}])}
(inner-component component (not drag-from))] (inner-component component (not drag-from))]
(when drag-from (drop-area idx))])] (when drag-from (drop-area idx))])]
(drop-indicator idx drag-to)])))) (drop-indicator idx drag-to)]))))