Mooeypoo has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/340262 )
Change subject: RCFilters UI: Add 'select' state and styles to capsule items
......................................................................
RCFilters UI: Add 'select' state and styles to capsule items
When a user clicks a capsule item and it scrolls down to the filter
in the list, make sure the capsule is also showing it is selected.
Take that opportunity to apply the design per spec for the capsule
items.
Bug: T149391
Change-Id: Idac62dea0f7a699a6e80dd3dca3d30b8e28e63b8
---
M
resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.CapsuleItemWidget.less
M
resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.less
M resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js
M
resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js
M resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
5 files changed, 73 insertions(+), 16 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core
refs/changes/62/340262/1
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 2521899..09d0374 100644
---
a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.CapsuleItemWidget.less
+++
b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.CapsuleItemWidget.less
@@ -1,6 +1,28 @@
@import "mw.rcfilters.mixins";
.mw-rcfilters-ui-capsuleItemWidget {
+ background-color: #ffffff;
+ border-color: #979797;
+ color: #222222;
+
+ &-muted {
+ // Muted state
+ background-color: #eaecf0;
+ border-color: #c8ccd1;
+ .oo-ui-labelElement-label {
+ color: #72777d;
+ }
+
+ .oo-ui-buttonWidget {
+ opacity: @muted-opacity;
+ }
+ }
+
+ &-selected {
+ background-color: #eaf3ff;
+ border-color: #3366cc;
+ }
+
&-popup-content {
padding: 0.5em;
color: #54595d;
@@ -9,17 +31,6 @@
&.oo-ui-labelElement .oo-ui-labelElement-label {
vertical-align: middle;
cursor: pointer;
- }
-
- &-muted {
- // Muted state
- // We want everything muted except the circle
- background-color: rgba( 255, 255, 255, @muted-opacity );
-
- .oo-ui-labelElement-label,
- .oo-ui-buttonWidget {
- opacity: @muted-opacity;
- }
}
&-highlight {
diff --git
a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.less
b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.less
index 8921f7a..a0ef293 100644
---
a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.less
+++
b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.less
@@ -25,9 +25,4 @@
text-align: right;
padding-left: 0.5em;
}
-
- .oo-ui-capsuleItemWidget {
- color: #222;
- background-color: #fff;
- }
}
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 fc05649..c6c740c 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js
@@ -156,6 +156,21 @@
};
/**
+ * Set selected state on this widget
+ *
+ * @param {boolean} [isSelected] Widget is selected
+ */
+ mw.rcfilters.ui.CapsuleItemWidget.prototype.toggleSelected = function (
isSelected ) {
+ isSelected = isSelected !== undefined ? isSelected :
!this.selected;
+
+ if ( this.selected !== isSelected ) {
+ this.selected = isSelected;
+
+ this.$element.toggleClass(
'mw-rcfilters-ui-capsuleItemWidget-selected', this.selected );
+ }
+ };
+
+ /**
* Remove and destroy external elements of this widget
*/
mw.rcfilters.ui.CapsuleItemWidget.prototype.destroy = function () {
diff --git
a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js
b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js
index 8e0b259..8fb8474 100644
---
a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js
+++
b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js
@@ -31,6 +31,7 @@
this.model = model;
this.filterInput = filterInput;
this.isSelecting = false;
+ this.selected = null;
this.resetButton = new OO.ui.ButtonWidget( {
icon: 'trash',
@@ -185,6 +186,39 @@
};
/**
+ * Mark an item widget as selected
+ *
+ * @param {mw.rcfilters.ui.CapsuleItemWidget} item Capsule widget
+ */
+ mw.rcfilters.ui.FilterCapsuleMultiselectWidget.prototype.select =
function ( item ) {
+ if ( this.selected !== item ) {
+ // Unselect previous
+ if ( this.selected ) {
+ this.selected.toggleSelected( false );
+ }
+
+ // Select new one
+ this.selected = item;
+ if ( this.selected ) {
+ item.toggleSelected( true );
+ }
+ }
+ };
+
+
+ /**
+ * Reset selection and remove selected states from all items
+ */
+ mw.rcfilters.ui.FilterCapsuleMultiselectWidget.prototype.resetSelection
= function () {
+ if ( this.selected !== null ) {
+ this.selected = null;
+ this.getItems().forEach( function ( capsuleWidget ) {
+ capsuleWidget.toggleSelected( false );
+ } );
+ }
+ };
+
+ /**
* @inheritdoc
*/
mw.rcfilters.ui.FilterCapsuleMultiselectWidget.prototype.createItemWidget =
function ( data ) {
diff --git
a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
index bb213fd..dc3cfe5 100644
---
a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
+++
b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
@@ -82,6 +82,7 @@
// Highlight item
this.filterPopup.select( filterName );
+ this.capsule.select( item );
this.scrollToTop( filterWidget.$element );
};
@@ -94,6 +95,7 @@
mw.rcfilters.ui.FilterWrapperWidget.prototype.onCapsulePopupToggle =
function ( isVisible ) {
if ( !isVisible ) {
this.filterPopup.resetSelection();
+ this.capsule.resetSelection();
} else {
this.scrollToTop( this.capsule.$element, 10 );
}
--
To view, visit https://gerrit.wikimedia.org/r/340262
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Idac62dea0f7a699a6e80dd3dca3d30b8e28e63b8
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
