From b5b6b92204e06e9c63a4eababea1e45f186d4e9f Mon Sep 17 00:00:00 2001
From: mattpass <matt@helical-levity.com>
Date: Thu, 13 Aug 2020 12:26:32 +0100
Subject: [PATCH] Close icon added for 4 x tools

---
 assets/css/icecoder.css   | 7 ++++---
 assets/images/icons/x.svg | 5 +++++
 assets/js/icecoder.js     | 8 ++++++++
 index.php                 | 2 ++
 lib/login.php             | 4 ++--
 5 files changed, 21 insertions(+), 5 deletions(-)
 create mode 100644 assets/images/icons/x.svg

diff --git a/assets/css/icecoder.css b/assets/css/icecoder.css
index 77ee074..6d4c7a8 100644
--- a/assets/css/icecoder.css
+++ b/assets/css/icecoder.css
@@ -9,9 +9,7 @@ body {overflow: hidden;
 h1 {font-size: 36px; font-weight: normal; color: #888; margin-bottom: 20px}
 h2 {font-size: 18px; font-weight: normal; color: #fff}
 
-.icon {position: absolute; margin-left: 2px}
-.icon-tabler {width: 24px; height: 24px; stroke-width: 1.25; color: #888}
-
+.icon-tabler {width: 24px; height: 24px; stroke-width: 1.25}
 .blackMask {position: fixed; display: table; width: 100%; height: 100%; top: 0; left: 0; visibility: hidden; background-color: rgba(0,0,0,0.8); text-align: center; z-index: 100}
 .blackMask .popupVCenter {#position: absolute; display: table-cell; #top: 50%; vertical-align: middle; text-align: center}
 .popupVCenter .popup {#position: relative; #top: -50%; text-align: center; color: #fff; font-size: 10px}
@@ -151,6 +149,8 @@ h2 {font-size: 18px; font-weight: normal; color: #fff}
 .fileMenu hr {border: 0; height: 1px; padding: 0; margin: 0; background: #444}
 
 .tooltip {position: absolute; top: 0; left: 0; padding: 5px; background: #444; color: #bbb}
+.closeIcon {position: fixed; display: inline-block; top: 10px; right: 10px; width: 24px; height: 24px; color: #888; cursor: pointer; z-index: 101}
+.closeIcon:hover {color: #ddd}
 
 .screenContainer {position: absolute; display: table; width: 100%; height: 100%; top: 0; left: 0; text-align: center}
 .screenContainer .screenVCenter {#position: absolute; display: table-cell; #top: 50%; vertical-align: middle; text-align: center}
@@ -163,3 +163,4 @@ h2 {font-size: 18px; font-weight: normal; color: #fff}
 .screenCenter .password:focus {outline: none; background: rgba(0,198,255,0.5); color: #fff}
 .screenCenter .button {border: 0; background: #444; color: #eee; height: 22px; cursor: pointer}
 .screenCenter .button:hover {background: #2187e7; color: #eee}
+.screenCenter .iconCapsLock {position: absolute; margin-left: 2px; color: #888}
diff --git a/assets/images/icons/x.svg b/assets/images/icons/x.svg
new file mode 100644
index 0000000..37e686a
--- /dev/null
+++ b/assets/images/icons/x.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <path stroke="none" d="M0 0h24v24H0z"/>
+    <line x1="18" y1="6" x2="6" y2="18" />
+    <line x1="6" y1="6" x2="18" y2="18" />
+</svg>
diff --git a/assets/js/icecoder.js b/assets/js/icecoder.js
index 26ca91d..cfc9277 100644
--- a/assets/js/icecoder.js
+++ b/assets/js/icecoder.js
@@ -332,6 +332,14 @@ var ICEcoder = {
 
             // Note which tool we're showing
             this.showingTool = this.showingTool !== tool ? tool : false;
+
+            // Display and make close icon clickable to close this tool
+            setTimeout(function() {
+                get('closeIcon').style.display = ICEcoder.showingTool !== false ? "inline-block" : "none";
+                get('closeIcon').onclick = function() {
+                    ICEcoder.toolShowHideToggle(ICEcoder.showingTool);
+                }
+            }, this.showingTool !== false ? 200 : 0);
         }
     },
 
diff --git a/index.php b/index.php
index 4f9b44a..6f0582b 100644
--- a/index.php
+++ b/index.php
@@ -385,6 +385,8 @@ if (true === $havePrettier && true === file_exists(dirname(__FILE__) . "/plugins
 
 <div id="tooltip" class="tooltip" style="display: none"></div>
 
+<div class="closeIcon" style="display: none" id="closeIcon"><?php echo file_get_contents(dirname(__FILE__) . "/assets/images/icons/x.svg");?></div>
+
 <script>
 ICEcoder.initAliases();
 ICEcoder.setLayout(false);
diff --git a/lib/login.php b/lib/login.php
index 41ddb1e..5448463 100644
--- a/lib/login.php
+++ b/lib/login.php
@@ -39,7 +39,7 @@ echo $settingPW ? "Setup" : "Login";
             } else {
                 ?> onkeyup="checkCase(event)"<?php
             }
-            ?>><div class="icon" style="display: none" id="capsLockDisplay" title="Caps lock on"><?php echo file_get_contents("../assets/images/icons/alert-triangle.svg");?></div><br>
+            ?>><div class="iconCapsLock" style="display: none" id="iconCapsLock" title="Caps lock on"><?php echo file_get_contents(dirname(__FILE__) . "/../assets/images/icons/alert-triangle.svg");?></div><br>
 		<?php
 		if ($settingPW) {
 			echo '<div id="pwReqs">'.
@@ -117,7 +117,7 @@ const checkCase = function(evt) {
 
     // Not caps lock key
     if (20 !== key) {
-        get("capsLockDisplay").style.display = true === evt.getModifierState("CapsLock")
+        get("iconCapsLock").style.display = true === evt.getModifierState("CapsLock")
             ? "inline-block"
             : "none";
     }