IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: clean up post action menu styles, fix issues, add variables (#31100)

Browse Source 
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.
This commit is contained in:
Kris 2025-02-03 09:31:17 -05:00 committed by GitHub
parent 80fdb6f2e6
commit a6fb065924
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 143 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/discourse/app/components/post/menu/buttons/like.gjs
View File

@ -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}}

4
app/assets/javascripts/discourse/app/widgets/post-menu.js
View File

@ -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",

167
app/assets/stylesheets/common/base/topic-post.scss
View File

@ -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 {

34
app/assets/stylesheets/common/components/buttons.scss
View File

@ -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);
}
}
}
}

52
app/assets/stylesheets/desktop/topic-post.scss
View File

@ -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);
}
}
}
}
}
}

12
app/assets/stylesheets/mobile/topic-post.scss
View File

@ -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);
}
}
}