Add toggle to hide top bar

Fixes #422
openscopeproject · Oct 23, 2023 · 7cf646f · 7cf646f
1 parent ae07550
commit 7cf646f
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 4 deletions.
diff --git a/InteractiveHtmlBom/web/ibom.css b/InteractiveHtmlBom/web/ibom.css
@@ -617,7 +617,45 @@ mark.highlight {
   flex-wrap: wrap;
   justify-content: flex-end;
   align-items: center;
+}
+
+#topdivider {
   border-bottom: 2px solid black;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.dark #topdivider {
+  border-bottom: 2px solid #ccc;
+}
+
+#topdivider>div {
+  position: relative;
+}
+
+#toptoggle {
+  cursor: pointer;
+  user-select: none;
+  position: absolute;
+  padding: 0.1rem 0.3rem;
+  top: -0.4rem;
+  left: -1rem;
+  font-size: 1.4rem;
+  line-height: 60%;
+  border: 1px solid black;
+  border-radius: 1rem;
+  background-color: #fff;
+  z-index: 100;
+}
+
+.flipped {
+  transform: rotate(0.5turn);
+}
+
+.dark #toptoggle {
+  border: 1px solid #fff;
+  background-color: #222;
 }
 
 #fileinfodiv {
@@ -634,10 +672,6 @@ mark.highlight {
   flex-shrink: 0;
 }
 
-.dark #top {
-  border-bottom: 2px solid #ccc;
-}
-
 #dbg {
   display: block;
 }

diff --git a/InteractiveHtmlBom/web/ibom.html b/InteractiveHtmlBom/web/ibom.html
@@ -286,6 +286,11 @@
       </div>
     </div>
   </div>
+  <div id="topdivider">
+    <div class="hideonprint">
+      <div id="toptoggle" onclick="topToggle()">︽</div>
+    </div>
+  </div>
   <div id="bot" class="split" style="flex: 1 1">
     <div id="bomdiv" class="split split-horizontal">
       <div style="width: 100%">

diff --git a/InteractiveHtmlBom/web/ibom.js b/InteractiveHtmlBom/web/ibom.js
@@ -1251,6 +1251,18 @@ function hideNetlistButton() {
   document.getElementById("bom-netlist-btn").style.display = "none";
 }
 
+function topToggle() {
+  var top = document.getElementById("top");
+  var toptoggle = document.getElementById("toptoggle");
+  if (top.style.display === "none") {
+    top.style.display = "flex";
+    toptoggle.classList.remove("flipped");
+  } else {
+    top.style.display = "none";
+    toptoggle.classList.add("flipped");
+  }
+}
+
 window.onload = function (e) {
   initUtils();
   initRender();