Commit graph

302 commits

Author SHA1 Message Date
Clare Ming 06d0afbcb3 Update styles for user-interface-preferences in user links menu.
- Add new menu to UserLinks template.
- Fix styles for user links toolbar.

Bug: T282196
Change-Id: I42d6e6e11d76b2d25b2720a617f2fb2e545eb4b6
2021-06-05 02:01:17 +00:00
jenkins-bot 8021270bce Merge "Update UserLinks styles to use classes instead of ids" 2021-06-02 22:38:04 +00:00
bwang b5aa055900 Update UserLinks styles to use classes instead of ids
Follow up to: 298f945983

Change-Id: I5bc28501d0ae4c2597796dbf1ed9c10eacadad62
2021-06-02 22:16:59 +00: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
jenkins-bot 56916a17d1 Merge "Change search button msg key to searchbutton" 2021-06-02 10:06:24 +00: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 6300923601 Storybook should include UserLinks
Merge UserMenu into UserLinks for legacy and modern
Add a story for the UserLinks menu

Fixes: rendering of Skin (legacy) personal tools (the user icon
no longer overlaps)

Change-Id: I491ebb3962780bf2cf7f1dfb4dd09d576c294366
2021-05-27 19:27:27 +00:00
jdlrobson 96bf1e8276 Refactor: Create UserLinks component
Have a single template for the UserLinks component, with a single
element wrapping all its subcomponents as discussed.

Change-Id: I35936a6fa1ba335639ca3f47fd439a3662268fca
2021-05-25 16:57:35 +00:00
jdlrobson 3306124038 Introduce the vector-body class
This follows up I4c1b15d90bacbc9b13782a1d8f52e838ce8ecd83
In that change, a new class for Vector specific styles should have
been added and the existing CSS referenced. I could have sworn I did
this, but obviously not (perhaps a git rebase or unstage change problem).
We did it for the other skins e.g. Monobook (I90d85c21f4a62e6697f24e3ce388445a0a53c2b0)
but evidently not Vector.

We also have to worry about cached HTML now, the #bodyContent is
the most reliable selector to use for before and after
I4c1b15d90bacbc9b13782a1d8f52e838ce8ecd83

Additional:
Remove the mixin-clearfix rule on bodyContent - this is now
redundant with the changes in T279388 and should have been
removed.

Bug: T283206
Change-Id: I15103cea72c793589a03ab1a3e7f3b377acb287f
2021-05-21 13:50:31 -07:00
jdlrobson 6998c536d4 Both UserMenu stylesheets should be shipped in modern
Since we have feature flagged the new user menu feature, it is
imperative we load both sets of styles until the feature has
shipped. This allows us to switch seamlessly between the two
without worrying about cached HTML being served with updated CSS.

To do this, we add a new class to both user menu's distinguishing
the legacy version from the modern version. The styles are then
scoped to these new selectors.

This also fixes some regressions with the legacy user menu in
modern Vector when wgVectorConsolidateUserLinks is disabled.

Notes:
* No caching selector is needed for #pt-userpage given it can only
ever be output for logged in users.
* ID selectors in general are bad, so scoping to mw-portlet-personal-user-menu-legacy
isolates the legacy component allowing it to be rendered alongside the modern UserMenu

Bug: T276561
Change-Id: I068c5233bb25a7b141e66a6726b5761841f83eb2
2021-05-14 10:13:09 -07:00
Clare Ming 63f9dd81e3 Cleanup styles for personal user dropdown menu.
Remove redundant styles. Update personal menu dropdown to more closely reflect design of OOUI dropdown elements. Extract legcay-specific, modern-specific styles for UserMenu into separate partials. Create new shared UserMenu component.

