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
the user-links-collapsible-item class now applies to list items
not links
Follow up to 05a02a39fb59117c522678001d79b0d9dfdf63ca
Bug: T285960
Bug: T276566
Change-Id: I04fa303c4e95373fdf5ff090de1bba030386c286
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
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
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
- 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
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
Have a single template for the UserLinks component, with a single
element wrapping all its subcomponents as discussed.
Change-Id: I35936a6fa1ba335639ca3f47fd439a3662268fca
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
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
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
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
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
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
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
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
* 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
* 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
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
* 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
Reorganizes the variables into sections in layout.less.
Also removes a few variables that were only used once for the calculation
of other variables (e.g. `@min-width-container-base`,
`@margin-horizontal-sidebar-button-icon-ems`) as well as
variables that were just multiplied by 2, e.g.
`@padding-horizontal-page-container-total`.
Change-Id: I4a3fc3111f7983a55b7992bee09c03a7ab4092b8
Following Design Style Guide guidelines slightly decreasing icon on
canvas in accordance with designers.
Bug: T213580
Change-Id: I0ea2426f4e0873b9aac12fe2143203a765e42c3a
This removes the problem with the Echo icon being visible on top
of search when the browser is resized to 500px with Echo installed.
Change-Id: I6aba17cb85979617a55e9879518eacdb916ac18b
The max-width layout uses a mix of ems and px.
the var `@max-width-margin-start-content` uses ems to define a max
width breakpoint, however the workspace and content containers
`@max-width-content-container` are defined in px.
This leads to layout bugs like the sidebar ovelapping when the base
em unit is not the assumed 16px.
This patch changes the layout px units to ems.
(There should be no visible difference at the assumed 16px font size).
Bug: T270104
Change-Id: If8f284dc5e27c8e1c10f3a6897b7a5e4b8bb357d
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
Looks like I72165ba3784da3fcc9d1dd7076b3a6c96e670a2f removed the hover.
This brings it back.
Note this also makes the language button hoverable and will probably
need an additional specific selector (although the language button has
not been enabled anywhere yet)
Bug: T273143
Change-Id: Iac0539313eca5ba8d7ac165d31d2c028e803eacc
* change color to #202122 (currently it's #54595d)
* padding-right for button text should be 30px (currently it's 40px)
* language icon seems to be displaying at 21x21px (should be 20x20px)
* language icon's margin-right should be 7px (currently is 14px)
* the down arrow should be 10px from the right edge of the button (currently it's 8px)
(requires core change in 661497 to apply)
* increase font-size to 16px (currently it's 13px)
* add a max-height of ~65vh (or something similar)
* add overflow: scroll
* add a border-top (since the menu is wider than the button)
Bug: T268241#6805123
Change-Id: I8891556cb82450db77b90837eeeb72ac78926e29
* We add the `.mw-interlanguage-selector` class to the
.vector-menu-heading in the server rendered HTML. `ext.uls.interface.js`
later attaches a click handler to this selector that loads the rest of
ULS.
* We hide the dropdown arrow for js users and only show it again if
ext.uls.interface module isn't installed or is not being loaded.
* When the `ext.uls.interface` module has been loaded, we hide the checkbox
and checkbox hack menu in favor of showing the ULS popover.
Additionally:
* Adds '.vector-menu-heading' class to menu headings.
* Change h3 selector to `.vector-menu-heading`.
Bug: T273232
Change-Id: I6f4572c16ca4096dcda3aac4d585003b93dcccfa
For now the core button mixins are used. In the longer
term we should aim to leverage wvui.
Bug: T268241
Change-Id: I334af039567c52462bcb4c15f07242c6de8eeace
This breaks existing integrations with extensions which will need
to be revisited as part of this redesign.
Change-Id: Iabf627e6926d4574f27448400d76210386ebdaa2
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
Per T270202#6767750 the input should expand when focused before WVUI
loads. However, the input should *only* expand when `showThumbnail` is
`true` in `$wgVectorWvuiSearchOptions` to match how its done in WVUI
where it takes into account the size of the thumbnails. When
`showThumbnail` is false, it should not expand as the input won't match
WVUI and the WVUI load transition will be jarring.
To test locally, toggle between true/false in your LocalSettings.php:
```
$wgVectorWvuiSearchOptions = [
"showThumbnail" => false,
];
```
Bug: T270202
Change-Id: I70277c1082a504fbd5f6023e9873e8071de7e35d
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
Instead of aligning the dropdown list to the starting edge of the
"more" button, this aligns the dropdown list to the end of the
"more" button, preventing any potential horizontal scrolling.
The containing list box is right-aligned, but this does not affect
the text alignment.
Bug: T267325
Change-Id: I8b889f8314519b8c6a74c661aca773b9b546657b
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
`.mw-page-container` currently has an intentional non-zero vertical
padding that was being overriden by tablet media query styles. Instead,
only override horizontal padding on tablet.
[1] d525e564db/resources/skins.vector.styles/layout-default.less (L169)
Bug: T271868
Bug: T270146
Change-Id: I736805c9febeb333ea682ba0c70b2ff4768ae397
Overriding weird UA styles to ensure maximum click interaction area on
search button in no-JS and JS environment.
Bug: T272089
Change-Id: I8600402e022c041da29b31bf828198843c2ad7c6
Follow up from Ibab9992a6aa3a60f83324b40017b53fb061991d7 (please refer
to that commit message), but using `pointer-events: none` to remove all
submit button behavior (submit behavior, cursor change, and tooltip).
Bug: T270202
Change-Id: I2bd8e88f1f497cc3b2d88c7fdad33c812d13a40a
T270202 shows the correct dimensions of the search component having a
max-width of 500px and min-width of 350px but since we set the font size
of `#p-search` to `@font-size-base` [1], I suspect the search related
variables need to account for this factor as well.
This increases the max-width of search to 500px per the spec.
[1] 30eb683a70/resources/skins.vector.styles/VueEnhancedSearchBox.less (L23)
Bug: T270202
Change-Id: I13ad550734e8a5347ed70e4b3c33102b4a13bde7
Before WVUI loads, we show a magnifying glass at the start of the input
that visually mimics the magnifying glass start icon in WVUI's typeahead
search component. Unfortunately, this element is a submit button in
Vector instead of the inert span element used in WVUI.
Although the submit button is useful for no-js users, it might be
confusing for js users. Ideally, an inert element like a span would be
used instead, but that deserves its own ticket. As a temporary easy
stopgap, changing the cursor to be an arrow instead of the pointer might
make this less confusing and discourage clicks to it.
Bug: T270202
Change-Id: Ibab9992a6aa3a60f83324b40017b53fb061991d7
* Lower the min-width from Vector to 500px
At lower resolution per mock:
* Tabs converge into single grouping
* Search input is 150px
* Sidebar rushes content below
Drop rule for mw-content-container for special pages and history as it is already
accounted for in .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container
rule.
Bug: T264218
Change-Id: I14ee75bd173fb2de1e33067f95ce09deba5bf27a
These buttons are already absolutely positioned with their `top` and
`bottom` styles set. More importantly, the min-height style is causing
the buttons to not be vertically centered in Safari.
Bug: T270202
Change-Id: I21b88af4313249d8b2b775c32d12aa1f65c2d0c2
* In Iecc3eebf0dce495400ba3d644dce39186f4fa395, a border was applied to
`.wvui-typeahead-search` to make it appear like the input box contains
the search submit button. Because of this change, we can't apply a
max-width to #searchForm when WVUI loads as it will cause the border to
extend farther than it should. Instead, we apply the max-width/other
styles to `.wvui-typeahead-search` (WVUI search's root container) and
`#p-search`'s direct child after WVUI loads.
* In I0ec3dcedaea90b01fe94e3416ee68ea33b782b4b, the start icon was moved
1 pixel to account for the input's border. These changes sync with the
changes to WVUI.
Depends-On: I0ec3dcedaea90b01fe94e3416ee68ea33b782b4b
Bug: T270202
Change-Id: I0ffd0a9225a5a9b935e09748d78ac45b17623790
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
`#mw-searchButton` is apparently used with no-js clients or if the
js-search is broken [1]. Its position and dimensions should be kept in
sync with #searchButton.
This commit:
* Ensures that the same styles, including position, applied to #searchButton
are applied to "#mw-searchButton" so the dimensions are identical. This
should also address a critique in T270202 by removing the "invisible
button".
* Applies a `client-js` selector to ensure these buttons are
only positioned to the left of the search input if js is enabled. If js
is not enabled, having these positioned to the left is confusing as the
input has no obvious "submit" button.
* Syncs the input's end padding to match WVUI's input's end padding if
JS is enabled.
[1] 465e9492bb/includes/templates/SearchBox.mustache (L12-L21)
Bug: T270202
Change-Id: Ie1bb8c68b713b3a18f90ee11b44c78b436a6d0ba
Per T270202, there should be no underline on hover. The underline is
coming from a style in core.
There should also be no bottom margin on the suggestion li elements. The
bottom margin is also coming from a style in core.
Bug: T270202
Change-Id: I215a41aa328366aee2bb552d5d49c95905fd37f2
Following Design Style Guide components sizing and Alex' feedback
on task. Changing applied styles scope to non Vue.js enhanced,
modern-only style of search component as well, in order to have
clean appearance and transforming disruption free.
Also changing em static values to LESS calculations for more developer
friendliness and change background-size to be `em` as well for
user-set typographic zoom preference ability.
Bug: T269959
Change-Id: I157712721621344171a32a8887a5e20cc16cae0d
`@margin-horizontal-search` is used for margin of search component
and for personal tools, but they are also floated right so one only
gets a clearer picture of this change when the canvas is exactly at
one specific size.
Additionally it's used for a media query, so the min-width is slightly
reduced (by 32px equivalent) as well. That's advantageous too.
At some point we're going to change this to `rem` unit, that's why I've
taken distance from changing it to a `px` value for now although devised
differently before.
Bug: T269959
Change-Id: I21cac3f049eed64520dd229ef80d10f9be853e0e
Modifies and annotates the CSS required to make the server-rendered
version of the new search form look like the WVUI version of the
search form.
Bug: T264355
Change-Id: I989860cfbb755ecbb706b79bd807e9d0013bc4e5
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
Updating 'search' icon to latest WVUI/OOUI optimized, reduced path. Also
- amending size of search input and position of icon in input slightly to
align it closer to standard text inputs
- simplify CSS by getting rid of selector which is targeting both, input and
button and applying rules only where needed
- fixing code comments
- increasing icon size to `16px` equivalent `em` to enable user text zooming
preference applied to search icon as well. `16px` is a compromise towards the
old look and feel of the previous icon bringing it closer to standard icon size in
legacy Vector.
This change affects both modern and legacy versions of Vector.
Bug: T266166
Change-Id: Ib4c0c74d3cac30e1893f4c76e56e1197652d41ba
Replaces vector search icon with an update version that is
copied from the OOUI icon set and used in WVUI search.
This update will help us unify the visual appearance of the
existing search input with the one in WVUI.
Bug: T264355
Change-Id: I34792ee80e711b10b441668cc4ae18cc0cc9daa6
There are popovers such as the discussion tools "Add a link" popover
that need to stack on top of the footer. This replaces the
mw-footer-container's `relative` positioning with `static` positioning
which is one possible solution to this problem.
Alternatively, the popover could be appended to the end of the body
after the footer and positioned absolutely.
Bug: T264679
Change-Id: I34168c181a1e05c33cd42f664fcccb25abd4519b
An only-child will match first- and last-child selectors
so this additional selector is not required.
Change-Id: I17d468ba2bda37edc4e54f42f42d50e4b8831b46
Following-up Iecb0d6c4c80cee1d1684597a6dedf7323e2ec54d.
It isn't set anywhere inherited, hence we don't need to set it here.
Change-Id: Ife24aa95e6d1830b8d50001976277dbb2535c47f
Dropped all usages of the no longer applicable `skin-vector-search-header-legacy`
class.
Bug: T258116
Change-Id: I16a5cf8dda2ab84ff4b505d5a368587190c409cd
Unifying blockquote spacing and border style with Design Style Guide.
Also ensuring that blockquote children don't apply inherited whitespace.
Bug: T265947
Change-Id: I43a6951c17376fe3fdd4d24966ec4661c18ffd87