From 7b1815ad8ec223649880277b46600299e28e82df Mon Sep 17 00:00:00 2001 From: evazion Date: Mon, 22 Feb 2021 03:43:47 -0600 Subject: [PATCH] forum: change style of new/approved/pending/rejected labels. Change the new, approved, pending, and rejected labels in the forum to use an outlined pill style (like user levels in user tooltips) instead of a filled background style. This is less obtrusive and more readable in dark mode. --- app/helpers/forum_topics_helper.rb | 2 ++ app/javascript/src/styles/base/040_colors.css | 10 +++--- app/javascript/src/styles/specific/forum.scss | 32 +++++++++++++------ app/views/forum_topics/_listing.html.erb | 24 ++++---------- 4 files changed, 36 insertions(+), 32 deletions(-) diff --git a/app/helpers/forum_topics_helper.rb b/app/helpers/forum_topics_helper.rb index 29296c89c..efdb9e5b0 100644 --- a/app/helpers/forum_topics_helper.rb +++ b/app/helpers/forum_topics_helper.rb @@ -18,6 +18,8 @@ module ForumTopicsHelper :approved elsif topic.category_name == "Tags" && topic.bulk_update_requests.present? && topic.bulk_update_requests.all?(&:is_rejected?) :rejected + else + nil end end diff --git a/app/javascript/src/styles/base/040_colors.css b/app/javascript/src/styles/base/040_colors.css index 83b141c35..fc1f57fee 100644 --- a/app/javascript/src/styles/base/040_colors.css +++ b/app/javascript/src/styles/base/040_colors.css @@ -161,7 +161,7 @@ html { --forum-vote-down-color: var(--red-5); --forum-topic-status-new-color: var(--red-4); - --forum-topic-status-pending-color: var(--azure-5); + --forum-topic-status-pending-color: var(--blue-5); --forum-topic-status-approved-color: var(--green-4); --forum-topic-status-rejected-color: var(--red-4); @@ -368,10 +368,10 @@ body[data-current-user-theme="dark"] { --forum-vote-meh-color: var(--yellow-2); --forum-vote-down-color: var(--red-4); - --forum-topic-status-new-color: var(--red-4); - --forum-topic-status-pending-color: var(--blue-4); - --forum-topic-status-approved-color: var(--green-4); - --forum-topic-status-rejected-color: var(--red-4); + --forum-topic-status-new-color: var(--red-3); + --forum-topic-status-pending-color: var(--azure-3); + --forum-topic-status-approved-color: var(--green-3); + --forum-topic-status-rejected-color: var(--red-3); --moderation-report-text-color: var(--red-4); --moderation-report-background-color: var(--red-9); diff --git a/app/javascript/src/styles/specific/forum.scss b/app/javascript/src/styles/specific/forum.scss index ac5f6bc9b..7b3c8ae40 100644 --- a/app/javascript/src/styles/specific/forum.scss +++ b/app/javascript/src/styles/specific/forum.scss @@ -8,37 +8,49 @@ div#c-forum-topics { white-space: nowrap; } - .topic-status { + a.topic-status { margin-right: 0.25em; - vertical-align: bottom; &.label { + display: inline-block; font-size: 0.7em; text-transform: uppercase; - border-radius: 3px; - padding: 4px; - color: white; + border: 1px solid; + border-radius: 0.25rem; + background-color: var(--body-background-color); + padding: 0.125rem 0.25rem; + + &:hover { + color: var(--inverse-text-color); + } } &.icon { color: var(--muted-text-color); - font-size: 1em; } &.new { - background-color: var(--forum-topic-status-new-color); + color: var(--forum-topic-status-new-color); + border-color: var(--forum-topic-status-new-color); + &:hover { background-color: var(--forum-topic-status-new-color); } } &.pending { - background-color: var(--forum-topic-status-pending-color); + color: var(--forum-topic-status-pending-color); + border-color: var(--forum-topic-status-pending-color); + &:hover { background-color: var(--forum-topic-status-pending-color); } } &.approved { - background-color: var(--forum-topic-status-approved-color); + color: var(--forum-topic-status-approved-color); + border-color: var(--forum-topic-status-approved-color); + &:hover { background-color: var(--forum-topic-status-approved-color); } } &.rejected { - background-color: var(--forum-topic-status-rejected-color); + color: var(--forum-topic-status-rejected-color); + border-color: var(--forum-topic-status-rejected-color); + &:hover { background-color: var(--forum-topic-status-rejected-color); } } } diff --git a/app/views/forum_topics/_listing.html.erb b/app/views/forum_topics/_listing.html.erb index bd04313c1..24976f27e 100644 --- a/app/views/forum_topics/_listing.html.erb +++ b/app/views/forum_topics/_listing.html.erb @@ -1,33 +1,23 @@ <%= table_for forum_topics, width: "100%" do |t| %> <% t.column "Title" do |topic| %> <% if !topic.is_read? %> - <%= link_to forum_topics_path(search: { is_read: false }) do %> - New - <% end %> + <%= link_to "New", forum_topics_path(search: { is_read: false }), class: "topic-status label new" %> <% end %> <% if topic.is_sticky? %> - <%= link_to forum_topics_path(search: { is_sticky: true }) do %> - <%= sticky_icon(class: "topic-status stickied", title: "Stickied") %> - <% end %> + <%= link_to sticky_icon, forum_topics_path(search: { is_sticky: true }), class: "topic-status icon stickied", title: "Stickied" %> <% end %> <% if topic.is_locked? %> - <%= link_to forum_topics_path(search: { is_locked: true }) do %> - <%= lock_icon(class: "topic-status locked", title: "Locked") %> - <% end %> + <%= link_to lock_icon, forum_topics_path(search: { is_locked: true }), class: "topic-status icon locked", title: "Locked" %> <% end %> <% if topic.is_deleted? %> - <%= link_to forum_topics_path(search: { is_deleted: true }) do %> - <%= delete_icon(class: "topic-status deleted", title: "Deleted") %> - <% end %> + <%= link_to delete_icon, forum_topics_path(search: { is_deleted: true }), class: "topic-status icon deleted", title: "Deleted" %> <% end %> <% if topic.is_private? %> - <%= link_to forum_topics_path(search: { is_private: true }) do %> - <%= private_icon(class: "topic-status private", title: "#{User.level_string(topic.min_level)} only") %> - <% end %> + <%= link_to private_icon, forum_topics_path(search: { is_private: true }), class: "topic-status icon private", title: "#{User.level_string(topic.min_level)} only" %> <% end %> <% if forum_topic_status(topic).present? %> @@ -42,8 +32,8 @@ <% end %> <% t.column "Status", width: "1%" do |topic| %> <% status = forum_topic_status(topic) %> - <%= link_to forum_topics_path(search: { status: status }) do %> - <%= status %> + <% if status.present? %> + <%= link_to status, forum_topics_path(search: { status: status }), class: "topic-status label #{status}" %> <% end %> <% end %> <% t.column "Creator", width: "8%" do |topic| %>