Now that the header collapses at small resolutions
(I89d75843ca7e33e6de93af5d7c22e46b7249c4b7), this commit wires the
search toggle to show the search box when clicked and hides it when the
user clicks outside the search box.
* Adds searchToggle.js to perform handle the toggle behavior of the
searchbox.
* Adds `@padding-horizontal-tabs`, `@size-search-expand` to variables.less
so that these can be used to set the start margin of the search box
(enabling its start edge to match the tab text start edge).
* Modifies screen.less to only apply search max-width when >=
@width-breakpoint-tablet
Bug: T284242
Change-Id: I82563d44967f60aee1cd4d3aa6fb4f405822686b
Additional change: A bundlesize increase is required given
recent developments in the user menu.
Bug: T284748
Change-Id: I2b0981d621c3add42731e50d5aef299b32548b4a
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
Following on from I551414b1, disable query highlighting for the list of
languages provided by @TJones in T281797.
The user's interface language can be different from the wiki's content
language and so the former is not available at configuration time. Thus,
we fetch the user's interface language at request time. Fortunately,
@TJones' list of languages is small so there should be little
perceivable performance impact from the perpective of the user.
Additional changes:
- Remove the config.VectorWvuiSearchOptions.value.highlightQuery
property from skin.json
Bug: T281797
Change-Id: Ib39736a93fa64e82253f88551d125413e672558b
At this point most wikis enable this config flag. Explicit overrides
exist for wikis where it is not available (commons and wikidata).
The config on master should always reflect production config so
it's time to change the default.
Change-Id: I8835e070d2636f600f733645119b0f8497eda3e8
- Add logic in Vector hooks to prefix user menu links with icons.
- Add method for getting icon name based on user menu key.
- Add constant to map user menu keys to associated icon references.
- Include icon treatment for both logged in/out users.
Bug: T276562
Change-Id: Ia69366eb4fbd50b48fe5513ef99048bdc5df64fb
... for the WVUI search autocomplete widget.
The VectorWvuiSearchOptions object is sent to the client whole and
already used as the base props for the app component constructed in the
skins.vector.search RL module. We also define the highlightQuery prop on
that component so that its value can be passed to the WVUI
typeahead-search component.
Bug: T281797
Depends-On: I142810c177b850ecd7015f835bb6630bae00a6ea
Depends-On: Ia5e14fb9d0073a5126a0918f7a94213c671e773a
Change-Id: I551414b111226e690f6a2bc69dabf5edc6fb0a96
- 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
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
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
* Adds ab test config to enable/disable the ab test. Defaults to `false`
(ab test disabled).
* Adds a `languageinheader` query param which only takes effect when the
ab test is enabled. The query param is cast to a bool and determines
which treatment is shown. For example, set query param to
`languageinheader=1` to see the new treatment. Set query param to
`languageinheader=0` to see the old treatment. To bucket based on the
user's id or global user's id, don't set the query param.
* Moves the language in header config work that was previously in
ServiceWiring into a `LanguageInHeaderTreatmentRequirement` class so
that unit tests can be done on most of the logic that determines whether
the language in header will show.
* Adds logic to bucket user based on [global] user id.
Bug: T280825
Change-Id: Id538fe6e09002fae6c371109769f3b7d61e7ac6d
Register updated requirement for language in header for logged in and logged out users in Vector's ServiceWiring file. Make VectorLanguageInHeader backwards compatible to handle boolean values when registering LanguageInHeader feature. Update VectorLanguageInHeader variable to array in config to handle different logged states.
Bug: T277588
Change-Id: I37a3a01e83f051cf0679769c8b9b5b41f00d6d72
Follow up to I3234e7712b8c111b070c35e38425c865ff7213f9
Do not disable the feature entirely as it has other purposes.
Bug: T280260
Change-Id: I47d16eb8186efa83e158713d852b443bce9aee1c
Separating most LESS files into 2 ResourceLoader modules and a common
folder:
- skins.vector.styles
- skins.vector.styles.legacy
- common
This changes aims to clearly separate the old (“legacy”), the new
(“modern”) and the common styles which were previously all placed under
`skins.vector.styles/`.
Inside each directory are separate folders for `layouts` and
`components`.
The entry files, `skin.less` and `skin-legacy.less` are moved into the
specific folders and a third, `common.less` entry file is created that
contains the common imports for both old and new Vector.
Aliases have been added to the Storybook Webpack config to avoid adding
the story file changes to this patch. Images coming from CSS `url()`'s
have also been temporarily disabled in Storybook until Storybook can be
upgraded to use Webpack 5, and use array values for aliases, in a
follow-up patch.
This patch also slightly changes a footer layout specific rule so that
existing `padding` remains unchanged in rendering due to new common and
component structure.
Bug: T264309
Change-Id: I1cd2681a2b61edb7be56c38f9bb3994827d7e322
This is a modified revert of Ia1eec412111e8f6af3b45affdc186d9eafd4262c.
This is not applied to modern Vector, for reasons given on ticket.
Bug: T279008
Change-Id: I3234e7712b8c111b070c35e38425c865ff7213f9
Amending icon color by setting `opacity` accordingly to Design Style
Guide requirements.
Also using `em` base sizing for accessibility reasons in order to
make icon resizable on user text zoom preferences. And adding some
comments and mediawiki mixin usage.
Bug: T277660
Change-Id: Ia226857a38d3b3d5b4583e95905ef55e406c5cb2
* Don't reveal the menu on hover
* Don't flip the dropdown arrow when open
* Menus close when clicked outside
Bug: T275681
Change-Id: I36f5c46422725a935c962be3194fd37bde1fa769
On beta cluster, ULS is adding a margin to the language button
meaning it is not vertically aligned.
Follow up to ac62386909
Change-Id: I4b85c391543078da7ef813cf4ddaf30d92be3b8d
* Add mediawiki ui button styles to Vector and convert language
button to a quiet button
* Restore the arrow for language button with ULS
* Vertically align button to first line of header
* Add a storybook entry for LanguageButton
Additional changes:
* Fix issues revealed by storybook - menu dropdown should
reset generic typography rule for `ul` tags
* Allow quotes usage in storybook without disable rule
Bug: T268241
Change-Id: I483350084fb46a51c50af6aab78c62db6d02df89
I can't find any usages of `mw.util` in the Vector search code, but
there is a usage of `mw.Uri` in instrumentation.js.
Change-Id: I358295301403bc33be3a183392ed9e39c2378f6c
Now `wvui` is in core, there is no need for this to be conditional.
Depends-On: I91db16946e7ea46f69a6b57b116962f77ce3cd20
Change-Id: Icceaefc63d227ca772a986ad2c6ce28cbdb0a7d6
Per conversation with Bartosz this should have been done in an
explicit commit and probably needs better messaging.
Change-Id: I63f286d1c22dcb7d0bad956f01e8482e5111face
Vector has a wgVectorResponsive flag. This adds a ResourceLoader
module as well
I propose the configuration is repurposed to disable the min-width
on Vector and enable the viewport tag. This will allow us to use
test.wikipedia.org to test Vector at lower resolutions in future
as well as provide a suitable option for 3rd parties wanting to run
a responsive version of Vector that can be opted into using:
```
$wgVectorResponsive = true;
$wgVectorDefaultSkinVersion = '2';
```
As part of this change, the default skin version is set to 2, in
preparation for the next MediaWiki release. Note on Wikimedia wikis we
explicitly set this version so this will not impact any of our deployed
wikis.
Bug: T242772
Change-Id: I878920f49d18c5d60efd3ac45dc7912d2c62086e
The sidebar currently uses mw-ui-icon so we continue this
practice, however we provide a general rule to ensure all icons
rendered through it default to 20x20. This didn't impact the side
bar icon as that already specifies a height of 20px.
Bug: T268241
Change-Id: I6f8e8400da048a97cbf59c3e6ad918763fc91041
If the VectorSearchTreatmentABTest config variable is truthy and the
user is loged in, then pick the Core treatment (defined in the
mediawiki.searchSuggest RL module) or Vector's Vue.js-based treatment of
the search widget based on their user ID. If not, then fall back to
picking the treatment based on VectorUseWvuiSearch.
Supporting changes:
* Update initSearchLoader() in skins.vector.js/searchLoader.js to check
whether the body.skin-vector-search-vue exists
* Remove wgVectorUseWvuiSearch from the skins.vector.js RL module's config
* Update the performance-related metrics collection to check which
module is being loaded rather that use the above
Bug: T261647
Change-Id: Idc978392f5db14f0ae2b06ade0175fe534f4ae70
For language-in-header feature, edits the <header> element to
contain:
- page title,
- language selector
- tagline (siteSub)
- Indicators
These elements are associated with header/meta content so grouping
them inside one header element makes sense semantically.
Bug: T248761
Change-Id: Ief6c4936d1ebe381432369f8d86419da5f7c6cae
This allows better compatibility with FeatureManager (e.g. can use
requirements such as REQUIREMENT_LATEST_SKIN_VERSION). It will become
especially useful in I70277c1082a504fbd5f6023e9873e8071de7e35d and when
A/B testing search.
Bug: T270202
Change-Id: I3a063e0b085765ea1db3c4478fb30c11b0942b75
A new config flag wgVectorLanguageInHeader is added to allow
us to render languages in sidebar or outside sidebar, in the
header.
it defaults to false to allow for further development and to
not disrupt the status quo.
To accomodate the new menu, a new header is added based on the design
in Minerva to contain the heading and language button. The language
button is floated to the right.
The new menu is not styled. That exercise is left for the follow up
task T268241
No caching implications of this change, as legacy and modern
experiences remain touched without changing the default value of the
new config flag
Bug: T260738
Change-Id: I5af1522cac3831c1c833388461fe254c03191f65
SkinMustache in core provides most of what is required for Vector to
generate its menus. In the interest of having a canonical source of
truth for menus across all skins, Vector should use this data.
To ensure the HTML generated is (mostly) the same after this patch to
prior, a few modifications are necessary:
* The data from core is decorated so that Vector can continue having its
own custom class names on menus. This is done using the
decoratePortletClass method.
* There is no support for a menu having a header representing the
selected menu item, as is currently the case with variants. This is
achieved via an extension to getPortletData. It's assumed that later
when variants are merged with languages, this can be removed.
* Menus are agnostic to how they are displayed, so we must continue to
add the is-dropdown template variable to drop down menus. In future we
may want to rethink our Menu partial to make this unnecessary in PHP.
* The portal-first class is redundant in the modern Vector as we can
use the first-child selector. Previously we introduced a class to
service the legacy skin where this rule doesn't apply as #p-logo is
the first child. However, the legacy skin can do this using a special
next sibling selector instead.
Bug: T268157
Change-Id: I5f7adc1840441b508ffee40139b85b64021789e6
By default the API uses location.host as the host, however during
development it is useful to test against production wikis
For example to test against English Wikipedia:
$wgVectorSearchHost = 'en.wikipedia.org';
Note: Links when clicked will not take the user to the target page, and
instead will take the user to the search results page with a link to
create the page.
The following config can be used to workaround that page:
$wgDisableTextSearch = true;
$wgSearchForwardUrl = "/w/index.php?title=$1";
Change-Id: I5fbac7f54844d7a9d6976007bc0d0ff9938b9f2b
Uses ResourceLoader's virtual config feature to get the config and pass
it down to Wvui's typeahead search component.
Disclaimer: I'm a typescript noob and am not sure if the
config.json.d.ts is correct although it seems to make tsc happy.
Bug: T260167
Change-Id: I2eced14c7df3b795b4de0e5149c2ca9fd598c7be
Creates a new skins.vector.search module that
replaces the searchSuggest module from MediaWiki core.
This module creates a new Vue app using the WVUI
search widget for the new search experience.
The legacy search input form is still retains on pageload,
and the new search kicks on search input focus.
In order to manage that transition, the legacy search
input is styled to resemble the new WVUI input, and the
new input is manually focused after the component mounts.
Vue is also added as a dev-dependency to help with
type-checking.
Other changes:
* the entry in skin.json is reordered alphabetically after
skins.vector.js
Bug: T264355
Change-Id: Ibb9561a77a14734297cb4d0ddcd415fc0750b45d
The configuration is not dropped as the A/B test has not been completed
yet.
Depends-On: I24e672e86af6fdbedf615d8159dd6ca5f578066a
Change-Id: I6228d34560d036a0dbbe9b506388f85dbb9b6949
