In preparation for 856718 where pinnableElement.js makes use of features.js,
move features.js and limitedWidthToggle.js out of the skins.vector.js module and
into the skins.vector.es6 module. This will make it easier to use by
pinnableElement.js without needing the es6 module to depend on the es5 module.
This does have the negative side-effect of causing the limited width feature to
not be supported by IE11 (and other non-ES6 browsers), however this tradeoff was
discussed with our product manager to be acceptable. Additionally, this
maintains the status quo as the toggle button does not currently show in IE11
(which may be a bug).
Bug: T322051
Change-Id: If0e8cb98deabe847c2cc71fddb90ca36d15e5f8f
This is an incomplete styling of the menu.
This should be enough to start an initial design
review and unblock other work on the dropdown.
Out of scope for this patch:
- Pinning (being done in T317900)
- Design (will be done in follow up)
This should cause no visual regressions in Pixel.
Bug: T317899
Change-Id: Id7b47cc16fc8cf93d406687198ba37acf7a9cf24
As far as I can tell, this has been dead code ever since it was
introduced in change Ica040cd18d (commit aa10668e6d), and was never
called; the effective search URL was initially constructed via inputs to
the search form (e.g. a hidden input for wprov), and later the separate
urlGenerator.js was added. (Also, “suggestion” is not a valid
Special:Search paramater as far as I can tell.)
Also add some tests for the separate urlGenerator.js, to make up for the
other tests being removed.
This reduces the module size of skins.vector.search enough that we can
decrease the bundle size test config to 3.2 kB [KiB].
Change-Id: I6be5ba362402c2c2ec582d9a0192c80f46e7a7ce
If the wgVectorSearchClient supports it (the default implementation
doesn’t), add a visible-item-limit to the cdx-typeahead-search, and wire
up the resulting load-more event (new in Codex v0.3) to load additional
search results on scroll.
The hard-coded visibleItemLimit (7) is chosen to match the default limit
of the wbsearchentities API, but ultimately arbitrary; we can look into
how to make this number configurable later, if necessary.
This increases the module size enough that we need to bump the bundle
size a bit more.
Bug: T322333
Change-Id: Iadade9cbf48457cfeabc78439624602ec3f98782
Co-Authored-By: Jon Robson <jdlrobson@gmail.com>
Needed-By: I67fac3b209d6a1ab2661e1e1c0681edd8472ac6c
- The collapsible ToC absolute positioning solution has been preserved to be used on no-js mobile resolutions
- The collapsible ToC grid based positioning solution has been removed
- ToC styles have been refactored and organzied
This patch involves HTML changes. In order to avoid additional complexity, this patch disables the collapsible ToC feature for users above the mobile viewport with cached HTML. The ToC continues to be automatically collapsed on mobile viewports for cached HTML users.
This patch results in 9 expected visual changes. In order to see them you need to take the following steps:
1. Run `./pixel.js reference`
2. Checkout the following PR in pixel https://github.com/wikimedia/pixel/pull/149
3. Run ./pixel.js test -c 859143
It should look like this: https://jmp.sh/ZVQqDZw7
Bug: T318013
Change-Id: Iea0d73005b91589c58ae38a3a640fa90c18a860d
Since Wikibase change I01afb269d6 (commit ee4c555878), Wikibase has a
copy of the “is wikidatawiki” condition to temporarily continue
supporting the old search on Vector 2022. As suggested by Michael there,
we can change the condition here to avoid having the same check in two
places, and instead detect whether Wikibase loaded the legacy search
ResourceLoader module (which means we shouldn’t install the new search)
or not (in which case Wikibase Repo is either not installed at all, or
it’s providing a custom wgVectorSearchClient to support the new search).
With this change in place, once Wikibase is ready to support the new
search everywhere (including on Wikidata proper), we only need to change
the condition in one place (in Wikibase), and can then clean up the code
here at any later time.
Bug: T316093
Change-Id: I0aa0e432181b14cdb7b92e2550b78f2d7d48094d
These styles are not going to be needed in the main menu so are
not generic. Moving to the PageTools component.
Bug: T317899
Change-Id: I17b8ecd645c593c0368ea158265dbf8f6a575345
Vector 2022 sidebar is automatically collapsed on
exactly 1000px breakpoint. Should do that at 999px.
Bug: T321745
Change-Id: I052e99ccfda10786fabf54ea6cf089aeb3ce4e75
This patch involves cached HTML changes
- Replace '-content-container' id with '-unpinned-container'
- Replace '-content' id with '-pinnable-element'
- Rename pinnableHeader.js to pinnableElement.js
- Replace PinnableDropdownContents.mustache with PinnableElement/Open.mustache and Close
- Add PinnedContainer/Open & Close and UnpinnedContainer/Open & Close
- Rename .vector-dropdown-content to .vector-pinnable-element
- Add new PinnableElement.less stylesheet
Bug: T318013
Change-Id: I85aec387f87126a17e760fd9fd10e10572ff3152
The Dropdown component should be considered the dropdown folder going
forward. This should be distinguished as a different component that
composes the Dropdown component
Since the template itself is rather simple it seems preferable to have
duplicate templates that describe the actual component (PageTools,
VariantsDropdown and LanguageButton)
MenuDropdown is renamed Dropdown and styles that don't correspond to the
Dropdown component are moved to the relevant components.
MenuContents mustache template (future component) is added to DRY up
several of the new templates.
Bug: T320927
Change-Id: I220d0a477b3f05b278bd2cec7dd601c7b3b17c6f
[Visual Changes in this patch]
This patch introduces changes to whitespace inside the Mustache template
which corresponds to an HTML change, resulting
33 minor changes in pixel, the spacing of the ToC label shifts by
1 pixel
- Remove page tools feature flag from TOC
- Remove usage of .vector-toc-collapsed and .vector-toc-not-collapsed
- Remove now unused `moveToc()`
- Update jest tests to use PinnableHeader
Bug: T318013
Change-Id: I82f23e69b0249c844af9e45fec342217a0755893
Makes the dropdown styles compatible with the pinned state of the
menu so that both states can share the same styles.
- New vector-menu-heading mixin shared between main menu headings
and dropdown headings.
- New @font-size-dropdown variable so font-size is consistent in
dropdown and pinned state.
- Ensure hidden 'more' menu works in both pinned and dropdown state.
- Removes extra <ul><li> from PinnableDropdownContents.mustache, as the
child Menu template already contain <ul><li> elements.
Bug: T318434
Change-Id: Ie1a56d8584c1dc3f20c6643ff4cfc740be4007fa
This patch results in an expected visual change for the main menu button when the flag is on
When comparing with master with the flag off, this patch will still show a 1px difference for the main menu button, as well as user menu and language button. These are not introduced by this patch and are due to the flush classes taking into account the 1px border
Change-Id: Id46bc939338d5bbcc3459ab502e1cf8b8f2020b2
Refactors styles for limited width toggle and
fixes issue with close icon not appearing.
Bug: T319449
Change-Id: If53c3921e54565c47eb0868329e0b79f60073792
Causes 20 visual progressions regardless of visual next flag, the ToC moves 1px when in the sidebar
Follow up to If3aed0ac401b0abc80c3ad52806eb85b33d43f06
Bug: T321504
Change-Id: I4b3ec90d8e79791a1bf17ba02c9f9d722499bec8
The toggle was a div that tried to act like a button. This commit converts it to
a button for semantic and accessibility reasons.
Change-Id: Idf5643926611ae8e9a7ec4163cf3cb1e51ec7310
