Add color palette picker

dist/index.html

@@ -95,7 +95,9 @@
             </tr>
         </tbody>
     </table>
-    <div id="color_palette">
+    <div id="bottom_nav">
+        <div class="d-inline-block align-top pt-1" id="colors_word_open"><span>Colors &#187;</span></div>
+        <div class="d-inline-block d-none" id="color_palette">
             <div id="palette_picker_1"></div>
             <div id="palette_picker_2"></div>
             <div id="palette_picker_3"></div>
@@ -107,6 +109,9 @@
             <div id="palette_picker_9"></div>
             <div id="palette_picker_10"></div>
         </div>
+        <div class="d-inline-block align-top align-top pt-1 ps-2 d-none" id="colors_word_close"><span>&#171; Colors</span></div>
+    </div>
+
 
     <div class="modal fade" id="notifyModal" tabindex="-1" aria-labelledby="notifyModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-md">

dist/main.css

@@ -39,12 +39,39 @@
     --subpal-1-10: #ffffffff;
 }
 
+#bottom_nav {
+    height:2rem;
+}
+
+#bottom_nav span {
+    border-bottom:1px black dotted;
+}
+
+#color_palette {
+    min-width: 0rem;
+}
+
+#color_palette #colors_word_close {
+    line-height: 2rem;
+}
+
+#color_palette #colors_word_open {
+    display:inline-block;
+    height:2rem;
+    cursor:pointer;
+    white-space: nowrap;
+}
+
 #color_palette div {
     display:inline-block;
     height:2rem;
+    cursor:pointer;
+    white-space: nowrap;
+}
+
+#color_palette div[id^='palette_picker_'] {
     width:2rem;
     border:1px solid;
-    cursor:pointer;
 }
 
 #color_palette #palette_picker_1 {

dist/main.js

@@ -18,7 +18,7 @@ let infoColumnCount = 5
 let operatingMode = 'NORMAL'
 let noteTimeout;
 let minSubnetSize = 30
-let inflightColor = '#ffffff'
+let inflightColor = 'NONE'
 
 $('input#network,input#netsize').on('input', function() {
     $('#input_form')[0].classList.add('was-validated');
@@ -29,7 +29,9 @@ $('#color_palette div').on('click', function() {
 })
 
 $('#calcbody').on('click', '.row_address, .row_range, .row_usable, .row_hosts, .note', function(event) {
+    if (inflightColor !== 'NONE') {
         $(this).parent().css('background-color', inflightColor)
+    }
 })
 
 $('#btn_go').on('click', function() {
@@ -40,6 +42,19 @@ $('#importBtn').on('click', function() {
     importConfig($('#importExportArea').val())
 })
 
+$('#bottom_nav #colors_word_open').on('click', function() {
+    $('#bottom_nav #color_palette').removeClass('d-none');
+    $('#bottom_nav #colors_word_close').removeClass('d-none');
+    $('#bottom_nav #colors_word_open').addClass('d-none');
+})
+
+$('#bottom_nav #colors_word_close').on('click', function() {
+    $('#bottom_nav #color_palette').addClass('d-none');
+    $('#bottom_nav #colors_word_close').addClass('d-none');
+    $('#bottom_nav #colors_word_open').removeClass('d-none');
+    inflightColor = 'NONE'
+})
+
 
 $('#btn_import_export').on('click', function() {
     $('#importExportArea').val(JSON.stringify(exportConfig(), null, 2))