From ac05da8de6eefdcd8d61c1dfac3c1fabce3034a5 Mon Sep 17 00:00:00 2001 From: evazion Date: Tue, 23 Feb 2021 06:50:29 -0600 Subject: [PATCH] posts: change how the mode menu indicates the active mode. Instead of changing the background color of the entire page when you change modes in the post mode menu (which was ugly, and not obvious what the colors meant), show a notice and make it so that hovering a post gives it a blue outline. This indicates that clicking the post will do something different. --- .../post_preview_component.html.erb | 4 +-- .../post_preview_component.scss | 2 +- .../src/javascripts/post_mode_menu.js | 27 ++++++++++++++----- app/javascript/src/styles/base/040_colors.css | 14 ++-------- .../src/styles/specific/post_mode_menu.scss | 24 ++--------------- 5 files changed, 27 insertions(+), 44 deletions(-) diff --git a/app/components/post_preview_component/post_preview_component.html.erb b/app/components/post_preview_component/post_preview_component.html.erb index 613292715..c6ce94753 100644 --- a/app/components/post_preview_component/post_preview_component.html.erb +++ b/app/components/post_preview_component/post_preview_component.html.erb @@ -1,10 +1,10 @@ <%= tag.article id: "post_#{post.id}", **article_attrs do -%> <%= link_to polymorphic_path(link_target, q: tags) do -%> - + <%= tag.picture do -%> <%= tag.source media: "(max-width: 660px)", srcset: cropped_url -%> <%= tag.source media: "(min-width: 660px)", srcset: post.preview_file_url -%> <%= tag.img class: "has-cropped-#{post.has_cropped?}", src: post.preview_file_url, style: "min-width: #{preview_dimensions[:width]}px; min-height: #{preview_dimensions[:height]}px;", title: tooltip, alt: "post ##{post.id}" -%> - + <% end -%> <% end -%> <% if pool -%>

