Merge "mediawiki.widgets: Cleanup TitleWidget styles and improve API"

resources/src/mediawiki.widgets/mw.widgets.TitleOptionWidget.js

@@ -13,9 +13,9 @@
 	 * @extends OO.ui.MenuOptionWidget
 	 *
 	 * @constructor
-	 * @param {Object} [config] Configuration options
-	 * @cfg {string} [data] Label to display
-	 * @cfg {mw.Title} [title] Page title object
+	 * @param {Object} config Configuration options
+	 * @cfg {string} data Label to display
+	 * @cfg {string} url URL of page
 	 * @cfg {string} [imageUrl] Thumbnail image URL with URL encoding
 	 * @cfg {string} [description] Page description
 	 * @cfg {boolean} [missing] Page doesn't exist
@@ -40,24 +40,22 @@
 		config = $.extend( {
 			icon: icon,
 			label: config.data,
-			href: config.title.getUrl(),
-			autoFitLabel: false
+			autoFitLabel: false,
+			$label: $( '<a>' )
 		}, config );
 
 		// Parent constructor
 		mw.widgets.TitleOptionWidget.parent.call( this, config );
 
 		// Initialization
-		this.$label.wrap( '<a>' );
-		this.$link = this.$label.parent();
-		this.$link.attr( 'href', config.href );
+		this.$label.attr( 'href', config.url );
 		this.$element.addClass( 'mw-widget-titleOptionWidget' );
 
 		// Highlight matching parts of link suggestion
 		this.$label.autoEllipsis( { hasSpan: false, tooltip: true, matchText: config.query } );
 
 		if ( config.missing ) {
-			this.$link.addClass( 'new' );
+			this.$label.addClass( 'new' );
 		}
 
 		if ( config.imageUrl ) {
@@ -73,11 +71,6 @@
 					.text( config.description )
 			);
 		}
-
-		// Events
-		this.$link.on( 'click', function () {
-			return false;
-		} );
 	};
 
 	/* Setup */

resources/src/mediawiki.widgets/mw.widgets.TitleWidget.js

@@ -47,6 +47,7 @@
 		this.cache = config.cache;
 
 		// Initialization
+		this.$element.addClass( 'mw-widget-titleWidget' );
 		this.interwikiPrefixes = [];
 		this.interwikiPrefixesPromise = new mw.Api().get( {
 			action: 'query',
@@ -239,7 +240,7 @@
 	/**
 	 * Get menu option widget data from the title and page data
 	 *
-	 * @param {mw.Title} title Title object
+	 * @param {string} title Title object
 	 * @param {Object} data Page data
 	 * @return {Object} Data for option widget
 	 */
@@ -249,7 +250,7 @@
 			data: this.namespace !== null && this.relative
 				? mwTitle.getRelativeText( this.namespace )
 				: title,
-			title: mwTitle,
+			url: mwTitle.getUrl(),
 			imageUrl: this.showImages ? data.imageUrl : null,
 			description: this.showDescriptions ? data.description : null,
 			missing: data.missing,

resources/src/mediawiki.widgets/mw.widgets.TitleWidget.less

@@ -5,59 +5,73 @@
  * @license The MIT License (MIT); see LICENSE.txt
  */
 
-.mw-widget-titleOptionWidget-description {
-	display: none;
-}
-
 .mw-widget-titleWidget {
+	.mw-widget-titleOptionWidget {
+		line-height: normal;
+
+		&-description {
+			color: #888;
+		}
+	}
+
 	&-menu-withImages {
 		.mw-widget-titleOptionWidget {
 			-webkit-box-sizing: border-box;
 			-moz-box-sizing: border-box;
 			box-sizing: border-box;
 			min-height: 3.75em;
-			margin-left: 3.75em;
+			padding-left: 4.75em;
+
+			&:not(:last-child) {
+				margin-bottom: 2px;
+			}
+
+			> .oo-ui-labelElement-label {
+				line-height: 2.8em;
+			}
+
+			&.oo-ui-iconElement {
+				>.oo-ui-iconElement-icon {
+					display: block;
+					width: 3.75em;
+					height: 3.75em;
+					left: 0;
+					background-color: #ccc;
+					opacity: 0.4;
+				}
+
+				> .mw-widget-titleOptionWidget-hasImage {
+					border: 0;
+					background-size: cover;
+					opacity: 0.7;
+				}
+			}
 		}
 
-		.mw-widget-titleOptionWidget:not(:last-child) {
-			margin-bottom: 1px;
-		}
-
-		.oo-ui-iconElement .oo-ui-iconElement-icon {
-			display: block;
-			width: 3.75em;
-			height: 3.75em;
-			left: -3.75em;
-			background-color: #ccc;
-			opacity: 0.4;
-		}
-
-		.oo-ui-iconElement .mw-widget-titleOptionWidget-hasImage {
-			border: 0;
-			background-size: cover;
-			opacity: 1;
-		}
-
-		.mw-widget-titleOptionWidget .oo-ui-labelElement-label {
-			line-height: 2.8em;
+		&.oo-ui-optionWidget-highlighted, &.oo-ui-optionWidget-selected {
+			&.oo-ui-iconElement > .mw-widget-titleOptionWidget-hasImage {
+				opacity: 1;
+			}
 		}
 	}
 
 	&-menu-withDescriptions {
-		.mw-widget-titleOptionWidget .oo-ui-labelElement-label {
-			line-height: 1.5em;
-		}
+		.mw-widget-titleOptionWidget {
+			> .oo-ui-labelElement-label {
+				line-height: 1.5em;
+			}
 
+			&-description {
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				overflow: hidden;
+			}
+		}
+	}
+
+	&:not(&-menu-withDescriptions) {
 		.mw-widget-titleOptionWidget-description {
-			display: block;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			overflow: hidden;
+			display: none;
 		}
 	}
 }
-
-.oo-ui-menuOptionWidget:not(.oo-ui-optionWidget-selected) .mw-widget-titleOptionWidget-description,
-.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted .mw-widget-titleOptionWidget-description {
-	color: #888;
-}