From 177de7c234bf3fc13cb9a39b32fa220f2fa3c05a Mon Sep 17 00:00:00 2001 From: evazion Date: Tue, 23 Feb 2021 00:33:52 -0600 Subject: [PATCH] related tags: use checkboxes to indicate selected tags. In the related tags list, use checkboxes and bold to indicate selected tags, instead of highlighting selected tags with a blue background. This is so that you can see the colors of selected tags in the related tags list, and in particular so you can see the artist tag. --- .../tag_list_component.html+simple.erb | 5 ++++- app/javascript/src/javascripts/related_tag.js | 20 ++++++++++++------- app/javascript/src/styles/base/040_colors.css | 2 +- .../src/styles/common/utilities.scss | 4 ++++ .../src/styles/specific/related_tags.scss | 18 ++++++++++++----- app/views/related_tags/_tag_column.html.erb | 5 ++++- 6 files changed, 39 insertions(+), 15 deletions(-) diff --git a/app/components/tag_list_component/tag_list_component.html+simple.erb b/app/components/tag_list_component/tag_list_component.html+simple.erb index c461b1901..d7c96c3d7 100644 --- a/app/components/tag_list_component/tag_list_component.html+simple.erb +++ b/app/components/tag_list_component/tag_list_component.html+simple.erb @@ -1,7 +1,10 @@ diff --git a/app/javascript/src/javascripts/related_tag.js b/app/javascript/src/javascripts/related_tag.js index 13dc61927..86accad2a 100644 --- a/app/javascript/src/javascripts/related_tag.js +++ b/app/javascript/src/javascripts/related_tag.js @@ -5,7 +5,8 @@ let RelatedTag = {}; RelatedTag.initialize_all = function() { $(document).on("click.danbooru", ".related-tags-button", RelatedTag.on_click_related_tags_button); - $(document).on("click.danbooru", ".related-tags a.search-tag", RelatedTag.toggle_tag); + $(document).on("change.danbooru", ".related-tags input", RelatedTag.toggle_tag); + $(document).on("click.danbooru", ".related-tags a", RelatedTag.toggle_tag); $(document).on("click.danbooru", "#show-related-tags-link", RelatedTag.show); $(document).on("click.danbooru", "#hide-related-tags-link", RelatedTag.hide); $(document).on("keyup.danbooru.relatedTags", "#upload_tag_string, #post_tag_string", RelatedTag.update_selected); @@ -89,11 +90,16 @@ RelatedTag.current_tag = function() { RelatedTag.update_selected = function(e) { var current_tags = RelatedTag.current_tags(); - var $all_tags = $(".related-tags a.search-tag"); - $all_tags.removeClass("selected"); - $all_tags.each(function(i, tag) { - if (current_tags.includes(tag.textContent.replace(/ /g, "_"))) { - $(tag).addClass("selected"); + + $(".related-tags li").each((_, li) => { + let tag_name = $(li).text().trim().replace(/ /g, "_"); + + if (current_tags.includes(tag_name)) { + $(li).addClass("selected"); + $(li).find("input").prop("checked", true); + } else { + $(li).removeClass("selected"); + $(li).find("input").prop("checked", false); } }); } @@ -104,7 +110,7 @@ RelatedTag.current_tags = function() { RelatedTag.toggle_tag = function(e) { var $field = $("#upload_tag_string,#post_tag_string"); - var tag = $(e.target).html().replace(/ /g, "_").replace(/>/g, ">").replace(/</g, "<").replace(/&/g, "&"); + var tag = $(e.target).closest("li").text().trim().replace(/ /g, "_"); if (RelatedTag.current_tags().includes(tag)) { var escaped_tag = Utility.regexp_escape(tag); diff --git a/app/javascript/src/styles/base/040_colors.css b/app/javascript/src/styles/base/040_colors.css index fc1f57fee..95a1a73c0 100644 --- a/app/javascript/src/styles/base/040_colors.css +++ b/app/javascript/src/styles/base/040_colors.css @@ -297,7 +297,7 @@ html { --news-updates-background: var(--grey-0); --news-updates-border-color: var(--grey-1); - --related-tags-container-background: var(--blue-0); + --related-tags-container-background: var(--grey-0); --selected-related-tag-background-color: var(--link-color); --selected-related-tag-color: var(--inverse-text-color); } diff --git a/app/javascript/src/styles/common/utilities.scss b/app/javascript/src/styles/common/utilities.scss index 125d3174c..c9a86985a 100644 --- a/app/javascript/src/styles/common/utilities.scss +++ b/app/javascript/src/styles/common/utilities.scss @@ -5,6 +5,9 @@ $spacer: 0.25rem; /* 4px */ +.invisible { visibility: hidden; } +.visible { visibility: visible; } + .font-monospace { font-family: var(--monospace-font); } .font-bold { font-weight: bold; } @@ -34,6 +37,7 @@ $spacer: 0.25rem; /* 4px */ .h-10 { height: 10 * $spacer; } +.space-x-1 > * + * { margin-left: 1 * $spacer; } .space-x-2 > * + * { margin-left: 2 * $spacer; } .space-x-4 > * + * { margin-left: 4 * $spacer; } .space-y-4 > * + * { margin-top: 4 * $spacer; } diff --git a/app/javascript/src/styles/specific/related_tags.scss b/app/javascript/src/styles/specific/related_tags.scss index 52eadd61c..2e1f62634 100644 --- a/app/javascript/src/styles/specific/related_tags.scss +++ b/app/javascript/src/styles/specific/related_tags.scss @@ -12,11 +12,19 @@ div.related-tags { flex-wrap: wrap; div.tag-column { - max-width: 15em; + width: 15em; + } - a.selected { - background: var(--selected-related-tag-background-color); - color: var(--selected-related-tag-color); - } + /* Hide the related tag checkbox unless it's checked or hovered. */ + input[type="checkbox"] { + visibility: hidden; + } + + li.selected a { + font-weight: bold; + } + + li.selected, li:hover { + input[type="checkbox"] { visibility: visible; } } } diff --git a/app/views/related_tags/_tag_column.html.erb b/app/views/related_tags/_tag_column.html.erb index 24fa6bd12..c48d305e0 100644 --- a/app/views/related_tags/_tag_column.html.erb +++ b/app/views/related_tags/_tag_column.html.erb @@ -2,7 +2,10 @@ <% if tags.present? %> <%= tag.div class: ["tag-column", local_assigns[:class]] do %> -

<%= title %>

+

+ + <%= title %> +

<%= render_simple_tag_list(tags) %> <% end %> <% end %>