Kmuthu has uploaded a new change for review.
https://gerrit.wikimedia.org/r/313613
Change subject: [WIP] Make notifications top toolbar controls sticky
......................................................................
[WIP] Make notifications top toolbar controls sticky
Notifications top toolbar controls is made sticky when the user scrolls
up/down. [WIP]: the sticky toolbar collapses when the page is resized.
Bug: T14096
Change-Id: I483c91344918f602da3280b9f8ad7e966bf55596
---
M modules/styles/mw.echo.ui.NotificationsInboxWidget.less
M modules/ui/mw.echo.ui.NotificationsInboxWidget.js
2 files changed, 84 insertions(+), 26 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Echo
refs/changes/13/313613/1
diff --git a/modules/styles/mw.echo.ui.NotificationsInboxWidget.less
b/modules/styles/mw.echo.ui.NotificationsInboxWidget.less
index 62be1d6..ff8678f 100644
--- a/modules/styles/mw.echo.ui.NotificationsInboxWidget.less
+++ b/modules/styles/mw.echo.ui.NotificationsInboxWidget.less
@@ -2,12 +2,19 @@
.mw-echo-ui-notificationsInboxWidget {
display: table;
width: 100%;
+ z-index: 1;
+ position: relative;
max-width: @specialpage-width;
&-row {
display: table-row;
width: 100%;
}
+
+ &-toolbarWrapper {
+ height: 4em;
+ }
+
&-cell {
display: table-cell;
vertical-align: middle;
@@ -34,8 +41,14 @@
&-toolbar {
&-top {
display: table;
- margin-bottom: 3 * @specialpage-separation-unit;
width: 100%;
+ }
+
+ &-affixed {
+ position: fixed;
+ z-index: 2;
+ top: 0;
+ background: #fff;
}
&-bottom {
@@ -66,6 +79,12 @@
text-align: center;
}
}
+ &-affixed {
+ position: fixed;
+ z-index: 2;
+ top: 0;
+ background: #fff;
+ }
&-readState {
display: inline-block;
}
@@ -74,7 +93,6 @@
display: inline-block;
margin-top: 1em;
}
-
&-settings {
.oo-ui-popupWidget-popup {
text-align: left;
diff --git a/modules/ui/mw.echo.ui.NotificationsInboxWidget.js
b/modules/ui/mw.echo.ui.NotificationsInboxWidget.js
index d46f72d..a119724 100644
--- a/modules/ui/mw.echo.ui.NotificationsInboxWidget.js
+++ b/modules/ui/mw.echo.ui.NotificationsInboxWidget.js
@@ -96,7 +96,38 @@
this.topPaginationWidget.setDisabled( true );
this.bottomPaginationWidget.setDisabled( true );
+ this.$topToolbar =
+ $( '<div>' )
+ .addClass(
'mw-echo-ui-notificationsInboxWidget-main-toolbar-top' )
+ .append(
+ $( '<div>' )
+ .addClass(
'mw-echo-ui-notificationsInboxWidget-row' ),
+ $( '<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 );
+
// Initialization
+ // $pagination = $('<div>')
+ // .addClass('mw-echo-ui-notificationsPaginationWidget')
+ // .append( this.topPaginationWidget.$element );
+
$sidebar = $( '<div>' )
.addClass(
'mw-echo-ui-notificationsInboxWidget-sidebar' )
.append( this.xwikiUnreadWidget.$element );
@@ -104,30 +135,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(
@@ -142,6 +152,9 @@
)
)
);
+
+ // Scrolling event
+ $( window ).on( 'scroll resize', this.onWindowScroll.bind( this
) );
this.$element
.addClass( 'mw-echo-ui-notificationsInboxWidget' )
@@ -159,6 +172,7 @@
this.updateReadStateSelectWidget();
this.xwikiUnreadWidget.populateSources();
this.populateNotifications();
+
};
/* Initialization */
@@ -321,4 +335,30 @@
this.noticeMessageWidget.toggle( displayMessage );
this.datedListWidget.toggle( !displayMessage );
};
+ /**
+ * Respond to window scroll
+ */
+ mw.echo.ui.NotificationsInboxWidget.prototype.onWindowScroll =
function(){
+ var scrollTop, isScrolledDown,
+
+ 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 );
--
To view, visit https://gerrit.wikimedia.org/r/313613
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I483c91344918f602da3280b9f8ad7e966bf55596
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Echo
Gerrit-Branch: master
Gerrit-Owner: Kmuthu <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
