Change mark as read buttons to circles

Allow for mark read and mark unread through the side button, and
change its style according to spec in the ticket.

Bug: T126214
Change-Id: I78a93c0545bbe2d7c11a0c62557cd2e97e9d3866

Resources.php

@@ -70,6 +70,7 @@ $wgResourceModules += array(
 			'ui/mw.echo.ui.SubGroupListWidget.js',
 			'ui/mw.echo.ui.NotificationsListWidget.js',
 			'ui/mw.echo.ui.PlaceholderItemWidget.js',
+			'ui/mw.echo.ui.ToggleReadCircleButtonWidget.js',
 			'ui/mw.echo.ui.NotificationItemWidget.js',
 			'ui/mw.echo.ui.SingleNotificationItemWidget.js',
 			'ui/mw.echo.ui.CrossWikiNotificationItemWidget.js',
@@ -84,6 +85,7 @@ $wgResourceModules += array(
 			'styles/mw.echo.ui.overlay.less',
 			'styles/mw.echo.ui.icons.less',
 			'styles/mw.echo.ui.NotificationItemWidget.less',
+			'styles/mw.echo.ui.ToggleReadCircleButtonWidget.less',
 			'styles/mw.echo.ui.CrossWikiNotificationItemWidget.less',
 			'styles/mw.echo.ui.NotificationsListWidget.less',
 			'styles/mw.echo.ui.PlaceholderItemWidget.less',

modules/styles/mw.echo.ui.CrossWikiNotificationItemWidget.less

@@ -6,6 +6,9 @@
 	padding-right: 0;
 	padding-bottom: 0;
 
+	// This is an abbreviation for the pieces that make up
+	// the face of the cross-wiki notification item
+	// without the inner group items
 	> .mw-echo-ui-notificationItemWidget {
 		// Compensate for the 0.8em of left/right padding and 0.5em of bottom padding that we removed
 		&-icon {
@@ -20,9 +23,14 @@
 			// 0.8em from ItemWidget, plus 0.8em
 			padding-left: 1.6em;
 			padding-right: 0.8em;
+
+			.mw-echo-ui-notificationItemWidget-markAsReadButton {
+				margin-right: -0.8em;
+			}
 		}
 	}
 
+
 	&-separator {
 		display: block;
 		position: absolute;

modules/styles/mw.echo.ui.NotificationItemWidget.less

@@ -156,34 +156,25 @@
 				}
 
 				&-markAsReadButton {
-					width: 1em;
+					display: table-cell;
+					vertical-align: top;
 					float: none;
-					padding-top: 0;
 				}
-
 			}
 		}
 	}
 
 	&-markAsReadButton {
-		.mw-echo-ui-mixin-hover-opacity;
 		float: right;
 		font-size: 1em;
-		margin-top: -0.5em;
+		// Compensate for the padding in the item widget
-		margin-right: -0.4em;
+		margin-top: -0.8em;
+		margin-right: -1em;
 		padding: 0;
 
-		.mw-echo-ui-notificationItemWidget-bundle & {
+		.mw-echo-ui-notificationItemWidget-bundled & {
-			font-size: 0.8em;
 			margin-top: 0;
 		}
-
-		.oo-ui-iconElement-icon {
-			// We have to override oojs-i's width/height,
-			// which uses a very specific selector
-			width: 1.7em !important;
-			height: 1.7em !important;
-		}
 	}
 
 	&-initiallyUnseen {

modules/styles/mw.echo.ui.ToggleReadCircleButtonWidget.less

@@ -0,0 +1,30 @@
+@import '../echo.variables';
+
+.mw-echo-ui-toggleReadCircleButtonWidget {
+	&-circle {
+		border-radius: 50%;
+		width: @bundle-group-padding;
+		height: @bundle-group-padding;
+		margin: @bundle-group-padding;
+
+		// Mark as read
+		background-color: #347BFF;
+		border: 0;
+
+		// Mark as unread
+		&-unread {
+			background-color: #eee;
+			border: 1px solid #bbb;
+		}
+	}
+
+	&:hover .mw-echo-ui-toggleReadCircleButtonWidget-circle {
+		// Mark as read
+		background-color: #ddd;
+
+		// Mark as unread
+		&-unread {
+			background-color: #ddd;
+		}
+	}
+}

modules/ui/mw.echo.ui.NotificationItemWidget.js

@@ -35,11 +35,11 @@
 			.addClass( 'mw-echo-ui-notificationItemWidget-content-actions' );
 
 		// Mark as read
-		this.markAsReadButton = new OO.ui.ButtonWidget( {
+		this.markAsReadButton = new mw.echo.ui.ToggleReadCircleButtonWidget( {
-			icon: 'close',
 			framed: false,
 			title: mw.msg( 'echo-notification-markasread-tooltip' ),
-			classes: [ 'mw-echo-ui-notificationItemWidget-markAsReadButton' ]
+			classes: [ 'mw-echo-ui-notificationItemWidget-markAsReadButton' ],
+			markAsRead: !this.model.isRead()
 		} );
 
 		// Icon
@@ -219,7 +219,7 @@
 	 * Respond to mark as read button click
 	 */
 	mw.echo.ui.NotificationItemWidget.prototype.onMarkAsReadButtonClick = function () {
-		this.markRead( true );
+		this.markRead( !this.model.isRead() );
 	};
 
 	/**
@@ -286,21 +286,21 @@
 	};
 
 	/**
-	 * Toggle the function of the 'mark as read' secondary button from 'mark as read' to
+	 * Toggle the function of the 'mark as read' buttons from 'mark as read' to 'mark as unread'
-	 * 'mark as unread' and update the visibility of the primary 'mark as read' X button.
+	 * and vice versa.
 	 *
-	 * @param {boolean} [show] Show the 'mark as read' buttons
+	 * @param {boolean} [showMarkAsRead] Show the 'mark as read' buttons
 	 *  - "false" means that the item is marked as read, whereby we show the user 'mark unread'
-	 *    and hide the primary 'x' button
+	 *    buttons.
 	 *  - "true" means that the item is marked as unread and we show the user 'mark as read'
-	 *    primary and secondary buttons.
+	 *    buttons
 	 */
-	mw.echo.ui.NotificationItemWidget.prototype.toggleMarkAsReadButtons = function ( show ) {
+	mw.echo.ui.NotificationItemWidget.prototype.toggleMarkAsReadButtons = function ( showMarkAsRead ) {
-		show = show !== undefined ? show : !this.model.isRead();
+		showMarkAsRead = showMarkAsRead !== undefined ? showMarkAsRead : !this.model.isRead();
 
-		this.markAsReadButton.toggle( show );
+		this.markAsReadButton.toggleState( showMarkAsRead );
 
-		if ( show ) {
+		if ( showMarkAsRead ) {
 			// Mark read
 			this.toggleReadSecondaryButton.setLabel( mw.msg( 'echo-notification-markasread' ) );
 			this.toggleReadSecondaryButton.setIcon( 'check' );

modules/ui/mw.echo.ui.ToggleReadCircleButtonWidget.js

@@ -0,0 +1,53 @@
+( function ( mw, $ ) {
+	/**
+	 * A button showing a circle that represents either 'mark as read' or 'mark as unread' states.
+	 *
+	 * @class
+	 * @extends OO.ui.ButtonWidget
+	 *
+	 * @constructor
+	 * @param {Object} [config] Configuration options
+	 * @cfg {boolean} [markAsRead=true] Display mark as read state. If false, the button displays
+	 *  mark as unread state.
+	 */
+	mw.echo.ui.ToggleReadCircleButtonWidget = function MwEchoUiToggleReadCircleButtonWidget( config ) {
+		config = config || {};
+
+		// Parent
+		mw.echo.ui.ToggleReadCircleButtonWidget.parent.call( this, config );
+
+		this.$circle = $( '<div>' )
+			.addClass( 'mw-echo-ui-toggleReadCircleButtonWidget-circle' );
+		this.$button.append( this.$circle );
+
+		this.toggleState( config.markAsRead === undefined ? true : !!config.markAsRead );
+
+		this.$element
+			.addClass( 'mw-echo-ui-toggleReadCircleButtonWidget' );
+	};
+
+	/* Initialization */
+
+	OO.inheritClass( mw.echo.ui.ToggleReadCircleButtonWidget, OO.ui.ButtonWidget );
+
+	/* Methods */
+
+	/**
+	 * Toggle the state of the button from 'mark as read' to 'mark as unread'
+	 * and vice versa.
+	 *
+	 * @param {boolean} [isMarkAsRead] The state is mark as read
+	 */
+	mw.echo.ui.ToggleReadCircleButtonWidget.prototype.toggleState = function ( isMarkAsRead ) {
+		isMarkAsRead = isMarkAsRead === undefined ? !this.markAsRead : !!isMarkAsRead;
+
+		this.markAsRead = isMarkAsRead;
+
+		this.$circle.toggleClass( 'mw-echo-ui-toggleReadCircleButtonWidget-circle-unread', !this.markAsRead );
+		this.setTitle(
+			this.markAsRead ?
+				mw.msg( 'echo-notification-markasread' ) :
+				mw.msg( 'echo-notification-markasunread' )
+		);
+	};
+} )( mediaWiki, jQuery );