From a813288aaf0f8dc2baaa3b0f0995503b1cc696a8 Mon Sep 17 00:00:00 2001 From: Joshua Taillon Date: Sat, 17 Nov 2018 09:18:36 -0500 Subject: [PATCH 1/3] add example override for tag colour display --- overrides/README.md | 11 +++++++++++ overrides/tag_colour_preview.js | 26 ++++++++++++++++++++++++++ 2 files changed, 37 insertions(+) create mode 100644 overrides/README.md create mode 100644 overrides/tag_colour_preview.js diff --git a/overrides/README.md b/overrides/README.md new file mode 100644 index 000000000..f190c1407 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/overrides/tag_colour_preview.js b/overrides/tag_colour_preview.js new file mode 100644 index 000000000..a265f247e --- /dev/null +++ b/overrides/tag_colour_preview.js @@ -0,0 +1,26 @@ +// 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. Copy and paste it into +// ``PAPERLESS_MEDIADIR/overrides.js`` to see the effects. + +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('
') + +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}); +}); From d6eefbccee5b21e04b2e3bb30b7aa42fb9df6c43 Mon Sep 17 00:00:00 2001 From: Joshua Taillon Date: Sat, 17 Nov 2018 21:34:11 -0500 Subject: [PATCH 2/3] encapsulate in if blocks so no errors on non-tag pages; added support for edit tags page --- overrides/tag_colour_preview.js | 75 +++++++++++++++++++++++++-------- 1 file changed, 58 insertions(+), 17 deletions(-) diff --git a/overrides/tag_colour_preview.js b/overrides/tag_colour_preview.js index a265f247e..a4efa7907 100644 --- a/overrides/tag_colour_preview.js +++ b/overrides/tag_colour_preview.js @@ -3,24 +3,65 @@ // color as the drop-down value is changed. Copy and paste it into // ``PAPERLESS_MEDIADIR/overrides.js`` to see the effects. -let colour; -let colour_num; +if (django.jQuery("#id_colour").length) { -colour_num = django.jQuery("#id_colour").val() - 1; -colour = django.jQuery('#id_colour')[0][colour_num].text; -django.jQuery('#id_colour').after('
') + let colour; + let colour_num; -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}); -}); + django.jQuery('#id_colour').after('
') + + 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. Copy and paste it into +// ``PAPERLESS_MEDIADIR/overrides.js`` to see the effects. + +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('
') + + loop_colour_num = django.jQuery(element).val() - 1; + loop_colour = django.jQuery(element)[0][loop_colour_num].text; + + django.jQuery("").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) + }); + }) +} \ No newline at end of file From ba452e0524c2e8f10559ad4e17129836c11c208a Mon Sep 17 00:00:00 2001 From: Joshua Taillon Date: Sat, 1 Dec 2018 09:14:44 -0500 Subject: [PATCH 3/3] move tag colour override to static folder --- .../documents/static/js/colours.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) rename overrides/tag_colour_preview.js => src/documents/static/js/colours.js (90%) diff --git a/overrides/tag_colour_preview.js b/src/documents/static/js/colours.js similarity index 90% rename from overrides/tag_colour_preview.js rename to src/documents/static/js/colours.js index a4efa7907..f8f881aa1 100644 --- a/overrides/tag_colour_preview.js +++ b/src/documents/static/js/colours.js @@ -1,7 +1,6 @@ // 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. Copy and paste it into -// ``PAPERLESS_MEDIADIR/overrides.js`` to see the effects. +// color as the drop-down value is changed. if (django.jQuery("#id_colour").length) { @@ -30,8 +29,7 @@ if (django.jQuery("#id_colour").length) { // 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. Copy and paste it into -// ``PAPERLESS_MEDIADIR/overrides.js`` to see the effects. +// color as the drop-down value is changed. if (django.jQuery('select[id*="-colour"]').length) { django.jQuery('select[id*="-colour"]').each(function (index, element) { @@ -64,4 +62,4 @@ if (django.jQuery('select[id*="-colour"]').length) { console.log('#' + id, loop_colour) }); }) -} \ No newline at end of file +}