Merge branch 'master' into 4020-custom-colours

changedetectionio/blueprint/tags/__init__.py

@@ -29,6 +29,7 @@ def construct_blueprint(datastore: ChangeDetectionStore):
                                  form=add_form,
                                  generate_tag_colors=processors.generate_processor_badge_colors,
                                  tag_count=tag_count,
+                                 wcag_text_color=processors.wcag_text_color,
                                  )
 
         return output

changedetectionio/blueprint/tags/form.py

@@ -12,12 +12,9 @@ class group_restock_settings_form(restock_settings_form):
     overrides_watch = BooleanField('Activate for individual watches in this tag/group?', default=False)
     url_match_pattern = StringField('Auto-apply to watches with URLs matching',
                                     render_kw={"placeholder": "e.g. *://example.com/* or github.com/myorg"})
+    tag_colour = StringField('Tag colour', default='')
 
 class SingleTag(Form):
 
     name = StringField('Tag name', [validators.InputRequired()], render_kw={"placeholder": "Name"})
     save_button = SubmitField('Save', render_kw={"class": "pure-button pure-button-primary"})
-
-
-
-

changedetectionio/blueprint/tags/templates/edit-tag.html

@@ -57,6 +57,32 @@
                         </ul>
                     </div>
                     {% endif %}
+                    <div class="pure-control-group">
+                        <label>{{ _('Tag colour') }}</label>
+                        <div style="display:flex; align-items:center; gap:0.75em;">
+                            <input type="checkbox" id="use_custom_colour"
+                                   {% if data.get('tag_colour') %}checked{% endif %}>
+                            <label for="use_custom_colour" style="margin:0">{{ _('Custom colour') }}</label>
+                            <input type="color" id="tag_colour_picker"
+                                   value="{{ data.get('tag_colour') or '#4f8ef7' }}"
+                                   {% if not data.get('tag_colour') %}disabled{% endif %}>
+                            <input type="hidden" name="tag_colour" id="tag_colour_hidden"
+                                   value="{{ data.get('tag_colour', '') }}">
+                        </div>
+                        <span class="pure-form-message-inline">{{ _('Leave unchecked to use the auto-generated colour based on the tag name.') }}</span>
+                    </div>
+                    <script>
+                    (function () {
+                        var cb = document.getElementById('use_custom_colour');
+                        var picker = document.getElementById('tag_colour_picker');
+                        var hidden = document.getElementById('tag_colour_hidden');
+                        picker.addEventListener('input', function () { hidden.value = this.value; });
+                        cb.addEventListener('change', function () {
+                            picker.disabled = !this.checked;
+                            hidden.value = this.checked ? picker.value : '';
+                        });
+                    })();
+                    </script>
                 </fieldset>
             </div>
 

changedetectionio/blueprint/tags/templates/groups-overview.html

@@ -7,6 +7,9 @@
 {%- for uuid, tag in available_tags -%}
 {%- if tag and tag.title -%}
 {%- set class_name = tag.title|sanitize_tag_class -%}
+{%- if tag.get('tag_colour') -%}
+.watch-tag-list.tag-{{ class_name }} { background-color: {{ tag.tag_colour }}; color: {{ wcag_text_color(tag.tag_colour) }}; }
+{%- else -%}
 {%- set colors = generate_tag_colors(tag.title) -%}
 .watch-tag-list.tag-{{ class_name }} {
   background-color: {{ colors['light']['bg'] }};
@@ -17,6 +20,7 @@ html[data-darkmode="true"] .watch-tag-list.tag-{{ class_name }} {
   color: {{ colors['dark']['color'] }};
 }
 {%- endif -%}
+{%- endif -%}
 {%- endfor -%}
 </style>
 

changedetectionio/blueprint/watchlist/__init__.py

@@ -92,6 +92,7 @@ def construct_blueprint(datastore: ChangeDetectionStore, update_q, queuedWatchMe
             extra_classes='has-queue' if not update_q.empty() else '',
             form=form,
             generate_tag_colors=processors.generate_processor_badge_colors,
+            wcag_text_color=processors.wcag_text_color,
             guid=datastore.data['app_guid'],
             has_proxies=proxy_list,
             hosted_sticky=os.getenv("SALTED_PASS", False) == False,

changedetectionio/blueprint/watchlist/templates/watch-overview.html

@@ -71,6 +71,13 @@ document.addEventListener('DOMContentLoaded', function() {
 {%- for uuid, tag in tags -%}
 {%- if tag and tag.title -%}
 {%- set class_name = tag.title|sanitize_tag_class -%}
+{%- if tag.get('tag_colour') -%}
+.button-tag.tag-{{ class_name }},
+.watch-tag-list.tag-{{ class_name }} {
+  background-color: {{ tag.tag_colour }};
+  color: {{ wcag_text_color(tag.tag_colour) }};
+}
+{%- else -%}
 {%- set colors = generate_tag_colors(tag.title) -%}
 .button-tag.tag-{{ class_name }} {
   background-color: {{ colors['light']['bg'] }};
@@ -92,6 +99,7 @@ html[data-darkmode="true"] .watch-tag-list.tag-{{ class_name }} {
   color: {{ colors['dark']['color'] }};
 }
 {%- endif -%}
+{%- endif -%}
 {%- endfor -%}
 </style>
 <div class="box" id="form-quick-watch-add">

changedetectionio/processors/__init__.py

@@ -341,6 +341,18 @@ def get_processor_descriptions():
     return descriptions
 
 
+def wcag_text_color(hex_bg: str) -> str:
+    """Return #000000 or #ffffff for maximum WCAG contrast against hex_bg."""
+    hex_bg = hex_bg.lstrip('#')
+    if len(hex_bg) != 6:
+        return '#000000'
+    r, g, b = (int(hex_bg[i:i+2], 16) / 255 for i in (0, 2, 4))
+    def lin(c):
+        return c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4
+    L = 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b)
+    return '#000000' if L > 0.179 else '#ffffff'
+
+
 def generate_processor_badge_colors(processor_name):
     """
     Generate consistent colors for a processor badge based on its name.