Adds font-awesome and hint.css to style/clean up the top bar

mike-schultz · Nov 6, 2016 · 501471d · 501471d
1 parent da55905
commit 501471d
Show file tree

Hide file tree

Showing 6 changed files with 2,432 additions and 31 deletions.
diff --git a/index.html b/index.html
@@ -4,17 +4,25 @@
 <head>
   <title>Materialette</title>
   <link rel="stylesheet" href="styles/main.css">
+  <link rel="stylesheet" href="node_modules/hint.css/hint.css">
 </head>
 
 <body>
   <div id="container">
     <section id="controls">
-      <div class="arrow right" onclick="changeOutput()"></div>
-      <div id="current-output">HEX</div>
-      <div class="arrow left" onclick="changeOutput()"></div>
-      <label class="clickable"><input id="pinned" type="checkbox" onChange="togglePinned()"/> pinned</label>
-      <div id="hide" class="clickable" onclick="hideApp()">hide</div>
-      <div id="close" class="clickable" onclick="closeApp()">exit</div>
+      <div class="col">
+        <img src="assets/Icon.png">
+        <div id="mode-selector" class="clickable hint--bottom" aria-label="Toggle modes" onclick="changeOutput()">
+          <div id="current-output">hex</div>
+          <div><i class="fa fa-retweet"></i></div>
+        </div>
+      </div>
+      <div class="col">
+        <input id="pin-state" type="checkbox" onChange="togglePinned()" />
+        <label id="pin" for="pin-state" class="clickable hint--bottom-left" aria-label="Pin to keep visible"><i class="fa fa-thumb-tack"></i></label>
+        <div id="hide" class="clickable hint--bottom" aria-label="Hide" onclick="hideApp()"><i class="fa fa-close"></i></div>
+        <div id="close" class="clickable hint--bottom-left" aria-label="Quit" onclick="closeApp()"><i class="fa fa-power-off"></i></div>
+      </div>
     </section>
 
     <div id="key">

diff --git a/package.json b/package.json
@@ -19,6 +19,8 @@
   "url": "https://github.com/mike-schultz",
   "license": "MIT",
   "dependencies": {
+    "font-awesome": "^4.7.0",
+    "hint.css": "^2.4.0"
   },
   "devDependencies": {
     "electron": "^1.4.3",

diff --git a/scripts/main.js b/scripts/main.js
@@ -2,11 +2,11 @@ const CONTAINER_WIDTH = 370;
 const TOOLTIP_WIDTH = 140;
 const TOOLTIP_HEIGHT = 40;
 const State = {
-  output: ['HEX', 'RGB'],
+  output: ['hex', 'rgb'],
   index: 0,
   tooltipEle: document.getElementById('tooltip'),
   currentColor: null,
-  pinnedEle: document.getElementById('pinned'),
+  pinnedEle: document.getElementById('pin-state'),
   sharedObj: (require('electron').remote).getGlobal('sharedObj')
 };
 const colors = {
@@ -355,10 +355,10 @@ document.body.addEventListener('mousemove', e => {
 
   let output;
   switch (State.output[State.index]) {
-    case 'RGB':
+    case 'rgb':
       value = rgb;
       break;
-    case 'HEX':
+    case 'hex':
       value = hex;
       break;
   }