feat(): Bullet and the UX for block control

src/main/frontend/components/block.cljs

@@ -72,6 +72,7 @@
             [logseq.graph-parser.util.page-ref :as page-ref]
             [logseq.graph-parser.whiteboard :as gp-whiteboard]
             [logseq.shui.core :as shui]
+            [logseq.shui.ui :as shui-ui]
             [medley.core :as medley]
             [promesa.core :as p]
             [reitit.frontend.easy :as rfe]
@@ -1681,7 +1682,7 @@
   (reset! *dragging-block block))
 
 (defn- bullet-on-click
-  [e block uuid]
+  [e block uuid collapsed?]
   (cond
     (gp-whiteboard/shape-block? block)
     (route-handler/redirect-to-whiteboard! (get-in block [:block/page :block/name]) {:block-id uuid})
@@ -1698,10 +1699,19 @@
     (do (whiteboard-handler/add-new-block-portal-shape!
          uuid
          (whiteboard-handler/closest-shape (.-target e)))
-        (util/stop e))
+        (util/stop e)) 
+
+    (gobj/get e "altKey")
+    (do
+         (when uuid (route-handler/redirect-to-page! uuid))
+         (util/stop e))
 
-    :else
-    (when uuid (route-handler/redirect-to-page! uuid))))
+     :else
+    (if collapsed?
+      (editor-handler/expand-block! uuid)
+      (editor-handler/collapse-block! uuid))
+    ;; (when uuid (route-handler/redirect-to-page! uuid))
+    ))
 
 (rum/defc block-children < rum/reactive
   [config block children collapsed?]
@@ -1769,22 +1779,22 @@
                          (editor-handler/expand-block! uuid)
                          (editor-handler/collapse-block! uuid))))}
         [:span {:class (if (or (and control-show?
-                                    (or collapsed?
-                                        (editor-handler/collapsable? uuid {:semantic? true})))
+                                    (or collapsed? (editor-handler/collapsable? uuid {:semantic? true})))
                                (and collapsed? order-list?))
                          "control-show cursor-pointer"
-                         "control-hide")}
+                         (when-not collapsed? "control-hide"))
+                }
          (ui/rotating-arrow collapsed?)]])
 
