Tobias Gritschacher has submitted this change and it was merged. Change subject: Adding and applying a new icon for the snak type selector ......................................................................
Adding and applying a new icon for the snak type selector Replaces the inappropriate gear icon triggering the snak type selection with a custom icon. Change-Id: Ide03e6b2e2c355c7550417e961a2adbec22c5a7d --- M lib/resources/Resources.php M lib/resources/jquery.wikibase/jquery.wikibase.snakview/snakview.SnakTypeSelector.js A lib/resources/jquery.wikibase/jquery.wikibase.snakview/themes/default/images/ui-icon_snaktypeselector_2694e8.png A lib/resources/jquery.wikibase/jquery.wikibase.snakview/themes/default/images/ui-icon_snaktypeselector_3d80b3.png A lib/resources/jquery.wikibase/jquery.wikibase.snakview/themes/default/images/ui-icon_snaktypeselector_666666.png A lib/resources/jquery.wikibase/jquery.wikibase.snakview/themes/default/snakview.SnakTypeSelector.css 6 files changed, 53 insertions(+), 3 deletions(-) Approvals: Tobias Gritschacher: Verified; Looks good to me, approved jenkins-bot: Verified diff --git a/lib/resources/Resources.php b/lib/resources/Resources.php index 3a3986f..9091b9d 100644 --- a/lib/resources/Resources.php +++ b/lib/resources/Resources.php @@ -537,6 +537,9 @@ 'jquery.wikibase/jquery.wikibase.snakview/snakview.variations.SomeValue.js', 'jquery.wikibase/jquery.wikibase.snakview/snakview.variations.NoValue.js', ), + 'styles' => array( + 'jquery.wikibase/jquery.wikibase.snakview/themes/default/snakview.SnakTypeSelector.css', + ), 'dependencies' => array( 'jquery.eachchange', 'jquery.nativeEventHandler', diff --git a/lib/resources/jquery.wikibase/jquery.wikibase.snakview/snakview.SnakTypeSelector.js b/lib/resources/jquery.wikibase/jquery.wikibase.snakview/snakview.SnakTypeSelector.js index e5dbbc5..24009a6 100644 --- a/lib/resources/jquery.wikibase/jquery.wikibase.snakview/snakview.SnakTypeSelector.js +++ b/lib/resources/jquery.wikibase/jquery.wikibase.snakview/snakview.SnakTypeSelector.js @@ -39,6 +39,12 @@ widgetBaseClass: 'wb-snaktypeselector', /** + * Icon node. + * @type {jQuery} + */ + $icon: null, + + /** * The menu's Widget object * @type Object */ @@ -62,7 +68,13 @@ // TODO: add a title message this.element - .addClass( 'ui-icon ui-icon-gear ' + this.widgetBaseClass ) + .addClass( 'ui-state-default ' + this.widgetBaseClass ) + .on( 'mouseover', function( event ) { + self.element.addClass( 'ui-state-hover' ) + } ) + .on( 'mouseout', function( event ) { + self.element.removeClass( 'ui-state-hover' ) + } ) .on( 'click.wb-snaktypeselector', function( event ) { // don't show menu if selector is disabled! // otherwise, simply toggle menu's visibility @@ -74,11 +86,14 @@ $menu.show(); self.repositionMenu(); + self.element.addClass( 'ui-state-active' ); + // close the menu when clicking, regardless of whether the click is performed on the // menu itself or outside of it: var degrade = function( event ) { if ( event.target !== self.element[0] ) { $menu.hide(); + self.element.removeClass( 'ui-state-active' ); } self._unbindGlobalListenersFn(); }; @@ -92,6 +107,10 @@ $( document ).on( 'mouseup.wb-snaktypeselector', degrade ); $( window ).on( 'resize.wb-snaktypeselector', degrade ); } ); + + this.$icon = $( '<span/>' ) + .addClass( 'ui-icon ui-icon-snaktypeselector' ) + .appendTo( this.element ); // listen to clicks; after click on a menu item, select its type as active: $menu.on( 'click', function( event ) { @@ -112,7 +131,9 @@ this._menu.destroy(); $menu.remove(); - this.element.removeClass( 'ui-icon ui-icon-gear ' + this.widgetBaseClass ); + this.$icon.remove(); + + this.element.removeClass( 'ui-state-default ui-state-hover ' + this.widgetBaseClass ); // remove event listeners responsible for closing this instance's menu: this._unbindGlobalListenersFn(); @@ -126,7 +147,18 @@ */ disable: function() { this._menu.element.hide(); + this.element.removeClass( 'ui-state-active ui-state-hover' ); + this.element.addClass( 'ui-state-disabled' ); return PARENT.prototype.disable.call( this ); + }, + + /** + * @see jQuery.Widget.enable + * @since 0.4 + */ + enable: function() { + this.element.removeClass( 'ui-state-disabled' ); + return PARENT.prototype.enable.call( this ); }, /** @@ -216,7 +248,7 @@ var isRtl = $( 'body' ).hasClass( 'rtl' ); this._menu.element.position( { - of: this.element, + of: this.$icon, my: ( isRtl ? 'right' : 'left' ) + ' top', at: ( isRtl ? 'left' : 'right' ) + ' bottom', offset: '0 1', diff --git a/lib/resources/jquery.wikibase/jquery.wikibase.snakview/themes/default/images/ui-icon_snaktypeselector_2694e8.png b/lib/resources/jquery.wikibase/jquery.wikibase.snakview/themes/default/images/ui-icon_snaktypeselector_2694e8.png new file mode 100644 index 0000000..6e4f27c --- /dev/null +++ b/lib/resources/jquery.wikibase/jquery.wikibase.snakview/themes/default/images/ui-icon_snaktypeselector_2694e8.png Binary files differ diff --git a/lib/resources/jquery.wikibase/jquery.wikibase.snakview/themes/default/images/ui-icon_snaktypeselector_3d80b3.png b/lib/resources/jquery.wikibase/jquery.wikibase.snakview/themes/default/images/ui-icon_snaktypeselector_3d80b3.png new file mode 100644 index 0000000..ec76b08 --- /dev/null +++ b/lib/resources/jquery.wikibase/jquery.wikibase.snakview/themes/default/images/ui-icon_snaktypeselector_3d80b3.png Binary files differ diff --git a/lib/resources/jquery.wikibase/jquery.wikibase.snakview/themes/default/images/ui-icon_snaktypeselector_666666.png b/lib/resources/jquery.wikibase/jquery.wikibase.snakview/themes/default/images/ui-icon_snaktypeselector_666666.png new file mode 100644 index 0000000..df2e5da --- /dev/null +++ b/lib/resources/jquery.wikibase/jquery.wikibase.snakview/themes/default/images/ui-icon_snaktypeselector_666666.png Binary files differ diff --git a/lib/resources/jquery.wikibase/jquery.wikibase.snakview/themes/default/snakview.SnakTypeSelector.css b/lib/resources/jquery.wikibase/jquery.wikibase.snakview/themes/default/snakview.SnakTypeSelector.css new file mode 100644 index 0000000..7b8826a --- /dev/null +++ b/lib/resources/jquery.wikibase/jquery.wikibase.snakview/themes/default/snakview.SnakTypeSelector.css @@ -0,0 +1,15 @@ +.wb-snak-typeselector .wb-snaktypeselector { + border: none; +} + +/* TODO: Move to vector theme and add default coloured icons */ + +.ui-state-default .ui-icon-snaktypeselector { + background-image: url(images/ui-icon_snaktypeselector_3d80b3.png); +} +.ui-state-hover .ui-icon-snaktypeselector { + background-image: url(images/ui-icon_snaktypeselector_2694e8.png); +} +.ui-state-active .ui-icon-snaktypeselector { + background-image: url(images/ui-icon_snaktypeselector_666666.png); +} -- To view, visit https://gerrit.wikimedia.org/r/61551 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: Ide03e6b2e2c355c7550417e961a2adbec22c5a7d Gerrit-PatchSet: 4 Gerrit-Project: mediawiki/extensions/Wikibase Gerrit-Branch: master Gerrit-Owner: Henning Snater <henning.sna...@wikimedia.de> Gerrit-Reviewer: Tobias Gritschacher <tobias.gritschac...@wikimedia.de> Gerrit-Reviewer: jenkins-bot _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits