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

Merge "Make notifications top toolbar controls sticky"

Browse source
This commit is contained in:
jenkins-bot 2016-10-04 22:37:27 +00:00 committed by Gerrit Code Review
parent e09123d258 eed48aa7fe
commit 717b53dbe4
2 changed files with 77 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
modules/styles/mw.echo.ui.NotificationsInboxWidget.less
View file

@ -3,11 +3,18 @@
display: table;
width: 100%;
max-width: @specialpage-width;
z-index: 1;
position: relative;
&-row {
display: table-row;
width: 100%;
}
&-toolbarWrapper {
height: 4em;
}
&-cell {
display: table-cell;
vertical-align: middle;
@ -27,17 +34,24 @@
display: none;
}
}
&-main {
vertical-align: top;
&-toolbar {
&-top {
display: table;
margin-bottom: 3 * @specialpage-separation-unit;
width: 100%;
}
&-affixed {
position: fixed;
z-index: 2;
top: 0;
background: #fff;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
&-bottom {
display: table;
width: inherit;
@ -74,7 +88,6 @@
display: inline-block;
margin-top: 1em;
}
&-settings {
.oo-ui-popupWidget-popup {
text-align: left;
@ -82,5 +95,8 @@
}
}
}
&-toolbarWrapper {
height: 8em;
}
}
}

83
modules/ui/mw.echo.ui.NotificationsInboxWidget.js
View file

@ -92,11 +92,40 @@
this.topPaginationWidget.connect( this, { change: 'populateNotifications' } );
this.bottomPaginationWidget.connect( this, { change: 'populateNotifications' } );
this.settingsMenu.connect( this, { markAllRead: 'onSettingsMarkAllRead' } );
$( window ).on( 'scroll resize', this.onWindowScroll.bind( this ) );
this.topPaginationWidget.setDisabled( true );
this.bottomPaginationWidget.setDisabled( true );
// Initialization
this.$topToolbar =
$( '<div>' )
.addClass( 'mw-echo-ui-notificationsInboxWidget-main-toolbar-top' )
.append(
$( '<div>' )
.addClass( 'mw-echo-ui-notificationsInboxWidget-row' )
.append(
$( '<div>' )
.addClass( 'mw-echo-ui-notificationsInboxWidget-main-toolbar-readState' )
.addClass( 'mw-echo-ui-notificationsInboxWidget-cell' )
.append( this.readStateSelectWidget.$element ),
$( '<div>' )
.addClass( 'mw-echo-ui-notificationsInboxWidget-cell-placeholder' ),
$( '<div>' )
.addClass( 'mw-echo-ui-notificationsInboxWidget-main-toolbar-pagination' )
.addClass( 'mw-echo-ui-notificationsInboxWidget-cell' )
.append( this.topPaginationWidget.$element ),
$( '<div>' )
.addClass( 'mw-echo-ui-notificationsInboxWidget-main-toolbar-settings' )
.addClass( 'mw-echo-ui-notificationsInboxWidget-cell' )
.append( this.settingsMenu.$element )
)
);
this.$toolbarWrapper =
$( '<div>' )
.addClass( 'mw-echo-ui-notificationsInboxWidget-toolbarWrapper' )
.append( this.$topToolbar );
$sidebar = $( '<div>' )
.addClass( 'mw-echo-ui-notificationsInboxWidget-sidebar' )
.append( this.xwikiUnreadWidget.$element );
@ -104,30 +133,9 @@
$main = $( '<div>' )
.addClass( 'mw-echo-ui-notificationsInboxWidget-main' )
.append(
$( '<div>' )
.addClass( 'mw-echo-ui-notificationsInboxWidget-main-toolbar-top' )
.append(
$( '<div>' )
.addClass( 'mw-echo-ui-notificationsInboxWidget-row' )
.append(
$( '<div>' )
.addClass( 'mw-echo-ui-notificationsInboxWidget-main-toolbar-readState' )
.addClass( 'mw-echo-ui-notificationsInboxWidget-cell' )
.append( this.readStateSelectWidget.$element ),
$( '<div>' )
.addClass( 'mw-echo-ui-notificationsInboxWidget-cell-placeholder' ),
$( '<div>' )
.addClass( 'mw-echo-ui-notificationsInboxWidget-main-toolbar-pagination' )
.addClass( 'mw-echo-ui-notificationsInboxWidget-cell' )
.append( this.topPaginationWidget.$element ),
$( '<div>' )
.addClass( 'mw-echo-ui-notificationsInboxWidget-main-toolbar-settings' )
.addClass( 'mw-echo-ui-notificationsInboxWidget-cell' )
.append( this.settingsMenu.$element )
)
),
this.noticeMessageWidget.$element,
this.datedListWidget.$element,
this.$toolbarWrapper,
this.noticeMessageWidget.$element,
this.datedListWidget.$element,
$( '<div>' )
.addClass( 'mw-echo-ui-notificationsInboxWidget-main-toolbar-bottom' )
.append(
@ -159,6 +167,7 @@
this.updateReadStateSelectWidget();
this.xwikiUnreadWidget.populateSources();
this.populateNotifications();
};
/* Initialization */
@ -321,4 +330,28 @@
this.noticeMessageWidget.toggle( displayMessage );
this.datedListWidget.toggle( !displayMessage );
};
/**
* Respond to window scroll
*/
mw.echo.ui.NotificationsInboxWidget.prototype.onWindowScroll = function () {
var scrollTop = $( window ).scrollTop(),
isScrolledDown = scrollTop >= this.$topToolbar.parent().offset().top;
// Fix the widget to the top when we scroll down below its original
// location
this.$topToolbar.toggleClass(
'mw-echo-ui-notificationsInboxWidget-main-toolbar-affixed',
isScrolledDown
);
if ( isScrolledDown ) {
// Copy width from parent, width: 100% doesn't do what we want when
// position: fixed; is set
this.$topToolbar.css( 'width', this.$topToolbar.parent().width() );
} else {
// Unset width when we no longer have position: fixed;
this.$topToolbar.css( 'width', '' );
}
};
} )( jQuery, mediaWiki );