Commit Graph

178 Commits

Author SHA1 Message Date
Clare Ming 21c45837ef Spoof aria-expanded for dropdown menus using checkbox hack
- Mimic expanded/collapsed state of menu without JS.
- Update template, styles, i18n to make accessibility of dropdowns accurate.

Bug: T253650
Change-Id: I58ecebf520d6107554dbb81470dee69a5d4a7f1d
2021-09-01 16:12:26 -06:00
jenkins-bot 94d135ecfa Merge "Build the sticky header skeleton" 2021-09-01 20:35:21 +00:00
jdlrobson 8657171471 Build the sticky header skeleton
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
2021-09-01 12:32:31 -07:00
bwang c08ae1152e Update ULS button states to be consistent with other quiet buttons
- 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
2021-08-31 10:59:59 -05:00
jenkins-bot a068d6125d Merge "Template directory is set in skin.json" 2021-08-30 17:43:50 +00:00
jenkins-bot fef51f9023 Merge "Improve readability of anon user menu for screenreaders" 2021-08-27 20:36:16 +00:00
jdlrobson 3435f8fd9b Template directory is set in skin.json
Thanks to the upstream changes in T262067 we can make this template
directory relative to the skin and declare it inside skin.json

Bug: T262067
Change-Id: Ieccdf87979d14eeec0834b6b0cecf064d5fd9cfc
2021-08-27 17:36:28 +00:00
bwang d15005408f Improve readability of anon user menu for screenreaders
Bug: T288293
Change-Id: I10ca58aa492447f179c0ce12eabc0cd1ce4e9d9b
2021-08-26 12:58:10 -05:00
Clare Ming 1efe0a4203 Remove user links feature flag
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
2021-08-26 10:07:15 -06:00
jenkins-bot 7afd480266 Merge "Add title attributes to menu icons on hover" 2021-08-25 21:25:17 +00:00
Clare Ming 3dccc74b4b Add title attributes to menu icons on hover
- 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
2021-08-25 13:20:22 -06:00
jenkins-bot 92e034fbe7 Merge "[refactor] Clean up responsive handling" 2021-08-25 16:17:20 +00:00
jenkins-bot 967962cb51 Merge "Add imageGallery icon for UploadsLink and ContentTranslation menu links" 2021-08-24 18:08:00 +00:00
bwang d9dadf4a83 Add imageGallery icon for UploadsLink and ContentTranslation menu links
Bug: T288541
Change-Id: I9b71869c84c9745abbe233b11bb662aa0d4bb987
2021-08-24 16:57:27 +00:00
jdlrobson 391d9ba509 [refactor] Clean up responsive handling
There is no need for this to be in the constructor. Separate into
its own function that inherits from parent class and existing parent
method isResponsive.

Change-Id: I60d155ec9db99ccfe0b74271dee76275a8a6986c
2021-08-23 15:59:15 +00:00
bwang a50b1db793 Replace deprecated 'content' and 'content-thumbnail' features with 'content-media'
Bug: T287410
Change-Id: Iab67cedd67a03420b9204c92549f616d63266497
2021-08-18 19:08:10 +00:00
Jdlrobson b7464135cc Revert "Add wikibase skin style"
This reverts commit c595cc5106.

Reason for revert: Doesn't work. Must be done inside Wikibase extension.
See Ic576d8de9377813f7fe2d48841c1b6f303579728

Bug: T287206
Change-Id: I9904a72e4965a4124e4784501a3b4e77167a2971
2021-08-13 21:18:53 +00:00
jdlrobson c595cc5106 Add wikibase skin style
Bug: T287206
Change-Id: I6e38ad106eeaaafba21ac55b067be00b8d2a0972
2021-08-12 21:28:38 +00:00
bwang 46d98c90f4 Add sticky header feature flag, query param, and class
Bug: T284463
Change-Id: I520832fa1e0a66bb24479e47c8e8f8011e514299
2021-08-04 18:49:56 +00:00
jenkins-bot 65ea203549 Merge "Remove 'legacy' feature" 2021-08-03 18:28:28 +00:00
bwang 58c87018b2 Remove 'legacy' feature
Bug: T287410
Change-Id: Ibf8c20cfb1c3adb262224a28488c03c64323f509
2021-08-03 11:06:36 -07:00
jdlrobson d0c41d1dfc Run Vector's SkinTemplateNavigation hook last
Depends-On: Iec99be92378dc1a43f39428caffc03e1f594a927
Bug: T287533
Change-Id: I7d840d047627108a0a921ea52d5cb4bd06f36ab5
2021-07-29 14:27:28 +00:00
jenkins-bot 7881d8e651 Merge "Restore print, links, table and message box styles" 2021-07-27 21:45:16 +00:00
jdlrobson 722b5fbf80 Restore print, links, table and message box styles
These should have been added in the migration.
Follow up to 4a93c70

