Styling should not depend on IDs to allow us to have multiple
searches in the page.
Precursor for wiring up search in the sticky header.
This also tweaks performance metrics to track separate metrics
for the sticky header search
Change-Id: I5b4192a8f5a9f95af26c1faf904f7cc994323518
Per T289724#7342741, server renders an anchor tag pointing to #p-search
into the "button-start" bucket of the sticky header.
In the future after T289718, this anchor will then acts as a button when
the search module is loaded and searchToggle executes.
* skins.vector.search was modified to accomodate instantiating multiple
search components (one in the main header and one in the sticky
header).
* searchToggle.js was modified to accept a searchToggle element as a
param which the caller can then instantiate when ideal. For the sticky
header toggle, this needs to happen *after* the search module loads.
Before then, the toggle will act as a link.
* Drops one jQuery usage from searchToggle so that it can be jQuery
free. Because the native .closest method is used, IE11 support is also
dropped. However, the script feature detects and returns early if the
API isn't available.
* Makes App.vue accept an `id` prop so that multiple instances of it can
be created.
Bug: T289724
Change-Id: I1c5e6eee75918a0d06562d07c31fdcbd5a4ed6d5
- Remove unused button, data from sticky header.
- Simplify template to leave sticky user menu placeholder.
- Update js to clone user menu with new ids.
- Include gadget-injected items in sticky user menu.
Bug: T289816
Change-Id: I23fde537efc2a66a2df22cd2633fbab034b73eb6
* Moves screen variables relating to Header to Header
* Adds a Header storybook entry
* Moves data-logo from Logo template to Header.mustache
* Updates UserLinks to use USER_LINK_PARTIALS
* Renames confusing SearchBox story names
* Updates package.json to use a static folder.
* Use mediawiki.org for sourcing mw-ui-button and mw-ui-icon styles
since deploys there come earlier
* Removes usages of ID selectors
Change-Id: I0e158fa7e62c56a50cfff497d75f0808effd1eed
- Apply aria-hidden to h3 in Menu template, ensuring the nav landmarks are still properly labeled, but no longer reading duplicate labels to screenreaders
- Remove "Navigation menu" h2 element, which is not needed as the nav landmarks are already labeled
- Remove searchbox h3 element, which is redundant with the search landmark
- Scope all changes to modern vector
Bug: T265993
Change-Id: I4e5da7a0699160fa57234bd126b75243e0157778
- Rework Icon template into Button template to support all button variants
- Update ULS helper functions in SkinVector
- Update StickyHeader template to use the new Button template
- Update Storybook
Bug: T289815
Depends-on: Iba6cbbd6c6e48a1abfda342421822e3ff2715362
Change-Id: I718b3e05a988e20beb82d599e4168d497fa4c299
- Separate icon classes from button classes in user links/language
- Upgrades the personal tools language button preference to
a mw-ui-button with icon
- Adds a generic selector for dropdown menus without an icon
- Cleans up user links CSS now mw-list-item class is available
- Removes icon hack CSS
Bug: T289630
Bug: T283757
Change-Id: Ib518858e06549f252d73d57fd4768f446cc561b9
- 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
- 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
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
- Add conditional to check for 'createaccount' permissions based on config.
- Update relevant template to show/hide create account markup.
Note that this solution excludes the use case of extensions using core hooks
to disable account creation. See https://phabricator.wikimedia.org/T288428#7303233.
Bug: T288428
Change-Id: I89852207ee42f5ddd07e5dd6141461c6bfbcd5ac
- Add title attribute to Header template for hamburger icon.
- Override tooltip for user links menu icon for anon users.
- Make sure tooltips are empty for legacy version.
- Add translatable strings for new tooltip, title.
Bug: T287494
Change-Id: I84ce6a1eb2a37eb9ea71a40c565c059d156a44ba
* 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
Caused by whitespace in HTML
Addresses topic 2 from Alex's feedback in:
T191021#7228591
Bug: T191021
Change-Id: I32de25d4f4927c2ea8059b972a55b79a94691e76
- 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
Reduces the min-width to 340px with several changes at lower
resolutions
* collapses create account into dropdown
* hides language button and user messages
* The search component is updated to include a search toggle which
can be used to hide and show the search input at lower resolutions
- this leads to a slight HTML change with caching implications,
it also moves away from a BEM usage which is not standard for this
repository.
* limits width of logo based on the dimensions we display
in mobile
Bug: T276566
Change-Id: I89d75843ca7e33e6de93af5d7c22e46b7249c4b7
For modern Vector, removes the logout link in the user menu and places it
below that menu by appending it to the html-after-portal property of the
skin data.
Also modifies the `.vector-user-menu-login` style to accommodate both the
login and logout button.
bug: T281791
Depends-On: If82a736e37174aaadd0ff07019a1fae3759a9e51
Change-Id: I7675230e09a50eaeab448182329f850ad2689514
- Adds html-before-portlet to Menu.mustache
- Removes UserMenu.mustache and type def
- Factors out getCreateAccountHTML and getLoginHTML for generating HTML used in Menu
- Scopes UserLink template data under "data-vector-user-links"
Follow up to: 298f945983
Bug: T284584
Change-Id: I91104eb7c4fd12756e770561666f4c9a64da57d6
- Adds mustache template for the new user menu
- Uses new functions for getting user link data that have been factored out of SkinTemplate in the dependent patch
- Refactor new user menu styles to be namespaced inside UserMenu.less
Notes:
- Originally this patch included more storybook changes, but I removed them in favor of this follow up patch: 696651
Bug: T276564
Depends-On: Ia841f92c626ca32a9ad437b3d1cff78309c83ed8
Change-Id: Ib15752428265fdc06a3000f62bdca44c67648974
Merge UserMenu into UserLinks for legacy and modern
Add a story for the UserLinks menu
Fixes: rendering of Skin (legacy) personal tools (the user icon
no longer overlaps)
Change-Id: I491ebb3962780bf2cf7f1dfb4dd09d576c294366
Have a single template for the UserLinks component, with a single
element wrapping all its subcomponents as discussed.
Change-Id: I35936a6fa1ba335639ca3f47fd439a3662268fca
This follows up I4c1b15d90bacbc9b13782a1d8f52e838ce8ecd83
In that change, a new class for Vector specific styles should have
been added and the existing CSS referenced. I could have sworn I did
this, but obviously not (perhaps a git rebase or unstage change problem).
We did it for the other skins e.g. Monobook (I90d85c21f4a62e6697f24e3ce388445a0a53c2b0)
but evidently not Vector.
We also have to worry about cached HTML now, the #bodyContent is
the most reliable selector to use for before and after
I4c1b15d90bacbc9b13782a1d8f52e838ce8ecd83
Additional:
Remove the mixin-clearfix rule on bodyContent - this is now
redundant with the changes in T279388 and should have been
removed.
Bug: T283206
Change-Id: I15103cea72c793589a03ab1a3e7f3b377acb287f
The `mw-body-content` class is currently decorating various things,
however should be limited to the body of the article. This allows
us to identify the wrapping element without resorting to a selector
that makes use of an identifier and to separate styling concerns of
UI (indicators and site notice) from article content.
Bug: T279388
Change-Id: I4c1b15d90bacbc9b13782a1d8f52e838ce8ecd83
Modifies this variable name to use proper hyphen-case and
prioritizes the type of variable rather than it's source.
This prioritization makes sense in Mustache templates because the
variable is a boolean and is used exclusively in if statements,
e.g. {{#is-article}} ... {{/is-article}}
Change-Id: I72e9baf0a979d922b8217aabe8cf0c40699f891b
We prefix templates that are booleans with "is-" and tend to prefix
functions that return booleans with "if" or "should"
This renames the new "shouldConsolidateLinks" method.
Follow up to I1c305d89bece147a6f1b478441119c3169abfbdd
Change-Id: I6a5908b8b35ca6bceec8b864e3ac651fc7e8ced8
Pull personal menu items except for user page link into a consolidated dropdown menu based on feature flag using Vector hooks. Add consolidate user links feature flag for logged in/out users. Update styles for personal toolbar. Add logic to template to show legacy toolbar or consolidated toolbar based on feature flag variables.
Bug: T276561
Depends-On: If4e143aada711d210ae45d33b97a6be0685b6a41
Change-Id: I1c305d89bece147a6f1b478441119c3169abfbdd
In modern Vector, the language button that is placed inside
the page header should appear near the footer, if the page is a
Main page.
This changes some CSS selectors to not depend on the language
button having the `.mw-body-header` parent element.
Bug: T276140
Change-Id: I97bf0c11d0321752d472ac4988618a1db92b7271
Sending these comments to all users incurs small performance penalty on
both sides. Further, the intended audience for the comments is
vanishingly small when compared to all users and we have more direct
avenues to contact that audience, i.e. the Technical Village Pump.
Remove the HTML comments related to the deprecation of the
role="navigation|main" attributes on the navigation and main elements.
Bug: T281025
Change-Id: I4735c435fc31c5ba4fbf99e9d9bf12adc466b02f
* We add the `.mw-interlanguage-selector` class to the
.vector-menu-heading in the server rendered HTML. `ext.uls.interface.js`
later attaches a click handler to this selector that loads the rest of
ULS.
* We hide the dropdown arrow for js users and only show it again if
ext.uls.interface module isn't installed or is not being loaded.
* When the `ext.uls.interface` module has been loaded, we hide the checkbox
and checkbox hack menu in favor of showing the ULS popover.
Additionally:
* Adds '.vector-menu-heading' class to menu headings.
* Change h3 selector to `.vector-menu-heading`.
Bug: T273232
Change-Id: I6f4572c16ca4096dcda3aac4d585003b93dcccfa
