- 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
Move all Vector JavaScript to ResourceLoader `packageFiles`[0] which are
much more compatible with modern development practices:
- The entrypoint is the first `packageFiles` entry (unless specified
otherwise). All other JavaScript must be explicitly executed.
- Remove a level of indentation due to IIFEs from every JavaScript file.
Regretfully, ESLint does not support modules except in ES6+ so the
otherwise useful `no-implicit-globals` rule must be disable. The
change comes with a comment so we always remember.
- IDEs and other tooling understand Node.js-like `module.exports` /
`require()`.
This change seemed the most sensible way to start developing new
JavaScript in Vector needed by the collapsible sidebar.
[0]: https://www.mediawiki.org/wiki/ResourceLoader/Package_modules
Change-Id: I287e604d5b1055aa97b5f987c24872755757ea1a
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
Lift the mists of confusion by checking that all JavaScript types align.
No ignores! This is the JavaScript equivalent to Phan.
This patch adds the necessary infrastructure for verifying typing and
fixes the few flaws found.
Bug: T239262
Change-Id: I2557471421196ea46cd13dfb786a52968fbfcc97
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
* jsdoc.json was copied from Minerva. The markdown plugin from that
config was removed since there no usages of that in Vector.
* Added latest jsdoc dependency to package.json
* Copied 'jsdoc' task from Minerva into Vector. Revised storybook output
so that multiple docs (storybook + jsdoc) could be in /docs
* Made collapsibleTabs.js JSDoc compliant (This was really the only
thing using jsduck syntax)
* Modified Gruntfile stylelinter to ignore docs folder
Bug: T239258
Change-Id: Id07d591ffe7bf0ac021109051e89b91ffdcf4c78
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
