From 64d30fb40ec8ee05ea2e1202a97e4da268a4247a Mon Sep 17 00:00:00 2001
From: Caesar Kabalan <caesar.kabalan@gmail.com>
Date: Mon, 22 May 2023 22:15:37 -0700
Subject: [PATCH] Add color palette picker

---
 dist/index.html | 27 ++++++++++++++++-----------
 dist/main.css   | 29 ++++++++++++++++++++++++++++-
 dist/main.js    | 19 +++++++++++++++++--
 3 files changed, 61 insertions(+), 14 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index f936523..5781478 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -95,19 +95,24 @@
             </tr>
         </tbody>
     </table>
-    <div id="color_palette">
-        <div id="palette_picker_1"></div>
-        <div id="palette_picker_2"></div>
-        <div id="palette_picker_3"></div>
-        <div id="palette_picker_4"></div>
-        <div id="palette_picker_5"></div>
-        <div id="palette_picker_6"></div>
-        <div id="palette_picker_7"></div>
-        <div id="palette_picker_8"></div>
-        <div id="palette_picker_9"></div>
-        <div id="palette_picker_10"></div>
+    <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>
+            <div id="palette_picker_4"></div>
+            <div id="palette_picker_5"></div>
+            <div id="palette_picker_6"></div>
+            <div id="palette_picker_7"></div>
+            <div id="palette_picker_8"></div>
+            <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">
             <div class="modal-content alert-warning">
diff --git a/dist/main.css b/dist/main.css
index a965a4a..68e032b 100644
--- a/dist/main.css
+++ b/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 {
diff --git a/dist/main.js b/dist/main.js
index 771e576..e2c1af8 100644
--- a/dist/main.js
+++ b/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) {
-    $(this).parent().css('background-color', inflightColor)
+    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))