Add settings menu in html

qu1ck · qu1ck · commit 07961258e452 · 2018-08-03T02:52:05.000-07:00
diff --git a/InteractiveHtmlBom/ibom.css b/InteractiveHtmlBom/ibom.css
@@ -218,3 +218,43 @@ mark.highlight {
   padding: 2px;
   border-radius: 6px;
 }
+
+.menubtn {
+  background-color: white;
+  font-size: 16px;
+  border: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 20 20'%3E%3Cpath fill='none' d='M0 0h20v20H0V0z'/%3E%3Cpath d='M15.95 10.78c.03-.25.05-.51.05-.78s-.02-.53-.06-.78l1.69-1.32c.15-.12.19-.34.1-.51l-1.6-2.77c-.1-.18-.31-.24-.49-.18l-1.99.8c-.42-.32-.86-.58-1.35-.78L12 2.34c-.03-.2-.2-.34-.4-.34H8.4c-.2 0-.36.14-.39.34l-.3 2.12c-.49.2-.94.47-1.35.78l-1.99-.8c-.18-.07-.39 0-.49.18l-1.6 2.77c-.1.18-.06.39.1.51l1.69 1.32c-.04.25-.07.52-.07.78s.02.53.06.78L2.37 12.1c-.15.12-.19.34-.1.51l1.6 2.77c.1.18.31.24.49.18l1.99-.8c.42.32.86.58 1.35.78l.3 2.12c.04.2.2.34.4.34h3.2c.2 0 .37-.14.39-.34l.3-2.12c.49-.2.94-.47 1.35-.78l1.99.8c.18.07.39 0 .49-.18l1.6-2.77c.1-.18.06-.39-.1-.51l-1.67-1.32zM10 13c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3z'/%3E%3C/svg%3E%0A");
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.menu {
+  position: relative;
+  display: inline-block;
+}
+
+.menu-content {
+  display: none;
+  position: absolute;
+  background-color: white;
+  right: 0;
+  min-width: 300px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  z-index: 100;
+  padding: 8px;
+}
+
+.menu:hover .menu-content {
+  display: block;
+}
+
+.menu:hover .menubtn {
+  background-color: #eee;
+}
+
+.checkbox-label {
+  display: inline-block;
+  padding: 8px;
+  border: 1px solid #ccc;
+  width: calc(100% - 18px);
+}
diff --git a/InteractiveHtmlBom/ibom.html b/InteractiveHtmlBom/ibom.html
@@ -30,11 +30,17 @@
 
 <body>
 <div id="topmostdiv" style="width: 100%; height: 100%">
-  <div id="top" class="split" style="height: 80px; border-bottom: 2px solid black;">
+  <div id="top" style="height: 80px; border-bottom: 2px solid black;">
     <div style="float: right;">
-      <div class="hideonprint" style="float: right; margin: 10px; position: relative; top: 20px">
-        <input id="silkscreenCheckbox" type="checkbox" name="silkscreen" value="silkscreen" checked
-               onchange="silkscreenVisible(this.checked)">Silkscreen
+      <div class="hideonprint menu" style="float: right; margin: 10px; top: 8px;">
+        <button class="menubtn"></button>
+        <div class="menu-content">
+          <label class="checkbox-label">
+            <input id="silkscreenCheckbox" type="checkbox" name="silkscreen"
+                   value="silkscreen" checked onchange="silkscreenVisible(this.checked)">
+            Show silkscreen
+          </label>
+        </div>
       </div>
       <div class="button-container hideonprint"
            style="float: right; margin: 10px; position: relative; top: 8px">
diff --git a/icons/baseline-settings-20px.svg b/icons/baseline-settings-20px.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+    <path fill="none" d="M0 0h20v20H0V0z"/>
+    <path d="M15.95 10.78c.03-.25.05-.51.05-.78s-.02-.53-.06-.78l1.69-1.32c.15-.12.19-.34.1-.51l-1.6-2.77c-.1-.18-.31-.24-.49-.18l-1.99.8c-.42-.32-.86-.58-1.35-.78L12 2.34c-.03-.2-.2-.34-.4-.34H8.4c-.2 0-.36.14-.39.34l-.3 2.12c-.49.2-.94.47-1.35.78l-1.99-.8c-.18-.07-.39 0-.49.18l-1.6 2.77c-.1.18-.06.39.1.51l1.69 1.32c-.04.25-.07.52-.07.78s.02.53.06.78L2.37 12.1c-.15.12-.19.34-.1.51l1.6 2.77c.1.18.31.24.49.18l1.99-.8c.42.32.86.58 1.35.78l.3 2.12c.04.2.2.34.4.34h3.2c.2 0 .37-.14.39-.34l.3-2.12c.49-.2.94-.47 1.35-.78l1.99.8c.18.07.39 0 .49-.18l1.6-2.77c.1-.18.06-.39-.1-.51l-1.67-1.32zM10 13c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3z"/>
+</svg>
