Add colour contrast filter

Make colours on images yoinkable

onlylegs/__init__.py

@@ -24,6 +24,7 @@ from onlylegs.views import (
 )
 from onlylegs.api import media as api_media, group as api_group, account as api_account
 from onlylegs import auth as view_auth
+from onlylegs import filters
 from onlylegs import gwagwa
 
 
@@ -126,6 +127,9 @@ def create_app():  # pylint: disable=R0914
     app.register_blueprint(api_group.blueprint)
     app.register_blueprint(api_account.blueprint)
     
+    # FILTERS
+    app.register_blueprint(filters.blueprint)
+
     # CACHE AND COMPRESS
     cache.init_app(app)
     compress.init_app(app)

onlylegs/filters.py

@@ -0,0 +1,22 @@
+"""
+OnlyLegs filters
+Custom Jinja2 filters
+"""
+from flask import Blueprint
+from onlylegs.utils import contrast
+
+
+blueprint = Blueprint('filters', __name__)
+
+
+@blueprint.app_template_filter()
+def colour_contrast(colour):
+    """
+    Pass in the colour of the background and will return
+    a css variable based on the contrast of text required to be readable
+    "color: var(--fg-white);" or "color: var(--fg-black);"
+    """
+    bright = "var(--fg-white)"
+    dark = "var(--fg-black)"
+    
+    return "color: RGB(" + contrast.contrast(colour, dark, bright) + ");"

onlylegs/static/sass/components/image-view/info-tab.sass

@@ -188,19 +188,27 @@
     display: flex
     gap: 0.5rem
 
-    span
+    button
         margin: 0
         padding: 0
 
-        width: 1.5rem
+        width: 1.6rem
-        height: 1.5rem
+        height: 1.6rem
 
         display: flex
         justify-content: center
         align-items: center
 
         border-radius: $rad-inner
-        // border: 1px solid RGB($white)
+        border: none
+
+        i
+            font-size: 1rem
+            opacity: 0
+            transition: opacity 0.15s ease-in-out
+
+        &:hover i
+            opacity: 1
 
 .img-groups
     width: 100%

onlylegs/templates/image.html

@@ -158,7 +158,9 @@
                     </table>
                     <div class="img-colours">
                         {% for col in image.colours %}
-                            <span style="background-color: rgb({{col.0}}, {{col.1}}, {{col.2}})"></span>
+                            <button style="background-color: rgb{{ col }}" onclick="copyToClipboard('rgb{{ col }}')">
+                                <i class="ph-fill ph-paint-bucket" style="{{ col|colour_contrast }}"></i>
+                            </button>
                         {% endfor %}
                     </div>
                     {% if image.groups %}