Enhance MinervaNeue Skin with Codex Integration and Style Refinements. This update to the MinervaNeue skin introduces enhancements aimed at integrating with Codex UI components and the optimisation of skin-specific styles. These changes are in direct response to the objectives set forth in Phabricator task T356678, focusing on modernising the skin's aesthetics and functionality.
Changes:
- Enhanced skin.json to include new 'scripts' and 'styles' configurations, incorporating Codex UI components such as 'CdxButton' and a variety of Minerva-specific styles like 'skins.minerva.base.styles' and 'skins.minerva.content.styles.images'.
- Refined `includes/Skins/SkinMinerva.php` by restructuring the method of loading skin and feature-specific styles. The update simplifies style management, allowing for a more granular approach to style application. This includes separating page-specific styles from feature-specific styles.
Rationale:
The implementation of Codex UI components within the MinervaNeue skin is to leverage modern web design principles, enhancing usability and aesthetic appeal. By refining the skin's style loading mechanism, we aim to at least maintain if not reduce the overhead, improve page load times, and offer a more customisable appearance, ultimately benefiting both end-users and developers.
Bug: T356678
Change-Id: Ia96f58397c23126e940cc9263b30e0da88c90a29
* Move global state parameters to new methods setContext and setTitle.
This change solves the circular dependency error for service
'SkinUserPageHelper'. The service will used in SkinOptions in the
follow-up change I014e61c6692adbbe449f1e6aa9c6ae73dbcff925.
Change-Id: I80342e5168435c5318c378e2ac8a9a3c7a28eb4c
Services MUST NOT vary their behaviour on global state, especially not
WebRequest, RequestContext (T218555).
Change-Id: I4b73ef713166d8b254023c1eebbb45c963880a99
Remove the comment about the reason for output encoding. Output
encoding is standard and doesn't require an explanation.
Change-Id: Ia2df4c95dca8aedca70be2f3b3827498de1f2030
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
The fixSpecialName function does the opposite of what we want - it takes
a special page and converts it to the local name using getLocalNameFor
Instead of doing that map canonicalTitle to a Title created using the canonical
name.
This requires less computation than localizing every title in the pagetitles array.
Bug: T359958
Change-Id: Ied3ed927202dd9356ebeb7e404230f571a1d910d
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
- Add config to skin.json
- Add the function in SkinMinerva.php to check exclusion of pages and namespaces.
Bug: T355705
Change-Id: I0fa0eab3bfa57cc6864dbdd2d6aeaa5582767c3c
Whereas previously, the value of the query param would simply determine
whether or not night mode was enabled, we would like to be able to
control the actual night mode setting off of the query param
Now, it functions as an option to force the user into a particular
setting, be it automatic, night, or day. If the query param is not set
(if night mode is enabled via config), we will default to the user
option as before
Bug: T355118
Change-Id: I38ed94bfc1b80d0a827c63c6dbdd92eb6f1bf531
Add a new user option, `minerva-night-mode`, and configure it with a
default value of 2 (automatic based on OS). Rework the code in
`getHtmlElementAttributes` to set the initial class value according to
the user option, which will be set and saved inside of MobileFrontend
Bug: T355118
Change-Id: I4b0d63a186f490ba10b7655b3af4dcb8b64bd400
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
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
Adds a config flag, `MinervaNightMode`, and wires it up as a skin option
for enabling/disabling the night mode toggle (sold separately)
Additionally, allow this feature to be enabled via the
`minervanightmode` query param
For now, turning the flag on will result in the class
`skin-nightmode-clientpref-1` being added to the HTML element, but in a
later change this will be updated to switch values based on the
forthcoming client pref
Bug: T355118
Change-Id: I35848ab80ee75d324ceb35d17794e2d3e620cc19
On English Wikipedia, talk tabs are enabled so this went undetected.
The history and diff pages should be loading these styles since they
both have tabs.
Bug: T356117
Change-Id: I380cc4ba9a4f809e4400873241d97de5a5fe6c1f
CHECKBOX_HACK_TARGET_SELECTOR only applies to the first list
and there are three lists in the menu. Use the parent instead.
Additional changes:
* Transform to ES6 while working on this code.
Bug: T354315
Change-Id: I354e33af872e9a2f93d97793f5f33b735d42e804
Changes to the use statements done automatically via script
Addition of missing use statement done manually
Change-Id: I1eec0823b7af97ea5031ff00b111e0c88b45a155
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
As part of my work on fixing addPortletLink for tabs on mobile (T340728)
we need these tabs to be correctly designated as an unordered list (note,
this is also how they are rendered in Vector). In addition, update the
styles to account for the link being nested in a list item now
There should be no visual change as a result of this, but if there is
please let me know!! I will be testing locally in pixel after pushing
to ensure the change is transparent
Bug: T340728
Change-Id: I922558a59aa909ce76079bab057811d76467f644
The mediawiki.diff.styles can be loaded on pages other than the diff
page itself, so it is better to move this logic into SkinMinerva and
avoid outputting it for diff pages full stop.
Note this module is loaded on Special:MobileDiff and desktop
Minerva history page (without redirect) so we need to cater
for both cases.
Bug: T350515
Change-Id: If2d908b7cbe257184e0c899f78a04d4d5935ea8c
empty() should only be used to suppress errors
When the type of the variable is array,
a falsy check is the same (checks for null, false and empty array)
Found by a new phan plugin (T234237)
Change-Id: If24015795219f6ff4f155c0d667472dc52a04d43
Currently the last modified bar icon appears black rather than
white. This is because the last modified icon shares icon CSS
with the page actions in AMC.
Untie these by giving the icon in this context a different selector,
taking care to support cached HTML.
Change-Id: I98443b0dcb88911a5314092216809387b4fb80dc
