| • alexhollender_WMF | |
| May 27 2022, 2:54 PM |
| F35251948: Screen Shot 2022-06-18 at 6.07.41 PM.png | |
| Jun 19 2022, 1:08 AM |
| F35241231: Screen Shot 2022-06-14 at 4.13.24 PM.png | |
| Jun 14 2022, 8:14 PM |
| F35241233: Screen Shot 2022-06-14 at 4.12.43 PM.png | |
| Jun 14 2022, 8:14 PM |
| F35241226: Screen Shot 2022-06-14 at 4.11.00 PM.png | |
| Jun 14 2022, 8:11 PM |
| F35241223: Screen Shot 2022-06-14 at 4.06.20 PM.png | |
| Jun 14 2022, 8:09 PM |
| F35240830: Screen Shot 2022-06-14 at 1.42.55 PM.png | |
| Jun 14 2022, 5:44 PM |
| F35240600: Screen Shot 2022-06-14 at 12.44.35 PM.png | |
| Jun 14 2022, 5:02 PM |
| F35222578: Screen Shot 2022-06-09 at 11.53.31 AM.png | |
| Jun 9 2022, 3:54 PM |
Minimum styling changes to the toolbar in order to ship
(details coming soon)
| logged-out |  |
| logged-in |  |
prototype: https://di-collapsible-menus.web.app/Cadmium
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T309398#8013302 |
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Resolved | ovasileva | T303549 Move titlebar above toolbar | |||
| Resolved | ovasileva | T309398 Article toolbar styling | |||
| Resolved | ovasileva | T310838 Watch (☆) and Wikilove button in toolbar should not have an underline on hover |
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.
Change 803355 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):
[mediawiki/skins/Vector@master] Restyle Vector tabs in modern Vector
@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:
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:
@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:
After:
+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:
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.
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
Change 803988 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):
[operations/mediawiki-config@master] [beta cluster] Enable VectorTitleAboveTabs
Change 803989 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):
[mediawiki/skins/Vector@master] Move menu border style to legacy
Change 803988 merged by jenkins-bot:
[operations/mediawiki-config@master] [beta cluster] Enable VectorTitleAboveTabs
Change 803989 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Move menu border style to legacy
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
With the tabs above the title (default config), they are too close the VE toolbar:
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
The above fixes the negative margin, however the border under the VE toolbar is now darker than the border under the tabs bar:
Change 804006 merged by jenkins-bot:
[mediawiki/extensions/VisualEditor@master] Update toolbar negative margin for new padding in vector-2022
Moving to needs more work to note that the underline on the page titles shouldn’t change with this task.
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!
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?
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:
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:
if we lightened both of the lines to #eaecf0 it would look like this:
to me both options seem balanced
Status: ✅ PASS
Environment: enwiki
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA
Test Artifact(s):
✅ 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
Test wiki on Patch demo by JDrewniak (WMF) using patch(es) linked to this task was deleted:
Test wiki on Patch demo by JDrewniak (WMF) using patch(es) linked to this task was deleted: