- Mimic expanded/collapsed state of menu without JS.
- Update template, styles, i18n to make accessibility of dropdowns accurate.
Bug: T253650
Change-Id: I58ecebf520d6107554dbb81470dee69a5d4a7f1d
The sticky header is currently disabled unconditionally
and nothing is wired up, with placeholders for data and
functionality which will be added in future.
Bug: T289716
Change-Id: I16223ce849267e718aad22b8a24b2327332ac8b7
Per T287522#7295558, the username should have a computed max-width of
200px above 1200px and a max-width of 155px below 1200px.
Additional changes:
* Use flex-wrap: nowrap on header instead of wrap. I think the former
may have been an unintended consequence of the consolidated links
feature flag clean up.
* Use core's text-overflow mixin for both the username and the usermenu
items
* Change the user menu's max-width to use relative units
Bug: T287522
Change-Id: I536e6371f85ccde75673af46c7667eb447eff081
- JS-enabled ULS button gets a focus state by moving the ULS click handler to the Menu checkbox instead of the h3, and unhiding the checkbox
- JS-enabled ULS button no longer gets a darker background when the menu is open (ULS default style)
- JS-enabled and no-js ULS buttons both rely on mw-ui-button and mw-ui-quiet classes for focus/hover/active states
- Old styles and skinStyles are removed
Bug: T283757
Change-Id: I66073d6128a27afbd80a7adcff03cc7fcefa9556
WVUI sets the icon as `left: -11px` [1]. Vector should do the same to
ensure the icon doesn't move when WVUI loads. Also set top and bottom
properties to zero so that the height of the icon's container is the
same as in WVUI (32 px).
[1] https://phabricator.wikimedia.org/F34622194
Change-Id: I73fa55f9013dc1bdd51581d357109d4817638d91
Update/remove config, constants, hooks, templates, styles, logic, tests, stories to check legacy vs modern Vector where applicable instead of the decommissioned user links feature flag.
Bug: T288852
Change-Id: I5c5831091a10711838a8a2877c782df4996d4596
- Keep double-dash class name for cached HTML.
- Update instances of renamed class in less + js.
Bug: T253671
Change-Id: Ieb1ce630e8fa84167e2ca8497f66a20183fdaf90
If the Vector code runs before the Wikibase code,
the Wikibase code will not work as the CSS selector
will no longer match.
Bug: T287206
Change-Id: I8555b60f2463ad19efadd57bccbb91ae4e2cc528
- Update UserLinks data to wrap link content with spans and other markup changes
- Use UserLinks__login.mustache and UserLinks__logout.mustache for rendering UserLink stories
- Add new SearchBox story to account for search collapse behavior in modern Vector
Change-Id: Ib0abce31db60a0c5c88dea17085e2974ac5112b5
When implementing how to cut overflowing text, a white fade out was
considered instead of an ellipsis, but that implementation brings
additional complexity when considering the user menu's hover states.
Therefore, the widely used `text-overflow: ellipsis` was used instead
with approval from the designer [1]
[1] https://phabricator.wikimedia.org/T287522#7255400
Bug: T287522
Change-Id: I49e6084bd621ca1637fbd167c8eaf8c07ee695ca
Some code disables the dropdown behaviour when ULS is loaded, however
it does not always appear to be working as the `ext.uls.interface`
module may be loaded for other things unrelated to the compact
languages link button.
The safest thing to do for now seems to be to check the configuration
flag wgULSisCompactLinksEnabled. In future, perhaps a hook event could
be added to ULS and that could be subscribed to instead.
Bug: T287191
Change-Id: I0cf8d387919078aabc9e77a0a452f8b3364016ee
The padding-top of the orange notification set in
ext.echo.styles.alert.less was being overriden by the `padding-top: 0`
set in UserLinks.less which was intended to only override the padding
set in Menu.less.
This commit:
* Scopes the li styles in Menu.less to apply only to the legacy user
menu (found in both legacy and modern vector with the consolidated user
links feature off) which appears to be the only menus that needs these
rules.
* The padding-top previously in UserLinks is no longer needed as a
result of the above point.
* Adjusts/cleans up the positioning of the orange notification by
removing an unneeded margin/padding-top and setting the top to 100% (the
previous `calc` statement was unintentionally resulting in 112%).
Bug: T287633
Change-Id: Ia7069d291f53d8e0e0e576d7b96b7a8b1a6cb29d
* Revises UserLinks.less according to the T285786 spec.
* Unsets 'createaccount' data in $content_navigation in favor creating
this link inside SkinVector which follows the same pattern as the Login
link. This is needed because the create account link needs to be on top
of the login link in the menu per T285786#7231671.
* Changes MenuDropdown.less to pad the anchor element instead of the li
element. This results in a more intuitive click target.
* Places an end margin on the search box to add space between the user
links and the search box.
Bug: T285786
Change-Id: Idb860e6b65c9f266a8027e3f486ccf4c4ec4ed3c
Drop the override, now that the skinStyles have been identified
that were causing this irregularity.
Depends-On: I9d62ad8a79168bdaebace07fb82f22da4c534b5c
Bug: T191021
Change-Id: Ic5bc639186477570028efa1cb2a09cd64a5aaca1
This was increasing the icon size from 44x44 to 46x46
Addresses topic 1 from Alex's feedback in:
T191021#7228591
Bug: T191021
Change-Id: I03c80b5ceda9b23dfa53a245bed820ca22a1d95a
We will couple the roll out of the consolidated user links code
with the roll out of the new icon styles.
This change is restricted to the user links feature and will result
in some slight UI discrepencies until
Ibc136a17662ae839f90babb21e0f7e8f27b7a7d5
is merged.
Bug: T191021
Change-Id: Ia2d2c86e61341b9900f9ac337ddd763252e0515f
The tablet breakpoint doesn't work. It is not possible to apply
the min width of 350px for the search input given the other elements
in the header, however the desktop breakpoint provides plenty of space.
Change-Id: I93c29700d465d641f8155c01a311e1e720c37695
Code here has been in production a week now, so we no longer need to support
the old HTML structure.
Change-Id: I508dec3294588c9fc7f86958c47a3e5b52493df9
- Adds UserLinks__more template to process the list of user links.
- Simplifies styles in UserLinks.less, and namespace them under .vector-user-menu-more
- Add i18n for the label of the new navigation menu
- Update storybook and typing
Bug: T284584
Change-Id: I92290815869dcb939f01d9aff4aa202f6f004894
Before this commit, the following config would result in the search box
not lining up vertically with the tabs:
$wgVectorWvuiSearchOptions = [
"showThumbnail" => false,
];
```
This commit fixes that by making the start margin dependent on the
`showThumbnail` option.
Bug: T284242
Change-Id: I0132ef8afb3206836d9f16771cbefda5b8bfa3ec
