Page MenuHomePhabricator

Watchlist Expiry: On Mobile Frontend, when watching a page temporarily via the popup, the half star ends up at the wrong angle
Closed, ResolvedPublic

Description

image.png (804ร—669 px, 65 KB)

Steps to reproduce: (using patch demo) https://patchdemo.wmflabs.org/wikis/ecb74701f0e6d1d7712a746b3ba10fc4/w/index.php?title=Test

  1. Go to an unwatched page (empty star)
  2. Click watch
  3. Change expiry selection to a temporary period
  4. You should see the star at a weird angle

If you refresh the page it looks fine.

Event Timeline

Restricted Application added a subscriber: Aklapper. ยท View Herald TranscriptSep 14 2020, 8:43 PM

Change 627371 had a related patch set uploaded (by Dmaza; owner: Dmaza):
[mediawiki/skins/MinervaNeue@master] watchstar: Add temp-watched css class when expiry is present

https://gerrit.wikimedia.org/r/627371

@Prtksxna @ifried The above patch fixes the half star being left in the wrong angle but there is still a lack of animation when going from a half-star to an empty star.

If watchlist expiry is disabled (you can test in any prod wiki now) the star spins 72deg when transitioning from one state to the other or on page load if you are watching the page. This 72deg rotation is not an option for the half star without having it look incorrectly so my solution was not to spin it when going from half-star to empty or on page-load if the page is temporarily watched.

I'm not sure how else we can handle this, the other option would be to spin it 360deg. Let me know what you think is best.

Hey @Jdlrobson ๐Ÿ™‹๐Ÿพโ€โ™‚๏ธ! We are trying to figure out how the star animation would work with temporary watching. In conversation, @dmaza just pointed out that on mobile, when a page is watched, the star rotates every time the page is refreshed. I wanted to know if this was intentional and what the reason behind this was.

@Prtksxna Can you confirm that the animation transitions we agreed on are the following?

unwatch -> watch+72deg
watch -> unwatch-72deg
watch -> temp-watch-72deg
temp-watch -> watch+72deg
temp-watch -> unwatch-72 deg

I'm still unsure how to handle the last 2.

@Prtksxna Can you confirm that the animation transitions we agreed on are the following?

Yes, this is correct.

Change 627371 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] watchstar: Add temp-watched css class when expiry is present

https://gerrit.wikimedia.org/r/627371

ifried renamed this task from On Mobile Frontend, when watching a page temporarily via the popup, the half star ends up at the wrong angle to Watchlist Expiry: On Mobile Frontend, when watching a page temporarily via the popup, the half star ends up at the wrong angle.Oct 13 2020, 5:30 PM

This change has now been deployed. I tested on the mobile version of frwiki, and the star is half-shaded at the appropriate angle (see screenshot example below). I'm marking this as Done.

Screen Shot 2020-10-14 at 10.46.31 AM.png (455ร—1 px, 80 KB)