Page MenuHomePhabricator

Language button v1 - allow language button to appear at top of page (plus JS fallback)
Open, HighPublic3 Estimated Story Points

Description

Prototype: https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/635080

We will move the language switcher to the top right in three phases. These phases will be 1) moving the language switcher and providing non-JS fallback 2) Progressive enhancement via Vue.js or existing code (pending further discussion and 3) moving the language cog (for selecting interface language). This task concerns phase 1.

presentproposed

acceptance criteria

  • The language button is feature flagged and disabled by default
  • A new language menu dropdown is added to the top right of the page. This sidesteps T104660
  • The language dropdown is limited in height with vertical scrolling for long lists.
  • The dropdown uses the existing Vector MenuDropdown component
  • When clicking the menu with JS disabled the list of menus reveals itself.
  • Minimize any styling changes here, but revise/remove any of the styles in the existing drop down styles that don't apply to this new component.
  • The list of languages are removed from the sidebar. There is no settings cog in modern Vector with feature flag enabled.
  • Vector legacy is not impacted.

Note: The settings cog will be later reconfigured as it is on Wikimedia Commons so is inside ULS like this:

Sign off steps

  • A task is created to style the menu as a button
  • A task is created to wire up ULS

additional material

https://docs.google.com/presentation/d/18leDJOJ1ldXQ_zr5kD9Kl7Z-F-Ab2j8ao9CiOwQm7CQ/edit#slide=id.g6b27b3c96d_0_1

Mocks

Mock 1 - language button

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 18 2020, 9:20 PM
Jdlrobson renamed this task from Language dropdown accessible without JavaScript to [Languages 1/3] Language dropdown accessible without JavaScript.Aug 18 2020, 9:20 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson updated the task description. (Show Details)Aug 18 2020, 10:08 PM
Jdlrobson updated the task description. (Show Details)Oct 1 2020, 6:06 PM
ovasileva triaged this task as Medium priority.Oct 1 2020, 6:06 PM
ovasileva raised the priority of this task from Medium to High.

@alexhollender can you take a look at what's proposed here and highlight any red flags? We'd like to make a start on this move to unlock other conversations with language team. We'd disable it to begin with to allow us to iterate so don't worry if it doesn't feel polished.

@alexhollender can you take a look at what's proposed here and highlight any red flags? We'd like to make a start on this move to unlock other conversations with language team. We'd disable it to begin with to allow us to iterate so don't worry if it doesn't feel polished.

To clarify: this is the proposed, permanent solution for non-JS users?

  • how will the languages be organized in the flat list?
  • do we know that that component can handle overflow/scrolling?

To clarify: this is the proposed, permanent solution for non-JS users?

In terms of the format - list operating like the more menu, that's the proposal, but other better solutions are welcome if you have any.

how will the languages be organized in the flat list?

It would be a long list identical in order to the existing format in the sidebar

do we know that that component can handle overflow/scrolling?

Yes. If you want to play around with the design challenges for a scrollable list you can use the following code for the existing more menu.

for(var i =0; i< 100; i++ ) {mw.util.addPortletLink('p-cactions', '#', 'item ' + i);}
$('#p-cactions .menu').css({height: 200, overflow: 'scroll'})

Noting that the eventual styling of the button will be different (although that shouldn't prevent us from starting this task)

Jdlrobson updated the task description. (Show Details)Oct 21 2020, 4:33 PM
Jdlrobson updated the task description. (Show Details)Oct 21 2020, 4:35 PM
Jdlrobson updated the task description. (Show Details)Oct 21 2020, 4:48 PM
Jdlrobson updated the task description. (Show Details)Oct 21 2020, 4:52 PM

I've made a proof of concept for how this would work.
https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/635080

For now I've ignored the problem of the indicators and tweaking the design to be perfect, so it's not complete in that sense. However it does show how we can render a button in new Vector that works without JS and is compatible with ULS.

ovasileva renamed this task from [Languages 1/3] Language dropdown accessible without JavaScript to Language button v1 - allow language button to appear at top of page (plus JS fallback) .Wed, Nov 18, 5:07 PM

A short comment on the, what I understand, current proposal for non-JS users:


We should orient on Special:RecentChanges element and use Accent50 for interaction label. It's problematic to have this not indicated active.

Jdlrobson added a comment.EditedWed, Nov 18, 7:52 PM

That screenshot is outdated. Please refer to the latest patch to see how this works.
(Also note this task about moving the menu and adding a button and putting it behind a feature flag - styling will be done in a follow up task)

Jdlrobson updated the task description. (Show Details)Wed, Dec 2, 5:23 PM
ovasileva updated the task description. (Show Details)Wed, Dec 2, 5:24 PM
ovasileva updated the task description. (Show Details)
ovasileva set the point value for this task to 3.Wed, Dec 2, 5:44 PM