Page MenuHomePhabricator

ImageOverlay should use mw-ui-icon-arrow with css rotate transform
Closed, ResolvedPublic2 Story Points

Description

The ImageOverlay replicates icons which are already available and can be derived from the arrow icon and css transforms. Instead of adding new icons for these, we should reuse. To answer Joaquin's question from the comments, the change being asked for will use the same icon but different variations and different orientations. White arrows are already used in the last modified bar.

Benefit: Doing this will reduce the number of bytes the mobile site uses. Icons generally account for quite a bit of css.

Note, this is not expected to break any browsers as the matrix of JavaScript enabled clients also support the css transform.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 13 2016, 1:27 AM
ovasileva triaged this task as Normal priority.Sep 14 2016, 4:29 PM

Aren't those icons white and the ones in the chevrons gray?

bmansurov updated the task description. (Show Details)Sep 28 2016, 4:43 PM
ovasileva lowered the priority of this task from Normal to Low.Dec 7 2016, 5:53 PM
Jdlrobson raised the priority of this task from Low to Normal.Jun 2 2017, 8:22 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson renamed this task from ImageOverlay should use the next and previous icons to ImageOverlay should use mw-ui-icon-arrow with css rotate transform.Jun 6 2017, 4:46 PM
Jdlrobson updated the task description. (Show Details)
ovasileva set the point value for this task to 2.Jun 13 2017, 4:53 PM
Jdlrobson updated the task description. (Show Details)Jun 14 2017, 6:26 PM

Change 360426 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Image overlay icons are rotated versions of arrow icon

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

Change 360426 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Image overlay icons are rotated versions of arrow icon

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

The hygiene patch Hygiene: Footer arrow should use Icon rotate classes reveals an issue with this implementation. Although not the end of the world it would be good to get this fixed.

@ABorbaWMF can you do a quick QA of the image overlay, toggling and the last modified bar? Specifically if you see any UI regressions relating to this icon (in its many different colours):

Jdlrobson reassigned this task from Jdlrobson to ABorbaWMF.Jun 22 2017, 5:05 PM

Hello, I may need a little more context on this one. Do we have an example page or list of the icons/color/location?

@Jdlrobson Do you have any special pages on beta that you used?

@ABorbaWMF here's test plan (multiple browsers)

  • Table of contents:
  • Arrow should point up when expanded down when collapsed
  • Headings
  • Arrow should point up when expanded, down when collapsed
    • Test on mobile + laptop
  • Last modified bar
  • Arrow should point right in LTR and left in RTL (?uselang=he)
  • Should be gray if edited in time period greater than day
  • White if edited in under 24hrs (edit to make that happen)

The table of contents has a regression.
Regression: Arrow should initialise pointing down

Note that clicking it twice resolves the issue.

Change 360997 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Reflect current state of collapsing when enabling

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

Change 360997 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Reflect current state of collapsing when enabling

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

phuedx reassigned this task from Jdlrobson to ABorbaWMF.EditedJun 23 2017, 12:55 PM
phuedx added a subscriber: phuedx.

Back to you @ABorbaWMF! See T145479#3373569 for @Jdlrobson's plan.

Looks good on Beta. All the arrows are pointing correctly. I tried a variety of browsers and platforms.

ovasileva closed this task as Resolved.Jun 23 2017, 6:19 PM