Commit graph

41 commits

Author SHA1 Message Date
lwatson 261eab0221 styles: Update color in Less from #d33 to #d73333
This patch promotes a consistent design decision across projects in
MediaWiki core, extensions, and skins. The darker red color meets the
W3C Web Content Accessibility Guidelines (WCAG) at Level AA that text
or images of text must have a contrast ratio of at least 4.5:1 (or 3:1
for large text).

Bug: T343239
Change-Id: I771fec3f567ea7ce5a25f8c63d88c956a27121ef
2024-02-28 17:10:08 -05:00
Jon Robson 145db70286 Reset: Drop p and div inside overlays
Required for proper presentation of page issues overlay
and multimedia viewer.

The div rules were unnecessary.

Bug: T205341
Change-Id: I6fea0f2013a11e5248b71619b795d794c8ed18ad
2024-02-14 22:20:43 +00:00
Jan Drewniak 59fd0cd5dc Convert all color related Less variables to CSS custom properties
All colors used in Minerva are converted from Less variables
into CSS custom properties. A new file called CSSCustomProperties.less
is created in the skins.minerva.base.styles module to store
these custom properties and an ADR is provided on the rationale for
dropping support for browsers that don't support custom properties.

The new CSS custom properties follow Codex design token conventions
where possible (and noted when not).

Link colors are unique because their styles are defined in core,
so in that case the Less variables values are set to custom properties.
Those values are then fed back into MediaWiki core for core link
styling.

Also adds a temporary night-mode color palette under the
.skin-nightmode-1 class on the <html> element.

Bug: T356074
Change-Id: Ida1f14138f12bd3c600c264bde7b5100f9dbf4ff
2024-02-02 17:57:27 +00:00
Jan Drewniak be0b43042e Convert Less variable names from camelCase to snake-case
Converts all Less variable names from CamelCase to snake-case
per the MediaWiki coding conventions.

Removes the following unused Less variables, mostly
related to icons, since those were converted to Codex:
- @icon-touch-area-sm
- @icon-touch-area-md
- @min-size-icon (replaced with @size-icon-medium)
- @icon-glyph-size-sm
- @icon-size-sm
- @icon-padding-sm
- @icon-glyph-size-md
- @icon-size-md
- @margin-icon-md-labelled

Bug: T350581
Change-Id: I1b16e77942d9bea20dcc5636a63d64aa2325a173
2024-01-31 15:24:31 -08:00
Ed Sanders 8ef144f936 build: Update linters
Change-Id: I5aa3ab891890b52057a5fc855315e5b1b2203037
2024-01-24 22:02:12 +00:00
Jdlrobson ca28efc9c7 Drop mw.mobileFrontend references
This restores the previously reverted patchset
If5b76245bf60bfa9cf977cdbf37ee0d6bb65f9d9

Changes since original:
* Added Depends-On to MobileFrontend
* Uses OOUI classes for page issues rather than es6 classes - ES6
classes do not support modifications to class prior to running
super so MobileFrontend's View class is not compatible without
significant refactors.

Depends-On: I24ad75adf8519102ca356d64d99d765ab69180cc
Bug: T348807
Change-Id: I4ff82af0251254c846f2caee330af5af738f6029
2023-11-10 01:30:52 +00:00
Jdlrobson 2ee3e27406 Revert "Drop mw.mobileFrontend references"
This reverts commit 19ea6328b0.

Reason for revert: Breaks page issues and image overlay. I
will break this up into smaller less risky patches.

Change-Id: If5b76245bf60bfa9cf977cdbf37ee0d6bb65f9d9
2023-11-03 19:26:16 +00:00
Jon Robson 19ea6328b0 Drop mw.mobileFrontend references
Bug: T348807
Change-Id: Ib71b43005e5788d0e29917a165281faa84926414
2023-10-31 21:54:26 +00:00
Ed Sanders a8aecda711 Udate jsdoc and use jsdoc-wmf-theme
Depends-On: Ic3861870c10f64d7f5414669a9d25b8ffb4c79a4
Change-Id: I6750e9bb6d5409e497b5605e3a4660734f5677ab
2023-10-20 13:42:19 +00:00
bwang 1918698e72 Fix page issue icon
Bug: T343053
Change-Id: I80595e3b851cdb4b9d4bdafe6ce7526a2e33afbe
2023-08-08 20:37:15 +00:00
bwang 465e66aad5 Update page issues to use new MF icon class
Bug: T343053
Change-Id: I917a4ac4d0a8af5162959f4514bc184670582b50
2023-08-04 16:50:26 +00:00
Jon Robson 484cd5912a Fixes page issue icon
The page issue icon show on enwiki:Spain is absent.
Opportunistic bug fix while here.

