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
Uses flexbox alignment to resolve an issue where the
clickable area of the notification and alert icons were
overlapping with the links next to them.
Bug: T264339
Change-Id: I2afc12504d7184583fa8331479125474c68017dc
Now the header is no longer absolutely positioned the height is not
fixed and the personal tools can safely spill onto a new line
Bug: T264206
Change-Id: Ib2a3cf1907c7d06c2c92ccbd902a98a3f8242f37
On the long term we want to provide access to these variables in other
extensions. e.g. VisualEditor
Bug: T259331
Change-Id: Ibbc6f1905ea384a3d159088e3f5eca947eb6ec08
Drop support for vectorMenu, vectorTabs and
vectorMenuCheckbox, body, menu selectors in preference
for standard selectors.
This change will impact a large amount of user scripts/styles but should
not impact any gadgets.
These classes were kept around for user scripts and styles however are not
needed internally. As we transition to a more maintainable skin menu
system, it is time to lose these selectors even though this will cause
disruption.
Vector now will use the mw-portlet class rather than the vector-menu
class in its own CSS styling, however it keeps the other classes to
allow differentiation of the different types of menu.
Changes to test: Previously the tests assumed all portlets were empty
when checking the classes. This is very rare, so its better to check
the classes of non-empty portlets, so several tests are updated
accordingly to drop the emptyPortlet class.
Bug: T262092
Change-Id: I1824335eb47d613c2a4804ec1f1106c0f4c16101
Kept as simple as possible for now. The new class is added but no classes
are removed. This will be done in a follow up.
Bug: T256897
Bug: T253938
Change-Id: Ib31a9d8f2ac14e63b63e82abd4a9aa1fcb956f45
* The margin-left should only be auto at small resolutions - otherwise on large
monitors it becomes visually separated from the logo
* the margin left should be larger
* and max width should be smaller.
Bug: T261686
Change-Id: Ia1331f51764a34f113e3336735e6cfd5fde1d49d
Minor visual fix for IE9 for modern mode with search not in header.
i.e. with these settings:
$wgVectorIsSearchInHeader = false;
$wgVectorDefaultSkinVersion = 2;
Slight refactor of CSS. Removes block of styles that "reset" floats.
These were uneccessary because as flex-children, the floats were
ignored on those elements anyway.
Moves flex-wrap on .mw-header from layout-search-header.less
to layout-default.less since that's where display:flex is defined
and the rule is general enough that it should apply for different layouts.
Remove the @supports block with the `float:none;`. That is unnecessary
because flex-children are not affected by floats.
Change-Id: Ida3d2a7bc2b2f70238129df876714228fe5cdf84
This moves the header, navigation, sidebar, and article toolbar to be
before the content in the DOM. As a result, a lot of absolute
positioning logic can be removed and styles can be simplified.
Note that although the sidebar was moved from the header into the
workspace container allowing it to de-absolutely positioned, its
absolute positioning was kept intact as it has a fair amount of
complexity that should be handled in a separate task.
To activate, set `$wgVectorIsSearchInHeader = true;`
Changes that could cause concern:
* The "jump to search" link was removed as the search is now much
earlier in the DOM and I questioned the value of keeping this. However,
it can be added back in if this change is contentious.
* A "jump to content" link was added to account for the new DOM order.
* Because the sidebar was taken out of the header, users will not be
able to tab from the sidebar button into the sidebar without additional
tweaking (e.g. should we add JS to enable this?). It was deemed that
this work can be saved as a follow-up task.
* I applied `overflow-y: auto` to the `mw-page-container` because the
header's top margin was collapsing and caused whitespace to appear
between the viewport and the header. Alternatively, we could apply a top
padding to the page container and remove the header's top margin. I went
for the simplest solution but am open to alternatives.
* I left the footer as-is in this patch to minimize risk. It might be
cleaner later on to move the footer inside the workspace container which
would leave only one workspace container.
Bug: T261802
Change-Id: Ic553fab3bde25769b103d899b92b3b694c00c384
Provides a loading indicator to show while the new Vue.js based
search widget loads. Given that the new widget will pull down the
entire Vue.js runtime, it's likely that there will be a delay
before the search suggestions appear. This loader is meant to
improve the perceived loading experience of the new widget.
Adds:
- New searchLoader.js file containing loading behaviour.
- This overrides the code searchSuggest loading behaviour.
- New SearchBoxLoader.less file containing the loader styles.
- i18n message: 'vector-search-loader'.
- The Event type to jsdoc.json
Bug: T254695
Change-Id: I6b5f0a60018954e10b9e80792030b67b2ec33e5a
jenkins-bot
Volker E
Ammarpad
Jan Drewniak
jdlrobson
Nicholas Ray
Ed Sanders
Stephen Niedzielski