Commit graph

420 commits

Author SHA1 Message Date
Steph Toyofuku 6f98cc6460 (Almost) no more CSS variables in minerva
Remove direct usage of CSS variables in Minerva, and replace them with
codex design tokens again.  Document this decision in the original ADR

Note: there are still a small number of CSS variables in use, including
most notably the --color-link-red fix, which broke when I removed it,
but this change takes care of all the ones that could be easily replaced

Bug: T363743
Change-Id: I7d3a9dceb908167078987de1733774c8bd4bea2f
2024-06-11 11:44:47 -07:00
Ed Sanders a6ab8d6da3 Prefer arrow callbacks (ESLint autofix)
Change-Id: I52b2feacd6216e99e04f193ba963e897b3e1a771
2024-06-04 08:01:54 -07:00
Steph Toyofuku de3f85bac7 Fix inverted text in (recently) last modified bar
Currently we are using the --color-inverted token, which is double
inverted in night mode, yielding insufficient color contrast with the
blue (progressive) background when the page has been recently modified.
Instead, use the @color-inverted-fixed token, which stays white in night
mode for backgrounds which are darker regardless of mode (additionally,
switch back to using LESS variables as this is the new recommendation)

Visual change due to bugfix

Bug: T364123
Change-Id: Ib284abffd6907272e580986fb08c2b8dee5a1a47
2024-05-17 14:15:39 -07:00
Fomafix 7f4c7d2db2 Add eslint-disable-next-line security/detect-non-literal-regexp
Change-Id: Ie85cdab8d2407fd432ae420ae46970490c2f693d
2024-05-14 12:41:50 +00:00
Fomafix 3b343d142d Get namespace ids from wgNamespaceIds
Use
	mw.config.get( 'wgNamespaceIds' ).category
instead of hard coded `14`.

Change-Id: Id54a33d45a696e958cf338e3ef93c1e078582bf1
2024-04-14 11:48:02 +00:00
Fomafix c43cdce48c Some small JavaScript/jQuery improvements
Change-Id: I33feb8bccbd870f589a01dc187e6155b7498714c
2024-04-08 19:45:22 +00:00
Jan Drewniak f9183cbc81 Follow-up to cf723c00 - Guard against undefined $container
Since `initMediaViewer()` can be invoked via
`mw.hook( 'wikipage.content' ).fire($container)` it's better
to validate that $container is in fact an HTMLElement and not
an empty jQuery collection.

Bug: T360781
Change-Id: Ib43327dd70c35918e3079c7b6b23a161383654b5
2024-04-02 14:37:23 -04:00
Fomafix effd4fe133 Use eslint rule "no-var": "error" and replace all var
Change-Id: I67acf88e1b8de55054248d7cf8ca622d5772ea6f
2024-03-29 07:40:22 +00:00
Fomafix a73e2d2d19 Add eslint rule "max-len": "error" and fix long lines
Change-Id: I079f300eea18024a6e1698b5016778fa60c74578
2024-03-29 02:05:03 +00:00
Jan Drewniak cf723c00c3 Guard against undefined $container element in initMobile.js
In order to prevent spikes in JS errors, ensure that the $container
element exists before initializing the mobile media viewer.

Bug: T360781
Change-Id: I48a57e8008e7bd90e9fcfc783f3720f6f75520a7
2024-03-25 09:38:11 -04:00
jenkins-bot 978702f3be Merge "Revert "The new class should be present alongside the old class for all page views"" 2024-03-20 16:15:18 +00:00
Jdlrobson b6ffc85cd4 Revert "The new class should be present alongside the old class for all page views"
This reverts commit bca9223bb1.

Reason for revert: This is now longer needed following the work
in Ia253de68f94236e7fe2219b736dd6084c64ce838.

Bug: T359983
Change-Id: Ibd3013169f26531a0cd879c143692e7030709808
2024-03-19 23:23:54 +00:00
Moh'd Khier Abualruz 5d6b866890 Rename the skin night mode classes to more readable classes
The classes:
- skin-night-mode-clientpref-0
- skin-night-mode-clientpref-1
- skin-night-mode-clientpref-2
is being replaced with
- skin-theme-clientpref-day
- skin-theme-clientpref-night
- skin-theme-clientpref-os
- Moved $forceNightMode to be a text parameter (dat|night|os)
- Keep adding the old classes to the html element, to give the ability of gradual deployment