Bug: T340910
Bug: T340262
Change-Id: I1eb62e462c1e83adc8daea5667c8f9052dddc54f
2023-07-28 19:52:12 +00:00
Volker E 38ca243e39 styles: Replace 'mediawiki.ui/variables' call with skin variables
Replacing 'mediawiki.ui/variables.less' @import with
new skin-aware 'mediawiki.skin.variables.less' standard.
Removing calls for 'mediawiki.skin.variables.less' in favor for
'minerva.variables.less' for consistency.
Also
- replacing several static values with new Codex design token featuring
  skin variables of `background-color`, `color`, `border-*` and
  `transition` categories
- renaming several Less variables to variable naming standard
- moving a small number of MinervaNeue specific variables into
  'minderva.variables.less' file. Those should be replaced in mid-future
  by Codex design tokens

Please note, that this patch is not replacing all values with
possible Codex tokens. It's just applying them on selected
categories for consistency for now to keep the patch easier reviewable.
Further replacements will be done in follow-up patches.

Bump MediaWiki core required version to >= v1.41.0.

Bug: T319381
Bug: T332541
Depends-On: I98c8cc27527533e2efb3b987ee34bc403e988b75
Change-Id: I86c5a35377541a784552c29456e0b8b507b3ee9c
2023-04-24 16:08:27 +00:00
Umherirrender 5bd834e0c7 build: Updating npm dependencies
* stylelint-config-wikimedia: 0.13.0 → 0.14.0

Run stylelint fix to fix the new stylelint rule

Change-Id: I7738ae421e84dd3171355391ebc82dd812b39ca4
2023-03-31 21:50:36 +02:00
Bartosz Dziewoński 8c0f0c578e Remove talk page tools
Bug: T319145
Change-Id: Ib432564e1049f18334653e5eb3981f0f051582b3
2023-03-13 18:21:52 +00:00
Fomafix 0ed13f07b4 [Cleanup] Remove dependency injection of mw.msg
The use of the injection pattern for mw.msg is inconsistent
compared to mw.mobileFrontend which leads
to confusion about how to contribute to the codebase.

Change-Id: I057a8e46d43211180f9c8b8173b64fab6936d284
2022-08-26 18:23:24 +00:00
Jon Robson 0fe451b23a FIXME cleanup
- Remove cached HTML relating to heading change
( I2ffdedd64414ffb3c6e441391a75fd6e744847a4)
- Update invalid instruction for selector in footer (I0bfc7f977cdaf5ce8873103346c64121d704b86c)
It appears this rule cannot yet be removed.
- Update classes for contributions icon on user pages
(I6c908acd70c0dca5bcb1754d1b25d3da2389feb8)

Change-Id: I271abf3d29dfcfd19d654514fb3f6d6e257505ab
2022-04-06 20:17:22 +00:00
jdlrobson f9a8703a64 Minerva uses core page title handling
Bug: T265892
Change-Id: I2ffdedd64414ffb3c6e441391a75fd6e744847a4
2021-12-20 19:39:42 +00:00
Ed Sanders 1cea342431 build: Update eslint-config-wikimedia to 0.17.0
Change-Id: I0b917095bc84ff8b3a745f2d8b1e8541b9817bc8
2020-09-16 13:48:53 +00:00
Ed Sanders a32999e641 build: Update eslint-config-wikimedia to 0.16.0
Change-Id: Icabf6e065ed5685207731262db72faf848a0a04d
2020-06-04 08:39:32 -07:00
Fomafix f482ee198e Use document.body and document.documentElement as jQuery selector
The eslint-disable directive jquery/no-global-selector is not needed
anymore.

Change-Id: Ia520232d6ae94a726b5c0768a8245ab555c79112
2020-01-06 14:33:44 +01:00
jdlrobson a66f3a3cec Hardcode page issues vertically alignment
Bug: T234254
Change-Id: If14e52558631a20ea444564fa4758e20cf8ccf42
2019-10-08 20:41:31 +00:00
jenkins-bot 27f9422613 Merge "Curtail use of mw.mobileFrontend in Minerva" 2019-10-02 00:10:40 +00:00
jdlrobson 81bbd6eb48 Use consistent small font sizes
* Add @font-size-minerva-smallest and use it in place
of font-size: 0.8em across the site so that we get a round
number for our font sizes.

