Commit graph

37 commits

Author SHA1 Message Date
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
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
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 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
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
Jan Drewniak 11e09ea7b3 [Icons] Convert history/next status bar icons to Codex
Creates a new Icon.mustache file in favour of using
MinervaUI::iconClass.

Add a new icons.less file and the following icons:
- history
- expand (next) arrow.

These icons are used exclusively in the history
status bar at the bottom of most pages.

Bug: T319260
Change-Id: If81186418fe758d7be9c3e57cf5d2aa889517f2d
2023-07-28 16:56:24 -07:00
bwang 6635693826 [Icons] Update usage of MobileFrontend Icon code
Visual change:
* Improves vertical alignment of TOC

Technical change:
* Remove dependency on MobileFrontend

Bug: T319260
Change-Id: I0526293c6a99dfe078b9e32aa247522a63b6d0fd
2023-07-25 17:55:02 +00:00
Jdrewniak cc513b9e72 Revert "styles: Apply Codex z-index tokens"
This reverts commit b28b80e222.

Reason for revert: Changes broke dialogs in mobile VE.

Change-Id: I957661a882b1d8aa50cede906631d29f4a51e530
2023-05-26 15:29:03 +00:00
Volker E b28b80e222 styles: Apply Codex z-index tokens
Applying central Codex design tokens in new architecture.
This replaces all existing MN `z-index` tokens and comments on
replacement choice.

Bug: T285592
Change-Id: I23d794566898946a500c10713802d8dfaad993d1
2023-05-18 23:33:38 -07:00
jenkins-bot ac234277ea Merge "Remove unused '@-webkit-keyframes'." 2023-04-30 11:50:57 +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
TehKittyCat 4d0844c77e Remove unused '@-webkit-keyframes'.
Left behind after d926771b removed deprecated vendor mixin.

Change-Id: I5a45d7db77ed922b3780382365c16cd07e8d852c
2023-04-23 01:16:46 +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
Ed Sanders d926771bd8 Remove deprecated vendor prefixes and their mixins
Additional change:
* The animation stylesheet pulled down for the storybook instance
in dev-scripts/setup-storybook.sh is no longer referenced anywhere
in assets so can be removed.

Bug: T306486
Bug: T308351
Bug: T308360
Change-Id: Ia9f2a05cde2724486f7e449261c5d4875388f5ab
2022-05-23 23:18:43 +00:00
Gagah Pangeran Rosfatiputra e49dd310e8 Make whole area of last edited section to be tappable
Now whole area of last edited section (from edge to edge) is tappable
and linked to history page.

Bug: T163853
Depends-Onː I3d1f272a27c5c9b0b0928b5c0eaeb3f6e270532b
Change-Id: I3c35bbaafea3376cd2f9dccfd13bfe4845fd6823
2021-12-20 16:31:42 +00:00
bwang ef4aa95ae2 Remove primary/secondary menu items, instead add a separate log out menu item
Bug: T293041
Change-Id: I9f73fdba1856dd9e0ea7120df0fb18061337961a
2021-11-18 19:51:33 +00:00
Volker E 18ab61d4fe Use .text-overflow() mixin from 'mediawiki.mixins'
Removing MinervaNeue's own mixin now that it's possible.
Also unify code instances to use new mixin.

Depends-On: Ia8d6e7229b49598b0f4cb19dff463ffe2f11a43d
Change-Id: Iaffcefcb7a239d5ddecbe17097573d06099de88e
2020-04-21 11:49:30 -07:00
jdlrobson 1200cb5279 Storybook added to MinervaNeue
For now just adding story entries for footer element and last modified.

Bug: T244106
Change-Id: Ib36f22f9b9d805f87fc074d12473497cfaf91b79
2020-03-03 15:22:34 +00:00
jdlrobson 1e64fc8f3d Dev: Address some FIXMEs
* Drop non-existent pointer-overlay selector
* Drop redundant icon class for arrow
* Drop unnecessary !important
* Drop transparent-shield class
* Reword an existing FIXME about a contensious decision and
add a new FIXME for moving some code to a more appropriate place.
* Move an image into a ResourceLoaderImage module (test with
`mw.notify('error', { type: 'error'} )`)

Change-Id: I6e38f07772afae6f13c4851ca17a67d52ca7d331
2020-02-03 08:43:18 +00:00
Volker E 19b1ea2297 Unify transition values across board
Using newly introduced variables instead of fixed values.
Also adding `transition` to property blacklist to ensure using
mediawiki.mixin.

Bug: T236224
Change-Id: I3d2d05f4e50e7b6bba0fe84fae1dde5de5b75492
2019-10-24 12:11:52 -07:00
jdlrobson e72c0d7ba4 Render main menu and shield on server side
This is a second attempt at I3892afb5ed3df628e2845043cf3bbc22a9928921
that is cached HTML friendly and won't cause T234599.

This time rather than solving the entire problem, we'll start rendering
the menu on the server, to allow us in future to drop the Menu code

Bug: T234650
Change-Id: Iea5406ef1c561f2907ec6132481007673aabf1e9
2019-10-04 19:35:28 +00:00
Jdlrobson 93b16db1c5 Revert "MainMenu is a controller not a View and server rendered"
This reverts commit 111757970e.

