Merge branch 'ENH_tag_colour_override' of https://github.com/jat255/paperless into jat255-ENH_tag_colour_override

overrides/README.md

@@ -0,0 +1,11 @@
+# Customizing Paperless
+
+*See customization
+[documentation](https://paperless.readthedocs.io/en/latest/customising.html) 
+for more detail!*
+
+The example `.css` and `.js` snippets in this folder can be placed into
+one of two files in your ``PAPERLESS_MEDIADIR`` folder: `overrides.js` or 
+`overrides.css`. Please feel free to submit pull requests to the main 
+repository with other examples of customizations that you think others may
+find useful.

src/documents/static/js/colours.js

@@ -0,0 +1,65 @@
+// The following jQuery snippet will add a small square next to the selection
+// drop-down on the `Add tag` page that will update to show the selected tag
+// color as the drop-down value is changed.
+
+if (django.jQuery("#id_colour").length) {
+
+    let colour;
+    let colour_num;
+
+    colour_num = django.jQuery("#id_colour").val() - 1;
+    colour = django.jQuery('#id_colour')[0][colour_num].text;
+    django.jQuery('#id_colour').after('<div class="colour_square"></div>')
+
+    django.jQuery('.colour_square').css({
+        'float': 'left',
+        'width': '20px',
+        'height': '20px',
+        'margin': '5px',
+        'border': '1px solid rgba(0, 0, 0, .2)',
+        'background': colour
+    });
+
+    django.jQuery('#id_colour').change(function () {
+        colour_num = django.jQuery("#id_colour").val() - 1;
+        colour = django.jQuery('#id_colour')[0][colour_num].text;
+        django.jQuery('.colour_square').css({'background': colour});
+    });
+}
+
+// The following jQuery snippet will add a small square next to each selection
+// drop-down on the `Edit tags` page that will update to show the selected tag
+// color as the drop-down value is changed.
+
+if (django.jQuery('select[id*="-colour"]').length) {
+    django.jQuery('select[id*="-colour"]').each(function (index, element) {
+        let id;
+        let loop_colour_num
+        let loop_colour
+
+        id = "colour_square_" + index;
+        django.jQuery(element).after('<div class="colour_square" id="' + id + '"></div>')
+
+        loop_colour_num = django.jQuery(element).val() - 1;
+        loop_colour = django.jQuery(element)[0][loop_colour_num].text;
+
+        django.jQuery("<style type='text/css'>\
+                        .colour_square{ \
+                            float: left; \
+                            width: 20px; \
+                            height: 20px; \
+                            margin: 5px; \
+                            border: 1px solid rgba(0,0,0,.2); \
+                        } </style>").appendTo("head");
+        django.jQuery('#' + id).css({'background': loop_colour});
+
+        console.log(id, loop_colour_num, loop_colour)
+
+        django.jQuery(element).change(function () {
+            loop_colour_num = django.jQuery(element).val() - 1;
+            loop_colour = django.jQuery(element)[0][loop_colour_num].text;
+            django.jQuery('#' + id).css({'background': loop_colour});
+            console.log('#' + id, loop_colour)
+        });
+    })
+}