Bug: T229568
Change-Id: I4270225c07941b4c164d5e044f70d4b131dbc19d
2019-10-01 22:29:55 +00:00
jdlrobson ef5003f310 Curtail use of mw.mobileFrontend in Minerva
The MobileFrontend dependency in Minerva is problematic.
Code that Minerva needs should live in core.
MobileFrontend should load code on all skins when they operate on
a mobile domain.
This eslint check reminds developers of this in a hope it encourages
more upstreaming to core when possible.
Of course disabling is also an option, but this check will at least
make us aware of when we are moving further away from the goal.

Change-Id: I62183c9aefc81053e4ad81fb746decef2dd24b44
2019-10-01 14:54:59 +00:00
Jan Drewniak 2ef6119bed [ICONS] Fix icon positions in page-issues, inline and overlay
Bug: T232837
Change-Id: Ie24b38146b9361f86467d40db7b07b6a5d0655d1
2019-09-13 15:47:50 +02:00
jdlrobson c0f08790ea Remove the mw-ui-icon hacks and overrides
Note: this agitates T230232 again - when merging this please
make sure a merge for I929090848f3e04647a97f4979ec78682623fa070
is pending.

In various places we try to override the default mw-ui-icon behaviours
The hacks need to be removed as part of addressing the core problem.

Changes:
* Wherever we use mw-ui-icon-before in PHP - wrap the label with a span
so that label font-size is altered where needed - not the icon
* Where a small icon is needed us isSmall parameter for the Icon component
* Apply font-size to labels of mw-ui-icon-before elements
* The browser tests need a slight update to access the span element inside
a menu item - in the case of the logout button the label is always hidden,
so we need to check the visibility of the parent element (secondary_action)

Bug: T229440
Depends-On:  I3f803ec4c9068b30aa93b803391aa4d65d8310ff
Change-Id: I07e4ae233979636b739f1117dd7703571e0a9366
2019-09-10 10:53:20 -07:00
Stephen Niedzielski 936ec8dcb4 [LESS] remove unused variables
Identified by:

  find -type f -name \*.less|
  xargs -rd\\n sed -rn 's%^\s*(@[a-zA-Z0-9_]+):.*%\1%p'|
  xargs -rd\\n -I{} bash -c "rg '{}''[^:]' > /dev/null || echo '{}'"

Change-Id: I64e02731e9f8b69ce8e934502208c061d595b673
2019-08-29 16:35:00 +02:00
jdlrobson 7280d255c0 Dev: Prep for storybook
* Remove ambiguity in imports - say the file extension
'less' for all instances of variables and mixins.
* Separate toast styles from drawer styles so they can be
imported separately
* associate header-action selector with its parent
(.overlay-header) not parent's parent (.overlay) so it can be imported
and rendered without the Overlay.

Change-Id: Ib7e19a440ba095d6424d35305fb41d643ca9764c
2019-08-21 12:20:26 -07:00
jenkins-bot 6076c61772 Merge "Embrace packageFiles" 2019-07-16 21:21:42 +00:00
jdlrobson 72df451bd3 Embrace packageFiles
Help with readability by using module.exports and require rather than the MobileFrontend
provided mw.mobileFrontend module manager (and avoid adopting webpack at this time)

Replace usages of mw.mobileFrontend.require with local require and module.exports
(compatible with RL or Node implementation)

Changes:
* Notifications modules are merged into skins.minerva.scripts and initialised
via a client side check.
* new file overlayManager for exporting an overlayManager singleton
rather than being hidden inside resources/skins.minerva.scripts/init.js
* All M.define/M.requires swapped out for require where possible
The `define` method is now forbidden in the repo.

Bug: T212944
Change-Id: I44790dd3fc6fe42bb502d79c39c4081c223bf2b1
2019-07-16 18:04:10 +00:00
Stephen Niedzielski 21b24830b5 [dev] match page issues LESS filename to JS naming
Bug: T212944
Change-Id: I0fa44cdb26b24fff87a7c4dfd424fe4400ceee22
2019-07-16 18:03:44 +00:00
Nicholas Ray 331df226f5 Make Minerva use new PageHTMLParser.js and refactored Page.js
In I02f8645aac1d7b081eaba8f2ac92a2ef51f78182, Page.js was made into a
model and its html parsing responsibilities were moved to
PageHTMLParser. Additionally, a singleton for the current page
(currentPage.js) and a singleton for the curent page html parser
(currentPageHTMLParser.js) were introduced to replace the usage of
M.getCurrentPage().

This commit refactors Minerva to make use of these changes.

Notable changes:

* 🐛 The event bus singleton was added to references.js since it
previously relied on an instance of Skin to listen for the
`references-loaded` event. However, this event is emitted on the event
bus singleton.