Although I cannot replicate the performance issue, the menu doesn't seem to be rendering at all on cached HTML so this is a deal breaker. Back to the drawing board..

Bug: T234599
Change-Id: Idadc5a079340f44ec66d20a38259b6b337d2dcee
2019-10-04 15:03:19 +00:00
jdlrobson 111757970e MainMenu is a controller not a View and server rendered
As Stephen pointed out somewhere, this is a bit of a micro-optimisation
Let's simplify this code by always rendering it in the HTML. MainMenu.js
as a result becomes a controller that just decides when to show it.

The geolocation check for Nearby is removed given the fact that all
grade A browsers for mediawiki have Geolocation support

Additional changes
* Browser support suggests "animations" class is redundant now
* `open` event no longer filed - not being used anywhere
* Transparent shield is now managed by the MainMenu controller not
the skin (which was confusing)
* Test geolocation using a simple feature tests
rather than abstracting it away inside Browser
* The main menu button is always hidden under either a translucent shield
and/or the main menu itself when it has been opened
so so it's not possible to ever click it while the menu is open
 - the click handler is thus simplified
removing a check for the class of the button

Depends-On: I7fd243366cceae780bd46e1aef2c08dae073f647
Change-Id: I3892afb5ed3df628e2845043cf3bbc22a9928921
2019-10-03 13:13:09 -07:00
Jan Drewniak be76f05ebb Prepare for new mw-ui-icon spec for Minerva
Includes icon fixes and removal of some CSS overrides.

This causes the following temporary defects to the skin:
* Last modified bar will temporarily be squashed
* clear search  icon will be misaligned vertically

Depends-On:  Ie811d25595d041c35e6c214190101821f3a5d466
Bug: T229440
Change-Id: I0a3a73421791ad353bbcebaeb8241ad062f67ae4
2019-09-12 18:44:44 +00:00
Volker E 1f27981ed1 Consistently use .transform() mixin
Make use of mediawiki.mixins' `.transform()` mixin for widest available
browser support.
Follow-up to I720e62a578f0c7a14f4b5a698004471c85e54bc8

Change-Id: I771a5a6e2020e323bf4cefdb944c26bdcce26ee2
2019-09-03 15:33:10 -07:00
jdlrobson 15323b3d63 Use core table of contents in Minerva
No more using the TableOfContents component in MobileFrontend. It's
just creating more work for us. The end result is exactly the same - we can make
a table of contents using the checkbox hack rule and CSS that looks identical to
the current table of contents.

For now, this change can only be tested on Minerva desktop.
I2ea1c23bc86871e2a095c4c6674a08ff2f04b160
is the patch that goes for the jugular and applies this to mobile Minerva. It's
important we merge the two together to avoid disruption to this feature, as
currently MobileFrontend strips the table of contents from core from the HTML
using the MobileFormatter.

Change-Id: I720e62a578f0c7a14f4b5a698004471c85e54bc8
2019-09-03 19:02:31 +00: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
Volker E f0608db19a build: Update 'stylelint-config-wikimedia' to v0.5.0 and make pass
Updates code comments and whitespacing.

Change-Id: If7665beaa2d342881483fd7a9fc0fc880768d2ef
2018-12-12 23:26:48 +00:00
jdlrobson a3efca1582 Remove unnecessary skins.minerva.base.styles
* truncated-text is only used in MainMenu, last modified bar,
 a few special pages
Making this a mixin and limiting it to mobile.startup skinStyles
and mobile.special.styles thus makes sense
* cloaked-element is only ever added by Skin.js in mobile.startup
* position-fixed is only ever added by Skin.js

Change-Id: Iaf7061e9dda87eb25c963f8a281175af08f358e5
2018-07-26 01:18:00 +00:00
jdlrobson fcaf244cc4 Hygiene: lazy loading animations do not need to be render blocking
The transition only happens when images are loaded via JavaScript
so limit the styles to a file loaded via JS NOT render blocking
CSS

Change-Id: I56661db13e7fbb400a05b13c369d8598df449297
2018-07-23 13:57:42 -05:00
jdlrobson 70e4e9e85a Cleanup: Last modified active color should be loaded via JS
.active class is added via JS by skins.minerva.scripts
skins.minerva.base.styles is loaded as render blocking
Thus this css rule can be moved safely to a non-render blocking place

Change-Id: Ie8bab826ebc0785e24bb85600de261372c429434
2018-07-10 22:45:24 +00:00
Timo Tijhof 64134bd8a6 Remove minerva.less from global import path
Use local imports instead given all relevant files are within the
same repository, and don't vary by configuraion.

Bug: T140807
Depends-On: If3edac9a35b346af0320c12f70c0d978a6346201
Change-Id: Ife3cc345a63aff452e93accbe0a593fbaa358732
2018-05-29 12:19:00 +00:00
jdlrobson 86238c64c2 Restore last modified active link color
In I7abdbac4d2d16b931e2b110fcebf0dfc82146753 I accidentally
removed the active link color (I meant to /move/ it from the
critical path since it requires JavaScript)

Change-Id: Ie86c3c9d03a0ed130a86c50bb548c9b47db6def6
2018-04-13 10:19:31 -07:00