From db5336232bb25a8a9095911903519334051dd719 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Bartosz=20Dziewo=C5=84ski?= Date: Tue, 29 Sep 2015 01:32:37 +0200 Subject: [PATCH] mw.widgets.DateInputWidget: Actually display the indicator We were only passing stuff around... Change-Id: I0d494cffae0c26a6b04ffe102e9e9d6f3c5f5c81 --- .../mw.widgets.DateInputWidget.js | 29 ++++++++++++------- .../mw.widgets.DateInputWidget.less | 25 ++++++++++++++++ 2 files changed, 43 insertions(+), 11 deletions(-) diff --git a/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js b/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js index 3a018ce7aa..9231fcca5d 100644 --- a/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js +++ b/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js @@ -57,6 +57,7 @@ * * @class * @extends OO.ui.InputWidget + * @mixins OO.ui.mixin.IndicatorElement * * @constructor * @param {Object} [config] Configuration options @@ -104,7 +105,8 @@ } // Properties (must be set before parent constructor, which calls #setValue) - this.handle = new OO.ui.LabelWidget(); + this.$handle = $( '
' ); + this.label = new OO.ui.LabelWidget(); this.textInput = new OO.ui.TextInputWidget( { required: config.required, placeholder: placeholder, @@ -141,6 +143,9 @@ // Parent constructor mw.widgets.DateInputWidget.parent.call( this, config ); + // Mixin constructors + OO.ui.mixin.IndicatorElement.call( this, config ); + // Events this.calendar.connect( this, { change: 'onCalendarChange' @@ -155,21 +160,22 @@ this.calendar.$element.on( { keypress: this.onCalendarKeyPress.bind( this ) } ); - this.handle.$element.on( { + this.$handle.on( { click: this.onClick.bind( this ), keypress: this.onKeyPress.bind( this ) } ); // Initialization // Move 'tabindex' from this.$input (which is invisible) to the visible handle - this.setTabIndexedElement( this.handle.$element ); - this.handle.$element + this.setTabIndexedElement( this.$handle ); + this.$handle + .append( this.label.$element, this.$indicator ) .addClass( 'mw-widget-dateInputWidget-handle' ); this.calendar.$element .addClass( 'mw-widget-dateInputWidget-calendar' ); this.$element .addClass( 'mw-widget-dateInputWidget' ) - .append( this.handle.$element, this.textInput.$element, this.calendar.$element ); + .append( this.$handle, this.textInput.$element, this.calendar.$element ); if ( config.$overlay ) { this.calendar.setFloatableContainer( this.$element ); @@ -212,6 +218,7 @@ /* Inheritance */ OO.inheritClass( mw.widgets.DateInputWidget, OO.ui.InputWidget ); + OO.mixinClass( mw.widgets.DateInputWidget, OO.ui.mixin.IndicatorElement ); /* Methods */ @@ -337,7 +344,7 @@ if ( this.getValue() === '' ) { this.textInput.setValue( '' ); this.calendar.setDate( null ); - this.handle.setLabel( mw.msg( 'mw-widgets-dateinput-no-date' ) ); + this.label.setLabel( mw.msg( 'mw-widgets-dateinput-no-date' ) ); this.$element.addClass( 'mw-widget-dateInputWidget-empty' ); } else { if ( !this.inTextInput ) { @@ -346,7 +353,7 @@ if ( !this.inCalendar ) { this.calendar.setDate( this.getValue() ); } - this.handle.setLabel( this.getMoment().format( this.getDisplayFormat() ) ); + this.label.setLabel( this.getMoment().format( this.getDisplayFormat() ) ); this.$element.removeClass( 'mw-widget-dateInputWidget-empty' ); } }; @@ -358,7 +365,7 @@ */ mw.widgets.DateInputWidget.prototype.deactivate = function () { this.$element.removeClass( 'mw-widget-dateInputWidget-active' ); - this.handle.toggle( true ); + this.$handle.show(); this.textInput.toggle( false ); this.calendar.toggle( false ); this.setValidityFlag(); @@ -372,7 +379,7 @@ mw.widgets.DateInputWidget.prototype.activate = function () { this.calendar.resetUI(); this.$element.addClass( 'mw-widget-dateInputWidget-active' ); - this.handle.toggle( false ); + this.$handle.hide(); this.textInput.toggle( true ); this.calendar.toggle( true ); @@ -491,7 +498,7 @@ mw.widgets.DateInputWidget.prototype.onCalendarKeyPress = function ( e ) { if ( !this.isDisabled() && e.which === OO.ui.Keys.ENTER ) { this.deactivate(); - this.handle.$element.focus(); + this.$handle.focus(); return false; } }; @@ -503,7 +510,7 @@ */ mw.widgets.DateInputWidget.prototype.onEnter = function () { this.deactivate(); - this.handle.$element.focus(); + this.$handle.focus(); }; /** diff --git a/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less b/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less index bc8ab22da9..873cca1910 100644 --- a/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less +++ b/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less @@ -26,6 +26,8 @@ } } +@indicator-size: unit(12 / 16 / 0.8, em); + .mw-widget-dateInputWidget { display: inline-block; position: relative; @@ -34,9 +36,22 @@ width: 100%; display: inline-block; cursor: pointer; + position: relative; .oo-ui-unselectable(); .oo-ui-box-sizing(border-box); + + > .oo-ui-indicatorElement-indicator { + display: none; + } + } + + &.oo-ui-indicatorElement .mw-widget-dateInputWidget-handle > .oo-ui-indicatorElement-indicator { + display: block; + position: absolute; + top: 0; + right: 0; + height: 100%; } &.oo-ui-widget-disabled .mw-widget-dateInputWidget-handle { @@ -62,6 +77,11 @@ background-color: white; } + &.oo-ui-indicatorElement .mw-widget-dateInputWidget-handle > .oo-ui-indicatorElement-indicator { + width: @indicator-size; + margin: 0 0.775em; + } + > .oo-ui-textInputWidget input { padding-left: 1em; } @@ -91,7 +111,12 @@ text-shadow: 0 1px 1px #fff; border-color: #ddd; background-color: #f3f3f3; + + > .oo-ui-indicatorElement-indicator { + opacity: 0.2; + } } + } &.oo-ui-flaggedElement-invalid { -- 2.20.1