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.
| present | proposed |
|{F32410352} |{F33932252}
# 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 [[ https://doc.wikimedia.org/mediawiki-skins-Vector/master/js/ui/?path=/story/menudropdown--more | 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.
[] The label will need to be changed from Languages to "<num> languages", which is a fork from the data given by SkinMustache and will require modification in Vector either via hook or
Note: The settings cog will be later reconfigured as it is on Wikimedia Commons so is inside ULS like this:
{F32410348}
# 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
{F32187963}