From 50e8a9c9cfce3fafeb59e2eae129ddeab7c973d0 Mon Sep 17 00:00:00 2001
From: Thomas Bui <thomasbui198@gmail.com>
Date: Tue, 21 Dec 2021 19:26:37 -0800
Subject: [PATCH] Color picker menu can now be toggled

---
 docs/assets/css/style.css | 32 ++++++++++++++++++++++++++++++--
 docs/assets/js/script.js  |  9 +++++++++
 docs/index.html           | 25 +++++++++++++------------
 3 files changed, 52 insertions(+), 14 deletions(-)

diff --git a/docs/assets/css/style.css b/docs/assets/css/style.css
index b6914992..7a710616 100644
--- a/docs/assets/css/style.css
+++ b/docs/assets/css/style.css
@@ -297,20 +297,40 @@ header {
 .colorPicker {
   height: 0.8em;
   width: 0.8em;
+  border-radius: 50%;
+}
+
+.colorPicker:hover {
+  cursor: pointer;
+  border: 1px solid whitesmoke;
 }
 
 .colorPickerMenu {
   position: absolute;
-  display: inline-block;
   font-size: 1rem;
   background-color: var(--primaryColor);
   border-radius: 1em;
   border: 2px solid var(--grey);
   transform: translate(0, -30%);
   padding: 0.5em;
+  padding-top: 0;
   margin-left: 1em;
   font-weight: normal;
   z-index: 1;
+  display: none;
+}
+
+.colorPickerMenuCloseBtn {
+  color: red;
+  font-weight: bold;
+  margin-top: 0;
+  margin-right: 0.25em;
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.colorPickerMenuCloseBtn > span:hover {
+  cursor: pointer;
 }
 
 .colorPickerResetBtn {
@@ -330,12 +350,20 @@ header {
   top: 0.2em;
 }
 
-input[type='color'] {
+.checkerboardInput:hover {
+  cursor: pointer;
+}
+
+#colorInput {
   width: 1.25em;
   height: 1.25em;
   padding: 0;
 }
 
+#colorInput:hover {
+  cursor: pointer;
+}
+
 /** Copy Btn */
 
 .copyBtn {
diff --git a/docs/assets/js/script.js b/docs/assets/js/script.js
index 3d8abc73..9992eac7 100644
--- a/docs/assets/js/script.js
+++ b/docs/assets/js/script.js
@@ -202,6 +202,15 @@ devicon.controller('IconListCtrl', function($scope, $http, $compile) {
       }, 50)
     }, 2000)
   }
+
+  /**
+   * Display the color picker.
+   * @param {String} id - id of the menu we are showing.
+   */
+  $scope.toggleColorPickerMenu = function(id) {
+    let menu = document.getElementById(id)
+    menu.style.display = menu.style.display == "none" || menu.style.display == "" ? "inherit" : "none"
+  }
 });
 
 /*================ End of "Devicons controller" ================*/
diff --git a/docs/index.html b/docs/index.html
index b18cb2da..f819bea4 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -63,19 +63,20 @@
         <li>
           <h4>
             Font versions 
-            <img src="./assets/img/color_wheel.png" class='colorPicker'>
-            <span class='colorPickerMenu'>
-              <span>
-                <input type='color' value='#60be86' ng-model="fontBackground">
-                Background Color 
+            <span>
+              <img src="./assets/img/color_wheel.png" class='colorPicker' ng-click="toggleColorPickerMenu('fontColorPickerMenu')">
+              <span class='colorPickerMenu' id='fontColorPickerMenu'>
+                <div class='colorPickerMenuCloseBtn' ng-click="toggleColorPickerMenu('fontColorPickerMenu')"><span>X</span></div>
+                <div>
+                  <input type='color' value='#60be86' ng-model="fontBackground" id='colorInput'>
+                  Background Color 
+                </div>
+                <div>
+                  <input type='checkbox' id='checkboardInput' class='checkerboardInput'>
+                  <label for='checkboardInput' >Checkerboard</label>
+                </div>
+                <button class='colorPickerResetBtn'>Reset</button>
               </span>
-              <br>
-              <span>
-                <input type='checkbox' id='checkboardInput' class='checkerboardInput'>
-                <label for='checkboardInput' >Checkerboard</label>
-              </span>
-              <br>
-              <button class='colorPickerResetBtn'>Reset</button>
             </span>
           </h4>
           <p>