From f84808b83a1b8efe60e507172abbbba1c3b2b1d2 Mon Sep 17 00:00:00 2001 From: Moriel Schottlender Date: Mon, 20 Jun 2016 13:00:37 -0700 Subject: [PATCH] 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 | 2 + ...ho.ui.CrossWikiNotificationItemWidget.less | 8 +++ .../mw.echo.ui.NotificationItemWidget.less | 21 +++----- ....echo.ui.ToggleReadCircleButtonWidget.less | 30 +++++++++++ .../ui/mw.echo.ui.NotificationItemWidget.js | 26 ++++----- ...mw.echo.ui.ToggleReadCircleButtonWidget.js | 53 +++++++++++++++++++ 6 files changed, 112 insertions(+), 28 deletions(-) create mode 100644 modules/styles/mw.echo.ui.ToggleReadCircleButtonWidget.less create mode 100644 modules/ui/mw.echo.ui.ToggleReadCircleButtonWidget.js diff --git a/Resources.php b/Resources.php index e815aea30..73b6ed9be 100644 --- a/Resources.php +++ b/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', diff --git a/modules/styles/mw.echo.ui.CrossWikiNotificationItemWidget.less b/modules/styles/mw.echo.ui.CrossWikiNotificationItemWidget.less index 8a95a5970..1df215385 100644 --- a/modules/styles/mw.echo.ui.CrossWikiNotificationItemWidget.less +++ b/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; diff --git a/modules/styles/mw.echo.ui.NotificationItemWidget.less b/modules/styles/mw.echo.ui.NotificationItemWidget.less index 82b02ca64..983c7600d 100644 --- a/modules/styles/mw.echo.ui.NotificationItemWidget.less +++ b/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; - margin-right: -0.4em; + // Compensate for the padding in the item widget + margin-top: -0.8em; + margin-right: -1em; padding: 0; - .mw-echo-ui-notificationItemWidget-bundle & { - font-size: 0.8em; + .mw-echo-ui-notificationItemWidget-bundled & { 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 { diff --git a/modules/styles/mw.echo.ui.ToggleReadCircleButtonWidget.less b/modules/styles/mw.echo.ui.ToggleReadCircleButtonWidget.less new file mode 100644 index 000000000..442f6908e --- /dev/null +++ b/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; + } + } +} diff --git a/modules/ui/mw.echo.ui.NotificationItemWidget.js b/modules/ui/mw.echo.ui.NotificationItemWidget.js index 1be5349be..c51530101 100644 --- a/modules/ui/mw.echo.ui.NotificationItemWidget.js +++ b/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( { - icon: 'close', + this.markAsReadButton = new mw.echo.ui.ToggleReadCircleButtonWidget( { 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 - * 'mark as unread' and update the visibility of the primary 'mark as read' X button. + * Toggle the function of the 'mark as read' buttons from 'mark as read' to 'mark as unread' + * 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 ) { - show = show !== undefined ? show : !this.model.isRead(); + mw.echo.ui.NotificationItemWidget.prototype.toggleMarkAsReadButtons = function ( showMarkAsRead ) { + 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' ); diff --git a/modules/ui/mw.echo.ui.ToggleReadCircleButtonWidget.js b/modules/ui/mw.echo.ui.ToggleReadCircleButtonWidget.js new file mode 100644 index 000000000..819005024 --- /dev/null +++ b/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 = $( '
' ) + .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 );