From a6fb06592463db5194a5f6497931154c7384f34e Mon Sep 17 00:00:00 2001 From: Kris Date: Mon, 3 Feb 2025 09:31:17 -0500 Subject: [PATCH] UX: clean up post action menu styles, fix issues, add variables (#31100) Related to https://meta.discourse.org/t/double-button-inconsistencies-post-menu/349845 This does some general clean up... * **Moves shared mobile/desktop styles into /common** We had some mobile hover states for some reason, and desktop hover/focus states can be moved to common and gated with `.discourse-no-touch`... this means we're applying them on capabilities rather than device type * **Adds some `-d-post-control-` variables to make theming easier** Theme authors can replace the variables without worrying about selector specificity * **Removes an overridden fade-out class from likes** We were overriding the effect here anyway * **Fixes a janky hover transition effect on the like button** This was being incorrectly inherited from another button ...and fixes some issues * **Corrects border radius on double buttons (likes, flags)** ![image](https://github.com/user-attachments/assets/e3bf45b4-3d72-4858-94b1-dad41ff3e274) * **Corrects double button height issues for flags** ![image](https://github.com/user-attachments/assets/eb5624ea-f434-43b6-8ffc-de9baf1fa0fd) * **Adjusts the flag count to avoid the lumpy circle CSS problem** ![image](https://github.com/user-attachments/assets/7c0d85bc-7d72-4b99-ab1a-ec45bab05750) * **Removes lingering post-tap focus/hover states on mobile by applying `.discourse-no-touch` and `focus-visible`** Tested both glimmer and legacy. --- .../app/components/post/menu/buttons/like.gjs | 2 +- .../discourse/app/widgets/post-menu.js | 4 +- .../stylesheets/common/base/topic-post.scss | 167 +++++++++++++----- .../common/components/buttons.scss | 34 ++-- .../stylesheets/desktop/topic-post.scss | 52 ------ app/assets/stylesheets/mobile/topic-post.scss | 12 -- 6 files changed, 143 insertions(+), 128 deletions(-) diff --git a/app/assets/javascripts/discourse/app/components/post/menu/buttons/like.gjs b/app/assets/javascripts/discourse/app/components/post/menu/buttons/like.gjs index 77d43e41d17..680cdd22f89 100644 --- a/app/assets/javascripts/discourse/app/components/post/menu/buttons/like.gjs +++ b/app/assets/javascripts/discourse/app/components/post/menu/buttons/like.gjs @@ -65,7 +65,7 @@ export default class PostMenuLikeButton extends Component { "toggle-like" "btn-icon" (if this.isAnimated "heart-animation") - (if @post.liked "has-like fade-out" "like") + (if @post.liked "has-like" "like") }} ...attributes data-post-id={{@post.id}} diff --git a/app/assets/javascripts/discourse/app/widgets/post-menu.js b/app/assets/javascripts/discourse/app/widgets/post-menu.js index f8a1344ffdc..417e989382a 100644 --- a/app/assets/javascripts/discourse/app/widgets/post-menu.js +++ b/app/assets/javascripts/discourse/app/widgets/post-menu.js @@ -166,9 +166,7 @@ registerButton( return likeCount(attrs); } - const className = attrs.liked - ? "toggle-like has-like fade-out" - : "toggle-like like"; + const className = attrs.liked ? "toggle-like has-like" : "toggle-like like"; const button = { action: "like", diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss index 089d9cb1c58..0d98360d06c 100644 --- a/app/assets/stylesheets/common/base/topic-post.scss +++ b/app/assets/stylesheets/common/base/topic-post.scss @@ -6,10 +6,10 @@ span { background-color: var(--danger); color: var(--secondary); - border-radius: 10px; - padding: 0.25em 0.5em; + padding: 0.15em 0.3em 0.2em; display: inline-block; - font-size: 0.8em; + font-size: var(--font-down-2); + border-radius: var(--d-button-border-radius); } } @@ -315,12 +315,24 @@ } } +:root { + --d-post-control-border-radius: var(--d-button-border-radius); + --d-post-control-text-color: var(--primary-low-mid); + --d-post-control-text-color--hover: var(--primary); + --d-post-control-icon-color: var(--primary-low-mid); + --d-post-control-icon-color--hover: var(--primary); + --d-post-control-background--hover: var(--primary-low); + --d-post-control-create-text-color: var(--primary-high); + --d-post-control-create-icon-color: var(--primary-high); + --d-post-control-sibling-text-color--hover: var(--primary-medium); +} + nav.post-controls { padding: 0; display: flex; align-items: center; justify-content: space-between; - color: var(--primary-low-mid); + color: var(--d-post-control-text-color); @include user-select(none); @@ -333,22 +345,44 @@ nav.post-controls { .double-button { display: inline-flex; flex: 0 1 auto; - align-items: center; + align-items: stretch; // should always be the same height white-space: nowrap; + .discourse-no-touch & { + &:hover { + button { + background: var(--d-post-control-background--hover); + color: var(--d-post-control-sibling-text-color--hover); + } + } + } + button { - // It looks really confusing when one half a double button has an inner shadow on click. - &:active { - box-shadow: none; + margin-inline: 0; + + &:first-child { + border-radius: var(--d-post-control-border-radius) 0 0 + var(--d-post-control-border-radius); } - &.my-likes, - &.read-indicator, - &.regular-likes { - // Like count on posts - .d-icon { - color: var(--primary-low-mid); - padding-left: 0.45em; + &:last-child { + border-radius: 0 var(--d-post-control-border-radius) + var(--d-post-control-border-radius) 0; + } + + &:first-child:last-child { + border-radius: var(--d-post-control-border-radius); + } + + &.like { + // Like button with 0 likes + &.d-hover, + &:hover { + background: var(--love-low); + + .d-icon { + color: var(--love); + } } } @@ -357,17 +391,57 @@ nav.post-controls { .d-icon { color: var(--love); } + + .discourse-no-touch & { + &.d-hover, + &:hover { + background: var(--primary-low); + + .d-icon { + color: var(--primary-medium); + } + } + } + } + + &.button-count { + // Like count button + .discourse-no-touch & { + &.d-hover, + &:hover { + color: var(--primary); + } + } + + + .toggle-like { + // Like button when like count is present + .discourse-no-touch & { + &.d-hover, + &:hover { + background: var(--primary-low); + } + } + } + } + + &.my-likes, + &.read-indicator, + &.regular-likes { + // Like count on posts + .d-icon { + color: var(--d-post-control-icon-color); + padding-left: 0.45em; + } } &[disabled] { // Disabled like button cursor: not-allowed; + opacity: 1; } &.button-count { // Like count button - height: 100%; // sometimes the font might be shorter than the icon - &:not(.my-likes) { padding-right: 0; } @@ -382,12 +456,8 @@ nav.post-controls { a, button { - color: var(--primary-low-mid-or-secondary-high); - - .d-icon { - opacity: 1; - } display: inline-flex; + color: var(--d-post-control-text-color); } button { @@ -397,6 +467,7 @@ nav.post-controls { vertical-align: top; background: transparent; border: none; + border-radius: var(--d-post-control-border-radius); .d-icon { // this avoids an issue where hovering off the icon @@ -404,13 +475,15 @@ nav.post-controls { pointer-events: none; } - &.d-hover, - &:hover, - &:focus, - &:active { - outline: none; - background: var(--primary-low); - color: var(--primary); + .discourse-no-touch & { + &.d-hover, + &:hover, + &:focus-visible, + &:active { + outline: none; + background: var(--d-post-control-background--hover); + color: var(--d-post-control-text-color--hover); + } } &.hidden { @@ -422,15 +495,17 @@ nav.post-controls { } // TODO (glimmer-post-menu): Go over the the d-hover style and remove the unnecessary ones when glimmer-post-menu replaces the widget version - &.delete.d-hover, - &.delete:hover, - &.delete:active, - &.delete:focus { - background: var(--danger); - color: var(--secondary); - - .d-icon { + .discourse-no-touch & { + &.delete.d-hover, + &.delete:hover, + &.delete:active, + &.delete:focus { + background: var(--danger); color: var(--secondary); + + .d-icon { + color: var(--secondary); + } } } @@ -440,25 +515,27 @@ nav.post-controls { &.create { margin-right: 0; - color: var(--primary-high-or-secondary-low); + color: var(--d-post-control-create-text-color); .d-icon { - color: var(--primary-high-or-secondary-low); + color: var(--d-post-control-create-icon-color); } } } } - .show-replies { + .btn.show-replies { font-size: inherit; padding: 10px; color: var(--primary-medium); - &:hover, - &:focus { - outline: none; - color: var(--primary); - background: var(--primary-low); + .discourse-no-touch & { + &:hover, + &:focus-visible { + outline: none; + color: var(--d-post-control-text-color--hover); + background: var(--d-post-control-background--hover); + } } .d-icon { diff --git a/app/assets/stylesheets/common/components/buttons.scss b/app/assets/stylesheets/common/components/buttons.scss index 7f810aad9c2..060bed70f95 100644 --- a/app/assets/stylesheets/common/components/buttons.scss +++ b/app/assets/stylesheets/common/components/buttons.scss @@ -357,23 +357,27 @@ &[disabled] { &, - &:hover, - &.btn-hover, - &:focus-visible { - color: var(--primary); - } - } - - &:not([disabled]) { - &:hover, - &.btn-hover, - &:focus-visible { - color: var(--tertiary-hover); + .discourse-no-touch & { + &:hover, + &.btn-hover, + &:focus-visible { + color: var(--primary); + } } - &:active, - &.btn-active { - @include darken-background(transparent, 0.2); + .discourse-no-touch & { + &:not([disabled]) { + &:hover, + &.btn-hover, + &:focus-visible { + color: var(--tertiary-hover); + } + } + + &:active, + &.btn-active { + @include darken-background(transparent, 0.2); + } } } } diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss index 807ae106f72..87e8b5bec20 100644 --- a/app/assets/stylesheets/desktop/topic-post.scss +++ b/app/assets/stylesheets/desktop/topic-post.scss @@ -71,58 +71,6 @@ nav.post-controls { // Some buttons can be doubled up, like likes or flags .double-button { margin-left: var(--control-margin); - - &:hover { - button { - background: var(--primary-low); - color: var(--primary-medium); - } - } - - button { - margin-left: 0; - margin-right: 0; - - &.like { - // Like button with 0 likes - &.d-hover, - &:hover { - background: var(--love-low); - - .d-icon { - color: var(--love); - } - } - } - - &.has-like { - // Like button after I've liked - &.d-hover, - &:hover { - background: var(--primary-low); - - .d-icon { - color: var(--primary-medium); - } - } - } - - &.button-count { - // Like count button - &.d-hover, - &:hover { - color: var(--primary); - } - - + .toggle-like { - // Like button when like count is present - &.d-hover, - &:hover { - background: var(--primary-low); - } - } - } - } } } diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss index 2943ec57f38..39b6dbc8662 100644 --- a/app/assets/stylesheets/mobile/topic-post.scss +++ b/app/assets/stylesheets/mobile/topic-post.scss @@ -70,12 +70,6 @@ nav.post-controls { &.expand-post { margin: var(--control-space) 0 var(--control-space) 0; } - - &.has-like { - .d-icon { - color: var(--love); - } - } } } @@ -100,12 +94,6 @@ nav.post-controls { .d-icon { color: var(--primary-high); } - - &:hover, - &:focus { - color: var(--primary); - background: var(--primary-300); - } } }