From 5aa41cc80c046309e0eacaa75748ecefd29d19bf Mon Sep 17 00:00:00 2001
From: joeyak <joeyak97@gmail.com>
Date: Sat, 30 Mar 2019 16:08:41 -0400
Subject: [PATCH] Hide color div when clicking color button

closes #69
---
 static/css/site.css | 32 +++++++++++++++++++++++---------
 static/js/chat.js   |  4 ++++
 static/main.html    |  7 +++++--
 3 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/static/css/site.css b/static/css/site.css
index 1b3c489..08b0f2b 100644
--- a/static/css/site.css
+++ b/static/css/site.css
@@ -42,6 +42,23 @@ span.svmsg {
     color: #ea6260;
 }
 
+input[type=text] {
+    background: transparent;
+    border: var(--var-border);
+    border-radius: var(--var-border-radius);
+    color: var(--var-message-color);
+    padding: 5px;
+    font-weight: bold;
+}
+
+#colorInputDiv {
+    font-size: 14px;
+}
+
+#colorInput {
+    border: 2px solid var(--var-message-color);
+}
+
 .root {
     max-width: var(--var-max-width);
     max-height: var(--var-max-height);
@@ -219,15 +236,6 @@ span.svmsg {
     margin: 5px auto;
 }
 
-#name {
-    background: transparent;
-    border: var(--var-border);
-    border-radius: var(--var-border-radius);
-    color: var(--var-message-color);
-    padding: 5px;
-    font-weight: bold;
-}
-
 #chat {
     display: grid;
     grid-template-rows: 1.5em 2em 1fr 6em 2.5em 1em;
@@ -291,6 +299,12 @@ span.svmsg {
     color: #b1b1b1;
 }
 
+#colorName {
+    font-weight: bold;
+    background: var(--var-background-color);
+    padding: -10px;
+}
+
 #colorSubmit:disabled {
     display: none;
 }
diff --git a/static/js/chat.js b/static/js/chat.js
index 6c5a0eb..a3c07cd 100644
--- a/static/js/chat.js
+++ b/static/js/chat.js
@@ -158,6 +158,10 @@ function help() {
 }
 
 function showColors(show) {
+    if (show === undefined) {
+        show = $("#hiddencolor").css("display") === "none";
+    }
+
     $("#hiddencolor").css("display", show ? "block" : "");
 }
 
diff --git a/static/main.html b/static/main.html
index 3607ce8..d098b08 100644
--- a/static/main.html
+++ b/static/main.html
@@ -50,7 +50,7 @@
             <div id="chatButtons">
                 <input type="button" class="button pretty-button" onclick="auth();" value="Auth" />
                 <input type="button" class="button pretty-button" onclick="help();" value="Help" />
-                <input type="button" class="button pretty-button" onclick="showColors(true);" value="Color" />
+                <input type="button" class="button pretty-button" onclick="showColors();" value="Color" />
                 <input type="button" class="button pretty-button" onclick="nick();" value="Nick" />
                 {{if .Video}}
                 <input type="button" class="button pretty-button" onclick="initPlayer();" value="Reload Player" />
@@ -75,7 +75,10 @@
                     <input id="colorBlue" type="range" min="0" max="255" value="0" oninput="updateColor();" />
                     <span id="colorBlueLabel"></span>
                 </div>
-                <div id="colorName" class="range-div" style="font-weight: bold;">
+                <div id="colorInputDiv" class="range-div">
+                    #<input id="colorInput" type="text" maxlength="6" onchange="changeColorInput();" />
+                </div>
+                <div id="colorName" class="range-div">
                     NAME
                 </div>
                 <div id="colorWarning" class="range-div contrast">