*/
mw.rcfilters.Controller.prototype.resetToDefaults = function () {
this.filtersModel.setFiltersToDefaults();
+ // Check all filter interactions
+ this.filtersModel.reassessFilterInteractions();
+
this.updateURL();
this.updateChangesList();
};
mw.rcfilters.Controller.prototype.emptyFilters = function () {
this.filtersModel.emptyAllFilters();
this.filtersModel.clearAllHighlightColors();
+ // Check all filter interactions
+ this.filtersModel.reassessFilterInteractions();
+
this.updateURL();
this.updateChangesList();
};
@import "mw.rcfilters.mixins";
.mw-rcfilters-ui-capsuleItemWidget {
- &-popup {
- padding: 1em;
- }
-
- .oo-ui-popupWidget {
- // Fix the positioning of the popup itself
- margin-top: 1em;
+ &-popup-content {
+ padding: 0.5em;
+ color: #54595d;
}
&.oo-ui-labelElement .oo-ui-labelElement-label {
color: #72777d;
}
- &-table {
- display: table;
+ &-cell-filters {
width: 100%;
}
-
- &-row {
- display: table-row;
- }
-
- &-cell {
- display: table-cell;
-
- &:last-child {
- text-align: right;
- }
+ &-cell-reset {
+ text-align: right;
+ padding-left: 0.5em;
}
.oo-ui-capsuleItemWidget {
padding-top: 0.5em;
}
- &-filterCheckbox {
- &-label {
- &-title {
- font-weight: bold;
- font-size: 1.2em;
- color: #222;
- }
- &-desc {
- color: #464a4f;
- }
+ &-muted {
+ background-color: #f8f9fa; // Base90 AAA
+ .mw-rcfilters-ui-filterItemWidget-label-title,
+ .mw-rcfilters-ui-filterItemWidget-label-desc {
+ color: #54595d; // Base20 AAA
+ }
+ }
+
+ &-label {
+ &-title {
+ font-weight: bold;
+ font-size: 1.2em;
+ color: #222;
}
+ &-desc {
+ color: #464a4f;
+ }
+ }
+ &-filterCheckbox {
.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline {
// Override margin-top and -bottom rules from FieldLayout
margin: 0 !important;
}
- &-muted {
- opacity: 0.5;
- }
}
&-highlightButton {
*/
mw.rcfilters.ui.CapsuleItemWidget = function MwRcfiltersUiCapsuleItemWidget( controller, model, config ) {
var $popupContent = $( '<div>' )
- .addClass( 'mw-rcfilters-ui-capsuleItemWidget-popup' ),
+ .addClass( 'mw-rcfilters-ui-capsuleItemWidget-popup-content' ),
descLabelWidget = new OO.ui.LabelWidget();
// Configuration initialization
// Mixin constructors
OO.ui.mixin.PopupElement.call( this, $.extend( {
popup: {
- padded: true,
+ padded: false,
align: 'center',
$content: $popupContent
.append( descLabelWidget.$element ),
- $floatableContainer: this.$element
+ $floatableContainer: this.$element,
+ classes: [ 'mw-rcfilters-ui-capsuleItemWidget-popup' ]
}
}, config ) );
// Events
this.model.connect( this, { update: 'onModelUpdate' } );
- this.closeButton.connect( this, { click: 'onCapsuleRemovedByUser' } );
+ this.closeButton.$element.on( 'mousedown', this.onCloseButtonMouseDown.bind( this ) );
// Initialization
this.$overlay.append( this.popup.$element );
this.setHighlightColor();
};
+ /**
+ * Override mousedown event to prevent its propagation to the parent,
+ * since the parent (the multiselect widget) focuses the popup when its
+ * mousedown event is fired.
+ *
+ * @param {jQuery.Event} e Event
+ */
+ mw.rcfilters.ui.CapsuleItemWidget.prototype.onCloseButtonMouseDown = function ( e ) {
+ e.stopPropagation();
+ };
+
+ /**
+ * Override the event listening to the item close button click
+ */
+ mw.rcfilters.ui.CapsuleItemWidget.prototype.onCloseClick = function () {
+ var element = this.getElementGroup();
+
+ if ( element && $.isFunction( element.removeItems ) ) {
+ element.removeItems( [ this ] );
+ }
+
+ // Respond to user removing the filter
+ this.controller.updateFilter( this.model.getName(), false );
+ this.controller.clearHighlightColor( this.model.getName() );
+ };
+
mw.rcfilters.ui.CapsuleItemWidget.prototype.setHighlightColor = function () {
var selectedColor = this.model.isHighlightEnabled() ? this.model.getHighlightColor() : null;
}
};
- /**
- * Respond to the user removing the capsule with the close button
- */
- mw.rcfilters.ui.CapsuleItemWidget.prototype.onCapsuleRemovedByUser = function () {
- this.controller.updateFilter( this.model.getName(), false );
- this.controller.clearHighlightColor( this.model.getName() );
- };
-
/**
* Remove and destroy external elements of this widget
*/
* @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
*/
mw.rcfilters.ui.FilterCapsuleMultiselectWidget = function MwRcfiltersUiFilterCapsuleMultiselectWidget( controller, model, filterInput, config ) {
+ var title = new OO.ui.LabelWidget( {
+ label: mw.msg( 'rcfilters-activefilters' ),
+ classes: [ 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-wrapper-content-title' ]
+ } ),
+ $contentWrapper = $( '<div>' )
+ .addClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-wrapper' );
+
this.$overlay = config.$overlay || this.$element;
// Parent
this.filterInput = filterInput;
- this.$content.prepend(
- $( '<div>' )
- .addClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-content-title' )
- .text( mw.msg( 'rcfilters-activefilters' ) )
- );
-
this.resetButton = new OO.ui.ButtonWidget( {
icon: 'trash',
framed: false,
label: mw.msg( 'rcfilters-empty-filter' ),
classes: [ 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-emptyFilters' ]
} );
+ this.$content.append( this.emptyFilterMessage.$element );
// Events
this.resetButton.connect( this, { click: 'onResetButtonClick' } );
this.filterInput.$input
.on( 'focus', this.focus.bind( this ) );
+ // Build the content
+ $contentWrapper.append(
+ title.$element,
+ $( '<div>' )
+ .addClass( 'mw-rcfilters-ui-table' )
+ .append(
+ // The filter list and button should appear side by side regardless of how
+ // wide the button is; the button also changes its width depending
+ // on language and its state, so the safest way to present both side
+ // by side is with a table layout
+ $( '<div>' )
+ .addClass( 'mw-rcfilters-ui-row' )
+ .append(
+ this.$content
+ .addClass( 'mw-rcfilters-ui-cell' )
+ .addClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-cell-filters' ),
+ $( '<div>' )
+ .addClass( 'mw-rcfilters-ui-cell' )
+ .addClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-cell-reset' )
+ .append( this.resetButton.$element )
+ )
+ )
+ );
+
// Initialize
- this.$content.append( this.emptyFilterMessage.$element );
- this.$handle
- .append(
- // The content and button should appear side by side regardless of how
- // wide the button is; the button also changes its width depending
- // on language and its state, so the safest way to present both side
- // by side is with a table layout
- $( '<div>' )
- .addClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-table' )
- .append(
- $( '<div>' )
- .addClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-row' )
- .append(
- $( '<div>' )
- .addClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-content' )
- .addClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-cell' )
- .append( this.$content ),
- $( '<div>' )
- .addClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-cell' )
- .append( this.resetButton.$element )
- )
- )
- );
+ this.$handle.append( $contentWrapper );
this.$element
.addClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget' );
dépôts / lhc / web / wiklou.git / commitdiff