Bug: T278896
Change-Id: I089077d7ff7a9daf0e98b4dc40f04a11b4764277
2021-07-27 21:18:03 +00:00
Nicholas Ray d8f62f780c User menu design tweaks
* 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
2021-07-27 14:25:32 -06:00
jdlrobson 4a93c706b6 [modern/performance] Simplify Vector styles
Bundlesize drops as a result of no longer loading the legacy
code.

Bug: T278896
Change-Id: Ib992dd19356e563af356a616055ac297f9ad0b02
2021-07-23 23:49:14 +00:00
jdlrobson 96136a0e2d Remove Vector skinStyles for icons and fix language button
Depends-On:  Id08590f6a3fbbfda8226f2899f50f0b64cbb1481
Change-Id: I5be642f2e20d67e1d27c74ddb6ec086738a261aa
Bug: T191021
2021-07-21 11:02:42 -07:00
jdlrobson 276738b620 Consolidate user links outside of the user menu dropdown into a single new menu
- 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
2021-07-15 20:27:54 +00:00
Nicholas Ray 91af0e098d Make search toggleable at smaller screen widths
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
2021-07-14 00:14:45 +00:00
bwang 0a75e2e627 Ensure userAvatar icon is only used in logged in users
Additional change: A bundlesize increase is required given
recent developments in the user menu.

Bug: T284748
Change-Id: I2b0981d621c3add42731e50d5aef299b32548b4a
2021-06-30 22:41:47 +00:00
jenkins-bot 6597bc7d86 Merge "Collapse header at lower resolutions" 2021-06-30 22:11:34 +00:00
jdlrobson 6777c5b1fe Collapse header at lower resolutions
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
2021-06-30 21:43:35 +00:00
Sam Smith 445ba883a2 search: Disable query highlight for some languages
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
2021-06-30 16:47:46 +01:00
jdlrobson 7d32418513 VectorUseWvuiSearch should reflect production config
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
2021-06-21 13:26:55 -07:00
bwang 8389de9cb9 Update user menu icon and storybook
Bug: T284748
Change-Id: Icdbfd882490b380871befd3c6606c4b48d225132
2021-06-18 20:30:55 +00:00
Clare Ming b80d97b1e8 Prefix user links menu items with icons
- 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
2021-06-07 18:10:54 -06:00
Roan Kattouw 02638ff59d Use the new wvui-search module from MW core
Depends-On: Ifa3abeab2a929e15597fa51b95b4442fe818ef31
Change-Id: I24712ca8e4d9558a17c029a4c59484dc0f5b8fad
2021-06-02 13:40:20 -07:00
jenkins-bot a15fd2eb80 Merge "search: Add option to disable highlighting query" 2021-06-02 19:21:30 +00:00
jenkins-bot 0141be5080 Merge "Create new user menu template for consolidated user links in logged out users" 2021-06-02 19:09:54 +00:00
Sam Smith 2b05a6a203 search: Add option to disable highlighting query
... 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
2021-06-02 18:51:01 +00:00
bwang 298f945983 Create new user menu template for consolidated user links in logged out users
- 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
2021-06-02 09:23:22 -05:00
Volker E 42216de481 Change search button msg key to `searchbutton`
Bug: T280405
Change-Id: Iea3bf40be029eaa330101b7b9a1bdea191d71416
2021-06-01 15:48:09 -07:00
Jdlrobson efaf3aadf3 Remove mw-body-content from HTML that is not the article body
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
2021-05-14 00:01:52 +00:00
Clare Ming dc0b679bfa Consolidate user links into personal dropdown menu for logged users.
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
2021-05-06 12:49:39 -07:00
Nicholas Ray 49f2b25737 Create A/B test harness for Language in header feature
* 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
2021-05-04 14:41:53 -06:00
jenkins-bot e637cef2c2 Merge "Add config for language in header for logged in/out users" 2021-04-16 17:49:43 +00:00
Clare Ming 8cab50874c Add config for language in header for logged in/out users
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
2021-04-16 10:38:28 -06:00
jdlrobson afaa02ae42 Adjust floating override
Follow up to I3234e7712b8c111b070c35e38425c865ff7213f9
Do not disable the feature entirely as it has other purposes.

Bug: T280260
Change-Id: I47d16eb8186efa83e158713d852b443bce9aee1c
2021-04-15 17:18:29 +00:00
Jan Drewniak edd2f4ff85 Reorganize LESS files to match ResourceLoader conventions
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
2021-04-08 15:47:56 +01:00
jdlrobson bdd7eaacf1 [legacy] Restore old floating style inside Vector
This is a modified revert of Ia1eec412111e8f6af3b45affdc186d9eafd4262c.
This is not applied to modern Vector, for reasons given on ticket.

Bug: T279008
Change-Id: I3234e7712b8c111b070c35e38425c865ff7213f9
2021-04-05 15:07:07 -07:00