style(nodes): enhance min style5

enhance display when no run js
any-block · Sep 25, 2024 · 57f5d6a · 57f5d6a
1 parent 6c7f89d
commit 57f5d6a
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 23 deletions.
diff --git a/src/ABConverter/ABConvertEvent.ts b/src/ABConverter/ABConvertEvent.ts
@@ -61,18 +61,21 @@ export function abConvertEvent(d: Element|Document) {
       if (Array.prototype.includes.call(els_min, children)) {
         if (els_child.length == 3) { // 结构：1-1，有圆点
           el_bracket.style.cssText = `
+            display: block;
             top: calc(50% + ${el_content.offsetHeight/2}px - 3px);
             clip-path: circle(40% at 50% 40%);
           `
         } else { // 结构：1-n，无圆点，是延长线
-          el_bracket.style.cssText = `
-            height: 1px;
-            top: calc(50% + ${el_content.offsetHeight/2}px - 1px);
-            width: 18px; /* 可以溢出点 */
-            left: -20px;
-            border-bottom: 1px solid var(--node-color);
-            clip-path: none;
-          `
+          el_bracket.setAttribute("display", "none")
+          // el_bracket.style.cssText = `
+          //   display: block;
+          //   height: 1px;
+          //   top: calc(50% + ${el_content.offsetHeight/2}px - 1px);
+          //   width: 18px; /* 可以溢出点 */
+          //   left: -20px;
+          //   border-bottom: 1px solid var(--node-color);
+          //   clip-path: none;
+          // `
         }
 
         if (els_child.length == 3 && el_content.offsetHeight == el_child_first_content.offsetHeight) { // 结构：1-1且高度相同，则用横线代替括号

diff --git a/src/ABConverter/converter/abc_list.ts b/src/ABConverter/converter/abc_list.ts
@@ -497,18 +497,17 @@ export class ListProcess{
       const el_node = document.createElement("div"); el_node.classList.add("ab-nodes-node")
       const el_node_content = document.createElement("div"); el_node.appendChild(el_node_content); el_node_content.classList.add("ab-nodes-content")
       ABConvertManager.getInstance().m_renderMarkdownFn(item.content, el_node_content)
-      const el_node_children = document.createElement("div"); el_node.appendChild(el_node_children); el_node_children.classList.add("ab-nodes-children")
-      const el_node_barcket = document.createElement("div"); el_node_children.appendChild(el_node_barcket); el_node_barcket.classList.add("ab-nodes-bracket"); el_node_barcket.style.setProperty("display", "none")
-      const el_node_barcket2 = document.createElement("div"); el_node_children.appendChild(el_node_barcket2); el_node_barcket2.classList.add("ab-nodes-bracket2"); el_node_barcket2.style.setProperty("display", "none")
+      const el_node_children = document.createElement("div"); el_node.appendChild(el_node_children); el_node_children.classList.add("ab-nodes-children"); el_node_children.setAttribute("has_children", "false"); // 为false则不应该显示
+      const el_node_barcket = document.createElement("div"); el_node_children.appendChild(el_node_barcket); el_node_barcket.classList.add("ab-nodes-bracket");
+      const el_node_barcket2 = document.createElement("div"); el_node_children.appendChild(el_node_barcket2); el_node_barcket2.classList.add("ab-nodes-bracket2");
       cache_els[item.level] = el_node_children
 
       // 将节点放入合适的位置
       if (item.level == 0) {
         el_root2.appendChild(el_node)
       } else if (item.level >= 1 && cache_els.hasOwnProperty(item.level-1)) {
         cache_els[item.level-1].appendChild(el_node)
-        ;(cache_els[item.level-1].childNodes[0] as HTMLElement)?.style?.setProperty("display", "block")
-        ;(cache_els[item.level-1].childNodes[1] as HTMLElement)?.style?.setProperty("display", "block")
+        cache_els[item.level-1].setAttribute("has_children", "true") // 要隐藏最后面括弧
       }
       else {
         console.error("节点错误")

diff --git a/src/ABConverter/style/styles.css b/src/ABConverter/style/styles.css
@@ -710,13 +710,17 @@ html[data-theme="dark"] #app {
   position: relative;
 }
 
+.ab-note .ab-nodes .ab-nodes-children[has_children="false"] {
+  display: none;
+}
+
 .ab-note .ab-nodes .ab-nodes-children .ab-nodes-bracket {
   content: "";
   position: absolute;
   width: 8px;
   height: 8px;
   top: calc(50% - 4px);
-  left: calc(-8px + 1px);
+  left: calc(-8px + 2px);
   clip-path: polygon(100% 0, 100% 100%, 13.4% 50%);
   background-color: currentColor;
 }
@@ -764,10 +768,10 @@ html[data-theme="dark"] #app {
 }
 
 .ab-note .ab-nodes.min .ab-nodes-children .ab-nodes-bracket {
-  width: 6px;
+  display: none;
   width: 6px;
   top: calc(50% - 4px);
-  left: calc(-8px - 0px + 1px);
+  left: calc(-8px + 2px);
 }
 
 .ab-note .ab-nodes.min .ab-nodes-content {