diff options
| -rw-r--r-- | assets/main.js | 20 | ||||
| -rw-r--r-- | templates/category/table.html | 3 | ||||
| -rw-r--r-- | templates/payment/create.html | 1 | ||||
| -rw-r--r-- | templates/payment/table.html | 10 | ||||
| -rw-r--r-- | templates/payment/table/search.html | 1 | ||||
| -rw-r--r-- | templates/payment/update.html | 1 |
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 }} |