From 8dc79ec287ceb626eb34cdf59b199521f73cc460 Mon Sep 17 00:00:00 2001
From: David Cooper <david.cooper@plangrid.com>
Date: Wed, 26 Feb 2020 22:52:19 -0800
Subject: [PATCH] Use buttons for assets

---
 client/assets/css/styles.css             |  2 +-
 client/assets/js/script.js               |  2 --
 client/assets/templates/app.html         | 31 +++++++++++++++++++++++
 client/assets/templates/asset_block.html | 21 ++++++++--------
 client/tomato/cef.py                     | 11 ++++++--
 common/client_server_constants.py        | 32 ++++++++++++------------
 6 files changed, 67 insertions(+), 32 deletions(-)

diff --git a/client/assets/css/styles.css b/client/assets/css/styles.css
index d090e0d..5983c10 100644
--- a/client/assets/css/styles.css
+++ b/client/assets/css/styles.css
@@ -103,7 +103,7 @@ img {
 }
 
 .small-btn {
-    padding: 0 4px 2px 4px;
+    padding: 0 6px 2px 6px;
 }
 
 .nes-container {
diff --git a/client/assets/js/script.js b/client/assets/js/script.js
index aee50ed..85a218c 100644
--- a/client/assets/js/script.js
+++ b/client/assets/js/script.js
@@ -319,11 +319,9 @@ function loadWaveform(asset, play = true) {
     wavesurfer.load(asset.url);
     $('#track-title').text(': ' + asset.name);
     $('#track-time').text(' {0:00/' + prettyDuration(asset.length) + '}');
-    $('.asset-item[data-asset-idx=' + assetIdx + ']').css('background-color', '#e3f2fd');
 }
 
 var loadNext = function(play = true) {
-    $('.asset-item').css('background-color', 'initial');
     if (assetIdx < assets.length) {
         loadWaveform(assets[assetIdx], play);
         assetIdx++;
diff --git a/client/assets/templates/app.html b/client/assets/templates/app.html
index a55ec20..3356761 100644
--- a/client/assets/templates/app.html
+++ b/client/assets/templates/app.html
@@ -5,6 +5,37 @@
 
   <link href="../css/nes-2.3.0.min.css" rel="stylesheet">
   <link href="../css/styles.css" rel="stylesheet">
+  <style>
+    {% for name, hex in colors.items() if not name.endswith('-dark') and not name.endswith('-light') %}
+      .nes-btn.is-{{ name}} {
+        color: #{{ white_or_black_from_color(colors[name + '-light']) }};
+        background-color: #{{ colors[name + '-light'] }};
+      }
+
+      .nes-btn.is-{{ name}}::after {
+        position: absolute;
+        top: -4px;
+        right: -4px;
+        bottom: -4px;
+        left: -4px;
+        content: "";
+        box-shadow: inset -4px -4px #{{ colors[name + '-dark'] }};
+      }
+
+      .nes-btn.is-{{ name}}:hover {
+        color: #{{ white_or_black_from_color(colors[name]) }};
+        background-color: #{{ colors[name] }};
+      }
+
+      .nes-btn.is-{{ name}}:hover::after {
+        box-shadow: inset -6px -6px #{{ colors[name + '-dark'] }};
+      }
+
+      .nes-btn.is-{{ name}}:active:not(.is-disabled)::after {
+        box-shadow: inset 4px 4px #{{ colors[name + '-dark'] }};
+      }
+    {% endfor %}
+  </style>
 
   <script src="../js/jquery-3.4.1.min.js"></script>
   <script src="../js/wavesurfer-3.3.1.min.js"></script>
diff --git a/client/assets/templates/asset_block.html b/client/assets/templates/asset_block.html
index a6d8cee..69a8f57 100644
--- a/client/assets/templates/asset_block.html
+++ b/client/assets/templates/asset_block.html
@@ -13,17 +13,16 @@
   <div class="nes-container with-title">
     <p class="title">Stop Set: {{ stopset }}</p>
 
-    <div class="lists">
-      <ul class="nes-list is-circle">
-      {% for asset in assets %}
-        <li class="nes-pointer asset-item" data-asset-idx="{{ loop.index - 1 }}">
-          {{ loop.index }}. <strong>{{ asset.name }}</strong>
-          {% raw %}{{% endraw %}{{ asset.length|prettyduration }}}
-          / <span style="background-color: #{{ colors[asset.color + "-light"] }}">{{ asset.rotator }}</span>
-        </li>
-      {% endfor %}
-      </ul>
-    </div>
+    {% for asset in assets %}
+      <p>
+        <button class="nes-btn is-{{asset.color }} small-btn asset-item right" data-asset-idx="{{ loop.index - 1 }}">
+          <span class="arrows">&#x35;</span>
+          {{ loop.index }}. {{ asset.name }}
+          - {{ asset.length|prettyduration }}<br>
+          <em>{{ asset.rotator }}</em>
+        </button>
+      </p>
+    {% endfor %}
   </div>
 {% endif %}
 
diff --git a/client/tomato/cef.py b/client/tomato/cef.py
index e3e98fc..5d8cdbe 100644
--- a/client/tomato/cef.py
+++ b/client/tomato/cef.py
@@ -366,13 +366,19 @@ def get_cef_initialize_kwargs(self):
         return kwargs
 
     def render_template(self, template_name, context=None):
-        default_context = {'colors': dict(COLORS)}
+        default_context = {
+            'colors': dict(COLORS),
+        }
 
         # Performance: if we're rendering the app.html we add custom context here
         if template_name == 'app.html':
             # Make sure Django is configured before importing so model import doesn't blow up
             from .api import API_LIST
 
+            def white_or_black_from_color(color):
+                red, green, blue = map(lambda c: int(c, 16), (color[0:2], color[2:4], color[4:6]))
+                return '000000' if (red * 0.299 + green * 0.587 + blue * 0.114) > 186 else 'FFFFFF'
+
             default_context.update({
                 'conf': self.conf.data,
                 'constants': {c: getattr(constants, c) for c in dir(constants) if c.isupper()},
@@ -381,7 +387,8 @@ def render_template(self, template_name, context=None):
                         method for method in dir(api)
                         if not method.startswith('_') and callable(getattr(api, method))
                     ] for api in API_LIST
-                }
+                },
+                'white_or_black_from_color': white_or_black_from_color,
             })
 
         if context is not None:
