Remove inline styling for category colors

Also stop changing color of select options, because it does not work
reliably accross browsers.

6 files changed, 28 insertions, 8 deletions

diff --git a/assets/main.js b/assets/main.js
index bc5d65c..c83e4fc 100644
--- a/assets/main.js
+++ b/assets/main.js
@@ -272,3 +272,23 @@ function prettyPrintMonth(isoDate) {
 function capitalize(str) {
     return str.replace(/^\w/, function (c) { return c.toUpperCase() })
 }
+
+/******************/
+/* Web components */
+/******************/
+
+/* Apply color given from attribute.
+ *
+ * This permits not to use the style attribute in HTML to respect a strict CSP policy.
+ */
+customElements.define(
+  'colored-category',
+  class extends HTMLSpanElement {
+    constructor() {
+      super()
+      const span = this
+      span.style = `color: ${span.getAttribute('data-color')}`
+    }
+  },
+  { extends: 'span' }
+)
diff --git a/templates/category/table.html b/templates/category/table.html
index e05c84b..d4147aa 100644
--- a/templates/category/table.html
+++ b/templates/category/table.html
@@ -27,7 +27,8 @@
           >
             <span
               class="g-Table__Cell"
-              style="color: {{ category.color }}"
+              is="colored-category" 
+              data-color="{{ category.color }}"
             >
               {{ category.name }}
             </span>
diff --git a/templates/payment/create.html b/templates/payment/create.html
index 9af68b6..4ac73de 100644
--- a/templates/payment/create.html
+++ b/templates/payment/create.html
@@ -88,7 +88,6 @@
           {% for category in categories %}
             <option
               value="{{ category.id }}"
-              style="color: {{ category.color }}"
               {% if "" ~ category.id == category_id %} selected {% endif %}
             >
               {{ category.name }}
diff --git a/templates/payment/table.html b/templates/payment/table.html
index fc69b2d..450d84b 100644
--- a/templates/payment/table.html
+++ b/templates/payment/table.html
@@ -81,10 +81,12 @@
               {{ payment.cost | euros() }}
             </span>
             <span class="g-Table__Cell">{{ payment.user }}</span>
-            <span class="g-Table__Cell g-Media__Large">
-              <span style="color: {{ payment.category_color }}">
-                {{ payment.category_name }}
-              </span>
+            <span 
+              class="g-Table__Cell g-Media__Large"
+              is="colored-category" 
+              data-color="{{ payment.category_color }}"
+            >
+              {{ payment.category_name }}
             </span>
             {% if query.frequency != "Monthly" %}
               <span class="g-Table__Cell">
diff --git a/templates/payment/table/search.html b/templates/payment/table/search.html
index 0ae2589..9fedb78 100644
--- a/templates/payment/table/search.html
+++ b/templates/payment/table/search.html
@@ -53,7 +53,6 @@
       {% for category in categories %}
         <option
           value="{{ category.id }}"
-          style="color: {{ category.color }}"
           {% if category.id == query.category %} selected {% endif %}
         >
           {{ category.name }}
diff --git a/templates/payment/update.html b/templates/payment/update.html
index 07549de..22a4d01 100644
--- a/templates/payment/update.html
+++ b/templates/payment/update.html
@@ -97,7 +97,6 @@
             {% for category in categories %}
               <option
                 value="{{ category.id }}"
-                style="color: {{ category.color }}"
                 {% if "" ~ category.id == category_id %} selected {% endif %}
               >
                 {{ category.name }}