Commit Graph

71 Commits

Author SHA1 Message Date
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
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
jdlrobson a220e553eb Fixes transition from input focus state to WVUI focus state
VueEnhancedSearchBox tries to mimic the styles of WVUI to get a
seamless transition however doesn't account for the focus state that
shows briefly while this occurs.

This was leading to the icon jumping as it transitioned.

Bug: T279015
Change-Id: I10a4ec5d64bb58e2f21506c8a09a1bb6c34ecd65
2021-06-29 14:39:10 -07:00
bwang 0c8154f1bd Update search loading animation delay to 500ms
Bug: T273093
Change-Id: I517bb80a9557c85607ae3588bb44dc83cbeb1dc0
2021-06-24 17:18:16 +00:00
bwang 8389de9cb9 Update user menu icon and storybook
Bug: T284748
Change-Id: Icdbfd882490b380871befd3c6606c4b48d225132
2021-06-18 20:30:55 +00:00
Jan Drewniak c26ae0f965 Move "logout" button to bottom of user links menu in modern Vector
For modern Vector, removes the logout link in the user menu and places it
below that menu by appending it to the html-after-portal property of the
skin data.

Also modifies the `.vector-user-menu-login` style to accommodate both the
login and logout button.

bug: T281791
Depends-On: If82a736e37174aaadd0ff07019a1fae3759a9e51
Change-Id: I7675230e09a50eaeab448182329f850ad2689514
2021-06-14 23:40:19 +02:00
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
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
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
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
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
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
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
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