trwnh/mastomods

[touchscreen] Favourite button keeps active after unfav a status

umonaca opened this issue · 5 comments

umonaca commented

I am trying to fix the code so that it can keep up with changes from Mastodon upstream.
However, there are some difficult problems that I don't know how to resolve.
This is one of the weird bugs.

Steps to reproduce

Click the star button to favourite. Then click it again to deactive. It will remain as "active", until the user click anywhere in the column area.

Reproducible on Firefox and Chrome

umonaca commented

Solved by removing .icon-button:focus from 3-highlights.css and :focus from the favourite section of 6-actions.css.

trwnh commented

should this be reopened? are changes needed?

umonaca commented

I think it should be reopened.
I get my own version working on my mobile phone (Chrome) with some of the :focus in actions.css removed and :hover refactored with some Stack Overflow copy-and-paste.
Haven't tested with your recent changes yet.

trwnh commented

oh, i think i understand this now -- this is actually not a bug but a feature. the icon is still coloured because the element is in focus, so for example, pressing enter will re-favourite the status. it is only after clicking away that the icon will lose focus.

umonaca commented

Emmm...The problem is that on a touch device the button does not lose focus at all when user is touching dragging (I changed the wording here since "touch" will expand a status to the detailed status page, but "drag" will not) anywhere except in the area of the status. For example, if user unfavourited toot A, they have to touch drag within the area of the toot A, otherwise it will not lose focus.

The touch experience on Chrome DevTools Device Mode is exactly the same as on a real touch device with Chrome installed. But not Firefox. Hope that this message will be helpful.

My Stack Overflow copy-and-paste which worked for me looks like the following:
Yeah I know it looks ugly because I don't write CSS very often.

/* favourites */
/*.status__action-bar-button.icon-button.star-icon:hover,*/
.status__action-bar-button.icon-button.star-icon:active,
.status__action-bar-button.icon-button.star-icon.active,
/*.status__action-bar-button.icon-button.star-icon:focus,*/
.detailed-status__action-bar .detailed-status__button .star-icon.icon-button:active,
.detailed-status__action-bar .detailed-status__button .star-icon.icon-button.active,
/*.detailed-status__action-bar .detailed-status__button .star-icon.icon-button:focus,*/
.notification__favourite-icon-wrapper .star-icon
{color: #f90;}

@media (hover: hover) {
    .status__action-bar-button.icon-button.star-icon:hover { color: #f90; }
    .detailed-status__action-bar .detailed-status__button .star-icon.icon-button:hover { color: #f90; }
}

/* bookmark */
.status__action-bar-button.icon-button.bookmark-icon.active,
/*.status__action-bar-button.icon-button.bookmark-icon:focus,*/
.detailed-status__action-bar .detailed-status__button .bookmark-icon.icon-button.active,
/*.detailed-status__action-bar .detailed-status__button .bookmark-icon.icon-button:focus,*/
.notification__favourite-icon-wrapper .bookmark-icon
{color: #0bf;}

@media (hover: hover) {
    .status__action-bar-button.icon-button.bookmark-icon:hover { color: #0bf; }
    .detailed-status__action-bar .detailed-status__button .bookmark-icon.icon-button:hover { color: #0bf; }
}

/* menu */
.status__action-bar-dropdown .icon-button:hover,
.status__action-bar-dropdown .icon-button:active,
.status__action-bar-dropdown .icon-button.active,
.status__action-bar-dropdown .icon-button.focus,
.detailed-status__action-bar-dropdown .icon-button:hover,
.detailed-status__action-bar-dropdown .icon-button:active,
.detailed-status__action-bar-dropdown .icon-button.active,
.detailed-status__action-bar-dropdown .icon-button:focus
{color: #90f;}

/* share */
.icon-button:hover .fa-share-alt
{color: #f09;}

/* boosts */
.notification__message .fa.fa-retweet,
.icon-button:hover .fa-retweet
{color: #0d9;}

/* recolor boosts (preserve animation, unthemeable default state */
/*
button.icon-button:hover i.fa-retweet,
.no-reduce-motion button.icon-button.active i.fa-retweet
{
    filter: sepia(100%)
        hue-rotate(120deg)
        saturate(700%)
        brightness(120%)
        drop-shadow(0px 1px 0px rgba(0,0,0,0.6))
}
*/

/* fully recolor boosts (while breaking animation)  */ 
/*button.icon-button:hover i.fa-retweet,*/
button.icon-button.active i.fa-retweet
{background: #0d9 !important;}

.no-reduce-motion button.icon-button i.fa-retweet,
    button.icon-button i.fa-retweet,
        button.icon-button:hover i.fa-retweet,
        button.icon-button.active i.fa-retweet
{
background: var(--textMuted);
mask: THE SVG IN YOUR CODE (too long not posted here)
}

@media (hover: hover) {
    button.icon-button:hover i.fa-retweet{background: #0d9 !important;}
}