improve(ux): WIP support place fold arrow on the right of block conta…

…iner

src/main/frontend/components/block.cljs

@@ -1707,7 +1707,7 @@
    (every? #(= % ["Horizontal_Rule"]) body)))
 
 (rum/defcs block-control < rum/reactive
-  [state config block uuid block-id collapsed? *control-show? edit?]
+  [state config block uuid block-id collapsed? *control-show? edit? has-child?]
   (let [doc-mode? (state/sub :document/mode?)
         control-show? (util/react *control-show?)
         ref? (:ref? config)
@@ -1717,20 +1717,22 @@
               :margin-top 0
               :float "left"}}
 
-     [:a.block-control
-      {:id (str "control-" uuid)
-       :on-click (fn [event]
-                   (util/stop event)
-                   (state/clear-edit!)
-                   (if ref?
-                     (state/toggle-collapsed-block! uuid)
-                     (if collapsed?
-                       (editor-handler/expand-block! uuid)
-                       (editor-handler/collapse-block! uuid))))}
-      [:span {:class (if (and control-show?
-                              (or collapsed?
-                                  (editor-handler/collapsable? uuid {:semantic? true}))) "control-show cursor-pointer" "control-hide")}
-       (ui/rotating-arrow collapsed?)]]
+     (when has-child?
+       [:a.block-control
+        {:id       (str "control-" uuid)
+         :on-click (fn [event]
+                     (util/stop event)
+                     (state/clear-edit!)
+                     (if ref?
+                       (state/toggle-collapsed-block! uuid)
+                       (if collapsed?
+                         (editor-handler/expand-block! uuid)
+                         (editor-handler/collapse-block! uuid))))}
+        [:span {:class (if (and control-show?
+                                (or collapsed?
+                                    (editor-handler/collapsable? uuid {:semantic? true}))) "control-show cursor-pointer" "control-hide")}
+         (ui/rotating-arrow collapsed?)]])
+
      (let [bullet [:a {:on-click (fn [event]
                                    (bullet-on-click event block uuid))}
                    [:span.bullet-container.cursor
@@ -2761,7 +2763,7 @@
        :on-mouse-leave (fn [e]
                          (block-mouse-leave e *control-show? block-id doc-mode?))}
       (when (not slide?)
-        (block-control config block uuid block-id collapsed? *control-show? edit?))
+        (block-control config block uuid block-id collapsed? *control-show? edit? has-child?))
 
       (when @*show-left-menu?
         (block-left-menu config block))

src/main/frontend/components/block.css

@@ -1,4 +1,6 @@
 .block-content-wrapper {
+  @apply border border-red-400;
+
   /* 38px is the width of block-control */
   width: calc(100% - 22px);
 
@@ -9,6 +11,8 @@
 }
 
 .block-content {
+  @apply border border-blue-400;
+
   min-height: 24px;
   max-width: 100%;
   overflow: initial;
@@ -323,6 +327,8 @@
 }
 
 .ls-block {
+  @apply border border-dashed border-green-600;
+
   position: relative;
   min-height: 24px;
   padding: 2px 0;
@@ -648,4 +654,4 @@ html.is-mac {
       cursor: pointer;
     }
   }
-}
+}

src/main/frontend/components/sidebar.cljs

@@ -732,6 +732,7 @@
         edit? (:editor/editing? @state/state)
         default-home (get-default-home-if-valid)
         logged? (user-handler/logged-in?)
+        fold-arrow-on-right? (state/sub :mobile/fold-arrow-on-right-enabled?)
         show-action-bar? (state/sub :mobile/show-action-bar?)
         show-recording-bar? (state/sub :mobile/show-recording-bar?)
         preferred-language (state/sub [:preferred-language])]
@@ -757,6 +758,7 @@
       {:class (util/classnames [{:ls-left-sidebar-open left-sidebar-open?
                                  :ls-right-sidebar-open sidebar-open?
                                  :ls-wide-mode wide-mode?
+                                 :ls-fold-arrow-on-right (and (util/sm-breakpoint?) fold-arrow-on-right?)
                                  :ls-hl-colored ls-block-hl-colored?}])}
 
       [:button#skip-to-main

src/main/frontend/components/sidebar.css

@@ -361,7 +361,7 @@
   }
 
   &.is-touching {
-    width: 100%;
+    width: 100% !important;
     transition: none;
 
     .left-sidebar-inner {
@@ -375,7 +375,7 @@
   }
 
   &.is-open {
-    width: 100%;
+    width: 100% !important;
 
     .left-sidebar-inner {
       transform: translate3d(0, 0, 0);

src/main/frontend/components/theme.css

@@ -1,7 +1,6 @@
 :root {
   scrollbar-width: thin;
-  scrollbar-color: var(--ls-scrollbar-foreground-color)
-    var(--ls-scrollbar-background-color);
+  scrollbar-color: var(--ls-scrollbar-foreground-color) var(--ls-scrollbar-background-color);
 
   --ls-z-index-level-0: 0;
   --ls-z-index-level-1: 9;
@@ -114,3 +113,34 @@ html.is-resizing-buf {
     }
   }
 }
+
+main.ls-fold-arrow-on-right {
+  #main-content-container {
+    padding: 0 15px;
+
+
+    .page-blocks-inner {
+      margin-left: 0 !important;
+    }
+  }
+
+  .cp__sidebar-left-layout {
+    width: 16px;
+  }
+
+  .ls-block {
+    .block-control {
+      @apply absolute -right-2 top-1 bottom-1 bg-yellow-300;
+
+      .rotating-arrow.collapsed svg {
+        transform: rotate(180deg);
+      }
+    }
+
+    &[haschild="true"] {
+      .control-hide {
+        display: block !important;
+      }
+    }
+  }
+}

src/main/frontend/state.cljs

@@ -166,6 +166,7 @@
      :assets/alias-dirs                     (or (storage/get :assets/alias-dirs) [])
 
      ;; mobile
+     :mobile/fold-arrow-on-right-enabled?   true
      :mobile/container-urls                 nil
      :mobile/show-action-bar?               false
      :mobile/actioned-block                 nil