Page MenuHomePhabricator

Article toolbar styling
Closed, ResolvedPublic3 Estimated Story Points

Description

Description

Minimum styling changes to the toolbar in order to ship

Design

(details coming soon)

logged-out
Screen Shot 2022-06-09 at 11.53.31 AM.png (127×1 px, 18 KB)
logged-in
Screen Shot 2022-06-09 at 11.53.31 AM.png (127×1 px, 18 KB)

prototype: https://di-collapsible-menus.web.app/Cadmium

Acceptance criteria

  • Gradients on the tabs are removed

QA Results - Prod

ACStatusDetails
1T309398#8013302

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

For the active tab style, there might be accessibility issue since the only visual difference is the text color and the border color. I would suggest adding an inset box shadow on the active tab so the border would be thicker without causing any wrapping.

ovasileva set the point value for this task to 3.
alexhollender_WMF removed the point value for this task.
alexhollender_WMF set the point value for this task to 3.

Change 803355 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] Restyle Vector tabs in modern Vector

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

@alexhollender_WMF @ovasileva would be okay with this transitional design for 1-2 weeks where the toolbar is above the title but there are no gradients?:

Before:

image.png (737×452 px, 52 KB)

After:
image.png (738×452 px, 51 KB)

@alexhollender_WMF @ovasileva would be okay with this transitional design for 1-2 weeks where the toolbar is above the title but there are no gradients?:

yea I think that's fine, though could we get the tabs a bit closer to the mockup in the task description before releasing? I'm looking at:

  • the length of the underlines (should be shorter)
  • the arrow icons next to "more" and "english" are a bit high

@alexhollender_WMF @ovasileva would be okay with this transitional design for 1-2 weeks where the toolbar is above the title but there are no gradients?:

Before:

image.png (737×452 px, 52 KB)

After:
image.png (738×452 px, 51 KB)

+1 This seems fine.

