summaryrefslogtreecommitdiffstats
path: root/client/components/sidebar
diff options
context:
space:
mode:
authorMaxime Quandalle <maxime@quandalle.com>2015-05-24 21:40:21 +0200
committerMaxime Quandalle <maxime@quandalle.com>2015-05-24 22:16:40 +0200
commit9a45f3752fe7c8499960b4fb6d185f9f5f8afbda (patch)
treef8b726271a7055d84e223704a560a4b937db16eb /client/components/sidebar
parent781577db041e0008de22f31bcc1cb11ae96670e0 (diff)
downloadwekan-9a45f3752fe7c8499960b4fb6d185f9f5f8afbda.tar.gz
wekan-9a45f3752fe7c8499960b4fb6d185f9f5f8afbda.tar.bz2
wekan-9a45f3752fe7c8499960b4fb6d185f9f5f8afbda.zip
Improve scrolling
We now replace native scrollbar by custom ones on the list card (which is required by the new ergonomics in the parent commit), but the "scrolling engine", is still native, we just hide the scrollbar and draw our own in HTML/CSS using the perfect-scrollbar package (from bower). This commit also implements component scrolling when certain actions are performed, eg scroll to the bottom when the new card composer is opened.
Diffstat (limited to 'client/components/sidebar')
-rw-r--r--client/components/sidebar/helpers.js2
-rw-r--r--client/components/sidebar/infiniteScrolling.js37
-rw-r--r--client/components/sidebar/rendered.js21
-rw-r--r--client/components/sidebar/sidebar.jade (renamed from client/components/sidebar/templates.jade)4
-rw-r--r--client/components/sidebar/sidebar.js26
5 files changed, 26 insertions, 64 deletions
diff --git a/client/components/sidebar/helpers.js b/client/components/sidebar/helpers.js
index a76dad7f..15035bd4 100644
--- a/client/components/sidebar/helpers.js
+++ b/client/components/sidebar/helpers.js
@@ -3,7 +3,7 @@ var widgetTitles = {
background: 'change-background'
};
-Template.boardSidebar.helpers({
+Template.sidebar.helpers({
currentWidget: function() {
return Session.get('currentWidget') + 'Sidebar';
},
diff --git a/client/components/sidebar/infiniteScrolling.js b/client/components/sidebar/infiniteScrolling.js
deleted file mode 100644
index df3b8901..00000000
--- a/client/components/sidebar/infiniteScrolling.js
+++ /dev/null
@@ -1,37 +0,0 @@
-var peakAnticipation = 200;
-
-Mixins.InfiniteScrolling = BlazeComponent.extendComponent({
- onCreated: function() {
- this._nextPeak = Infinity;
- },
-
- setNextPeak: function(v) {
- this._nextPeak = v;
- },
-
- getNextPeak: function() {
- return this._nextPeak;
- },
-
- resetNextPeak: function() {
- this._nextPeak = Infinity;
- },
-
- // To be overwritten by consumers of this mixin
- reachNextPeak: function() {
-
- },
-
- events: function() {
- return [{
- scroll: function(evt) {
- var domElement = evt.currentTarget;
- var altitude = domElement.scrollTop + domElement.offsetHeight;
- altitude += peakAnticipation;
- if (altitude >= this.callFirstWith(null, 'getNextPeak')) {
- this.callFirstWith(null, 'reachNextPeak');
- }
- }
- }];
- }
-});
diff --git a/client/components/sidebar/rendered.js b/client/components/sidebar/rendered.js
deleted file mode 100644
index 36b1255c..00000000
--- a/client/components/sidebar/rendered.js
+++ /dev/null
@@ -1,21 +0,0 @@
-Template.membersWidget.onRendered(function() {
- var self = this;
- if (! Meteor.user().isBoardMember())
- return;
-
- _.each(['.js-member', '.js-label'], function(className) {
- $(document).on('mouseover', function() {
- self.$(className).draggable({
- appendTo: 'body',
- helper: 'clone',
- revert: 'invalid',
- revertDuration: 150,
- snap: false,
- snapMode: 'both',
- start: function() {
- Popup.close();
- }
- });
- });
- });
-});
diff --git a/client/components/sidebar/templates.jade b/client/components/sidebar/sidebar.jade
index 23a1a87e..07cd777c 100644
--- a/client/components/sidebar/templates.jade
+++ b/client/components/sidebar/sidebar.jade
@@ -1,9 +1,9 @@
-template(name="boardSidebar")
+template(name="sidebar")
.board-sidebar.sidebar(class="{{#if isOpen}}is-open{{/if}}")
a.sidebar-tongue.js-toogle-sidebar(
class="{{#if isTongueHidden}}is-hidden{{/if}}")
i.fa.fa-chevron-left
- .sidebar-content.js-board-sidebar-content
+ .sidebar-content.js-board-sidebar-content.js-perfect-scrollbar
//- XXX https://github.com/peerlibrary/meteor-blaze-components/issues/30
if Filter.isActive
+filterSidebar
diff --git a/client/components/sidebar/sidebar.js b/client/components/sidebar/sidebar.js
index af676bf2..764f16eb 100644
--- a/client/components/sidebar/sidebar.js
+++ b/client/components/sidebar/sidebar.js
@@ -1,10 +1,10 @@
BlazeComponent.extendComponent({
template: function() {
- return 'boardSidebar';
+ return 'sidebar';
},
mixins: function() {
- return [Mixins.InfiniteScrolling];
+ return [Mixins.InfiniteScrolling, Mixins.PerfectScrollbar];
},
onCreated: function() {
@@ -46,6 +46,26 @@ BlazeComponent.extendComponent({
return this.isOpen() && Filter.isActive();
},
+ onRendered: function() {
+ var self = this;
+ if (! Meteor.user().isBoardMember())
+ return;
+
+ $(document).on('mouseover', function() {
+ self.$('.js-member,.js-label').draggable({
+ appendTo: 'body',
+ helper: 'clone',
+ revert: 'invalid',
+ revertDuration: 150,
+ snap: false,
+ snapMode: 'both',
+ start: function() {
+ Popup.close();
+ }
+ });
+ });
+ },
+
events: function() {
// XXX Hacky, we need some kind of `super`
var mixinEvents = this.getMixin(Mixins.InfiniteScrolling).events();
@@ -53,4 +73,4 @@ BlazeComponent.extendComponent({
'click .js-toogle-sidebar': this.toogle
}]);
}
-}).register('boardSidebar');
+}).register('sidebar');