wikimedia/mediawiki-extensions-Echo
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/Echo synced 2024-11-12 01:10:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Change mark as read buttons to circles

Browse source 
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
This commit is contained in:
Moriel Schottlender 2016-06-20 13:00:37 -07:00
parent 6b20e63b73
commit f84808b83a
6 changed files with 112 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Resources.php
View file

@ -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',

8
modules/styles/mw.echo.ui.CrossWikiNotificationItemWidget.less
View file

@ -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;

21
modules/styles/mw.echo.ui.NotificationItemWidget.less
View file

@ -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 {

30
modules/styles/mw.echo.ui.ToggleReadCircleButtonWidget.less Normal file
View file

@ -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;
}
}
}

26
modules/ui/mw.echo.ui.NotificationItemWidget.js
View file

@ -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' );

53
modules/ui/mw.echo.ui.ToggleReadCircleButtonWidget.js Normal file
View file

@ -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 );