Thijs/wiki.techinc.nl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge "Improve labels color of Special:RecentChanges in dark mode"

Browse source
This commit is contained in:
jenkins-bot 2024-09-09 12:13:10 +00:00 committed by Gerrit Code Review
commit 7b0ff4c7ab
4 changed files with 26 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less
View file

@ -49,6 +49,26 @@
margin-left: ~'calc( ( @{size-circle-result} + @{margin-circle-result} ) * 5 + @{margin-circle} )';
}
.background-color-with-dark-mode( @bgcolor ) {
background-color: @bgcolor;
html.skin-theme-clientpref-night & {
background-color: darken( @bgcolor, 60% );
}
/**
* Auto night mode.
*
* Applies the night mode color palette only in response to system settings.
*/
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
@media ( prefers-color-scheme: dark ) {
html.skin-theme-clientpref-os & {
background-color: darken( @bgcolor, 60% );
}
}
}
// A mixin just for changesListWrapperWidget page, to output the scope of the widget
// so it is before the rest of the rule; we need the li& to be in
// between the wrapper scope and the color-cX class, which doesn't
@ -58,7 +78,7 @@
.mw-rcfilters-ui-changesListWrapperWidget & tr:first-child,
.mw-rcfilters-ui-changesListWrapperWidget tr&.mw-rcfilters-ui-highlights-enhanced-toplevel:not( .mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey ) td:not( :nth-child( -n+2 ) ),
.mw-rcfilters-ui-changesListWrapperWidget tr&.mw-rcfilters-ui-highlights-enhanced-nested:not( .mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey ) td:not( :nth-child( -n+4 ) ) {
background-color: @bgcolor;
.background-color-with-dark-mode( @bgcolor );
}
}

11
resources/src/mediawiki.rcfilters/ui/ChangesListWrapperWidget.js
View file

@ -321,11 +321,10 @@ ChangesListWrapperWidget.prototype.applyHighlight = function () {
// * mw-rcfilters-highlight-color-c5
// * notheme - T366920 Makes highlighted list legible in dark-mode.
$elements
.addClass( [
'mw-rcfilters-highlighted',
'mw-rcfilters-highlight-color-' + filterItem.getHighlightColor(),
'notheme'
] );
.addClass(
'mw-rcfilters-highlighted ' +
'mw-rcfilters-highlight-color-' + filterItem.getHighlightColor()
);
// Track the filters for each item in .data( 'highlightedFilters' )
$elements.each( function () {
@ -379,7 +378,7 @@ ChangesListWrapperWidget.prototype.clearHighlight = function () {
this.$element.find( '.mw-rcfilters-highlighted' )
.removeAttr( 'title' )
.removeData( 'highlightedFilters' )
.removeClass( [ 'mw-rcfilters-highlighted', 'notheme' ] );
.removeClass( 'mw-rcfilters-highlighted' );
// Remove grey from enhanced rows
this.$element.find( '.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey' )

3
resources/src/mediawiki.rcfilters/ui/FilterItemHighlightButton.js
View file

@ -73,9 +73,7 @@ FilterItemHighlightButton.prototype.updateUiBasedOnModel = function () {
currentColor !== null
);
let hasFilter = false;
HighlightColors.forEach( ( c ) => {
hasFilter = hasFilter || c === currentColor;
// The following classes are used here:
// * mw-rcfilters-ui-filterItemHighlightButton-circle-color-c1
// * mw-rcfilters-ui-filterItemHighlightButton-circle-color-c2
@ -88,7 +86,6 @@ FilterItemHighlightButton.prototype.updateUiBasedOnModel = function () {
c === currentColor
);
} );
this.$icon.toggleClass( 'mw-no-invert', hasFilter );
};
module.exports = FilterItemHighlightButton;

15
resources/src/mediawiki.special.changeslist.enhanced.less
View file

@ -84,21 +84,6 @@ td.mw-enhanced-rc {
}
}
// TT366920 Make arrow visible in skins that support dark-mode.
/* stylelint-disable-next-line selector-class-pattern */
.skin-theme-clientpref-night .notheme .mw-enhancedchanges-arrow {
@media screen {
background-color: @color-inverted-fixed;
}
}
@media screen and ( prefers-color-scheme: dark ) {
/* stylelint-disable-next-line selector-class-pattern */
.skin-theme-clientpref-os .notheme .mw-enhancedchanges-arrow {
background-color: @color-inverted-fixed;
}
}
.mw-enhancedchanges-arrow-space {
display: inline-block;
width: @width-arrow-space;