From 13a0b21710bf4a1309998fa4080d0f2303e80f7b Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
Date: Sat, 22 Apr 2023 14:11:25 +0000
Subject: [PATCH] Add colour contrast filter Make colours on images yoinkable

---
 onlylegs/__init__.py                          |  4 ++++
 onlylegs/filters.py                           | 22 +++++++++++++++++++
 .../sass/components/image-view/info-tab.sass  | 16 ++++++++++----
 onlylegs/templates/image.html                 |  4 +++-
 4 files changed, 41 insertions(+), 5 deletions(-)
 create mode 100644 onlylegs/filters.py

diff --git a/onlylegs/__init__.py b/onlylegs/__init__.py
index 5c5f33f..44c32f1 100644
--- a/onlylegs/__init__.py
+++ b/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
 
 
@@ -125,6 +126,9 @@ def create_app():  # pylint: disable=R0914
     app.register_blueprint(api_media.blueprint)
     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)
diff --git a/onlylegs/filters.py b/onlylegs/filters.py
new file mode 100644
index 0000000..6a1ead2
--- /dev/null
+++ b/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) + ");"
diff --git a/onlylegs/static/sass/components/image-view/info-tab.sass b/onlylegs/static/sass/components/image-view/info-tab.sass
index 968ef13..c803159 100644
--- a/onlylegs/static/sass/components/image-view/info-tab.sass
+++ b/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
-        height: 1.5rem
+        width: 1.6rem
+        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%
diff --git a/onlylegs/templates/image.html b/onlylegs/templates/image.html
index 1a546fd..d9d68ba 100644
--- a/onlylegs/templates/image.html
+++ b/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 %}