aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--assets/main.js20
-rw-r--r--templates/category/table.html3
-rw-r--r--templates/payment/create.html1
-rw-r--r--templates/payment/table.html10
-rw-r--r--templates/payment/table/search.html1
-rw-r--r--templates/payment/update.html1
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 }}