The preference is renamed from minerva-night-mode to minerva-theme (a follow up to consider
migrating existing values will follow).

The query string minervanightmode continues to behave the same but now
accepts other values such as day, night and os.

Bug: T359983
Change-Id: Ia253de68f94236e7fe2219b736dd6084c64ce838
2024-03-19 23:12:59 +00:00
Jon Robson bca9223bb1 The new class should be present alongside the old class for all page views
Bug: T359983
Change-Id: Id0bcb3c9b0d37aef84886fe2efb907f8ebd1cfd9
2024-03-18 21:43:44 +00:00
Steph Toyofuku 4b3abcb1eb [VISUAL CHANGE] Update last modified bar to have an accessible color contrast
The current white text on a green background is not an accessible level
of color contrast.  We were instead recommended to use
@background-color-progressive, so let's do that

In addition, remove the previous definition of
@background-color-last-modified-bar-active as it's no longer being used

Visual change for pages on mobile that have been updated recently

Bug: T358736
Change-Id: If5b97b785e95df75645be62847cef396f6be68b6
2024-03-15 22:28:48 +00:00
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
Jon Robson b079031b0a Send a toast notification if night mode is not available
Add a skin-night-mode-page-disabled class to the HTML element when
a page was disabled by the new MinervaNightModeOptions configuration
flag.

Bug: T356653
Change-Id: I7a6582ef8f66e78cc6f07da06bc4d2a3277cfcf0
2024-02-14 01:51:23 +00:00
Jon Robson 5e2e2142ef Diffs: Localize number in timeago
Bug: T357079
Change-Id: I6c877baa82ac88e50ae0c5e932665bda9122da70
2024-02-09 16:51:30 +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
Jon Robson d5e6a0b4ce Do not use mw.loader.require
That method is marked as private. Instead using require (the
ResourceLoader require)

Bug: T235198
Change-Id: I6e4e5c76717808e416dc703639c15d0de1070a09
2024-01-03 10:53:48 -08:00
Steph Toyofuku 2b41416c0d Allow addPortletLink to target tabs/associated pages
Currently `mw.util.addPortletLink` cannot properly add a portlet link to
the associated pages tabs, as there is no `p-associated-pages` id on
mobile.  This change pulls the id from the page data, and adds the
necessary class for the tab to be styled correctly - since tabs do not
have corresponding icons while most portlet links do, we also branch on
this class (effectively on whether we are in the tab container) to
ensure an icon is not inserted

Finally, I added a few comments and spacing in the sections of code that
I touched to make them more readable and resolve some of the linter
warnings, but happy to hear if these are not helpful!

Bug: T340728
Change-Id: I33fc12611a6238552a3eb47f6ca37f087903a92a
2023-12-21 16:37:28 -08:00
thiemowmde e0d893c0f5 Fix broken reference popup when name contains # character
The fragment in a URL like http://example.com/foo#bar#baz doesn't end
when there is another # somewhere. That # is part of the fragment.

I'm not sure since when this issue exists. It's already in the first
version of this codebase from 2017, see Iff1f7e6.

Bug: T332007
Change-Id: I3b0726380d2f385475f5ba53aeab16932d7ccaa7
2023-12-12 15:08:55 +01: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
Jon Robson 5170e69d3c Fixes read only mode.
When $wgReadOnly = true; in LocalSettings.php the edit icons
appear locked and when clicked should show a warning.

This also addresses deprecation warnings in the code and
tidies up the ES6 code.

Note to reviewer: Please use git diff HEAD^ -w
when reviewing this diff. Mostly whitespace changes.

Change-Id: I3fa83cc1dc4da62260fd0ef50ac14805c3e1282b
2023-10-31 00:41:29 +00:00
Jon Robson db8e3b09af Document messages and add hours and minute units
Follow up to I5a4a2588da3d701be87690038c2c9b2bc1aa0365