Test wiki created on Patch demo by JDrewniak (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/3606ae5969/w/

Test wiki on Patch demo by JDrewniak (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/3606ae5969/w/

Test wiki created on Patch demo by JDrewniak (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/1719f0912a/w/

@alexhollender_WMF I spun up a patchdemo with the new toolbar styling.
I've address the width of the underlines under the links and the chevron on the more menu.

Screen Shot 2022-06-07 at 6.28.28 PM.png (560×2 px, 154 KB)

Screen Shot 2022-06-07 at 6.28.47 PM.png (560×2 px, 133 KB)

At the moment I'm struggling with how to change the top-padding (above the title in screenshot 1, and above the tabs in screenshot 2) without breaking legacy Vector. looking here I think it's somehow tied into VisualEditor , but maybe @Jdlrobson has some insight into that.

Anyway the patchdemo in both title above and below configurations is available here:

https://patchdemo.wmflabs.org/wikis/1719f0912a/wiki/Shades_of_white?useskin=vector-2022&tableofcontents=1
https://patchdemo.wmflabs.org/wikis/1719f0912a/wiki/Shades_of_white?useskin=vector-2022&vectortitleabovetabs=1&tableofcontents=1

@alexhollender_WMF let me know if you see any design related changes that should be addressed right now. This patch isn't feature flagged, so this change will roll out on the train in the "tabs at the top" configuration to pilot wikis after the patch is merged.

Test wiki created on Patch demo by JDrewniak (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/454bf376fc/w/

@Jdrewniak this is looking great, thanks for the changes. we're good to go for the first deployment (tabs still above page title, no gradients). let's do another round of design review before the bigger update where we move the tabs below the page title.

Change 803355 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Restyle Vector tabs in modern Vector

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

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

[operations/mediawiki-config@master] [beta cluster] Enable VectorTitleAboveTabs

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

Change 803989 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Move menu border style to legacy

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

Change 803988 merged by jenkins-bot:

[operations/mediawiki-config@master] [beta cluster] Enable VectorTitleAboveTabs

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

Change 803989 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Move menu border style to legacy

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

Mentioned in SAL (#wikimedia-operations) [2022-06-08T21:52:28Z] <cjming@deploy1002> Synchronized wmf-config/InitialiseSettings-labs.php: Config: [[gerrit:803988|[beta cluster] Enable VectorTitleAboveTabs (T309398)]] (duration: 03m 32s)

@alexhollender_WMF the tabs have been moved below the title on the beta cluster.
https://en.wikipedia.beta.wmflabs.org/wiki/Albert_Einstein

Let me know if there are any blockers for rolling this out to group 0 and group 1 wikis next week.

Is this gap intentional @Jdrewniak @alexhollender_WMF

Screen Shot 2022-06-08 at 4.03.05 PM.png (638×2 px, 240 KB)

With the tabs above the title (default config), they are too close the VE toolbar:

image.png (90×939 px, 14 KB)

The skin-specific negative margins in VE will need to be fixed to match this new layout.

Change 804006 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/extensions/VisualEditor@master] Update toolbar negative margin for new padding in vector-2022

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

The above fixes the negative margin, however the border under the VE toolbar is now darker than the border under the tabs bar:

image.png (137×983 px, 18 KB)

Change 804006 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Update toolbar negative margin for new padding in vector-2022

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

Jdrewniak added a subscriber: Edtadros.

Moving to needs more work to note that the underline on the page titles shouldn’t change with this task.

Jdrewniak moved this task from Doing to QA on the Readers-Web-Backlog (Kanbanana-FY-2021-22) board.

Issue with the border color has been address in T310533, moving this back to QA.

Issue with the border color has been address in T310533, moving this back to QA.

That's the border under the h1 title, not the border under the tabs which is what we are next to until the heading is moved.

@Esanders that's a design decision. I think the chosen colour is defined as @wmui-color-base80: #eaecf0; in wikimedia-ui-base, whereas the VE bottom border is @wmui-color-base70: #c8ccd1; which is one tone darker. The chosen color does match the VE button dividers however, so I think there's a case to be made for consistency in that respect. The VE bottom border also includes drop-shadow which makes it seem darker, so even if the top border were the same colour, it would still look lighter.

In any case, at least it's not baby-blue like it has been for the past decade!

Screen Shot 2022-06-14 at 12.44.35 PM.png (284×1 px, 56 KB)

The VE bottom border also includes drop-shadow which makes it seem darker, so even if the top border were the same colour, it would still look lighter.

Agreed, and the fix here might be to lighten the VE border, I'm just highlighting that it looks much less balanced than before.

@Esanders i'm not sure which version you are looking at. Ultimately it should look like this, more or less. Can you specify which part you're describing? Is it the border between the page toolbar and the VE toolbar?

Screen Shot 2022-06-14 at 1.42.55 PM.png (425×1 px, 67 KB)

Is it the border between the page toolbar and the VE toolbar?

Yes - in your screenshot the line above the VE toolbar looks significantly lighter than the line below it, whereas in the past that difference in weight was much less (even if the colours were different).

Is it the border between the page toolbar and the VE toolbar?

Yes - in your screenshot the line above the VE toolbar looks significantly lighter than the line below it, whereas in the past that difference in weight was much less (even if the colours were different).

ok, thanks for clarifying. I think there are two parts to this:

  1. the line above VE is currently #eaecf0, whereas the line below VE is currently #c8ccd1
  2. the VE toolbar has a box-shadow (which I assume is intended to indicate that it's sticky. and/or make it look better when it becomes sticky)

if we changed the line above VE to #c8ccd1, and removed the box-shadow until VE becomes sticky (if that's possible?) we would end up with this, more or less:

Screen Shot 2022-06-14 at 4.13.24 PM.png (455×1 px, 105 KB)

if we lightened both of the lines to #eaecf0 it would look like this:

Screen Shot 2022-06-14 at 4.12.43 PM.png (454×1 px, 105 KB)

to me both options seem balanced

Test Result - Prod

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

Test Artifact(s):

QA Steps

✅ AC1: Gradients on the tabs are removed
✅ AC2: No changes to order of menu items

Note: Per T309398#7986484 the page title will be below the menu tab instead of what is shown in the task description

Screen Shot 2022-06-18 at 6.07.41 PM.png (353×1 px, 87 KB)