Page MenuHomePhabricator

[M] [Visual Enhancements] Correct margins of icons and arrows
Closed, ResolvedPublic1 Estimated Story Points

Description

Technical Blockers

Recent changes upstream now allow us to correct the margins between icons and arrows.
http://localhost:8888/w/index.php?title=Spain&vectorvisualenhancementnext=1
https://en.wikipedia.beta.wmflabs.org/wiki/Conflict-title-0.9377615805125303-I%C3%B1t%C3%ABrn%C3%A2ti%C3%B4n%C3%A0liz%C3%A6ti%C3%B8n?vectorvisualenhancementnext=1

image.png (776×992 px, 50 KB)

TODO

  • Ensure all button and icon sizings meet the specification above
  • These changes should be limited to the wgVectorVisualEnhancementNext feature flag

QA Results - Beta

ACStatusDetails
1T319070#8306196
2T319070#8306196

Related Objects

StatusSubtypeAssignedTask
OpenNone
OpenNone
Openalexhollender_WMF
OpenBUG REPORTbwang
OpenNone
ResolvedBUG REPORTovasileva
ResolvedBUG REPORTovasileva
Resolvedovasileva
Resolvedovasileva
ResolvedMabualruz
OpenNone
OpenVolker_E
OpenSpikeNone
StalledBUG REPORTTheresNoTime
StalledBUG REPORTTheresNoTime
Resolvedovasileva
ResolvedBUG REPORTovasileva
OpenNone
Resolvedalexhollender_WMF
OpenNone
OpenNone
OpenJdlrobson
Resolvedovasileva
Resolvedovasileva
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone
OpenBUG REPORTNone
OpenBUG REPORTJdlrobson
OpenBUG REPORTNone
OpenNone
OpenNone
Resolvedovasileva
Resolvedovasileva
Resolvedalexhollender_WMF

Event Timeline

Jdlrobson renamed this task from Correct margins of icons and arrows to [Visual Enhancements] Correct margins of icons and arrows.Sep 30 2022, 7:35 PM

Change 832003 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] Visual enhancements next: Fix alignments of icons

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

this is now ready for estimation.

Jdlrobson updated the task description. (Show Details)
Jdlrobson updated the task description. (Show Details)

Change 832003 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Visual enhancements next: Fix alignments of icons

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

Change 837720 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] Revert "Visual enhancements next: Fix alignments of icons"

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

Change 837720 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Revert "Visual enhancements next: Fix alignments of icons"

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

Change 837721 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] [Take 2] Visual enhancements next: Fix alignments of icons

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

Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/575115d9e1/w

Alex please take a look at the patch demo and move this to needs more work or code review accordingly:
https://patchdemo.wmflabs.org/wikis/575115d9e1/w/index.php?title=Main_Page&useskin=vector-2022&vectorvisualenhancementnext=1

There should be no visual changes without feature flag.

LGoto set the point value for this task to 1.Oct 4 2022, 4:56 PM

@Jdlrobson this is looking great. the only thing I see is 1 extra pixel between the person icon and the chevron/dropdown arrow (should be 6px of space between, currently there is 7px):

Screen Shot 2022-10-04 at 2.22.13 PM.png (1×1 px, 233 KB)

if that's difficult to remove we can leave it as is — not a big deal.

8px spacing between icon buttons looks good:

image.png (173×1 px, 27 KB)

Change 837721 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Visual enhancements next: Fix alignments of icons

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

LGoto renamed this task from [Visual Enhancements] Correct margins of icons and arrows to [M] [Visual Enhancements] Correct margins of icons and arrows.Oct 5 2022, 5:02 PM

Change 838853 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] Restrict margin between arrow and icon to feature flag

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

Change 838853 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Restrict margin between arrow and icon to feature flag

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

Edtadros added a subscriber: Edtadros.

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

❓AC1: Ensure all button and icon sizings meet the specification above
Normal:
these look good

Screen Shot 2022-10-10 at 6.16.47 PM.png (235×315 px, 25 KB)

Screen Shot 2022-10-10 at 6.17.00 PM.png (240×335 px, 26 KB)

Screen Shot 2022-10-10 at 6.17.09 PM.png (218×341 px, 23 KB)

Dropdown:
I couldn't get anything showing a width of 48px, is this acceptible? As for the individual items in the menu, the icons were all 20px with a height of 32px. I couldn't verify left and right padding.

Screen Shot 2022-10-10 at 6.19.40 PM.png (398×339 px, 34 KB)

Screen Recording 2022-10-10 at 6.31.48 PM.mov.gif (526×320 px, 491 KB)

Spacing between buttons:
column gap is 8px.

Screen Shot 2022-10-10 at 6.29.09 PM.png (80×326 px, 13 KB)

✅ AC2: These changes should be limited to the wgVectorVisualEnhancementNext feature flag

with the feature flag:

Screen Shot 2022-10-10 at 6.26.11 PM.png (332×239 px, 18 KB)

without the feature flag:

Screen Shot 2022-10-10 at 6.25.20 PM.png (222×322 px, 24 KB)

Screen Shot 2022-10-10 at 6.26.23 PM.png (338×242 px, 21 KB)

Alex I know your off next week (possibly now?) but wondered if you wanted to sign off Edward's comments

@Jdlrobson I'm guessing the 1px issue I noted here T319070#8284272 (which might be more of a 2px issues) is the reason why @Edtadros is seeing that dropdown at 50px instead of 48px.

Change 845776 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] Limit user dropdown link to 48px

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

Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/79ec5fddc4/w

Change 845776 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Limit user dropdown link to 48px

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

Jdlrobson added a subscriber: nray.

Alex would you mind checking beta cluster one last time and signing off? All should be taken care of now within the feature flag:
https://en.wikipedia.beta.wmflabs.org/wiki/Albert_Einstein?useskin=vector-2022&vectorvisualenhancementnext=1

@Jdlrobson I'm seeing an issue with the collapsed TOC icon, in the case where it's sitting next to the page title:

  1. it's not properly aligned
    Screen Shot 2022-10-31 at 4.17.00 PM.png (700×1 px, 156 KB)
  1. it seems to be the wrong size (expected 32x32px)
    Screen Shot 2022-10-31 at 4.10.10 PM.png (236×698 px, 101 KB)

Yeh this is currently handled in https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/850594. I'll assign this to me for now, until that's merged and then pass it back to you for sign off.

@alexhollender_WMF the alignment should now be taken care of. Could you take another look at the collapsed table of contents icon on https://en.wikipedia.beta.wmflabs.org/wiki/Albert_Einstein?useskin=vector-2022&vectorvisualenhancementnext=1 and resolve if it looks good?

@alexhollender_WMF the alignment should now be taken care of. Could you take another look at the collapsed table of contents icon on https://en.wikipedia.beta.wmflabs.org/wiki/Albert_Einstein?useskin=vector-2022&vectorvisualenhancementnext=1 and resolve if it looks good?

awesome, seems fixed

Screen Shot 2022-11-08 at 11.22.57 AM.png (376×1 px, 257 KB)