Bug: T276561
Change-Id: I1e56cd5b3b24ac1b5cae684301b8e3a84ea33a5c
2021-05-13 23:19:54 +00:00
Sam Smith 7f780961a6 search: Wire up submit event handler
Bug: T274869
Change-Id: I5fab22564fa2fe140858cc214aac017d7bd6c68e
2021-05-13 15:29:18 +01:00
jenkins-bot 50430ea06a Merge "search: Update styling for the search loading state" 2021-05-10 20:55:31 +00:00
bwang 964e214e87 search: Update styling for the search loading state
Bug: T273093
Change-Id: Ifd7f07411597be844cb7de79e416975261069506
2021-05-07 17:04:42 -05:00
Jan Drewniak 9027d57804 Fix: update to 80d734b4, hide language dropdown when ULS loads
Bug: T276140
Change-Id: I70997fbc54554b8d1b9c271a5ca93f2a47f1ee92
2021-05-07 12:24:30 +02:00
jenkins-bot 840bc5b0cd Merge "Consolidate user links into personal dropdown menu for logged users." 2021-05-06 20:17:33 +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 8eba1da250 Silence eslint compat/compat for search performance instrumentation
Eslint is throwing compat warnings on every commit in Vector. This
commit silences those warnings.

Change-Id: I0e914c6179745415e916fadd382d86baa72e3e63
2021-05-05 14:37:35 -06:00
Jan Drewniak 80d734b4d2 Place language button near bottom of Main page.
In modern Vector, the language button that is placed inside
the page header should appear near the footer, if the page is a
Main page.

This changes some CSS selectors to not depend on the language
button having the `.mw-body-header` parent element.

Bug: T276140
Change-Id: I97bf0c11d0321752d472ac4988618a1db92b7271
2021-05-05 13:42:19 +02:00
Roan Kattouw 402b01e0ca search: Prevent double-escaping of messages passed to typeahead-search
The parameters passed to the typeahead-search Vue component don't need
to be escaped, they're already escaped by the Vue implementation. Use
.text() instead of .escaped() for the i18n messages passed to this
component, to prevent them from being escaped twice.

Change-Id: I5dcf442f6af181a99123bf7426743af01b097729
2021-04-29 11:34:48 -07:00
jenkins-bot 2acf0694c9 Merge "[search] Don't destroy #p-search element" 2021-04-22 20:14:21 +00:00
jenkins-bot 5820fa0b18 Merge "Scope right-aligned dropdown menus to #right-navigation & .mw-portlet-lang" 2021-04-21 19:15:27 +00:00
Sam Smith 9914d813d6 [search] Don't destroy #p-search element
The #p-search element is present in at least the Vector, Vector V2,
Timeless, and Monobook skins. This is because the HTML for the element
is generated in MediaWiki Core. At the very least, the
SearchSatisfaction instrument relies on the element always being
present.

Update the skins.vector.search module to simplify the App component
template so that it doesn't render a div#p-search element and mount that
component on the #searchform element instead.

Bug: T274869
Change-Id: Ifde679b62484fda7661fded2d978b78adac9f5da
2021-04-21 14:01:56 +01: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 f52c2f8a4a Scope right-aligned dropdown menus to #right-navigation & .mw-portlet-lang
Removes the global rule for right-aligning the Vector dropdown menus
and instead scopes that alignment to dropdown menus that appear
inside #right-navigation and the language button in modern Vector.

Bug: T275158
Change-Id: I6c00ccc365f70682841d9eda9d31bbe25c757aa0
2021-04-14 23:31:59 +02: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
jenkins-bot 2e8f193072 Merge "Remove redundant mw-indicator styles from layout-default.less and layout.less" 2021-04-06 21:25:04 +00: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
Bernard Wang 55fdf38714 Remove redundant mw-indicator styles from layout-default.less and layout.less
Bug: T278362
Change-Id: I76f39a9f4cf7404e7d50a272ebce08d53594ef5f
2021-04-05 16:58:41 +00:00
jenkins-bot 1b42cd8dd4 Merge "[styles] LanguageButton: Amend icon color by setting opacity" 2021-03-30 23:10:51 +00:00
Volker E 5a1a382c17 [styles] LanguageButton: Amend icon color by setting opacity
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
2021-03-30 22:13:50 +00:00
jenkins-bot d29bdb86bd Merge "build: Update SVGO to latest v2.2.2 and re-crush SVGs" 2021-03-25 23:17:31 +00:00
Ammarpad b7bf9a88a3 Use content-parser-output RL SkinModule feature
Require MW 1.36