* Additionally, I didn't see a reason why the `references-loaded` event
needed to also pass the current page instance when the only file
listening to it is references.js (which already has the current page
instance) so I removed that and the convoluted passing of page.js within
the file. I assumed this logic was unecessary.

* The call to drawer.showReferences in references.js now was made to
pass the currentPage instance as well as the currentPageHTMLParser. This
is to prepare for I6e858bbe73f83166476b5b2c0fdac1cca7404246 where the
getReferences() interface for ReferencesMobileViewGateway.js and
ReferencesHtmlScraperGateway.js is refactored to accept both of these
instances. Additionally, references.js was refactored to support event
delegation which gets rid of some parsing/setup logic.

Bug: T193077
Depends-On: I02f8645aac1d7b081eaba8f2ac92a2ef51f78182
Change-Id: I2f32dbcc4ebaa4bebb297cda1ecce3457922b343
2019-07-15 16:43:51 -06:00
jdlrobson 9b4c22f31f Update page issues folder structure
Tests are untouched as these will be moved to headless
node-qunit in a follow up.

Bug: T212944
Change-Id: I3d9b43387e34fd49827e3ab62420f3555ff4b3cd
2019-07-08 23:07:28 +00:00
jdlrobson daef425ba1 Minerva is Hogan free
All hail Mustache!

Change-Id: Iaf83dc27addd00ffd65d003bd5d84441965124e8
Depends-On: If00010e092e3766f9812f9a69ce0dfe22298689a
Bug: T220620
2019-04-25 10:34:01 +08:00
James D. Forrester 75a751f1c6 build: Upgrade eslint-config-wikimedia from 0.10.1 to 0.11.0
Change-Id: I36a88cbf8b468646c21d47c3b58433895e8ff31a
2019-04-04 18:01:40 +00:00
Ed Sanders eeebb86270 Avoid deprecated View.$
Replace with View.$el.find.

Bug: T216264
Change-Id: I78045c410c168bf458ab8f5537036711fc5b577c
2019-02-15 19:04:11 +00:00
Stephen Niedzielski 3dc9cff2c2 Hygiene: separate page issue view logic
- Move page issue view components that do not modify the DOM during
  during construction to PageIssueLearnMoreLink.js and PageIssueLink.js.
  PascalCase is used optimistically for filenaming in the hopes that
  these functions can become something like a JSX component. A "new"
  function prefix is used in the meantime.

- Move page issue view logic that munges the existing DOM to
  pageIssueFormatter.js. Substitute "create" prefixes for insert so that
  clients won't forget that calling the function is a modify operation.
  Alternative naming welcome but it shouldn't be confused with more
  idealistic components that do not depend on DOM state for
  construction.

- Consolidate createPageIssueBanner() and
  createPageIssueBannerMultiple() into insertPageIssueBanner() as the
  code was quite similar and were it a true component, it would probably
  be a single component.

All new files appear under page/ to keep their distinction from the
overlay code clear.

Some view logic remains in pageIssues.js but it shall be difficult to
isolate.

Bug: T212376
Change-Id: Iccce709c34fa8de5a28a5a00098add5775e3dc9a
2019-02-13 00:42:56 +00:00
Stephen Niedzielski 66c44402d7 Hygiene: replace OO.mfExtend with mobile.mfExtend
Use the mobile.startup module mfExtend export directly instead of
OO. This will allow MobileFrontend to reduce its exposed API.

Bug: T208915
Depends-On: Idededf132f724176c38c5e0a7c9327f00489a09d
Change-Id: Id582325c830c229240b88cf4e151afea48fea750
2019-02-08 21:42:03 +00:00
Stephen Niedzielski 5593b23aa8 Hygiene: replace mobile.startup/paths with props
Replace all occurrences of `M.require( 'mobile.startup/pathToModule' )`
with `M.require( 'mobile.startup' ).pathToModule`. Where multiple
requires existed, add an intermediate variable,
`var mobile = M.require( 'mobile.startup' )`, and dot off that.

This changes improves the consistency of MinervaNeue which currently
contains a mix of require styles and eliminates any deprecated requires.

Bug: T208915
Change-Id: If14f280672d914d07275197100b12421bb217b67
2019-02-07 14:55:04 -07:00
jdlrobson d29eca2bc8 pageIssuesOverlay is a factory function that returns an Overlay
This experiments with making PageIssuesOverlay an Overlay with
various options.

The appending of children is a little messy and points at a need
to standardise this some way
(see https://phabricator.wikimedia.org/T209647)

TODO:
* Remove the iconString property on PageIssueSummary which is no longer
needed

Bug: T209647
Change-Id: Iadd798a820dca6bbb31edc9a8570b6db7aac237a
2019-01-03 08:31:39 -08:00