From e253ff059e8f2816bdeb75caa00079c3aa5304f2 Mon Sep 17 00:00:00 2001
From: mattpass <matt@helical-levity.com>
Date: Mon, 17 Aug 2020 11:19:56 +0100
Subject: [PATCH] Icons added for tools, hover states added

---
 assets/css/files.css                | 3 +++
 assets/css/icecoder.css             | 5 +++++
 assets/images/icons/database.svg    | 6 ++++++
 assets/images/icons/git-compare.svg | 9 +++++++++
 assets/images/icons/layout-list.svg | 5 +++++
 assets/images/icons/terminal-2.svg  | 6 ++++++
 index.php                           | 8 ++++----
 7 files changed, 38 insertions(+), 4 deletions(-)
 create mode 100644 assets/images/icons/database.svg
 create mode 100644 assets/images/icons/git-compare.svg
 create mode 100644 assets/images/icons/layout-list.svg
 create mode 100644 assets/images/icons/terminal-2.svg

diff --git a/assets/css/files.css b/assets/css/files.css
index ae16cf1..4039000 100644
--- a/assets/css/files.css
+++ b/assets/css/files.css
@@ -11,10 +11,13 @@ body {margin: 0; overflow: auto;
 }
 
 .lock {position: fixed; display: inline-block; width: 12px; height: 16px; right: 0; margin-right: 16px; top: 0; color: #666; cursor: pointer}
+.lock:hover {color: #fff; cursor: pointer}
 .lock .icon-tabler {width: 22px; height: 22px; margin-left: -5px; margin-top: 0; stroke-width: 1.25; pointer-events: none}
 .refresh {position: fixed; display: inline-block; width: 14px; height: 14px; right: 0; margin-right: 15px; top: 34px; color: #666; cursor: pointer}
+.refresh:hover {color: #fff; cursor: pointer}
 .refresh .icon-tabler {width: 20px; height: 20px; margin-left: -3px; margin-top: -3px; stroke-width: 1.25; transform: rotate(180deg); pointer-events: none}
 .plugins {position: fixed; display: inline-block; width: 16px; height: 16px; right: 0; margin-right: 15px; top: 61px; color: #666; cursor: pointer}
+.plugins:hover {color: #fff; cursor: pointer}
 .plugins .icon-tabler {width: 24px; height: 24px; margin-left: -3px; margin-top: -3px; stroke-width: 1.25; pointer-events: none}
 .fmDragBox {position: absolute; display: inline-block; width: 0; height: 0; top: 0; left: 0; background: rgba(0,198,255,0.3);
     -webkit-user-select: none;
diff --git a/assets/css/icecoder.css b/assets/css/icecoder.css
index f45f795..a39ca74 100644
--- a/assets/css/icecoder.css
+++ b/assets/css/icecoder.css
@@ -69,6 +69,7 @@ h2 {font-size: 18px; font-weight: normal; color: #fff}
 .files .tools {position: absolute; display: inline-block; width: 250px; height: 30px; left: 0; bottom: 0}
 .files .tools div {display: inline-block; margin: 8px 0 8px 15px; color: #666; cursor: pointer}
 .files .tools div:hover {color: #fff; cursor: pointer}
+.files .tools .icon-tabler {width: 22px; height: 22px; margin-left: -3px; margin-top: -3px; stroke-width: 1.25; pointer-events: none}
 .files .tools .highlight {color: #eee; padding: 1px 3px; margin: 7px -3px 7px 12px; border-radius: 3px}
 .files .tools .error {background: #800}
 .files .tools .info {background: #080}
@@ -119,8 +120,10 @@ h2 {font-size: 18px; font-weight: normal; color: #fff}
 .goLine .goToLine {width: 50px; height: 28px; border: 0; font-size: 12px; margin: -7px 0 0 3px; padding-left: 4px; background: #333; color: #eee}
 .findReplace input:focus, .goLine .goToLine:focus {outline: none; background: rgba(0,198,255,0.5); color: #fff}
 .findBar .view {position: fixed; display: inline-block; width: 16px; height: 16px; right: 40px; top: 49px; color: #888; cursor: pointer; opacity: 0.3}
+.findBar .view:hover {color: #fff; cursor: pointer}
 .findBar .view .icon-tabler {width: 22px; height: 22px; margin-left: -3px; margin-top: -3px; stroke-width: 1.25; pointer-events: none}
 .findBar .bug {position: fixed; display: inline-block; width: 16px; height: 16px; right: 15px; top: 49px; color: #404040; cursor: pointer}
+.findBar .bug:hover {color: #fff; cursor: pointer}
 .findBar .bug .icon-tabler {width: 23px; height: 23px; margin-left: -3px; margin-top: -4px; stroke-width: 1.25; pointer-events: none}
 .editor .terminal {position: fixed; top: 10000px; transition: top 0.2s ease; z-index: 2}
 .editor .output {position: fixed; top: 10000px; padding: 15px 18px 8px 13px; transition: top 0.2s ease; background: rgba(0,0,0,0.92); z-index: 2}
@@ -139,8 +142,10 @@ h2 {font-size: 18px; font-weight: normal; color: #fff}
 .footer .serverMessage {position: absolute; display: inline-block; padding: 5px; margin-top: 3px; left: 275px; color: #fff; transition: opacity 0.2s; z-index: 1}
 .footer .splitPaneControls {position: absolute; display: inline-block; width: 50px; text-align: center; padding: 6px}
 .footer .splitPaneControls .off {display: inline-block; width: 18px; height: 18px; margin-right: 10px; color: #888; cursor: pointer}
+.footer .splitPaneControls .off:hover {color: #fff; cursor: pointer}
 .footer .splitPaneControls .off .icon-tabler {margin-left: -3px; margin-top: -3px; stroke-width: 1.25; pointer-events: none}
 .footer .splitPaneControls .on {display: inline-block; width: 19px; height: 18px; color: #888; cursor: pointer}
+.footer .splitPaneControls .off:hover {color: #fff; cursor: pointer}
 .footer .splitPaneControls .on .icon-tabler {margin-left: -3px; margin-top: -3px; stroke-width: 1.25; pointer-events: none}
 .footer .splitPaneNames {position: absolute; display: inline-block; width: 100px; text-align: center; margin-top: 9px; color: #555; opacity: 0; transition: opacity 0.3s ease-in-out}
 .footer .charDisplay, .footer .byteDisplay {position: absolute; display: inline-block; padding: 5px 0 0 8px; margin-top: 3px; margin-right: 10px; right: 0; font-size: 12px; color: #fff; text-align: right; text-align: right; cursor: pointer}
diff --git a/assets/images/icons/database.svg b/assets/images/icons/database.svg
new file mode 100644
index 0000000..2ff87c2
--- /dev/null
+++ b/assets/images/icons/database.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-database" 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"/>
+    <ellipse cx="12" cy="6" rx="8" ry="3"></ellipse>
+    <path d="M4 6v6a8 3 0 0 0 16 0v-6" />
+    <path d="M4 12v6a8 3 0 0 0 16 0v-6" />
+</svg>
diff --git a/assets/images/icons/git-compare.svg b/assets/images/icons/git-compare.svg
new file mode 100644
index 0000000..d406b5c
--- /dev/null
+++ b/assets/images/icons/git-compare.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-git-compare" 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"/>
+    <circle cx="6" cy="6" r="2" />
+    <circle cx="18" cy="18" r="2" />
+    <path d="M11 6h5a2 2 0 0 1 2 2v8" />
+    <polyline points="14 9 11 6 14 3" />
+    <path d="M13 18h-5a2 2 0 0 1 -2 -2v-8" />
+    <polyline points="10 15 13 18 10 21" />
+</svg>
diff --git a/assets/images/icons/layout-list.svg b/assets/images/icons/layout-list.svg
new file mode 100644
index 0000000..028fae0
--- /dev/null
+++ b/assets/images/icons/layout-list.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-layout-list" 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"/>
+    <rect x="4" y="4" width="16" height="6" rx="2" />
+    <rect x="4" y="14" width="16" height="6" rx="2" />
+</svg>
diff --git a/assets/images/icons/terminal-2.svg b/assets/images/icons/terminal-2.svg
new file mode 100644
index 0000000..f91decf
--- /dev/null
+++ b/assets/images/icons/terminal-2.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-terminal-2" 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"/>
+    <path d="M8 9l3 3l-3 3" />
+    <line x1="13" y1="15" x2="16" y2="15" />
+    <rect x="3" y="4" width="18" height="16" rx="2" />
+</svg>
diff --git a/index.php b/index.php
index 2cb727b..65e74e4 100644
--- a/index.php
+++ b/index.php
@@ -299,10 +299,10 @@ if (true === $havePrettier && true === file_exists(dirname(__FILE__) . "/plugins
 	<iframe id="filesFrame" class="frame" name="ff" src="<?php echo $iceURLPath;?>/files.php" style="opacity: 0" onLoad="this.style.opacity = '1'; this.contentWindow.onscroll = function(){ICEcoder.mouseDown = false; ICEcoder.mouseDownInCM = false}"></iframe>
 
     <div class="tools" id="tools">
-        <div onclick="ICEcoder.toolShowHideToggle('terminal')" id="toolLinkTerminal">Terminal</div>
-        <div onclick="ICEcoder.toolShowHideToggle('output'); this.className = ''" id="toolLinkOutput">Output</div>
-        <div onclick="ICEcoder.toolShowHideToggle('database')" id="toolLinkDatabase">Database</div>
-        <div onclick="ICEcoder.toolShowHideToggle('git')" id="toolLinkGit">Git</div>
+        <div onclick="ICEcoder.toolShowHideToggle('terminal')" id="toolLinkTerminal" title="Terminal"><?php echo file_get_contents(dirname(__FILE__) . "/assets/images/icons/terminal-2.svg");?></div>
+        <div onclick="ICEcoder.toolShowHideToggle('output'); this.className = ''" id="toolLinkOutput" title="Output"><?php echo file_get_contents(dirname(__FILE__) . "/assets/images/icons/layout-list.svg");?></div>
+        <div onclick="ICEcoder.toolShowHideToggle('database')" id="toolLinkDatabase" title="Database"><?php echo file_get_contents(dirname(__FILE__) . "/assets/images/icons/database.svg");?></div>
+        <div onclick="ICEcoder.toolShowHideToggle('git')" id="toolLinkGit" title="Git"><?php echo file_get_contents(dirname(__FILE__) . "/assets/images/icons/git-compare.svg");?></div>
     </div>
 </div>