浏览代码

enhance: add border to bullet instead of block container

Tienson Qin 1 年之前
父节点
当前提交
2b0d956626
共有 2 个文件被更改,包括 19 次插入30 次删除
  1. 14 11
      src/main/frontend/components/block.cljs
  2. 5 19
      src/main/frontend/components/block.css

+ 14 - 11
src/main/frontend/components/block.cljs

@@ -1739,7 +1739,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? selected?]
   (let [doc-mode?          (state/sub :document/mode?)
         control-show?      (util/react *control-show?)
         ref?               (:ref? config)
@@ -1784,7 +1784,10 @@
                                    " hide-inner-bullet")
                                  (when order-list? " as-order-list typed-list"))}
 
-                    [:span.bullet {:blockid (str uuid)}
+                    [:span.bullet (cond->
+                                    {:blockid (str uuid)}
+                                    selected?
+                                    (assoc :class "selected"))
                      (when order-list?
                        [:label (str order-list-idx ".")])]]]]
        (cond
@@ -1796,14 +1799,14 @@
          bullet
 
          (or
-           (and empty-content?
-                (not edit?)
-                (not (:block.temp/top? block))
-                (not (:block.temp/bottom? block))
-                (not (util/react *control-show?)))
-           (and doc-mode?
-                (not collapsed?)
-                (not (util/react *control-show?))))
+          (and empty-content?
+               (not edit?)
+               (not (:block.temp/top? block))
+               (not (:block.temp/bottom? block))
+               (not (util/react *control-show?)))
+          (and doc-mode?
+               (not collapsed?)
+               (not (util/react *control-show?))))
          ;; hidden
          [:span.bullet-container]
 
@@ -2907,7 +2910,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? selected?))
 
       (when @*show-left-menu?
         (block-left-menu config block))

+ 5 - 19
src/main/frontend/components/block.css

@@ -365,10 +365,6 @@
   }
 }
 
-.block-main-container {
-  padding: 2px 0;
-}
-
 .ls-block {
   position: relative;
   min-height: 24px;
@@ -376,22 +372,12 @@
   border-bottom: 1px solid transparent;
   transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 
-  &[haschild="true"] {
-    &.selected {
-      > .block-main-container {
-        border-bottom-width: 1px;
-        border-bottom-style: solid;
-        border-bottom-color: var(--ts-primary-background-cotor);
-        border-radius: 2px;
-      }
-    }
+  &.selected {
+    border-radius: 2px;
   }
 
-  &[haschild="false"] {
-    &.selected {
-      border-bottom-color: var(--ts-primary-background-cotor);
-      border-radius: 2px;
-    }
+  .bullet-container .selected {
+    border: 1px solid;
   }
 }
 
@@ -771,4 +757,4 @@ html.is-mac {
   &-item {
     @apply bg-gray-03 rounded p-4;
   }
-}
+}