-     (let [bullet [:a.bullet-link-wrap {:on-click #(bullet-on-click % block uuid)}
+     (let [bullet [:a.bullet-link-wrap {:on-click #(bullet-on-click % block uuid collapsed?)}
                    [:span.bullet-container.cursor
                     {:id (str "dot-" uuid)
-                     :title (str (t :command.editor/zoom-in) " / " (t :help/context-menu))
+                     :title (str "Alt + Click=> " (t :command.editor/zoom-in))
                      :draggable true
                      :on-drag-start (fn [event]
                                       (bullet-drag-start event block uuid block-id))
                      :blockid (str uuid)
-                     :class (str (when collapsed? "bullet-closed")
+                     :class (str ;; (when collapsed? "bullet-closed")
                                  (when (and (:document/mode? config)
                                             (not collapsed?))
                                    " hide-inner-bullet")

src/main/frontend/components/settings.cljs

@@ -642,7 +642,7 @@
 ;;             (let [value (not enable-block-timestamps?)]
 ;;               (config-handler/set-config! :feature/enable-block-timestamps? value)))))
 
-(defn switch-collapsed-zoom-buttons-row [t switch-collapsed-zoom-buttons?]
+(defn switch-collapsed-zoom-buttons-row [switch-collapsed-zoom-buttons?]
   (toggle "collapsed_zoom_buttons"
           (t :settings-page/switch-collapsed-zoom-buttons)
           switch-collapsed-zoom-buttons?
@@ -814,6 +814,7 @@
      (when plugins-of-settings (marketplace-row))
      (when plugins-of-settings (plugin-settings-row))
      (when plugins-of-settings (auto-check-for-updates-control))
+
      (when (and current-repo (util/electron?)) (journal-template-user-submit (state/journal-template-user-submit?)))]))
 
 (rum/defcs settings-style < rum/reactive
@@ -841,7 +842,7 @@
         preferred-date-format (state/get-date-formatter)
         preferred-workflow (state/get-preferred-workflow)
         enable-timetracking? (state/enable-timetracking?)
-        enable-all-pages-public? (state/all-pages-public?)
+        switch-collapsed-zoom-buttons? (state/collapsed-zoom-buttons?)
         logical-outdenting? (state/logical-outdenting?)
         show-full-blocks? (state/show-full-blocks?)
         preferred-pasting-file? (state/preferred-pasting-file?)
@@ -862,8 +863,8 @@
        (tooltip-row enable-tooltip?))
      (when-not (or (util/mobile?) (mobile-util/native-platform?))
        (shortcut-tooltip-row enable-shortcut-tooltip?))
-     (timetracking-row enable-timetracking?)
-     (enable-all-pages-public-row enable-all-pages-public?)]))
+     (timetracking-row enable-timetracking?) 
+     (switch-collapsed-zoom-buttons-row switch-collapsed-zoom-buttons?)]))
 
 (rum/defc settings-git
   []

src/main/frontend/components/svg.cljs

@@ -158,6 +158,28 @@
     {:d         "M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"
      :fill-rule "evenodd"}]])
 
+(rum/defc plus
+  []
+  [:svg.h-4.w-4
+   {:aria-hidden "true"
+    :version     "1.1"
+    :view-box    "0 0 448 512"
+    :fill        "currentColor"
+    :display     "inline-block"}
+   [:path
+    {:d         "M432 224H272V64c0-17.7-14.3-32-32-32s-32 14.3-32 32v160H16c-8.8 0-16 7.2-16 16s7.2 16 16 16h192v160c0 17.7 14.3 32 32 32s32-14.3 32-32V256h160c8.8 0 16-7.2 16-16s-7.2-16-16-16z"}]])
+
+(rum/defc minus
+  []
+  [:svg.h-4.w-4
+   {:aria-hidden "true"
+    :version     "1.1"
+    :view-box    "0 0 448 512"
+    :fill        "currentColor"
+    :display     "inline-block"}
+   [:path
+    {:d         "M432 240H16c-8.8 0-16 7.2-16 16s7.2 16 16 16h416c8.8 0 16-7.2 16-16s-7.2-16-16-16z"}]])
+
 (defn logo
   ([] (logo 20))
   ([size]

src/main/frontend/components/theme.css

@@ -126,9 +126,9 @@ main.ls-fold-button-on-right {
       @apply absolute -right-3 pr-2 pt-1 top-0 z-[1]
       opacity-20 active:opacity-100;
 
-      .rotating-arrow.collapsed svg {
+      /* .rotating-arrow.collapsed svg {
         transform: rotate(180deg);
-      }
+      } */
     }
 
     &[haschild="true"] {

src/main/frontend/ui.cljs

@@ -763,7 +763,9 @@
   [collapsed?]
   [:span
    {:class (if collapsed? "rotating-arrow collapsed" "rotating-arrow not-collapsed")}
-   (svg/caret-right)])
+   (if collapsed?
+     (svg/plus)
+     (svg/minus))])
 
 (rum/defcs foldable-title <
   (rum/local false ::control?)

src/main/frontend/ui.css

@@ -326,8 +326,22 @@ html.is-mobile {
   }
 }
 
-.rotating-arrow.not-collapsed svg {
-  transform: rotate(90deg);
+span.rotating-arrow {
+  &.not-collapsed {
+    cursor: zoom-out;
+  }
+
+  &.collapsed {
+    cursor: zoom-in;
+  }
+}
+
+div.block-children-container>div.block-children-left-border {
+  cursor: zoom-in;
+}
+
+div.block-children-container:has(div.block-children>div[data-collapsed="false"])>div.block-children-left-border {
+cursor: zoom-out;
 }
 
 .rotating-arrow svg {