From 00ec42206d4821962d41b6f233765f5b860c6130 Mon Sep 17 00:00:00 2001 From: Moriel Schottlender Date: Thu, 2 Mar 2017 16:53:08 -0800 Subject: [PATCH] RCFilters UI: Adopt conflict colors Bug: T156427 Bug: T156861 Change-Id: I8765dfb0554e6351b9cb3516a2bc979c57b20053 --- .../mw.rcfilters.ui.CapsuleItemWidget.less | 18 ++++++++++++++++-- .../ui/mw.rcfilters.ui.CapsuleItemWidget.js | 5 ++++- 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.CapsuleItemWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.CapsuleItemWidget.less index c70da38029..8173150d5f 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.CapsuleItemWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.CapsuleItemWidget.less @@ -5,20 +5,34 @@ border-color: #979797; color: #222; - &-muted { + // Background and color of the capsule widget need a bit + // more specificity to override ooui internals + &-muted.oo-ui-capsuleItemWidget.oo-ui-widget-enabled { // Muted state background-color: #eaecf0; border-color: #c8ccd1; + .oo-ui-labelElement-label { color: #72777d; } + .oo-ui-buttonWidget { + opacity: @muted-opacity; + } + } + + &-conflicted.oo-ui-capsuleItemWidget.oo-ui-widget-enabled { + background-color: #fee7e6; // Red90 AAA + border-color: #b32424; // Red30 AAA + .oo-ui-labelElement-label { + color: #b32424; + } .oo-ui-buttonWidget { opacity: @muted-opacity; } } - &-selected { + &-selected.oo-ui-capsuleItemWidget.oo-ui-widget-enabled { background-color: #eaf3ff; border-color: #36c; } diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js index 800e7ea578..a7ad95423e 100644 --- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js +++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js @@ -135,8 +135,11 @@ 'mw-rcfilters-ui-capsuleItemWidget-muted', !this.model.isSelected() || this.model.isIncluded() || - this.model.isConflicted() || this.model.isFullyCovered() + ) + .toggleClass( + 'mw-rcfilters-ui-capsuleItemWidget-conflicted', + this.model.isConflicted() ); }; -- 2.20.1