diff --git a/app/components/post_preview_component/post_preview_component.scss b/app/components/post_preview_component/post_preview_component.scss index 7e0674daa..7632f2191 100644 --- a/app/components/post_preview_component/post_preview_component.scss +++ b/app/components/post_preview_component/post_preview_component.scss @@ -4,10 +4,10 @@ article.post-preview { height: 154px; width: 154px; margin: 0 10px 10px 0; - overflow: hidden; text-align: center; display: inline-block; position: relative; + vertical-align: top; a { display: inline-block; diff --git a/app/javascript/src/javascripts/post_mode_menu.js b/app/javascript/src/javascripts/post_mode_menu.js index 2a518f62f..cb0f5cea3 100644 --- a/app/javascript/src/javascripts/post_mode_menu.js +++ b/app/javascript/src/javascripts/post_mode_menu.js @@ -18,8 +18,20 @@ PostModeMenu.initialize_shortcuts = function() { Utility.keydown("1 2 3 4 5 6 7 8 9 0", "change_tag_script", PostModeMenu.change_tag_script); } -PostModeMenu.show_notice = function(i) { - Utility.notice("Switched to tag script #" + i + ". To switch tag scripts, use the number keys."); +PostModeMenu.show_notice = function(mode, tag_script_index = 0) { + if (mode === "add-fav") { + Utility.notice("Switched to favorite mode. Click a post to favorite it."); + } else if (mode === "remove-fav") { + Utility.notice("Switched to unfavorite mode. Click a post to unfavorite it."); + } else if (mode === "edit") { + Utility.notice("Switched to edit mode. Click a post to edit it."); + } else if (mode === 'vote-down') { + Utility.notice("Switched to downvote mode. Click a post to downvote it."); + } else if (mode === 'vote-up') { + Utility.notice("Switched to upvote mode. Click a post to upvote it."); + } else if (mode === "tag-script") { + Utility.notice(`Switched to tag script #${tag_script_index}. To switch tag scripts, use the number keys.`); + } } PostModeMenu.change_tag_script = function(e) { @@ -33,7 +45,7 @@ PostModeMenu.change_tag_script = function(e) { $("#tag-script-field").val(new_tag_script); localStorage.setItem("current_tag_script_id", new_tag_script_id); if (old_tag_script_id !== new_tag_script_id) { - PostModeMenu.show_notice(new_tag_script_id); + PostModeMenu.show_notice("tag-script", new_tag_script_id); } e.preventDefault(); @@ -99,9 +111,9 @@ PostModeMenu.change = function() { if (s === undefined) { return; } - var $body = $(document.body); - $body.removeClass((i, classNames) => classNames.split(/ /).filter(name => /^mode-/.test(name)).join(" ")); - $body.addClass("mode-" + s); + + $("body").attr("data-mode-menu-active", s !== "view"); + $("body").attr("data-mode-menu", s); localStorage.setItem("mode", s, 1); if (s === "tag-script") { @@ -113,9 +125,10 @@ PostModeMenu.change = function() { var script = localStorage.getItem("tag-script-" + current_script_id); $("#tag-script-field").val(script).show(); - PostModeMenu.show_notice(current_script_id); + PostModeMenu.show_notice(s, current_script_id); } else { $("#tag-script-field").hide(); + PostModeMenu.show_notice(s); } } diff --git a/app/javascript/src/styles/base/040_colors.css b/app/javascript/src/styles/base/040_colors.css index ca5e5916f..84eda1bd7 100644 --- a/app/javascript/src/styles/base/040_colors.css +++ b/app/javascript/src/styles/base/040_colors.css @@ -229,12 +229,7 @@ html { --fetch-source-data-border-color: var(--grey-2); - --post-mode-menu-edit-background: var(--green-2); - --post-mode-menu-tag-script-background: var(--purple-2); - --post-mode-menu-add-fav-background: var(--yellow-2); - --post-mode-menu-remove-fav-background: var(--yellow-2); - --post-mode-menu-vote-up-background: var(--blue-2); - --post-mode-menu-vote-down-background: var(--red-2); + --post-mode-menu-active-post-outline-color: var(--blue-2); --post-mode-menu-translation-background: var(--blue-2); --tag-count-color: var(--muted-text-color); @@ -426,12 +421,7 @@ body[data-current-user-theme="dark"] { --fetch-source-data-border-color: var(--grey-4); - --post-mode-menu-edit-background: var(--green-8); - --post-mode-menu-tag-script-background: var(--purple-8); - --post-mode-menu-add-fav-background: var(--yellow-8); - --post-mode-menu-remove-fav-background: var(--yellow-8); - --post-mode-menu-vote-up-background: var(--blue-8); - --post-mode-menu-vote-down-background: var(--red-8); + --post-mode-menu-active-post-outline-color: var(--azure-4); --post-mode-menu-translation-background: var(--blue-8); --low-post-count-color: var(--red-4); diff --git a/app/javascript/src/styles/specific/post_mode_menu.scss b/app/javascript/src/styles/specific/post_mode_menu.scss index 4b63d2a53..27ca0d4ef 100644 --- a/app/javascript/src/styles/specific/post_mode_menu.scss +++ b/app/javascript/src/styles/specific/post_mode_menu.scss @@ -1,25 +1,5 @@ -body.mode-edit { - background-color: var(--post-mode-menu-edit-background); -} - -body.mode-tag-script { - background-color: var(--post-mode-menu-tag-script-background); -} - -body.mode-add-fav { - background-color: var(--post-mode-menu-add-fav-background); -} - -body.mode-remove-fav { - background-color: var(--post-mode-menu-remove-fav-background); -} - -body.mode-vote-up { - background-color: var(--post-mode-menu-vote-up-background); -} - -body.mode-vote-down { - background-color: var(--post-mode-menu-vote-down-background); +body[data-mode-menu-active="true"] .post-preview a:hover { + outline: 4px solid var(--post-mode-menu-active-post-outline-color); } body.mode-translation {