Bug: T277218
Depends-On: I52f752aa782b09a51e2165300cc75d0e47fa3351
Change-Id: Ia1eec412111e8f6af3b45affdc186d9eafd4262c
2021-03-25 17:34:28 +00:00
Volker E 5734191840 build: Update SVGO to latest v2.2.2 and re-crush SVGs
SVGO v2.x changed configuration to JS, amending configuration.
Also re-crushing SVGs.

Change-Id: Id6379e06e6aa1c25760f8489166d354fca25cd52
2021-03-25 09:19:42 -07:00
jenkins-bot 734ced999b Merge "[styles] Remove margin normalization already covered in 'normalize' module" 2021-03-24 21:55:36 +00:00
Volker E e5b652852e [styles] Remove deprecated .box-shadow() mixin calls and cleanup vars
Removing calls to deprecated `.box-shadow()` as basic browser support
is now given unprefixed. In the course we also replace deprecated
vars with already available ones since MW v1.35 following unified
name scheme on both, box shadow and border ones.

Change-Id: Iae353c934c0995c0b6b2635761352685eb91accb
2021-03-24 14:03:25 -07:00
Volker E c8cd609862 [styles] Remove margin normalization already covered in 'normalize' module
Has been introduced before 'normalize' module, now it's time to remove
duplicated style property.

Change-Id: Idff74430655c29b67dfccf97a22f53caaee34155
2021-03-24 13:33:19 -07:00
Jan Drewniak 88dcdab6db Removing temporary .body selectors.
Per the comment, it's been a week. These selectors should be removed.

Change-Id: Ifebb7939596827fc8ade7213f3acf6bf80eebb40
2021-03-24 13:53:48 +01:00
jenkins-bot bd6770014e Merge "Inform anonymous A/B test by tracking time from navigationStart" 2021-03-23 18:29:36 +00:00
jdlrobson b183ac3bf3 Inform anonymous A/B test by tracking time from navigationStart
This will inform us on the approach taken in
I315ea30b88e43f3df29b0a0b37907272ec77d0a7

Additional change:
Flesh out TypeScript with eventLogging interface

Bug:  T275807
Change-Id: I9789cd1dfab5181fa093bce46c5c9b0d338339f5
2021-03-23 10:40:20 -07:00
jdlrobson 127422e4c6 Language button skinStyle overrides
* ULS makes the language button text font weight normal on bold,
reset this.
* Because our icon is non-standard our left margin is also non-standard.
Adjust.
* Remove opacity on language button (it applies to more menu because of
the label text color)

Bug: T268241
Change-Id: Ie9b275a857e8bcb7b767446f0523954134751659
2021-03-08 11:11:07 -08:00
jdlrobson 41d30615a2 [modern] Usability improvements to dropdown
* 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
2021-03-07 18:59:41 +00:00
jenkins-bot cf187653a8 Merge "Correct the height of the language button" 2021-03-03 19:53:23 +00:00
jdlrobson ac62386909 Correct the height of the language button
In wvui quiet buttons have a minimum height of 32px
Given the importance of vertical alignment, here inside Vector
seems the best place to define this.

Bug: T268241
Change-Id: I95b61a0c239ccfb7fa1b2ddaa6980ad2737e8f26
2021-03-03 10:03:17 -08:00
jdlrobson 1d01f70e32 Refactor: Separate Language button code into its own JS file
Having this outside the init function makes the code more
easy to understand.

Change-Id: I6bdcb385738ceb986e21075b006db40567386e7b
2021-03-03 00:13:45 +00:00
jenkins-bot 9bdd6c0130 Merge "[icons] Amend 'search' icon" 2021-03-02 18:40:52 +00:00