diff --git a/common/client_server_constants.py b/common/client_server_constants.py
index 850956d..c35754c 100644
--- a/common/client_server_constants.py
+++ b/common/client_server_constants.py
@@ -8,52 +8,52 @@
 
 # Snarfed from https://materializecss.com/color.html
 COLORS = (
-    ('red', 'ff5252'),
+    ('red', 'f44336'),
     ('red-light', 'e57373'),
     ('red-dark', 'c62828'),
-    ('pink', 'ff4081'),
+    ('pink', 'e91e63'),
     ('pink-light', 'f06292'),
     ('pink-dark', 'ad1457'),
-    ('purple', 'e040fb'),
+    ('purple', '9c27b0'),
     ('purple-light', 'ba68c8'),
     ('purple-dark', '6a1b9a'),
-    ('deep-purple', '7c4dff'),
+    ('deep-purple', '673ab7'),
     ('deep-purple-light', '9575cd'),
     ('deep-purple-dark', '4527a0'),
-    ('indigo', '536dfe'),
+    ('indigo', '3f51b5'),
     ('indigo-light', '7986cb'),
     ('indigo-dark', '283593'),
-    ('blue', '448aff'),
+    ('blue', '2196f3'),
     ('blue-light', '64b5f6'),
     ('blue-dark', '1565c0'),
-    ('light-blue', '40c4ff'),
+    ('light-blue', '03a9f4'),
     ('light-blue-light', '4fc3f7'),
     ('light-blue-dark', '0277bd'),
-    ('cyan', '18ffff'),
+    ('cyan', '00bcd4'),
     ('cyan-light', '4dd0e1'),
     ('cyan-dark', '00838f'),
-    ('teal', '64ffda'),
+    ('teal', '009688'),
     ('teal-light', '4db6ac'),
     ('teal-dark', '00695c'),
-    ('green', '69f0ae'),
+    ('green', '4caf50'),
     ('green-light', '81c784'),
     ('green-dark', '2e7d32'),
-    ('light-green', 'b2ff59'),
+    ('light-green', '8bc34a'),
     ('light-green-light', 'aed581'),
     ('light-green-dark', '558b2f'),
-    ('lime', 'eeff41'),
+    ('lime', 'cddc39'),
     ('lime-light', 'dce775'),
     ('lime-dark', '9e9d24'),
-    ('yellow', 'ffff00'),
+    ('yellow', 'ffeb3b'),
     ('yellow-light', 'fff176'),
     ('yellow-dark', 'f9a825'),
-    ('amber', 'ffd740'),
+    ('amber', 'ffc107'),
     ('amber-light', 'ffd54f'),
     ('amber-dark', 'ff8f00'),
-    ('orange', 'ffab40'),
+    ('orange', 'ff9800'),
     ('orange-light', 'ffb74d'),
     ('orange-dark', 'ef6c00'),
-    ('deep-orange', 'ff6e40'),
+    ('deep-orange', 'ff5722'),
     ('deep-orange-light', 'ff8a65'),
     ('deep-orange-dark', 'd84315'),
 )