From 9a45f3752fe7c8499960b4fb6d185f9f5f8afbda Mon Sep 17 00:00:00 2001
From: Maxime Quandalle <maxime@quandalle.com>
Date: Sun, 24 May 2015 21:40:21 +0200
Subject: 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.
---
 client/components/lists/body.jade | 79 ++++++++++++++++++++-------------------
 1 file changed, 40 insertions(+), 39 deletions(-)

(limited to 'client/components/lists/body.jade')

diff --git a/client/components/lists/body.jade b/client/components/lists/body.jade
index dfbe05b7..9d4a903d 100644
--- a/client/components/lists/body.jade
+++ b/client/components/lists/body.jade
@@ -1,43 +1,44 @@
 template(name="listBody")
-  .minicards.clearfix.js-minicards
-    if cards.count
-      +inlinedForm(autoclose=false position="top")
-        +addCardForm(listId=_id position="top")
-    each cards
-      .minicard.card.js-minicard(
-        class="{{#if isSelected}}is-selected{{/if}}")
-        a.minicard-details.clearfix.show(href=absoluteUrl)
-          if cover
-            .minicard-cover.js-card-cover(style="background-image: url({{cover.url}});")
-          if labels
-            .minicard-labels
-              each labels
-                .minicard-label(class="card-label-{{color}}" title="{{name}}")
-          .minicard-title= title
-          if members
-            .minicard-members.js-minicard-members
-              each members
-                +userAvatar(userId=this size="small" cardId="{{../_id}}")
-          .badges
-            if comments.count
-              .badge(title="{{_ 'card-comments-title' comments.count }}")
-                span.badge-icon.icon-sm.fa.fa-comment-o
-                .badge-text= comments.count
-            if description
-              .badge.badge-state-image-only(title=description)
-                span.badge-icon.icon-sm.fa.fa-align-left
-            if attachments.count
-              .badge
-                span.badge-icon.icon-sm.fa.fa-paperclip
-                span.badge-text= attachments.count
-    if currentUser.isBoardMember
-      +inlinedForm(autoclose=false position="bottom")
-        +addCardForm(listId=_id position="bottom")
-      else
-        if newCardFormIsVisible.get
-          a.open-card-composer.js-open-inlined-form
-            i.fa.fa-plus
-            | {{_ 'add-card'}}
+  .list-body.js-perfect-scrollbar
+    .minicards.clearfix.js-minicards
+      if cards.count
+        +inlinedForm(autoclose=false position="top")
+          +addCardForm(listId=_id position="top")
+      each cards
+        .minicard.card.js-minicard(
+          class="{{#if isSelected}}is-selected{{/if}}")
+          a.minicard-details.clearfix.show(href=absoluteUrl)
+            if cover
+              .minicard-cover.js-card-cover(style="background-image: url({{cover.url}});")
+            if labels
+              .minicard-labels
+                each labels
+                  .minicard-label(class="card-label-{{color}}" title="{{name}}")
+            .minicard-title= title
+            if members
+              .minicard-members.js-minicard-members
+                each members
+                  +userAvatar(userId=this size="small" cardId="{{../_id}}")
+            .badges
+              if comments.count
+                .badge(title="{{_ 'card-comments-title' comments.count }}")
+                  span.badge-icon.icon-sm.fa.fa-comment-o
+                  .badge-text= comments.count
+              if description
+                .badge.badge-state-image-only(title=description)
+                  span.badge-icon.icon-sm.fa.fa-align-left
+              if attachments.count
+                .badge
+                  span.badge-icon.icon-sm.fa.fa-paperclip
+                  span.badge-text= attachments.count
+      if currentUser.isBoardMember
+        +inlinedForm(autoclose=false position="bottom")
+          +addCardForm(listId=_id position="bottom")
+        else
+          if newCardFormIsVisible.get
+            a.open-card-composer.js-open-inlined-form
+              i.fa.fa-plus
+              | {{_ 'add-card'}}
 
 template(name="addCardForm")
   .minicard.js-composer
-- 
cgit v1.2.3-1-g7c22