At resolutions below 1000px, we want pinned elements
such as the Page Tools menu and Main Menu to collapse.
This behaviour is temporary and when the browser is resized,
the pinned elements should revert to their previous pinned state.
We also want to remove the ability to pin these menus at
low resolutions, so the "hide/move" button is hidden.
A new matchMedia event handler is added to PinnableElement.js
to handle this behaviour.
CSS is also added to hide the pinned menus at low resolution.
This is to account for the situation where the page is loaded
at narrow widths, with pinned elements,
and the JS hasn't loaded yet.
features.js is refactors so that class toggling can happen
independently of saving the state to user preferences
(since we want to toggle the classes but not save the state
at lower resolutions).
Bug: T326364
Change-Id: I3113ab83deb15843e04ed63ec767a85c522517b5
Splits the click handler for pinnable elements into
separate functions to reduce indentation and
maybe improve testability.
The click handler for pinnable elements is now
placed in a function called `togglePinnableElement()`
and attached to the click event via `.bind()`.
Class toggling is split into a separate
function called `togglePinnableClasses()` as well.
This should have no functional impact.
Change-Id: Ib27a469f6eb7e28360203d09db3315c6bde5c890
Causes 4 minor visual regressions where the collapsed toc width is slightly smaller
will be fixed when page tools is deployed.
https://jmp.sh/o3vlGVlb
- Remove @padding-vertical-toc, @padding-right-toc and @padding-left-toc variables, which would need to be removed after page tools is enabled anyway
- Remove @height-collapsed-toc-button, @padding-top-content-px and @max-width-collapsed-toc variables which weren't needed
- Greatly simplify CSS for collapsed TOC width
Bug: T324877
Change-Id: I6d44d4b49fb5dccd776dfe0e96740fdb9bff4c5d
- Addresses "when pinned, can we maintain the alignment between the search bar and the article title for larger screens?"
https://phabricator.wikimedia.org/T324877#8499980
Bug: T324877
Change-Id: I7d3447cccdff40fc5a5e0b8978c17db8ffab065c
Pages that are not supported in other languages should not display the
ULS when the language button is clicked. Instead, a simple message
explaining that the page contents are supported in other languages
should be displayed inside the dropdown. Additionally, the language
button should be modified for these non-content pages, to non include
any label and be quiet instead of progressive.
This patch implements these specifications by appropriately modifying
the mustache templates and the underlying skin classes.
Bug: T316559
Change-Id: I37d8e61a1287b31d1a304d2a955f532b9b8fa505
* Don't hide language button
This code can be removed now T287206 is resolved.
Also simplify legacy logic - as the language menu
is always a portlet there.
Additional changes:
* Create LanguageButtonDropdown component to distinguish
this code from the LanguageButton in the sticky header.
* Fixes a style in LanguageButtonDropdown.less which wasn't
accounting for multiple vector-menu-content classes
Bug: T320927
Bug: T325017
Change-Id: Ic331684c384c5d57b60b098f23485e44fb75fb8f
This should be a no-op since Wikibase change I6a7a42a64c (commit
19267799da), which enables the wikibase.vector.searchClient module on
wikidatawiki as well; assuming no problems turn up when that is
deployed, we should be able to merge this soon afterwards.
Bug: T316093
Change-Id: I8d7aaf67d98cc015d94bb6aa1c71a92905dad024
Follows-Up: I0aa0e432181b14cdb7b92e2550b78f2d7d48094d
Using PinnableElement in the TOC allows us to reuse styles associated with all PinnableElements, and helps ensure consistency between page tools and the TOC. This is something that would probably need to be done for T324505 anyway
Rather than updating PinnableElement to accept a class prop, I chose to rename '.sidebar-toc' to '.vector-toc', making the TOC's naming conventions consistent with the rest of Vector.
"sidebar" doesn't make sense anymore anyway, as the TOC can be in multiple locations and it's best to avoid the "sidebar" term
Bug: T324877
Change-Id: I5b9228380f5c4674ef424d33127a5cb4010822da
- Generalize spacing for pinnable header and menu items under PinnableHeader.less and PinnableElement.less
- Impacts main menu, page tools & personal tools
Bug: T324877
Change-Id: I4042e5c1957d64797f21146f687ef960721299ce
- Register new feature for main menu pinned
- Update UserPreferenceRequirement to optionally handle default config values
- Add nav landmarks for the main menu
Bug: T317900
Change-Id: I8fc6e0a79a1155d68afb9e33e5101a2a160dc4e5
- Rename data-portlets-main-menu to data-main-menu
- Rename MainMenuContents.mustache to MainMenu
- Replace usage of .vector-main-menu-contents in favor of .vector-main-menu
- Add classes to PinnableContainer
- Use PinnableContainer and PinnableElement in main menu
- Remove MainMenuDropdown.less
Bug: T317900
Change-Id: I59b3acd3d56cd5761e5978607634dfb9a88f60e3
This allows '.vector-main-menu' to correspond to MainMenu.mustache, and 'vector-page-tools' with PageTools.mustache
Bug: T317900
Change-Id: I65c0d7cffbdf1cf9e59cde0c0fc4dca788e799de
- getTocData is moved into VectorComponentTableOfContents and it's test file
The following changes were made to the main menu, toc and page tools PHP components
- Avoid passing in $skin to the constructor
- Handle isPinned logic inside the component
- Add a public ID constant to the components
- Dropdown data for each feature use the same naming convention
Bug: T317900
Change-Id: I77a617a6c1d93bccd3b6e59353299f5534624e53
This partially reverts 94c7f31082.
Headings inside wrapper divs etc. actually are rendered in the table
of contents.
Bug: T318044
Bug: T324869
Change-Id: Ie3181d9e9605cd2b5897b12931572057e80d6661
While removing this we also noticed that we check the value of
isMainPage. This doesn't seem like a good idea as most main pages
do not have a table of contents, so it seems like adding
unnecessary complexity for a state that doesn't exist in practice.
The existing code path also doesn't work as it adds a table of contents
unstyled to the page.
Bug: T324874
Change-Id: Idaeff6ace5912ea74ed9d335526027c4690ac8fa
This was an artifact that remained after the switch from data-is-persistent to
data-feature-name. It can and should be removed now.
Change-Id: I6b50d243c7de3d46fb8c4baf398574d5c4247497
* Leverage the infrastructure around feature management to handle the page tools
pinning and persistence
* Make pinnableHeader.js leverage features.js if the data-feature-name attribute
is set
* Sets tests/.eslintrc.json ecmaVersion to 2018 to enable destructuring in test
files.
* Adds a isPinned helper method to pinnableElement
* Add a logged in requirement so that the pinned feature is disabled for
anon users.
Bug: T322051
Change-Id: Ib86282216882fa94e37b7088a3f4bd0c1bcf6cd4
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
Visual changes when the flag is on
Follow up to If3aed0ac401b0abc80c3ad52806eb85b33d43f06
More context at T322673#8383888
Bug: T322673
Change-Id: I64a47fa869247f758c6369c2e0ff8b12f87f9d9e
Since dropdowns can now themselves contain headings in the content
area we need to limit this rule. While this is current theoretical
it will soon become reality in Ie7d31df972ff68313b2437ff14b7b6b8d7078204
when we will introduce the first of these components.
Note in future we will likely restore this when we make those menus
themselves collapsible, but that will likely be part of a different
component and fixing this now is better than having a non-functional
collapsible item.
Change-Id: I24abb08a098dd75ad694da0b47b8be0897ed9b30
Since the TOC container is overlaid on top of the content container when the TOC
is not pinned, we always want the width of those two containers to match or else
misalignment could occur. This commit keeps the
`.mw-table-of-contents-container` selector in sync with the
`.mw-content-container` selector in terms of width.
Bug: T322162
Change-Id: I2fe26dc616cc46e1b3c9ce4f2ac63a23da415fa9
There are no longer any common menu styles. These are moved to the legacy
skin and new rules are added to the dedicated components.
Change-Id: I1bf26bfb29bb495ee65e983fad60122007f62698
Currently you cannot have menus inside dropdowns. To support this
we should limit the selector to direct children nodes.
This will allow us to put the main menu into the main menu icon
dropdown.
Change-Id: Ibf304843a62d5269992a01eb826edf71ce8d3c35
- Table of contents arrows are now aligned with sticky header search/hamburger
- The user menu dropdown now aligns with more and languages button
Bug: T321504
Change-Id: If3aed0ac401b0abc80c3ad52806eb85b33d43f06
This change should roll out with the featue flag to avoid
unexpected UI regressions
Follow up to I9aba71ac4fff0d285676946acef8309b741ed1ad
Bug: T321504
Change-Id: I369e314bac31ea2eca3bff4e530e07c8bee325e2
Changes:
* Code is moved from SkinVector to SkinVectorLegacy verbatim since it is now only
needed by SkinVectorLegacy
so we remove it:
** This step broke MainMenu rendering so this was captured in VectorComponentMainMenu
** The isLegacy code no longer makes sense and is removed in a follow up
* storybook no longer run on CI
Authors: Bernard Wang and Jon Robson
Bug: T321102
Bug: T319349
Change-Id: Ib424ca1c767161fdae8c0aeedfe662b7fa039ff6
Instead of aligning the edge of the main menu and
ToC with the edge of the main menu button, this
aligns the text of those sidebar items with the
edge of the main menu button.
NOTE: Currently not working with the
vectorvisualenhancementnext feature flag enabled.
This will be addressed in If3aed0ac401b0abc80c3ad52806eb85b33d43f06
Bug: T317583
Change-Id: I01f639c5ca63ac50235dc21ca5273c91213f041c
* Introduce a generalized feature toggle system that uses user
preferences or localStorage for anons (right now the latter is out
of scope but will be explored in a follow up)
* Feature flagged to VisualEnhancementNext for now, given the dependency
on icon size
Bug: T319449
Change-Id: I7343a3f38b720411d5ef5f3414f25f475b0bb84a
The user links and language button are SkinVector22 features but
they are buried inside SkinVector.
When we rename the templates this code will become problematic
as SkinVector22 requires these modifications
Bug: T319349
Change-Id: Id5e5b97af0ea020ef20565a7e1acc685d7be0892
Sometimes, especially on a slow connection, search results may arrive
for a search query that is no longer in the search input, because the
user has changed the search query since the request was sent. When that
happens, don't display those outdated results.
Bug: T321108
Change-Id: Idd515a679673a7ddef02950323311a56cd2e84e9
The search input no longer expands to the left when focused, only when
there are search results. This meant the loader box was misaligned,
because it still expected the search input to expand.
To fix this misalignment, add the margin-left and width styles that
apply to the search input to the loader box as well.
Bug: T321009
Bug: T317902
Change-Id: Ic177b4cf56cb0a94850037a30db3001777dc52d2
Restricted to the feature flag (?vectorvisualenhancementnext=1)
for now to allow us to not worry about caching.
mw-ui-icon-flush-left and mw-ui-icon-flush-right have been in core
for some time and using them means we don't have to manage hardcoded
values for these.
We'll need to think of .mixin-vector-flush-left-left
and .mixin-vector-flush-right-margin-left separately - I wonder
if these could be revised to use these 2 standard classes.
Additional changes:
- Drop unused mixin-vector-flush-right-margin-left mixin
Bug: T321504
Bug: T317583
Change-Id: I51f8e31be6771a3fb32fb07dc22d0c2872b5706d
This removes the previously merged 835281 stopgap. Because of caching, this
should only be merged when the `emptyPortlet` class is not found on the user
menu container on anon officewiki.
Bug: I883926c36f59d446076f960ead31f82e51967e70
Change-Id: Ia1e9ba2b43186462b05f372368d5965fa0857657
Rename template and CSS files to match updated naming conventions, replaces instances of "sidebar" with "main menu"
Bug: T316570
Bug: T317437
Change-Id: Ib4050768f20b1734d356104f18aa539f657099d8
The legacy search wprov behavior, implemented in the WikimediaEvents
extension in searchSatisfaction.js, is to use acrw1_ as the prefix (i.e.
with an underscore before the index), and acrw1_-1 for user searches
that didn’t select a suggestion (not acrw1). Make the Vue search match
this in both cases.
Bug: T317682
Change-Id: I6c84533e1811233ff2727d501327471d73fc7b62
Making this a feature part of the feature management system is integral
to making this a toggle and will allow us to explore making this
persistent in future.
Bug: T319447
Bug: T319449
Change-Id: I80c7b892a6891094854b4154db90917b67986102
This ensures that the wprov parameter is included when users follow the
link as a link (click, middle-click, etc.), and also prepares us for a
future where pressing Enter after selecting a search result navigates to
that result’s URL instead of submitting the form. It also matches the
behavior of the legacy search form.
We put this in App.vue + instrumentation.js, not in urlGenerator.js,
because we also want wprov to be added when custom URL generators or
search clients are used. (The reason for instrumentation.js instead of
purely App.vue is just that it’s easier to test there.)
In the tests, we need to update @wikimedia/mw-node-qunit so that we have
a sufficiently functional mw.Uri() mock.
Bug: T317682
Change-Id: I765d3bbf89b2253add7b50305c362e4bbc9ecceb
* Removes server rendered vector-tab-noicon class from legacy Vector as it is
not currently used.
* Adds menuTabs.js responsible for adding the vector-tab-noicon class when menu
items are added to tabbed menus. This is only used in vector-22.
* Adds unit test
Bug: T320691
Change-Id: Iffad86125f8754305f592ddc19d894866bd6dedc
Removes the common MenuPortal.lesss code and splits it into
Vector 2022 and Vector legacy in anticipation of changes to
the sidebar in Vector 2022.
Bug: T317583
Bug: T319348
Change-Id: I57d3dc3458a7d6a4877170c26c88ca9222e00ff7
Seen in logstash for Chrome 50.
Icons are not essentially, so gracefully degrade in these browsers
to items without icons.
Change-Id: I083c87c9bf5f256c8bcd2893e251571b97440ce1
This allows the URL to the other wiki's rest.php to be configured
exactly, rather than assuming that it has the same wgScriptPath as the
current wiki. This is necessary to make this feature work on PatchDemo,
where wgScriptPath looks like '/123abc456/w'.
$wgVectorSearchHost is removed, since nothing uses it except PatchDemo
(where it's broken) and development setups.
Bug: T319494
Change-Id: Ife042f4f683d366a31a642723746d4aa80774c03
