From d6ff526ae39b4b460d800169ba1640d20b084b8a Mon Sep 17 00:00:00 2001 From: Volker E Date: Sat, 7 Apr 2018 20:20:20 -0700 Subject: [PATCH] RCFilters: Improve circle mixin and change to new standard icon size Improve circle mixin, variables and apply standard icon size: - Apply new icon size of 20px, - Divert `.mw-rcfilters-mixin-circle()` into two mixins, applying former only on circle classes to not repeat output of shared properties for each color, - Add new parameter to apply `px` based `min-width`/`min-height` to circumvent rendering issues, - Rename variables for unification with WikimediaUI Base vars and easier readability Bug: T190980 Change-Id: I76fec57ff237ba02afefcea28916d8348bac9b0e --- .../styles/mw.rcfilters.mixins.less | 22 +++-- ...perWidget.highlightCircles.seenunseen.less | 53 ++++++------ ...rcfilters.ui.ChangesListWrapperWidget.less | 84 ++++++++++--------- ...cfilters.ui.FilterItemHighlightButton.less | 15 ++-- ...filters.ui.HighlightColorPickerWidget.less | 60 +++++++------ .../styles/mw.rcfilters.ui.TagItemWidget.less | 18 ++-- .../styles/mw.rcfilters.variables.less | 14 +++- 7 files changed, 146 insertions(+), 120 deletions(-) diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less index daa7a91f03..242d280c62 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less @@ -8,19 +8,23 @@ animation-delay: @arguments; // Chrome 43+, Firefox 16+, IE 10+, Edge 12+, Safari 9+, Opera 12.10 & 30+, iOS 9+, Android 47+ } -// This is a general mixin for a color circle -.mw-rcfilters-mixin-circle( @color: @color-base--inverted, @diameter: 2em, @padding: 0.5em, @border: false, @borderColor: @colorGray5, @emptyBackground: false ) { +// Circle mixin +.mw-rcfilters-circle( @min-size-diameter: @min-size-circle, @size-diameter: @size-circle, @margin: 0.5em ) { .box-sizing( border-box ); - min-width: @diameter; - width: @diameter; - min-height: @diameter; - height: @diameter; - margin: @padding; + min-width: @min-size-diameter; + width: @size-diameter; + min-height: @min-size-diameter; + height: @size-diameter; + margin: @margin; border-radius: 50%; +} +// Circle color mixin +.mw-rcfilters-circle-color( @color: @color-base--inverted, @border: false, @borderColor: @colorGray5, @emptyBackground: false ) { & when ( @emptyBackground = false ) { background-color: @color; } + & when ( @emptyBackground = true ) { background-color: @highlight-none; } @@ -35,8 +39,8 @@ // a color class on its parent element .result-circle( @colorName: 'none' ) { &-@{colorName} { - .mw-rcfilters-mixin-circle( ~'@{highlight-@{colorName}}', @result-circle-diameter, 0 ); display: none; + .mw-rcfilters-circle-color( ~'@{highlight-@{colorName}}' ); .mw-rcfilters-highlight-color-@{colorName} & { display: inline-block; @@ -46,7 +50,7 @@ // A mixin for changes list containers. Applies enough margin-left to fit the 5 highlight circles. .result-circle-margin() { - margin-left: ~'calc( ( @{result-circle-diameter} + @{result-circle-margin} ) * 5 + @{result-circle-general-margin} )'; + margin-left: ~'calc( ( @{size-circle-result} + @{margin-circle-result} ) * 5 + @{margin-circle} )'; } // A mixin just for changesListWrapperWidget page, to output the scope of the widget diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.highlightCircles.seenunseen.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.highlightCircles.seenunseen.less index 920fec3fe3..e90ce96477 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.highlightCircles.seenunseen.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.highlightCircles.seenunseen.less @@ -9,65 +9,68 @@ list-style: none; } } + + & > div { + margin-right: @margin-circle-result; + } } // Make more specific for the overrides div.mw-rcfilters-ui-highlights { body.mw-rcfilters-ui-initialized & { display: inline-block; + .mw-rcfilters-circle( @size-circle-result, @size-circle-result, 0 ); } &-color { &-none { display: inline-block; + .mw-changeslist-watchedseen & { .mw-rcfilters-ui-changesListWrapperWidget.mw-rcfilters-ui-changesListWrapperWidget-highlighted & { - .mw-rcfilters-mixin-circle( @highlight-none, @result-circle-diameter, 0, true, @highlight-grey, true ); + .mw-rcfilters-circle-color( @highlight-none, true, @highlight-grey, true ); } .mw-rcfilters-ui-changesListWrapperWidget:not( .mw-rcfilters-ui-changesListWrapperWidget-highlighted ) & { - .mw-rcfilters-mixin-circle( @highlight-none, @result-circle-diameter, 0, true, @highlight-bluedot, true ); + .mw-rcfilters-circle-color( @highlight-none, true, @highlight-bluedot, true ); } } .mw-changeslist-watchedunseen & { .mw-rcfilters-ui-changesListWrapperWidget.mw-rcfilters-ui-changesListWrapperWidget-highlighted & { - .mw-rcfilters-mixin-circle( @highlight-grey, @result-circle-diameter, 0, true, @highlight-grey ); + .mw-rcfilters-circle-color( @highlight-grey, true, @highlight-grey ); } .mw-rcfilters-ui-changesListWrapperWidget:not( .mw-rcfilters-ui-changesListWrapperWidget-highlighted ) & { - .mw-rcfilters-mixin-circle( @highlight-bluedot, @result-circle-diameter, 0, true, @highlight-bluedot ); + .mw-rcfilters-circle-color( @highlight-bluedot, true, @highlight-bluedot ); } } } - // Watchlist unseen highlighted fixes - // Seen (empty circle) - // There's no need to correct 'unseen' because that would be - // a filled colorful circle, which is the regular rendering - .mw-changeslist-watchedseen &-c1 { - .mw-rcfilters-mixin-circle( @highlight-c1, @result-circle-diameter, 0, true, @highlight-c1, true ); - } + } - .mw-changeslist-watchedseen &-c2 { - .mw-rcfilters-mixin-circle( @highlight-c2, @result-circle-diameter, 0, true, @highlight-c2, true ); - } + // Watchlist unseen highlighted fixes + // Seen (empty circle) + // There's no need to correct 'unseen' because that would be + // a filled colorful circle, which is the regular rendering + .mw-changeslist-watchedseen &-c1 { + .mw-rcfilters-circle-color( @highlight-c1, true, @highlight-c1, true ); + } - .mw-changeslist-watchedseen &-c3 { - .mw-rcfilters-mixin-circle( @highlight-c3, @result-circle-diameter, 0, true, @highlight-c3, true ); - } + .mw-changeslist-watchedseen &-c2 { + .mw-rcfilters-circle-color( @highlight-c2, true, @highlight-c2, true ); + } - .mw-changeslist-watchedseen &-c4 { - .mw-rcfilters-mixin-circle( @highlight-c4, @result-circle-diameter, 0, true, @highlight-c4, true ); - } + .mw-changeslist-watchedseen &-c3 { + .mw-rcfilters-circle-color( @highlight-c3, true, @highlight-c3, true ); + } - .mw-changeslist-watchedseen &-c5 { - .mw-rcfilters-mixin-circle( @highlight-c5, @result-circle-diameter, 0, true, @highlight-c5, true ); - } + .mw-changeslist-watchedseen &-c4 { + .mw-rcfilters-circle-color( @highlight-c4, true, @highlight-c4, true ); } - .mw-rcfilters-ui-changesListWrapperWidget & > div { - margin-right: @result-circle-margin; + .mw-changeslist-watchedseen &-c5 { + .mw-rcfilters-circle-color( @highlight-c5, true, @highlight-c5, true ); } } 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 e0c3c8b052..324c90073b 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less @@ -79,51 +79,53 @@ width: 100%; } } -} - -.mw-rcfilters-ui-highlights { - display: none; - padding: 0 @result-circle-general-margin 0 0; - // The width is 5 circles times their diameter + individual margin - // and then plus the general margin - width: ~'calc( ( @{result-circle-diameter} + @{result-circle-margin} ) * 5 )'; - // And we want to shift the entire block to the left of the li - position: relative; - // Negative left margin of width + padding - margin-left: ~'calc( ( @{result-circle-diameter} + @{result-circle-margin} ) * -5 - @{result-circle-general-margin} )'; - .mw-rcfilters-ui-changesListWrapperWidget-highlighted & { - display: inline-block; - } - - > div { - .box-sizing( border-box ); - margin-right: @result-circle-margin; - vertical-align: middle; - // This is to make the dots appear at the center of the - // text itself; it's a horrendous hack and blame JamesF for it. - margin-top: -2px; - float: right; - } - - &-color { - &-none { - .mw-rcfilters-mixin-circle( @highlight-none, @result-circle-diameter, 0, true ); + &-highlights { + display: none; + padding: 0 @margin-circle 0 0; + text-align: right; + // The width is 5 circles times their diameter + individual margin + // and then plus the general margin + width: ~'calc( ( @{size-circle-result} + @{margin-circle-result} ) * 5 )'; + // And we want to shift the entire block to the left of the li + position: relative; + // Negative left margin of width + padding + margin-left: ~'calc( ( @{size-circle-result} + @{margin-circle-result} ) * -5 - @{margin-circle} )'; + + .mw-rcfilters-ui-changesListWrapperWidget-highlighted & { display: inline-block; + } + + // This needs to be very specific, since these are + // position rules that should apply to all overrides + .mw-rcfilters-ui-changesListWrapperWidget .mw-rcfilters-ui-changesListWrapperWidget-highlights > div&-circle { + vertical-align: middle; + .mw-rcfilters-circle( @size-circle-result, @size-circle-result, 0 ); + // This is to make the dots appear at the center of the + // text itself; it's a horrendous hack and blame JamesF for it. + margin-top: -2px; + margin-right: @margin-circle-result; + } - .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 & { - display: none; + &-color { + &-none { + .mw-rcfilters-circle-color( @highlight-none, true ); + display: inline-block; + + .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 & { + display: none; + } } + .result-circle( c1 ); + .result-circle( c2 ); + .result-circle( c3 ); + .result-circle( c4 ); + .result-circle( c5 ); } - .result-circle( c1 ); - .result-circle( c2 ); - .result-circle( c3 ); - .result-circle( c4 ); - .result-circle( c5 ); } } @@ -184,7 +186,7 @@ .highlight-color-mix( c1, c3, c4, c5 ); .highlight-color-mix( c2, c3, c4, c5 ); -// Five colors: +// 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-results( tint( mix( @highlight-c1, mix( @highlight-c2, mix( @highlight-c3, average( @highlight-c4, @highlight-c5 ), 20% ), 20% ), 20% ), 15% ) ); } diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterItemHighlightButton.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterItemHighlightButton.less index dd77eeaa87..93fae1eaf3 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterItemHighlightButton.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterItemHighlightButton.less @@ -1,31 +1,30 @@ @import 'mw.rcfilters.mixins'; +@import 'mw.rcfilters.variables'; .mw-rcfilters-ui-filterItemHighlightButton { .oo-ui-buttonWidget.oo-ui-popupButtonWidget .oo-ui-buttonElement-button > &-circle { background-image: none; display: inline-block; vertical-align: middle; - margin-right: 0.2em; // Override OOUI rule on frameless icons opacity: 1; + .mw-rcfilters-circle( @min-size-circle, @size-circle, @margin-circle 0 ); &-color { &-c1 { - // These values duplicate the sizing of the icon - // width/height 1.875em - .mw-rcfilters-mixin-circle( @highlight-c1, 1.875em, 0.2em 0 ); + .mw-rcfilters-circle-color( @highlight-c1 ); } &-c2 { - .mw-rcfilters-mixin-circle( @highlight-c2, 1.875em, 0.2em 0 ); + .mw-rcfilters-circle-color( @highlight-c2 ); } &-c3 { - .mw-rcfilters-mixin-circle( @highlight-c3, 1.875em, 0.2em 0 ); + .mw-rcfilters-circle-color( @highlight-c3 ); } &-c4 { - .mw-rcfilters-mixin-circle( @highlight-c4, 1.875em, 0.2em 0 ); + .mw-rcfilters-circle-color( @highlight-c4 ); } &-c5 { - .mw-rcfilters-mixin-circle( @highlight-c5, 1.875em, 0.2em 0 ); + .mw-rcfilters-circle-color( @highlight-c5 ); } } } diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.HighlightColorPickerWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.HighlightColorPickerWidget.less index 41dc8cfe5f..deecd67eaf 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.HighlightColorPickerWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.HighlightColorPickerWidget.less @@ -1,48 +1,49 @@ @import 'mediawiki.ui/variables'; @import 'mw.rcfilters.mixins'; +@import 'mw.rcfilters.variables'; .mw-rcfilters-ui-highlightColorPickerWidget { &-label { display: block; font-weight: bold; - font-size: 1.2em; + font-size: 1.1425em; } &-buttonSelect { &-color { - // Override OOUI definition from padded popup; the definition - // forces the first-child to be margin-top:0; which overrides - // our definitions below where margin is 0.5em. - // We set up the margin-top as 0.5em for all circles so we get + .mw-rcfilters-circle( @min-size-circle-colorpicker, @size-circle-colorpicker, @margin-circle ); + + // Override OOUI rule from padded popup; + // We set margin-top as ≈0.357em≈5px for all circles so we get // a consistent result - &.oo-ui-widget-enabled.oo-ui-optionWidget.oo-ui-buttonElement.oo-ui-buttonElement-frameless.oo-ui-buttonOptionWidget { - margin-top: 0.5em; + &.oo-ui-buttonElement { + margin-top: @margin-circle; + + // Override OOUI rule on frameless :first-child buttons + &:first-child { + margin-left: 0; + } } // Make the rule much more specific to override OOUI - .oo-ui-iconElement-icon.oo-ui-icon-check { - // Override OOUI icon dimensions - // The parent is 2em with 0.5em margin - // (see mw-rcfilters-mixin-circle below) - // so here we want 2em - 0.5em = 1.5em - width: 1.5em; - height: 1.5em; - // By eye, this is centered horizontally for the color circle - margin-left: -0.1em; + &.oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon.oo-ui-icon-check { + // Align centered horizontally within the color circle + top: -2px; + left: 4 / @font-size-system-ui / @font-size-vector; // Override OOUI rule on frameless icons opacity: 1; } &-none { - .oo-ui-iconElement-icon.oo-ui-icon-check { - // By eye, this is centered horizontally for the white circle - margin-left: -0.2em; - } - - .mw-rcfilters-mixin-circle( @highlight-none, 2em, 0.5em, true ); + .mw-rcfilters-circle-color( @highlight-none, true ); // Override `border-style` to `dashed` border-style: dashed; + &.oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon.oo-ui-icon-check { + // Align centered horizontally in the dashed white circle with 1px border-width + left: 3 / @font-size-system-ui / @font-size-vector; + } + &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active, &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed, &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected { @@ -50,7 +51,8 @@ } } &-c1 { - .mw-rcfilters-mixin-circle( @highlight-c1 ); + .mw-rcfilters-circle-color( @highlight-c1, false ); + border-color: @highlight-c1; &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active, &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed, @@ -59,7 +61,8 @@ } } &-c2 { - .mw-rcfilters-mixin-circle( @highlight-c2 ); + .mw-rcfilters-circle-color( @highlight-c2, true ); + border-color: @highlight-c2; &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active, &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed, @@ -68,7 +71,8 @@ } } &-c3 { - .mw-rcfilters-mixin-circle( @highlight-c3 ); + .mw-rcfilters-circle-color( @highlight-c3, true ); + border-color: @highlight-c3; &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active, &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed, @@ -77,7 +81,8 @@ } } &-c4 { - .mw-rcfilters-mixin-circle( @highlight-c4 ); + .mw-rcfilters-circle-color( @highlight-c4, true ); + border-color: @highlight-c4; &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active, &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed, @@ -86,7 +91,8 @@ } } &-c5 { - .mw-rcfilters-mixin-circle( @highlight-c5 ); + .mw-rcfilters-circle-color( @highlight-c5, true ); + border-color: @highlight-c5; &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active, &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed, diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.TagItemWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.TagItemWidget.less index e9c982a86c..824485f877 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.TagItemWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.TagItemWidget.less @@ -2,6 +2,9 @@ @import 'mw.rcfilters.mixins'; @import 'mw.rcfilters.variables'; +@size-circle: 20 / @font-size-system-ui / @font-size-vector; +@margin-circle: 5 / @font-size-system-ui / @font-size-vector; + .mw-rcfilters-ui-tagItemWidget { // Background and color of the capsule widget need a bit // more specificity to override OOUI internals @@ -44,8 +47,8 @@ &-highlight { display: none; - margin-right: 0.5em; width: 10px; + margin-right: @margin-circle; &-highlighted { display: inline-block; @@ -53,29 +56,30 @@ &:before { content: ''; - position: absolute; display: block; + position: absolute; top: 50%; + .mw-rcfilters-circle( 10px, 10px, ~'-5px 0.5em 0 0' ); } &[ data-color='c1' ]:before { - .mw-rcfilters-mixin-circle( @highlight-c1, 10px, ~'-5px 0.5em 0 0' ); + .mw-rcfilters-circle-color( @highlight-c1 ); } &[ data-color='c2' ]:before { - .mw-rcfilters-mixin-circle( @highlight-c2, 10px, ~'-5px 0.5em 0 0' ); + .mw-rcfilters-circle-color( @highlight-c2 ); } &[ data-color='c3' ]:before { - .mw-rcfilters-mixin-circle( @highlight-c3, 10px, ~'-5px 0.5em 0 0' ); + .mw-rcfilters-circle-color( @highlight-c3 ); } &[ data-color='c4' ]:before { - .mw-rcfilters-mixin-circle( @highlight-c4, 10px, ~'-5px 0.5em 0 0' ); + .mw-rcfilters-circle-color( @highlight-c4 ); } &[ data-color='c5' ]:before { - .mw-rcfilters-mixin-circle( @highlight-c5, 10px, ~'-5px 0.5em 0 0' ); + .mw-rcfilters-circle-color( @highlight-c5 ); } } } diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.variables.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.variables.less index 987f525518..f59dc552ae 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.variables.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.variables.less @@ -24,11 +24,19 @@ // Muted state @muted-opacity: 0.5; +// Circles +@min-size-circle: 20px; +@size-circle: 20 / @font-size-system-ui / @font-size-vector; +@margin-circle: 5 / @font-size-system-ui / @font-size-vector; + // Result list circle indicators // Defined and used in mw.rcfilters.ui.ChangesListWrapperWidget.less -@result-circle-margin: 3px; -@result-circle-general-margin: 0.5em; +@margin-circle-result: 3px; // In these small sizes, 'em' appears // squished and inconsistent. // Pixels are better for this use case: -@result-circle-diameter: 6px; +@size-circle-result: 6px; + +// Color picker circles +@min-size-circle-colorpicker: 30px; +@size-circle-colorpicker: 30 / @font-size-system-ui / @font-size-vector; -- 2.20.1