Mooeypoo has uploaded a new change for review.
https://gerrit.wikimedia.org/r/295262
Change subject: [wip] Change mark as read buttons to circles
......................................................................
[wip] Change mark as read buttons to circles
Bug: T126214
Change-Id: I78a93c0545bbe2d7c11a0c62557cd2e97e9d3866
---
M Resources.php
M modules/styles/mw.echo.ui.NotificationItemWidget.less
A modules/styles/mw.echo.ui.ToggleReadCircleButtonWidget.less
M modules/ui/mw.echo.ui.NotificationItemWidget.js
A modules/ui/mw.echo.ui.ToggleReadCircleButtonWidget.js
5 files changed, 88 insertions(+), 12 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Echo
refs/changes/62/295262/1
diff --git a/Resources.php b/Resources.php
index e815aea..73b6ed9 100644
--- a/Resources.php
+++ b/Resources.php
@@ -70,6 +70,7 @@
'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 @@
'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.NotificationItemWidget.less
b/modules/styles/mw.echo.ui.NotificationItemWidget.less
index 82b02ca..402e2dc 100644
--- a/modules/styles/mw.echo.ui.NotificationItemWidget.less
+++ b/modules/styles/mw.echo.ui.NotificationItemWidget.less
@@ -166,11 +166,10 @@
}
&-markAsReadButton {
- .mw-echo-ui-mixin-hover-opacity;
float: right;
font-size: 1em;
- margin-top: -0.5em;
- margin-right: -0.4em;
+ margin-top: -2em;
+ margin-right: -1.4em;
padding: 0;
.mw-echo-ui-notificationItemWidget-bundle & {
diff --git a/modules/styles/mw.echo.ui.ToggleReadCircleButtonWidget.less
b/modules/styles/mw.echo.ui.ToggleReadCircleButtonWidget.less
new file mode 100644
index 0000000..b3d47f4
--- /dev/null
+++ b/modules/styles/mw.echo.ui.ToggleReadCircleButtonWidget.less
@@ -0,0 +1,28 @@
+.mw-echo-ui-toggleReadCircleButtonWidget {
+ &-circle {
+ border-radius: 50%;
+ width: 10px;
+ height: 10px;
+ margin: 20px;
+
+ // 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 1be5349..f28be4d 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() );
};
/**
@@ -289,18 +289,18 @@
* 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.
*
- * @param {boolean} [show] Show the 'mark as read' buttons
+ * @param {boolean} [isMarkAsRead] 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
* - "true" means that the item is marked as unread and we show the
user 'mark as read'
* primary and secondary buttons.
*/
- mw.echo.ui.NotificationItemWidget.prototype.toggleMarkAsReadButtons =
function ( show ) {
- show = show !== undefined ? show : !this.model.isRead();
+ mw.echo.ui.NotificationItemWidget.prototype.toggleMarkAsReadButtons =
function ( isMarkAsRead ) {
+ isMarkAsRead = isMarkAsRead !== undefined ? isMarkAsRead :
!this.model.isRead();
- this.markAsReadButton.toggle( show );
+ this.markAsReadButton.toggleState( isMarkAsRead );
- if ( show ) {
+ if ( isMarkAsRead ) {
// 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 0000000..4f90517
--- /dev/null
+++ b/modules/ui/mw.echo.ui.ToggleReadCircleButtonWidget.js
@@ -0,0 +1,47 @@
+( function ( mw, $ ) {
+ /**
+ *
+ * @class
+ * @abstract
+ * @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.toggleState( config.markAsRead === undefined ? true :
!!config.markAsRead );
+
+ this.$element
+ .addClass( 'mw-echo-ui-toggleReadCircleButtonWidget' )
+ .append( this.$circle );
+ };
+
+ /* Initialization */
+
+ OO.inheritClass( mw.echo.ui.ToggleReadCircleButtonWidget,
OO.ui.ButtonWidget );
+
+ /* Methods */
+
+ 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 );
--
To view, visit https://gerrit.wikimedia.org/r/295262
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I78a93c0545bbe2d7c11a0c62557cd2e97e9d3866
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Echo
Gerrit-Branch: master
Gerrit-Owner: Mooeypoo <mor...@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
