From 516d7d27bd92b13b8955ff1db38fc8d99a4aae3c Mon Sep 17 00:00:00 2001
From: Stewart Allen <sa@grid.space>
Date: Sun, 26 May 2024 23:11:11 -0400
Subject: [PATCH] cleaner separators

---
 src/kiri/init.js    |  3 ++-
 src/kiri/ui.js      |  5 ++++-
 web/kiri/index.css  | 22 ++++++++++------------
 web/kiri/index.html | 10 +++++++---
 4 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/src/kiri/init.js b/src/kiri/init.js
index f7f4e5a5..9ad49622 100644
--- a/src/kiri/init.js
+++ b/src/kiri/init.js
@@ -1905,7 +1905,7 @@ gapp.register("kiri.init", [], (root, exports) => {
             sliceSupportSpan:    uc.newInput(LANG.sp_span_s, {title:LANG.sp_span_l, bound:uc.bound(0.0,200.0), convert:uc.toFloat, show:() => ui.sliceSupportEnable.checked}),
             sliceSupportEnable:  uc.newBoolean(LANG.sp_auto_s, onBooleanClick, {title:LANG.sp_auto_l, show:isNotBelt}),
             sliceSupportOutline: uc.newBoolean(LANG.sp_outl_s, onBooleanClick, {title:LANG.sp_outl_l}),
-
+            separator:           uc.newBlank({ class:"set-sep", driven }),
             sliceSupportGen:     uc.newRow([
                 ui.ssaGen = uc.newButton(LANG.sp_detect, onButtonClick, {class: "f-col grow a-center"})
             ], { modes: FDM, class: "ext-buttons f-row grow" }),
@@ -1956,6 +1956,7 @@ gapp.register("kiri.init", [], (root, exports) => {
             camTabsHeight:       uc.newInput(LANG.ct_hght_s, {title:LANG.ct_hght_l, convert:uc.toFloat, bound:uc.bound(0.005,100), units:true}),
             camTabsDepth:        uc.newInput(LANG.ct_dpth_s, {title:LANG.ct_dpth_l, convert:uc.toFloat, bound:uc.bound(0.005,100), units:true}),
             camTabsMidline:      uc.newBoolean(LANG.ct_midl_s, onBooleanClick, {title:LANG.ct_midl_l}),
+            separator:           uc.newBlank({ class:"set-sep", driven }),
             camTabsManual: uc.newRow([
                 (ui.tabAdd = uc.newButton(undefined, onButtonClick, {icon:'<i class="fas fa-plus"></i>'})),
                 (ui.tabDun = uc.newButton(undefined, onButtonClick, {icon:'<i class="fas fa-check"></i>'})),
diff --git a/src/kiri/ui.js b/src/kiri/ui.js
index d26a524c..549c37c6 100644
--- a/src/kiri/ui.js
+++ b/src/kiri/ui.js
@@ -856,9 +856,12 @@ gapp.register("kiri.ui", [], (root, exports) => {
             hide = opt.hide;
 
         row.isBlank = true;
-        row.setAttribute("class", "var-row");
         row.style.display = hide ? 'none' : '';
 
+        if (!opt.driven) {
+            row.setAttribute("class", "var-row");
+        }
+
         if (opt.class) {
             opt.class.split(' ').forEach(ce => {
                 row.classList.add(ce);
diff --git a/web/kiri/index.css b/web/kiri/index.css
index 57e35a1c..324cda6e 100644
--- a/web/kiri/index.css
+++ b/web/kiri/index.css
@@ -1,6 +1,7 @@
 :root {
     --fg-gray: #495057;
     --bg-gray: rgba(0,0,0,0.25);
+    --bg-gray-lt: rgba(0,0,0,0.15);
     --gradbar: linear-gradient(to right, #ddd, #666, #ddd);
     --gradbar-vert: linear-gradient(to bottom, #ddd, #666, #ddd);
     --holdbar: linear-gradient(to top, rgba(100,100,100,0.1), rgba(255,255,255,1), rgba(100,100,100,0.1));
@@ -505,12 +506,13 @@ th, tr, td, label {
 }
 
 .chonk {
-    margin: 10px 0 10px 0;
-    height: 0px;
-    min-height: 0px;
-    max-height: 0px;
+    /* margin: 10px 0 10px 0; */
+    /* height: 0px; */
+    min-height: 6px;
+    max-height: 6px;
     min-width: 100px;
-    border-top: 3px dashed black;
+    /* border-top: 3px dashed black; */
+    background-color: var(--bg-gray-lt);
 }
 #mode-info {
     white-space: nowrap;
@@ -662,10 +664,11 @@ th, tr, td, label {
 #top-sep {
     display: none;
 }
-#top-sep, #top-mid-sep {
+#top-sep, .line-sep {
     z-index: 14;
     height: 1px;
     min-height: 1px;
+    max-height: 1px;
     background-image: var(--gradbar);
 }
 .mid-sep {
@@ -1886,7 +1889,7 @@ th, tr, td, label {
     max-width: 0 !important;
     max-height: 0 o !important;
 }
-.pop-sep {
+.pop-sep, .set-sep {
     border: 0 !important;
     padding: 0 !important;
     height: 1px;
@@ -1895,11 +1898,6 @@ th, tr, td, label {
     margin-bottom: 2px;
     background-color: #bbb;
 }
-.set-sep {
-    background-color: var(--bg-gray) !important;
-    height: 10px;
-    right: -9px;
-}
 .set-header {
     padding: 3px 5px 3px 5px;
     margin: 7px 3px 3px 3px;
diff --git a/web/kiri/index.html b/web/kiri/index.html
index a02ec23e..ebba54a3 100644
--- a/web/kiri/index.html
+++ b/web/kiri/index.html
@@ -239,9 +239,9 @@
     </div>
 
     <!-- line betwwen menu bar and main application windows -->
-    <div id="top-mid-sep"></div>
+    <div class="line-sep"></div>
     <div id="progress"><div id="progbar"><div id="progtxt">loading</div></div></div>
-    <div id="top-mid-sep"></div>
+    <div class="line-sep"></div>
 
     <div id="mid" class="grow f-row">
 
@@ -267,7 +267,9 @@
                 <div><label>Device</label><span id="mode-device"></span></div>
                 <div><label>Profile</label><span id="mode-profile"></span></div>
             </div>
-            <!-- <div class="chonk"></div> -->
+            <div class="line-sep"></div>
+            <div class="chonk"></div>
+            <div class="line-sep"></div>
             <div id="settings" class="f-col grow">
                 <!-- FDM -->
                 <div id="fdm-layers" class="f-col set2-group mode-fdm"></div>
@@ -297,7 +299,9 @@
                 <div id="sla-support" class="f-col set2-group mode-sla"></div>
                 <div id="sla-output" class="f-col set2-group mode-sla"></div>
             </div>
+            <div class="line-sep"></div>
             <div class="chonk"></div>
+            <div class="line-sep"></div>
         </div>
 
         <!-- vertical separation between settings tray and workspace -->