Change-Id: I6ea2b98bd3d03e586cc58307d3f2f0f1119059e3
2023-10-30 23:37:12 +00:00
jenkins-bot 3a4b1f1082 Merge "Style the desktop diff and history page of Minerva to look like mobile pages" 2023-10-30 14:53:32 +00:00
Jon Robson a3f03245fd Style the desktop diff and history page of Minerva to look like mobile pages
Depends-On: Ie8ac1aab6d2fe5f4575a6891c36efe497458e093
Bug: T305113
Bug: T240624
Change-Id: I5a4a2588da3d701be87690038c2c9b2bc1aa0365
2023-10-20 18:35:10 +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
Jon Robson 05231bb254 Support extension of page actions via hook and addPortletLink
This adds support for:
mw.util.addPortletLink('p-views', '#', 'text', 'fooz',null,
  null,'#page-actions-overflow' )

and adding multiple edit icons via hooks.

Depends-On: I655097769620301143140ded1cde4c7a16879ef4
Depends-On: I401805224c0f387ac85b52b50c1f298b83c03a91
Bug: T346944
Change-Id: I3c9d59f49f1b939981a7b2b450448db6736d5958
2023-10-04 22:15:47 +00:00
Sergio Gimeno 2a9680f2a4 Apply content styles to mw teleport target
Bug: T347199
Follow-up: Ibd5d8c7cc7880678fae498a451cfd417f1f8e1b8
Change-Id: I50274180b62dec902fd7b9030313d4bcf13bd494
2023-09-28 11:29:30 +02:00
Jon Robson c53f69f36a Fixes notification overlay: Change URL using location
Partial revert of I192c6d4235c57f69cf48dcd67aa6c4810df62dfa
The deprecation notice seems incomplete. The two functions are not
equivalent and we have various usages elsewhere in the codebase.

Bug: T346685
Change-Id: I063daa217708c3bebac97af7be9eedab01f5217b
2023-09-18 14:15:12 -07:00
jenkins-bot 18451d4f94 Merge "Fixes console warnings" 2023-09-13 23:37:11 +00:00
Jon Robson d407d1054c Remove or document remaining mw-ui-icon usages
Most of these are captured in other bugs
The anon talk message style doesn't do anything.

Bug: T344022
Change-Id: Iba1fce98ea05931fe07b2b20f07c62d198039d1b
2023-09-13 00:03:38 +00:00
Jon Robson 52de5fd597 Fixes console warnings
Fixes "[1.40] Use of PageGateway is a NOOP and deprecated. Please remove this call."
Fixes Use of "navigate" is deprecated. use navigateTo instead

Change-Id: I192c6d4235c57f69cf48dcd67aa6c4810df62dfa
2023-09-07 11:22:49 -07:00
bwang 269bd5bdaf Remove old :before icon selectors and update selectors to not use minerva and wikimedia prefixes
Bug: T344022
Change-Id: I573d7b36513cd0b74f62621cc246f719bcb94256
2023-09-06 13:53:22 -05:00
bwang 0e391a87e0 Update addPortletLink for Codex
For testing make sure to check the 3 variants:
```
mw.util.addPortletLink('page-actions', '#', 'text' );
mw.util.addPortletLink('p-interaction', '#', 'text' );
mw.util.addPortletLink('p-personal', '#', 'text' );
```

Bug: T344006
Change-Id: Iad3a8d5ed1237c1438d170f07c9c3fe3784182fe
2023-08-29 19:27:56 +00:00
Jon Robson 952789bc17 Switch Minerva button template to use Codex and remove mw-ui-button
- Removes 'mw-ui-icon-with-label-desktop' as that is now the default behavior for icon only buttons in Minerva
- Removes icon flushing classes, use codex mixins instead

80 Visual changes relating to minor icon/button subpixel changes in the heading, edit section links, and page actions

Bug: T319260
Change-Id: I503b643d33e43196483af4b5f9dd312237322ac8
2023-08-24 15:57:01 -05:00
bwang b66ac786d1 Prepare addPortletLink handler for Codex switchover
Change-Id: I33e541ab7b816640a63541ce719e094bb8f5d78e
2023-08-24 12:07:28 -05:00
Martin Urbanec 0109b17483 watchlist: Don't assume only named users have watchlist access
In I1ccda3878a658d4251429ae65ebee04c09d81243, core decided
to technically allow temp. users to have watchlist access,
but have it disabled on permission level
(viewmywatchlist / editmywatchlist) instead of by isNamed() checks.

