diff options
author | Maxime Quandalle <maxime@quandalle.com> | 2015-05-24 21:40:21 +0200 |
---|---|---|
committer | Maxime Quandalle <maxime@quandalle.com> | 2015-05-24 22:16:40 +0200 |
commit | 9a45f3752fe7c8499960b4fb6d185f9f5f8afbda (patch) | |
tree | f8b726271a7055d84e223704a560a4b937db16eb /client/components/boards | |
parent | 781577db041e0008de22f31bcc1cb11ae96670e0 (diff) | |
download | wekan-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/boards')
-rw-r--r-- | client/components/boards/body.jade | 4 | ||||
-rw-r--r-- | client/components/boards/body.js | 22 | ||||
-rw-r--r-- | client/components/boards/body.styl | 16 |
3 files changed, 19 insertions, 23 deletions
diff --git a/client/components/boards/body.jade b/client/components/boards/body.jade index 4b4c2b90..b157b742 100644 --- a/client/components/boards/body.jade +++ b/client/components/boards/body.jade @@ -16,12 +16,12 @@ template(name="boardComponent") +cardDetails(currentCard) if currentUser.isBoardMember +addListForm - +boardSidebar + +sidebar else +message(label="board-no-found") template(name="addListForm") - .list.js-list.add-list.js-add-list + .list.js-list.list-composer.js-list-composer +inlinedForm(autoclose=false) input.list-name-input(type="text" placeholder="{{_ 'add-list'}}" autocomplete="off" autofocus value=getCache) diff --git a/client/components/boards/body.js b/client/components/boards/body.js index 5e743001..e4aad646 100644 --- a/client/components/boards/body.js +++ b/client/components/boards/body.js @@ -22,8 +22,20 @@ BlazeComponent.extendComponent({ }); }, - scrollLeft: function() { - // TODO + scrollLeft: function(position) { + position = position || 0; + var $container = $(this.find('.js-lists')); + var containerWidth = $container.width(); + var currentScrollPosition = $container.scrollLeft(); + if (position < currentScrollPosition) { + $container.animate({ + scrollLeft: position + }); + } else if (position > currentScrollPosition + containerWidth) { + $container.animate({ + scrollLeft: Math.max(0, position - containerWidth) + }); + } }, currentCardIsInThisList: function() { @@ -67,14 +79,14 @@ BlazeComponent.extendComponent({ tolerance: 'pointer', appendTo: '.js-lists', helper: 'clone', - items: '.js-list:not(.add-list)', + items: '.js-list:not(.js-list-composer)', placeholder: 'list placeholder', start: function(event, ui) { $('.list.placeholder').height(ui.item.height()); Popup.close(); }, stop: function() { - self.$('.js-lists').find('.js-list:not(.add-list)').each( + self.$('.js-lists').find('.js-list:not(.js-list-composer)').each( function(i, list) { var data = Blaze.getData(list); Lists.update(data._id, { @@ -95,7 +107,7 @@ BlazeComponent.extendComponent({ }, sidebarSize: function() { - var sidebar = this.componentChildren('boardSidebar')[0]; + var sidebar = this.componentChildren('sidebar')[0]; if (sidebar && sidebar.isOpen()) return 'next-sidebar'; } diff --git a/client/components/boards/body.styl b/client/components/boards/body.styl index 07f35bb8..de4963ab 100644 --- a/client/components/boards/body.styl +++ b/client/components/boards/body.styl @@ -32,19 +32,3 @@ right: 0 bottom: 0 left: 0 - - &::-webkit-scrollbar - height: 13px - width: 13px - - &::-webkit-scrollbar-thumb:vertical, - &::-webkit-scrollbar-thumb:horizontal - background: rgba(255, 255, 255, .4) - - &::-webkit-scrollbar-track-piece - background: rgba(0, 0, 0, .15) - - &::-webkit-scrollbar-button - display: block - height: 5px - width: 5px |