Mooeypoo has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/370136 )
Change subject: [WIP-like-seriously] Make a scoped mixin for highlight colors
......................................................................
[WIP-like-seriously] Make a scoped mixin for highlight colors
Change-Id: I64796fd350b4c9914fea07c5e175ea5c6ade2fcd
---
M resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less
M
resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less
2 files changed, 41 insertions(+), 40 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core
refs/changes/36/370136/1
diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less
b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less
index 526f035..587f756 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less
@@ -36,16 +36,16 @@
// 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
// work if the rules are inside the above widget LESS scope
-.highlight-changesListWrapperWidget( @bgcolor ) {
- .mw-rcfilters-ui-changesListWrapperWidget li&,
- .mw-rcfilters-ui-changesListWrapperWidget & tr:first-child,
- .mw-rcfilters-ui-changesListWrapperWidget & td:not( :nth-child( -n+3 )
) {
- background-color: @bgcolor;
+.highlight-changesListWrapperWidget( @scope, @bgcolor ) {
+ .@{scope} li&,
+ .@{scope} & tr:first-child,
+ .@{scope} & td:not( :nth-child( -n+3 ) ) {
+ background-color: @{bgcolor};
}
}
// This mixin produces color mixes for two, three and four colors
-.highlight-color-mix( @color1, @color2, @color3: false, @color4: false ) {
+.highlight-color-mix( @scope, @color1, @color2, @color3: false, @color4: false
) {
@highlight-color-class-var:
~'.mw-rcfilters-highlight-color-@{color1}.mw-rcfilters-highlight-color-@{color2}';
// The nature of these variables and them being inside
@@ -58,18 +58,18 @@
// Two colors
@{highlight-color-class-var} when ( @color3 = false ) and ( @color4 =
false ) and not ( @color1 = false ), ( @color2 = false ) {
- .highlight-changesListWrapperWidget( tint( average( @@c1var,
@@c2var ), 50% ) );
+ .highlight-changesListWrapperWidget( @scope, tint( average(
@@c1var, @@c2var ), 50% ) );
}
// Three colors
@{highlight-color-class-var}.mw-rcfilters-highlight-color-@{color3}
when ( @color4 = false ) and not ( @color3 = false ) {
@c3var: ~'highlight-@{color3}';
- .highlight-changesListWrapperWidget( tint( mix( @@c1var,
average( @@c2var, @@c3var ), 33% ), 30% ) );
+ .highlight-changesListWrapperWidget( @scope, tint( mix(
@@c1var, average( @@c2var, @@c3var ), 33% ), 30% ) );
}
// Four colors
@{highlight-color-class-var}.mw-rcfilters-highlight-color-@{color3}.mw-rcfilters-highlight-color-@{color4}
when not ( @color4 = false ) {
@c3var: ~'highlight-@{color3}';
@c4var: ~'highlight-@{color4}';
- .highlight-changesListWrapperWidget( tint( mix( @@c1var, mix(
@@c2var, average( @@c3var, @@c4var ), 25% ), 25% ), 25% ) );
+ .highlight-changesListWrapperWidget( @scope, tint( mix(
@@c1var, mix( @@c2var, average( @@c3var, @@c4var ), 25% ), 25% ), 25% ) );
}
}
diff --git
a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less
b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less
index 4d0b0f1..3aa1434 100644
---
a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less
+++
b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less
@@ -114,64 +114,65 @@
}
}
+@changesListWrapperWidgetScope: ~"mw-rcfilters-ui-changesListWrapperWidget";
// One color
.mw-rcfilters-highlight-color-c1 {
- .highlight-changesListWrapperWidget( tint( @highlight-c1, 70% ); );
+ .highlight-changesListWrapperWidget( @changesListWrapperWidgetScope,
tint( @highlight-c1, 70% ); );
}
.mw-rcfilters-highlight-color-c2 {
- .highlight-changesListWrapperWidget( tint( @highlight-c2, 70% ); );
+ .highlight-changesListWrapperWidget( @changesListWrapperWidgetScope,
tint( @highlight-c2, 70% ); );
}
.mw-rcfilters-highlight-color-c3 {
- .highlight-changesListWrapperWidget( tint( @highlight-c3, 70% ); );
+ .highlight-changesListWrapperWidget( @changesListWrapperWidgetScope,
tint( @highlight-c3, 70% ); );
}
.mw-rcfilters-highlight-color-c4 {
- .highlight-changesListWrapperWidget( tint( @highlight-c4, 70% ); );
+ .highlight-changesListWrapperWidget( @changesListWrapperWidgetScope,
tint( @highlight-c4, 70% ); );
}
.mw-rcfilters-highlight-color-c5 {
- .highlight-changesListWrapperWidget( tint( @highlight-c5, 70% ); );
+ .highlight-changesListWrapperWidget( @changesListWrapperWidgetScope,
tint( @highlight-c5, 70% ); );
}
// Two colors
-.highlight-color-mix( c1, c2 );
+.highlight-color-mix( @changesListWrapperWidgetScope, c1, c2 );
// Overriding .highlight-color-mix( c1, c3 ); to produce
// a custom color rather than the computed tint
// see https://phabricator.wikimedia.org/T161267
.mw-rcfilters-highlight-color-c1.mw-rcfilters-highlight-color-c3 {
- .highlight-changesListWrapperWidget( #ccdecc );
+ .highlight-changesListWrapperWidget( @changesListWrapperWidgetScope,
#ccdecc );
}
-.highlight-color-mix( c1, c4 );
-.highlight-color-mix( c1, c5 );
-.highlight-color-mix( c2, c3 );
-.highlight-color-mix( c2, c4 );
-.highlight-color-mix( c2, c5 );
-.highlight-color-mix( c3, c4 );
-.highlight-color-mix( c3, c5 );
-.highlight-color-mix( c4, c5 );
+.highlight-color-mix( @changesListWrapperWidgetScope, c1, c4 );
+.highlight-color-mix( @changesListWrapperWidgetScope, c1, c5 );
+.highlight-color-mix( @changesListWrapperWidgetScope, c2, c3 );
+.highlight-color-mix( @changesListWrapperWidgetScope, c2, c4 );
+.highlight-color-mix( @changesListWrapperWidgetScope, c2, c5 );
+.highlight-color-mix( @changesListWrapperWidgetScope, c3, c4 );
+.highlight-color-mix( @changesListWrapperWidgetScope, c3, c5 );
+.highlight-color-mix( @changesListWrapperWidgetScope, c4, c5 );
// Three colors
-.highlight-color-mix( c1, c2, c3 );
-.highlight-color-mix( c1, c2, c5 );
-.highlight-color-mix( c1, c2, c4 );
-.highlight-color-mix( c1, c3, c4 );
-.highlight-color-mix( c1, c3, c5 );
-.highlight-color-mix( c1, c4, c5 );
-.highlight-color-mix( c2, c3, c4 );
-.highlight-color-mix( c2, c3, c5 );
-.highlight-color-mix( c2, c4, c5 );
-.highlight-color-mix( c3, c4, c5 );
+.highlight-color-mix( @changesListWrapperWidgetScope, c1, c2, c3 );
+.highlight-color-mix( @changesListWrapperWidgetScope, c1, c2, c5 );
+.highlight-color-mix( @changesListWrapperWidgetScope, c1, c2, c4 );
+.highlight-color-mix( @changesListWrapperWidgetScope, c1, c3, c4 );
+.highlight-color-mix( @changesListWrapperWidgetScope, c1, c3, c5 );
+.highlight-color-mix( @changesListWrapperWidgetScope, c1, c4, c5 );
+.highlight-color-mix( @changesListWrapperWidgetScope, c2, c3, c4 );
+.highlight-color-mix( @changesListWrapperWidgetScope, c2, c3, c5 );
+.highlight-color-mix( @changesListWrapperWidgetScope, c2, c4, c5 );
+.highlight-color-mix( @changesListWrapperWidgetScope, c3, c4, c5 );
// Four colors
-.highlight-color-mix( c1, c2, c3, c4 );
-.highlight-color-mix( c1, c2, c3, c5 );
-.highlight-color-mix( c1, c2, c4, c5 );
-.highlight-color-mix( c1, c3, c4, c5 );
-.highlight-color-mix( c2, c3, c4, c5 );
+.highlight-color-mix( @changesListWrapperWidgetScope, c1, c2, c3, c4 );
+.highlight-color-mix( @changesListWrapperWidgetScope, c1, c2, c3, c5 );
+.highlight-color-mix( @changesListWrapperWidgetScope, c1, c2, c4, c5 );
+.highlight-color-mix( @changesListWrapperWidgetScope, c1, c3, c4, c5 );
+.highlight-color-mix( @changesListWrapperWidgetScope, c2, c3, c4, c5 );
// Five colors:
.mw-rcfilters-highlight-color-c1.mw-rcfilters-highlight-color-c2.mw-rcfilters-highlight-color-c3.mw-rcfilters-highlight-color-c4.mw-rcfilters-highlight-color-c5
{
- .highlight-changesListWrapperWidget( tint( mix( @highlight-c1, mix(
@highlight-c2, mix( @highlight-c3, average( @highlight-c4, @highlight-c5 ), 20%
), 20% ), 20% ), 15% ) );
+ .highlight-changesListWrapperWidget( @changesListWrapperWidgetScope,
tint( mix( @highlight-c1, mix( @highlight-c2, mix( @highlight-c3, average(
@highlight-c4, @highlight-c5 ), 20% ), 20% ), 20% ), 15% ) );
}
--
To view, visit https://gerrit.wikimedia.org/r/370136
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I64796fd350b4c9914fea07c5e175ea5c6ade2fcd
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: Mooeypoo <mor...@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
