Can be disabled via &vectorstickyheaderedit=0 or configuration
change.
This will allow us to fine tune the edit features without blocking
deploying the existing feature.
Bug: T294383
Change-Id: Ic282ea4f2ff0108eeaa154c8a77e4e5fd30daeae
This class is already being added via SkinVector::decoratePortletClass
so the one in the Menu template can be removed.
Bug: T291096
Change-Id: Icb9fa7a1e583ad4ef0138c5bd069aa68598c9b6e
- Add edit icons.
- Update data passed to sticky header, button templates.
- Show/hide edit icons client-side based on ids in fixed header.
- Disable sticky header when in Visual Editor mode.
- Use Visual Editor hooks to toggle IntersectionObserver.
- Remove extraneous js for setting offsets for other sticky elements (simplify by moving known sticky element th to css - follow up to https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/722475/comment/7b8ab2db_cd5c7e78/).
Bug: T289723
Change-Id: Ifbab2f1c4d716f8fc261e3d7fa35fc71c6065ec5
- Adds aria-hidden="true" to the sticky header
- Adds tabindex="-1" support to Button.mustache and update sticky header button data
- Add tabindex to cloned user menu
Bug: T290201
Change-Id: I270db0485f08af310fb40365703da1efc07d3cb9
When the sticky header is visible, it has a global impact on the
scrolling UX. For example, it can undesirably overlap elements when the
user clicks on a jump link and when the user tabs through elements in
reverse order. Therefore, we need to add scroll padding to the root
element when the sticky header is enabled (when the feature flag is on
and at higher resolutions)
Known limitations:
* Scroll padding is supported by all the latest modern browsers except
for Safari [1]. This was considered an acceptable tradeoff with the
caveat that this decision may be revisited in the future as we learn
more about user interaction with the sticky header.
[1] https://caniuse.com/mdn-css_properties_scroll-padding-top
Bug: T290518
Change-Id: Ie5eb01d7eafd18ce740be620dfb5c8849386af6e
When looking at raw html it always looks like something is missing when
there are trailing or leading spaces on attributes.
Just move the space into the conditions and it looks better.
Change-Id: I2a8d3246c43b8345eb819eae5887a39f68cfbdc0
* In legacy Vector, menu items are now wrapped with spans. This
consistency in HTML is required for splitting Vector into two
different skins.
* Vector's portlet link items now support icons
Bug: T289163
Bug: T291722
Change-Id: I4464888983ac8b8b5f971e0c679dbeda09a61be5
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
This is going to be forbidden going forward.
The legacy lookup and overrides are deferred
until they are actually needed to keep the constructor
cheap
Bug: T289163
Change-Id: Ib23360e3439abc828404c1de8e0906915ee7d8b6
- Fixes blank sticky header language button when no languages are present
- Adds arrow to sticky header language button
Bug: T289815
Change-Id: I36dc5fb0aad9c3ca1fced0d46e5167e8707f6731
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
* add stories for buttons and icons using wvui and mwui
* Update user link stories
* Add the vector-menu-dropdown-noicon class to more and
variants menu
* Fixes the language button story and simplifies its code.
* Updates Hooks::makeButtonIcon to Hooks::makeIcon which
reflects the method purpose more. It doesn't output button
classes.
Bug: T289514
Change-Id: Ifd750da0c0181ec56f39ff00d653e88bfc848038
- 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
