Following-up I00b4d2fd795195cd9c8add650a3b3cafdced5465
it's now time to settle on `.vector-menu*` classes.
Change-Id: I8669d402b6b757cd5bf59a5e0df377b6023b0700
There's a longstanding Chrome bug that causes CSS transitions to show in
their terminal states. This patch works around the issue by limiting
transitions to JavaScript users only via the `client-js` class which is
added to the root `html` Node some time after page content loads. The
effect is a better overall experience for everyone but transitions
unfortunately no longer appear for no-JS devices.
I am unable to reproduce this issue in Vector's configuration. This
patch should only be merged as a last resort.
Bug: T246419
Bug: T234570
Change-Id: Ifcb2bf1fddb85113a4858b7a210ded3954952e6e
By using `rgba()` instead of `transparent` the color gradient
calculation works as expected in Safari as it does in all
other browsers.
Also using same distance 33%/66% for gradient start and end.
Bug: T254489
Change-Id: I64ec6aa51a9ea931a2351c9c7a9ffaf28c8d130b
It's advisable to rely on default icon color and set it's color
by opacity. With that we've got a better playing field to respond
to user interaction with icon color changes, not relying on
several icons at once for different states and also being
backwards-compatible for a variety of browsers.
Change-Id: Iaff869774007ed962104d704103f0392a3516f4f
Bug: T246419
The sidebar button's icon previously used pixel dimensions while the
button itself uses ems. This caused the button to scale with the user's
font such that the icon is distorted and unrecognizable.
This patch drops the vertical margin and sets the icon height to 100%.
The width is proportionally constrained so the effect is that the icon
may grow with the button but the margin stays consistently at 12px.
This approach deviates from other items in the header (globe,
notifications) and tab bar (watchstar, search icon), that were
historically implemented without the user text zoom capability in mind.
Bug: T246419
Change-Id: I2ae46fd49dcb619004587b8b3560b9115c3bdaaa
Using 'skin' as entrance point files, similar to already existing
convention in MediaWiki land with 'skin.json' or 'SkinVector.php' as
example in Vector skin. Replacing Apache inspired 'index' convention.
Also renaming legacy to 'skin-legacy' to be clear on file base that it's
a modification of 'skin'.
Bug: T249073
Change-Id: Ief1c469724d4ffe238d307407c3ddb46f2e1abfa
Given the regression, we can't make this rename just yet. Restore
the old class with the documentation block that should have been there
before. We'll deal with this rename later.
Bug: T253912
Change-Id: I0672b05bc3eb9564e1943ee8099bafb959dc474d
Add a menu button that toggles the panel's (also referred to as a
sidebar) collapse state. When the screen is wide enough, animate the
transition.
The menu icon from OOUI is copied into Vector to avoid two
ResourceLoaders modules (collapseHorizontal icon isn't ready for
inclusion in the OOUI icon pack and ResourceLoaderOOUIIconPackModule
doesn't support images).
Additional polish and collaboration is needed but this patch fulfills
the scope of its referenced task.
Bug: T246419
Depends-On: I8e153c0ab927f9d880a68fb9efb0bf37b91d26b2
Change-Id: Ic9d54de7e19ef8d5dfd703d95a45b78c0aaf791a
The .menu class historically only needs to apply to dropdowns.
the .vectorMenuCheckbox is inconsistent with the other classes on the
menu so we should begin its deprecation.
Bug: T253329
Change-Id: I00b4d2fd795195cd9c8add650a3b3cafdced5465
The opt in link is part of the sidebar in the current modern version
of vector. The legacy sidebar has been split out and frozen. For this
reason I think it makes sense to move the styles for the button into
the sidebar stylesheet.
The class name is renamed to reflect the hierarchy. We are not using
BEM but we are using hyphens to describe location so the newly proposed
names `mw-sidebar` and `mw-sidebar-action` seem more applicable than
the previous generic class names.
This doesn't impact caching given anonymous users cannot see the opt
in/out link.
Change-Id: I2991e941592a0678f40c73bb6daeab71ada6b7c3
Split out the sidebar in advance of significant Latest mode only
changes.
The Less split was made by adding a new Sidebar.less file that imports
the Legacy implementation.
The Mustache split was made by file copying the existing implementation
into a legacy/ subfolder. Both the Legacy and Latest implementations
were then stripped of templates not applicable to their modes.
These changes are aligned with the splits for JavaScript.
Bug: T246419
Change-Id: Ib82769ea16bfc09efe8a088220aab55bdde0d381
Removing `white-space` on `.vector-menu` as we couldn't find any
use case of this any more and it's breaking DRY-ed up Menu in portals on
modern Vector.
Bug: T252717
Change-Id: I87a64e64c02a6690a7ecea93ce7712619457d575
* Standardise the menu markup. This means all menus in Vector will now
be wrapped in a div and will have a heading.
* All menus now have the vector-menu class. Styles specific to personal tools
are moved to layout since these are concerned with placement.
* The ul class will always have menu class.
* emptyPortal class is generalised into vector-menu-empty for consistency
with other classes and moved from common.less into Menu.less
* Standardise hooks - BaseTemplateAfterPortlet can now be run on any
menu.
Changes to HTML:
* lang and dir attributes are moved from the h3 up to the div element
.vectorTabs, .portal(s) and #p-personal now has hidden span element inside h3
* for non portals ul.menu" is now wrapped in a div.vector-menu-content
This change does impact the following CSS selectors which will need to be updated:
I see no matches for these selectors in code search.
```
#p-variants > ul
#p-namespaces > ul
#p-personal > ul
#p-views > ul
#p-cactions > ul
```
Using global-search.toolforge.org I see one match
for p-variants, 26 for p-namespaces, 30 for p-personal,
36 for p-views and 7 for p-cactions. I see this as acceptable
breakage provided a user notice is sent out which it has been
(T252447)
Bug: T249372
Change-Id: Id59234aa6b822a24848386bdc04d8d7ed37ca145
To complete the refactor, the Portal is also refactored
as a Menu using the getMenu function.
An old code path supporting portals outputted by hooks with
strings is marked as deprecated to simplify this code in future.
array-portals-first -> data-portals-first (the value is not
an array)
Changes:
* $this->getLanguages and $this->getToolbox() always returns an array (see BaseTemplate)
but we previously supported portals made using raw HTML. Let's move away from that
behaviour and deprecate it.
* Hooks are moved into buildSidebarProps and marked as deprecated where possible
(SkinTemplateToolboxEnd). SidebarBeforeOutput can be used instead.
Bug: T249372
Change-Id: I2549af3e24e5d51c09e9a88ca50a0d9b2e154c3f
Moving styles from the existing styles to common/layout
or components stylesheets they should be associated with.
Components are identified using PascalCase. Lowercase names are used for things
that are not components. This distinction should help us reason with the code
better and make it clearer where CSS belongs, saving us lots of wasted
effort discussing conventions.
Patch isn't making actual CSS changes themselves - for testing purposes this
should be a NOOP.
In preparation for the gradient removal,
'background-gradient.less' is marked as legacy.
Merged 'externalLinks.less' into content.less, they belong to content.
Bug: T249073
Change-Id: I8dbc29b7a19f7613b57b0984a8befaeae9c08798
The classes were recently changed so provided this is merged before
next branch cut no need to worry about cached HTML.
Bug: T249073
Change-Id: Ib20c7a359bda858df89ebb245e682d321dd5acd0
the PersonalMenu should be generalised. In future we will use it as
the template for all menus
Bug: T249372
Change-Id: Id1c43d2e9eefef1d7aec45f0137e27f10ad935df
Changes to support feature:
* ResourceLoaderSkinModule logo features are dropped
* New layout provided given the fork in layout between legacy and new.
* Legacy sidebar styles now pulled out
* breakpoint styles are not carried over from legacy Vector
The new Vector layout for now has one breakpoint.
Changes to storybook:
* The storybook script now pulls down image assets so that the logos can
be shown in storybook. The script is adjusted to make use of a static folder to
serve these images.
Note:
* The legacy mode is not touched as part of this patchset.
* The personal menu is unaffected by this patch and is out of scope.
* The alignment issue is noted, but will be solved at a later date.
* Changes to portal are out of scope.
* Adding storybook for modern descoped, given its not possible to load
both legacy layout and modern layout inside a storybook at current time.
Sample config:
$wgLogos = [
'icon' => 'https://di-logo-sandbox.firebaseapp.com/img/globe.png',
'tagline' => [
'src' => 'https://di-logo-sandbox.firebaseapp.com/img/tagline/en-tagline-117-13.svg',
'width' => 117,
'height' => 13,
],
'1x' => 'https://en.wikipedia.org/static/images/project-logos/enwiki.png',
'wordmark' => [
'src' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg',
'width' => 116,
'height' => 18,
],
];
Coauthor: Aron Manning
Bug: T246170
Change-Id: Ibc4b055150761388a6b78f9127da342c451ce0e7
- Removed `#mw-head-base`.
- `#mw-page-base` -> `.mw-header-placeholder`.
- `#mw-head` moved down to `@height-header` to make space for new header.
- Content moved down to `@height-header + @height-tabs`.
Added Less variables:
- @height-header: 69px;
- @height-logo-icon: 50px;
- @height-header--inner: 54px;
- @height-tabs: 2.5em;
Style splits:
- Added Header.less
- @height-header: 2.5em;
Bug: T246170
Change-Id: I07280c4c7a2054439153e76359f712281049df0b
In I23f18fc5f078da3331cad540bbaf533d348f2108 layout was pulled out
into a separate file and we changed the ordering of our CSS.
This was done with the thinking that media print queries would be
mixed with media screen.
After discussions with Volker, I have been convinced this was a
mistake.
media queries of the same type can be nested so the @media screen
is removed from layout.less and the media query in index.less will
be used instead.
Change-Id: I3aab00c9bcc734ea1ba5a9cf242c6e36ac1cc076
Replacing deprecated `@colorFieldBorder` with WikimediaUI Base equivalent
`@border-base` shorthand.
Also replace `@borderRadius` with new base and static `background-color`
values.
Depends-On: I2e2277957b79b81909b80a6c0b7b2220be6ba903
Change-Id: I90bb0eb0c2206483f71f0553dfb590d9df2c5781
Does not add `.mw-footer-*` CSS classes to `ul#footer-*` and
`li#footer-*-*` to save bandwidth.
NOTE:
- The former id selectors can be removed form the styles after the varnish cache
is updated with the new DOM.
- The modern version still uses the legacy layout at this stage.
Bug: T248137
Change-Id: Ica9f8c43617c624648fa12dc86ebb3daa10f0409
Going into the new version of Vector, we'll want to rewrite the layout
rules entirely and decouple the sidebar from the logo.
To prepare for this we will move the layout file into a legacy folder.
We also separate Sidebar styles needed for the legacy mode from the old mode.
This will allow us to make changes to the header in new Vector without having to touch
or test the legacy codebase via a new file layout.less and using the existing sidebar
code.
Bug: T246170
Change-Id: Ieb4f8f2b2f0e4f48d76a210ab30acd08e3e83bcb
In new Vector, the logo will no longer be present, so we need a more
future proof way of determining what the first portal is.
A new class `portal-first` is added (no decision about adopting BEM
has been made yet).
Cached pages will continue to use the old selector for now.
Change-Id: I6ac4493bb1f63686b48ff0c22b18d50d9fffb51d
Amending Base10 to slightly darker `#202122` to fulfill WCAG
requirements in connection to Accent50.
Also sligthly adapting hover derivative to `#404244` and amending
corresponding opacity hover value.
Bug: T248393
Change-Id: Id72829d837d9e8d37bbec6092e5055f7c182db7a
This unblocks work on the header which will rewrite the layout
code.
This corresponds to a 0.06kb increase in CSS size, which is zero
after gzipping.
Bug: T249073
Change-Id: I23f18fc5f078da3331cad540bbaf533d348f2108
Adding `margin-top` property only with sibling selector for now
until cache is cleared.
Also removing already inherited from
`.mw-body-content` properties `position`,
`font-size` and `line-height` of same value.
Bug: T248761
Change-Id: I1ea5e08927a96ac69c1b65f248ae0420968b4d00
Going into the header work, we'll need this variable available so
that we can align the header with the personal tools menu.
Per Volker's request we change the value to `px` from `em`s.
Previously it was 5.28333px. It will now be 6px.
Bug: T246170
Change-Id: Ic1514e8592db8ef168fc846b8f8e485fdd465e49
Instead, for the subset of Grade C browsers without SVG support (currently
IE8), we remove the icon and display the label text instead –
in a hacky, but acceptable way.
Bug: T248062
Change-Id: I87660b69fe65b9ec2989ea606e5f76d427c28fee
Move all the LESS `z-index` settings to variables.less so it's easy to
conceptualize how UI will be layered. jQuery CSS rules are untouched but
documented.
Also, remove the seemingly redundant re-setting of the `mw-searchButton`
`z-index`:
#mw-searchButton
z-index: 1;
}
This rule was added in 0c77e4f.
The sidebar work will require `z-index` properties and this refactor
eases the comprehension of those changes, as well as prevents the
accrual of more `z-index` technical debt.
Bug: T246419
Change-Id: Ic112a0ee3f701f87432838797be45c6069fdb522
It is not the most useful of components and adds an additional layer
of complexity similar to multiple inheritance chains that we find in
Object oriented programming.
I suggest we use index.mustache going forward for laying out the different
components and use components/template partials for reusable components.
Change-Id: I6fd5fe1c3d3826d737ccd8ed5a38890305664876
This adds the same end margin as the portal container making the
opt-out-link more visually pleasing if it overflows its container.
Bug: T243281
Change-Id: I42eb3ec4a18ad9e4f6bcdb451593fec7e6e4992a
IE 9-11 cuts values 2 digits after the decimal point leading
to small miscalculations throughout the interface derived from `.mw-body-content`'s `em` value.
With `calc` it's forced to use same parent value for its
rendering calculations.
Bug: T102364
Change-Id: Id4ba39bc90174bab445ae0fb4d039c28a4f0b300
This commit is singularly focused on adding a link to the sidebar for
Vector, logged-in users. It does the bare minimum to fulfill the
requirements of T243281.
Additionally, it will help to answer the question "Do we need to use
abstractions (other than maybe different templates) to separate Legacy
Vector from Vector" by intentionally leaving out any abstractions in
order to make it easier to compare with a follow-up patch
(Ib2ef15180df73360cc1de25b893e49d415d23e1a) which does use abstractions.
It is a good thing to question whether or not we need addtional
abstractions in VectorTemplate and if they will help us as unnecessary
abstractions can have the opposite effect and just lead to further
frustrations down the road.
Therefore, I urge you, the reviewer, to let me know your thoughts! If
abstractions are viewed as not making our lives any easier, the
follow-up patches may be completely discarded and that's totally okay
with me. :) I think it's a good think to talk about now though.
Important changes:
* The VectorTemplate constructor was changed to allow injecting the
config, templateParser, and isLegacy boolean (only the config was
allowed before this commit). According to MediaWiki's Stable Interface
Policy, "Constructor signatures are generally considered unstable unless
explicitly declared stable for calling" [3]. Given that VecorTemplate's
constructor is not marked as stable, it is justified to do this without
warning according to the policy.
* Due to the above, the 'setTemplate' method is no longer needed and was
marked as deprecated.
* VectorTemplateTest was made to adapt to the new VectorTemplate
constructor. Additionally, it now extends from
MediaWikiIntegrationTestCase which my intelliphense server can pick up.
I *think* MediaWikiTestCase is just an alias to
MediaWikiIntegrationTestCase [1] and MediaWikiTestCase file was renamed
to MediaWikiIntegrationTestCase in [2], but I'm willing to change it
back if there is pushback to this.
Open questions:
* What are VectorTemplate's responsibilities? To me, it acts right now
as a controller (because it echos the full HTML string from the
template), a model (because SkinTemplate::prepareQuickTemplate sets data
on it which it later retrieves through `$this->get()`), a presenter
(because it adds data tailored for a web-centric view), and a view
(because it renders HTML strings instead of letting the view/template be
solely responsible for that). Arguably, some business logic might be
mixed in there as well (because it checks to see if a User is logged
in/has necessary permissions to show x which my changes here add to).
This might not be a problem if we keep VectorTemplate relatively small,
but will it remain this way as we progress further in Desktop
Improvements?
* How do we write tests for VectorTemplate without exposing unnecessary
public methods? For example, if I want to test the `getSkinData()`
method to see what state will be sent to the template, how should I do
this? One option might be to use `TestingAccessWrapper` to expose these
private methods which is what
`VectorTemplateTest::testbuildViewsProps()` does. Another option is to
accept this method as public. Is there a better way? Keep in mind that
even with access to this method, there might be many things to mock.
[1] 0030cb525b/tests/common/TestsAutoLoader.php (L64)
[2] Ie717b0ecf4fcfd089d46248f14853c80b7ef4a76
[3] https://www.mediawiki.org/wiki/Stable_interface_policy
Bug: T243281
Change-Id: I0571b041bcd7f19bec9f103fa7bccdd093f6394d
To have a clean break for upcoming changes we will duplicate
index.less into legacy.less and create a new module to clearly
separate new styles from old.
The preferred name however does come with some caching challenges.
Cached HTML served to anons will continue to load the style module
`skins.vector.styles` for a period of 1-4 weeks
Provided we are careful with our changes during this period this
should be okay.
Change-Id: If32b59036e5cd62cbb804944ca93fa1a101c5129
Move print LESS variables within the print media query. When these
styles were collapsed into an index.less import via ac069fb, they lost
their outer print media query which caused them to override screen
styles.
Bug: T247537
Change-Id: I45502facd27f4a7a6c33436da2f1870bbd91a4ff
Sets
* `-webkit-appearance: none;` for iOS and
* `-moz-appearance: textfield;` for Firefox that also applies
`-webkit-appearance`.
Bug: T247299
Change-Id: Iefc77bba54b85442862176e1875974f19b64193b
Move styles.less to index.less and import print.less from it. This keeps
the reasoning about styles constrained to LESS instead of spread out
over LESS _and_ ResourceLoader. The former is preferable since LESS is
more standardized than ResourceLoader.
The approach of moving styles.less to index.less and then referencing
print.less was chosen with the intent that it'd be easier to assume
styles are screen styles unless a media query says otherwise.
This patch also makes the variables import common among print and screen
styles.
Bug: T246419
Change-Id: I981d0937aaacb7cba082c337f98c90e90b46b340
Prior to this patch, Vector used a mixture of LESS media queries and
ResourceLoader (RL) media queries[0]. So far as I can tell[1], the
latter only instructs RL to wrap the contents of a LESS file within a
query (there are no conditionals placed on style loading). Further,
according to a coauthor of RL (Roan), RL media query support was most
likely a replacement for `@media foo { @import foo.css }` to inline
print styles from a separate style sheet which Vector itself does not
use. The LESS solution is much more intuitive since it's not MediaWiki-
specific and only the LESS code needs to be considered instead of LESS
_and_ the RL configuration in skin.json.
This patch moves both screen media queries to screen.less for the
aforementioned consistency and to avoid nesting queries. It is hoped
that these changes will help make future work easier, such as those to
margin likely to take place in making the sidebar collapsible.
[0]: https://www.mediawiki.org/wiki/ResourceLoader/Developing_with_ResourceLoader#Media_queries
[1]: http://localhost:8181/w/load.php?debug=true&lang=en&modules=skins.vector.styles&only=styles&skin=vector
Bug: T246419
Change-Id: Ic0adfa254f3e81dfa87a26899f3aa585645956f1
* VectorTabs.stories.js and Navigation.stories.js were updated to
reflect this change.
Bug: T243281
Change-Id: I96a3b9b2c9a8d799a5835de1f296bc1a779803ee
This will help with the encapsulation/reusability of each component.
* Stylesheets were renamed to reflect their respective component name
(e.g. search.less became SearchBox.less)
* Styles were isolated to each component:
* navigation.less now only contains classes that are relevant to
Navigation.mustache.
* personalNavigation.less, search.less, and tabs.less
imports were removed and made first-class styles.
* several selectors were moved into common.less
* #p-logo was moved into sidebar
* tabs.less was renamed to VectorTabs.less and styles specific to
VectorMenu.less were put into VectorMenu.less
* Storybook was updated to reflect changes
Bug: T243281
Change-Id: Idf90ee2a0f1c1d08a31cf50099c0bebc7b67e619
Use same code as in MinervaNeue. For unknown reason, Chrome
decides in 2020 to suddenly show search cancel button.
Change-Id: I5c813a2ea68929c05f5d061d46c027934853dbf8
Thanks to the dependent change, the print logo is now provided
in core so we can remove the custom Vector ResourceLoader module
ResourceLoaderLessModule is replaced with a ResourceLoaderSkinModule
and gains the features capability replacing the need for
'mediawiki.skinning.interface' making use of the changes added in
6845912bcf1.
Note that for cached HTML both 'mediawiki.skinning.interface'
and skins.vector.styles will be loaded. We can avoid this
by renaming skins.vector.styles if necessary (but I'm not
sure if we'd want to do that)
Bug: T232140
Depends-On: I00899c16c0325f36b671baf17e88c2b5187b3526
Change-Id: I569e0d800e147eabc7852567acd140108613f074
- Update package.json with the new dependencies.
- A script storybook.sh pulls down CSS and LESS imports from external
dependencies. This copies the approach taken in Popups and MobileFrontend.
- Icons from external repos are maintained within the repo in SVG-only form.
Using load.php modules is also possible, but will pull down other unnecessary icons
and break if any of these modules are changed. Decided that we should manually maintain
these for the time being given there are only 3 icons.
- Several LESS files now import the variables file. I think it's useful for stories
to only import the CSS they use as this encourages us to modularise our CSS. Before these
imports were not necessary as they inherit imports from index.less. This will have no impact
on the bundle size as the LESS compiler silently discards duplicate imports
- stories/utils.js provides a useful placeholder function for generalising our hook entry
points.
Bug: T242674
Change-Id: I722e84d2fb57653a2f96142dc3e5248043261746
A resources folder is the defacto-standard across mediawiki repos.
Vector now mirrors those by describing where files served by ResourceLoader
are located.
Change-Id: Ib7d8575112e8afaaa84221a6f30a15b34b51eb24
