diff --git a/src/main/frontend/components/container.css b/src/main/frontend/components/container.css index e51148e18..526165eb7 100644 --- a/src/main/frontend/components/container.css +++ b/src/main/frontend/components/container.css @@ -644,7 +644,7 @@ html[data-theme='dark'] { &.item-type-block .sidebar-item-header { background: linear-gradient(0deg, var(--ls-secondary-background-color), var(--ls-tertiary-background-color)); } - + &.collapsed { flex: 0; overflow: initial; @@ -655,35 +655,31 @@ html[data-theme='dark'] { } } - /* &:not(:hover) { ::-webkit-scrollbar-thumb, ::-webkit-scrollbar, ::-webkit-scrollbar-thumb:active { background-color: transparent; - } + } } - */ .initial { flex: 1; } - .close { - transform: scale(0.8); - transition: transform 0.1s, opacity 0.1s; - visibility: hidden; + .item-actions { + @apply h-full invisible; opacity: 0; - &:hover { - transform: scale(1); + .button { + @apply p-0 pl-2 flex items-center h-full; } } - + .is-mobile &, &:hover { - .close { - visibility: visible; + .item-actions { + @apply visible; opacity: 1; } } diff --git a/src/main/frontend/components/right_sidebar.cljs b/src/main/frontend/components/right_sidebar.cljs index bb5a3d5f9..b67bd33ff 100644 --- a/src/main/frontend/components/right_sidebar.cljs +++ b/src/main/frontend/components/right_sidebar.cljs @@ -21,7 +21,8 @@ [frontend.modules.editor.undo-redo :as undo-redo] [medley.core :as medley] [reitit.frontend.easy :as rfe] - [rum.core :as rum])) + [rum.core :as rum] + [frontend.handler.common :as common-handler])) (rum/defc toggle [] @@ -165,23 +166,30 @@ ["" [:span]])) -(defn close - ([on-close] - (close nil on-close)) - ([class on-close] - [:a.close.flex.items-center - (cond-> {:on-click on-close - :style {:margin-right -4}} - class - (assoc :class class)) - svg/close])) - (defonce *drag-to (atom nil)) (defonce *drag-from (atom nil)) +(rum/defc context-menu-content + [db-id idx collapsed?] + [:.menu-links-wrapper + (ui/menu-link {:on-click #(state/sidebar-remove-block! idx)} "Close" nil) + (ui/menu-link {:on-click #(state/sidebar-remove-rest! db-id)} "Close others" nil) + (ui/menu-link {:on-click (fn [] + (state/clear-sidebar-blocks!) + (state/hide-right-sidebar!))} "Close all" nil) + [:hr.menu-separator] + (ui/menu-link {:on-click #(state/sidebar-block-toggle-collapse! db-id)} (if collapsed? "Expand" "Collapse") nil) + (ui/menu-link {:on-click #(state/sidebar-block-collapse-rest! db-id)} "Collapse others" nil) + (when (integer? db-id) [:hr.menu-separator]) + (when (integer? db-id) + (let [name (:block/name (db/entity db-id))] + (ui/menu-link {:href (if (db-model/whiteboard-page? name) + (rfe/href :whiteboard {:name name}) + (rfe/href :page {:name name}))} "Open as page" nil)))]) + (rum/defc sidebar-item < rum/reactive [repo idx db-id block-type] (let [item (build-sidebar-item repo idx db-id block-type) @@ -193,30 +201,43 @@ {:class [(str "item-type-" (name block-type)) (when collapsed? "collapsed") (when (and (= idx drag-to) (not= drag-to drag-from)) "drag-over")]} - (let [[title component] item] + (let [[title component] item + page-name (if (integer? db-id) + (:block/name (db/entity db-id)) + db-id)] [:div.flex.flex-col.w-full [:button.flex.flex-row.justify-between.p-2.sidebar-item-header.color-level {:draggable true :on-drag-leave #(reset! *drag-to nil) :on-drag-over #(reset! *drag-to idx) :on-drag-start (fn [event] - (when-let [page-name (if (integer? db-id) - (:block/name (db/entity db-id)) - db-id)] - (editor-handler/block->data-transfer! page-name event)) + (editor-handler/block->data-transfer! page-name event) (reset! *drag-from idx)) :on-drag-end (fn [_event] (reset! *drag-to nil) (reset! *drag-from nil)) :on-click (fn [event] (.preventDefault event) - (state/sidebar-block-toggle-collapse! db-id))} + (js/console.log event.which) + (state/sidebar-block-toggle-collapse! db-id)) + :on-mouse-up (fn [event] + (when (= (.-which (.-nativeEvent event)) 2) + (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 collapsed?)))} [:div.flex.flex-row.overflow-hidden [:span.opacity-50.hover:opacity-100.flex.items-center.pr-1 (ui/rotating-arrow collapsed?)] [:div.ml-1.font-medium.overflow-hidden title]] - (close #(state/sidebar-remove-block! idx))] + [:.item-actions.flex + (ui/dropdown (fn [{:keys [toggle-fn]}] + [:button.button {:on-click (fn [e] + (util/stop e) + (toggle-fn))} (ui/icon "dots")]) + #(context-menu-content db-id idx collapsed?)) + [:button.button.close {:on-click #(state/sidebar-remove-block! idx)} (ui/icon "x")]]] [:div.scrollbar-spacing.p-4 {:class (if collapsed? "hidden" "initial")} component]])])))) diff --git a/src/main/frontend/state.cljs b/src/main/frontend/state.cljs index d0811dd02..214da9722 100644 --- a/src/main/frontend/state.cljs +++ b/src/main/frontend/state.cljs @@ -1101,6 +1101,12 @@ Similar to re-frame subscriptions" (when (empty? (:sidebar/blocks @state)) (hide-right-sidebar!))) +(defn sidebar-remove-rest! + [db-id] + (update-state! :sidebar/blocks (fn [blocks] + (remove #(not= (second %) db-id) blocks))) + (set-state! [:ui/sidebar-collapsed-blocks db-id] false)) + (defn sidebar-replace-block! [old-sidebar-key new-sidebar-key] (update-state! :sidebar/blocks (fn [blocks] @@ -1121,6 +1127,11 @@ Similar to re-frame subscriptions" (when db-id (update-state! [:ui/sidebar-collapsed-blocks db-id] not))) +(defn sidebar-block-collapse-rest! + [db-id] + (let [items (disj (set (map second (:sidebar/blocks @state))) db-id)] + (for [item items] (set-state! [:ui/sidebar-collapsed-blocks item] true)))) + (defn get-edit-block [] (get @state :editor/block))