mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/Echo
synced 2024-09-24 10:49:37 +00:00
Wrap notifications with a link for native click behavior
Remove the behavior of the SelectWidget 'choose' and instead wrap the notifications with their primary url links. That way, the click handler returns to browser native response, and we gain automatic behavior for ctrl+click, middle click, and regular click. CSS had to be adjusted as well. Bug: T112004 Change-Id: If10a4d3be71a8cf3ce966f15b922da0b9a2ddcc7
This commit is contained in:
parent
9a2262d694
commit
bfd27ae712
|
@ -39,9 +39,19 @@
|
||||||
|
|
||||||
this.$element
|
this.$element
|
||||||
.addClass( 'mw-echo-ui-notificationOptionWidget' )
|
.addClass( 'mw-echo-ui-notificationOptionWidget' )
|
||||||
|
.append(
|
||||||
|
// HACK: Wrap the entire option with a link that takes
|
||||||
|
// the user to the primary url. This is not perfect,
|
||||||
|
// but it makes the behavior native to the browser rather
|
||||||
|
// than us listening to click events and opening new
|
||||||
|
// windows.
|
||||||
|
$( '<a>' )
|
||||||
|
.addClass( 'mw-echo-ui-notificationOptionWidget-linkWrapper' )
|
||||||
|
.attr( 'href', this.model.getPrimaryUrl() )
|
||||||
.append(
|
.append(
|
||||||
this.markAsReadButton.$element,
|
this.markAsReadButton.$element,
|
||||||
this.$label
|
this.$label
|
||||||
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
this.$element.toggleClass( 'mw-echo-ui-notificationOptionWidget-initiallyUnseen', !this.model.isSeen() );
|
this.$element.toggleClass( 'mw-echo-ui-notificationOptionWidget-initiallyUnseen', !this.model.isSeen() );
|
||||||
|
|
|
@ -34,9 +34,6 @@
|
||||||
remove: 'onModelNotificationRemove',
|
remove: 'onModelNotificationRemove',
|
||||||
clear: 'onModelNotificationClear'
|
clear: 'onModelNotificationClear'
|
||||||
} );
|
} );
|
||||||
this.connect( this, {
|
|
||||||
choose: 'onNotificationChoose'
|
|
||||||
} );
|
|
||||||
|
|
||||||
this.$element
|
this.$element
|
||||||
.addClass( 'mw-echo-ui-notificationsWidget' );
|
.addClass( 'mw-echo-ui-notificationsWidget' );
|
||||||
|
@ -128,26 +125,4 @@
|
||||||
this.addItems( [ this.loadingOptionWidget ] );
|
this.addItems( [ this.loadingOptionWidget ] );
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
|
||||||
* Respond to choosing a notification option
|
|
||||||
*
|
|
||||||
* @param {mw.echo.ui.NotificationOptionWidget} item Notification option
|
|
||||||
*/
|
|
||||||
mw.echo.ui.NotificationsWidget.prototype.onNotificationChoose = function ( item ) {
|
|
||||||
var link;
|
|
||||||
|
|
||||||
if ( !item ) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
link = item.getPrimaryUrl();
|
|
||||||
if ( link ) {
|
|
||||||
// Log the clickthrough
|
|
||||||
mw.echo.logger.logInteraction( 'notification-link-click', item.getData(), this.type );
|
|
||||||
|
|
||||||
// Follow the link
|
|
||||||
window.location.href = link;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
} )( mediaWiki, jQuery );
|
} )( mediaWiki, jQuery );
|
||||||
|
|
|
@ -8,6 +8,15 @@
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
line-height: 16px;
|
line-height: 16px;
|
||||||
|
|
||||||
|
&:hover > a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:hover) a,
|
||||||
|
#p-personal &:not(:hover) a.new {
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
|
@ -29,12 +38,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(:hover) a,
|
|
||||||
#p-personal &:not(:hover) a.new {
|
|
||||||
color: #666666;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-initiallyUnseen {
|
&-initiallyUnseen {
|
||||||
-webkit-animation-name: unseen-fadeout;
|
-webkit-animation-name: unseen-fadeout;
|
||||||
animation-name: unseen-fadeout;
|
animation-name: unseen-fadeout;
|
||||||
|
|
Loading…
Reference in a new issue