Minerva expects the watchlist permissions to be assigned to everyone,
but actual watchlist access to be available only to named user.
This is an incorrect assumption. Make a clear difference between
"page is watchable" concept (watch icon should show) and "user has
permission to watch" (if not, CTA to log in should show).

There is one additional step to fix, which is ensure
temp users receive the T330518 drawer. That is not a bug
in MinervaNeue, but in core -- mediawiki.page.watch.ajax.js uses
e.stopPropagating(), which means Minerva's CtaDrawer doesn't get
a say. Ideally, mediawiki.page.watch.ajax.js would know whether
the user has permissions to edit their watchlist. Alternatively,
it could have an interface to allow extensions to add their own
error handling. See T344925 for details.

Bug: T344870
Change-Id: Id1757fb4fb433fe39cf4d5c6e1e9c65ab5abae14
2023-08-24 14:12:43 +00:00
Jon Robson b7b4e4b01f Remove icons from about and disclaimer link and minerva-icon class
Legacy icons shouldn't have the minerva-icon class as this is meant
to be reserved for Icon template (Codex icons)

Bug: T342908
Change-Id: I63556fe42c8650bc5f0d6e5a0c5328b3f29d75f3
2023-08-11 11:56:08 -07:00
Jon Robson d342cb32ef [Icons] Use Button template in PageActionsMenu.
Use the Button.mustache partial in the
PageActionsMenu.mustache template.

This converts the page actions menu to use the Button
template in a way that doesn't change the existing HTML.
The mw-ui-icon-element and mw-ui-icon-with-label-desktop
classes are placed onto the Button.mustache markup.

Bug: T342908
Change-Id: Ib5dadd929eea2e72a24e061c4174348615890617
2023-08-10 19:27:44 +00:00
bwang 1918698e72 Fix page issue icon
Bug: T343053
Change-Id: I80595e3b851cdb4b9d4bdafe6ce7526a2e33afbe
2023-08-08 20:37:15 +00:00
jenkins-bot 0c69779b73 Merge "Echo uses Button template" 2023-08-08 17:44:22 +00:00
Jon Robson ded6430b47 Echo uses Button template
Changes
* Update FIXME in userMenu.less to merge selectors
* We replace minerva-user-notifications class with minerva-notifications
to short-circuit Echo's code so that it no longer replaces the Minerva
notification badge with its own.
* We update resources/skins.minerva.scripts/initMobile.js to introduce
our own wire up code - this is responsible for opening Echo overlay
and reseting the counter. The code in Echo will be removed in a follow
up (see <I2f923e509d24524a2375ffbe6b3ef336487574bb>)
* We update skinStyles/ext.echo.styles.badge.less with styles from Vector 2022
so that Minerva desktop remains consistent with desktop Vector 2022 experience.
* We clearly mark technical debt relating to the special mobile version.

Testing:
* Pixel.js has a group echo that covers all the different variants.
Make sure to update to latest main branch before running these.
* Desktop should behave the same for Minerva as Echo.
* On mobile only when a user has unseen notifications a red circle
is shown. Otherwise a bell icon is shown, never with number.
* On mobile a single button is visible that combines alert and count
numbers.
* With Echo disabled a bell shows that links to the user talk page

Visual changes:
* Previously the red circle became a transparent/gray circle on click. Now
it will always be red.
* Minor aligment changes to red circle and bell icon are expected as
the change prevents MobileFrontend/Echo updating the icon to use
Codex.

Bug: T342907
Change-Id: I55c18cf723a32f80b93a01dd0687e005162c4e93
2023-08-08 15:44:38 +00:00
Phuedx b0fa66d537 Revert "Add metric platfrom event tracking on mobile desktop toggle"
This reverts commit 7856f79d11.

Reason for revert: This version of the instrument isn't in use. It was
enabled on the Beta Cluster but then superseded in I39adbce1f2c8.

Change-Id: I273a6f21a881f69298d6219e435639ced0fe8afe
2023-08-07 16:41:49 +00:00