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 <[email protected]>
Gerrit-Reviewer: Tobias Gritschacher <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
