US_121 vertical pagination directive

app/coffee/modules/nav.coffee

@@ -40,7 +40,38 @@ class ProjectsNavigationController extends taiga.Controller
 
     loadInitialData: ->
         return @rs.projects.list().then (projects) =>
-            @scope.projects = projects
+            example = [
+                {'id': 200, 'name': 'sdfdsfs', 'slug': 'sdfsdf'},
+                {'id': 201, 'name': 'sdfdsfs1', 'slug': 'sdfsdf'},
+                {'id': 2001, 'name': 'sdfdsfs2', 'slug': 'sdfsdf'},
+                {'id': 2002, 'name': 'sdfdsfs3', 'slug': 'sdfsdf'},
+                {'id': 2003, 'name': 'sdfdsfs4', 'slug': 'sdfsdf'},
+                {'id': 2004, 'name': 'sdfdsfs5', 'slug': 'sdfsdf'},
+                {'id': 2005, 'name': 'sdfdsfs6', 'slug': 'sdfsdf'},
+                {'id': 2006, 'name': 'sdfdsfs7', 'slug': 'sdfsdf'},
+                {'id': 2007, 'name': 'sdfdsfs8', 'slug': 'sdfsdf'},
+                {'id': 2008, 'name': 'sdfdsfs9', 'slug': 'sdfsdf'},
+                {'id': 2009, 'name': 'sdfdsfs10', 'slug': 'sdfsdf'},
+                {'id': 20010, 'name': 'sdfdsfs11', 'slug': 'sdfsdf'},
+                {'id': 20011, 'name': 'sdfdsfs12', 'slug': 'sdfsdf'},
+                {'id': 20012, 'name': 'sdfdsfs13', 'slug': 'sdfsdf'},
+                {'id': 20013, 'name': 'sdfdsfs14', 'slug': 'sdfsdf'},
+                {'id': 20014, 'name': 'sdfdsfs15', 'slug': 'sdfsdf'},
+                {'id': 20015, 'name': 'sdfdsfs16', 'slug': 'sdfsdf'},
+                {'id': 20016, 'name': 'sdfdsfs17', 'slug': 'sdfsdf'},
+                {'id': 20017, 'name': 'sdfdsfs18', 'slug': 'sdfsdf'},
+                {'id': 20018, 'name': 'sdfdsfs19', 'slug': 'sdfsdf'},
+                {'id': 20019, 'name': 'sdfdsfs20', 'slug': 'sdfsdf'},
+                {'id': 20020, 'name': 'sdfdsfs21', 'slug': 'sdfsdf'},
+                {'id': 20021, 'name': 'sdfdsfs22', 'slug': 'sdfsdf'},
+                {'id': 20022, 'name': 'sdfdsfs23', 'slug': 'sdfsdf'},
+                {'id': 20023, 'name': 'sdfdsfs24', 'slug': 'sdfsdf'},
+                {'id': 20024, 'name': 'sdfdsfs25', 'slug': 'sdfsdf'},
+                {'id': 20025, 'name': 'sdfdsfs26', 'slug': 'sdfsdf'},
+                {'id': 20026, 'name': 'sdfdsfs27', 'slug': 'sdfsdf'}
+            ]
+
+            @scope.projects = projects.concat(example)
             return projects
 
 

app/coffee/modules/project.coffee

@@ -11,12 +11,43 @@ class ProjectController extends taiga.Controller
 
     loadInitialData: ->
         return @rs.projects.list().then (projects) =>
+            example = [
+                {'id': 200, 'name': 'sdfdsfs', 'slug': 'sdfsdf'},
+                {'id': 201, 'name': 'sdfdsfs1', 'slug': 'sdfsdf'},
+                {'id': 2001, 'name': 'sdfdsfs2', 'slug': 'sdfsdf'},
+                {'id': 2002, 'name': 'sdfdsfs3', 'slug': 'sdfsdf'},
+                {'id': 2003, 'name': 'sdfdsfs4', 'slug': 'sdfsdf'},
+                {'id': 2004, 'name': 'sdfdsfs5', 'slug': 'sdfsdf'},
+                {'id': 2005, 'name': 'sdfdsfs6', 'slug': 'sdfsdf'},
+                {'id': 2006, 'name': 'sdfdsfs7', 'slug': 'sdfsdf'},
+                {'id': 2007, 'name': 'sdfdsfs8', 'slug': 'sdfsdf'},
+                {'id': 2008, 'name': 'sdfdsfs9', 'slug': 'sdfsdf'},
+                {'id': 2009, 'name': 'sdfdsfs10', 'slug': 'sdfsdf'},
+                {'id': 20010, 'name': 'sdfdsfs11', 'slug': 'sdfsdf'},
+                {'id': 20011, 'name': 'sdfdsfs12', 'slug': 'sdfsdf'},
+                {'id': 20012, 'name': 'sdfdsfs13', 'slug': 'sdfsdf'},
+                {'id': 20013, 'name': 'sdfdsfs14', 'slug': 'sdfsdf'},
+                {'id': 20014, 'name': 'sdfdsfs15', 'slug': 'sdfsdf'},
+                {'id': 20015, 'name': 'sdfdsfs16', 'slug': 'sdfsdf'},
+                {'id': 20016, 'name': 'sdfdsfs17', 'slug': 'sdfsdf'},
+                {'id': 20017, 'name': 'sdfdsfs18', 'slug': 'sdfsdf'},
+                {'id': 20018, 'name': 'sdfdsfs19', 'slug': 'sdfsdf'},
+                {'id': 20019, 'name': 'sdfdsfs20', 'slug': 'sdfsdf'},
+                {'id': 20020, 'name': 'sdfdsfs21', 'slug': 'sdfsdf'},
+                {'id': 20021, 'name': 'sdfdsfs22', 'slug': 'sdfsdf'},
+                {'id': 20022, 'name': 'sdfdsfs23', 'slug': 'sdfsdf'},
+                {'id': 20023, 'name': 'sdfdsfs24', 'slug': 'sdfsdf'},
+                {'id': 20024, 'name': 'sdfdsfs25', 'slug': 'sdfsdf'},
+                {'id': 20025, 'name': 'sdfdsfs26', 'slug': 'sdfsdf'},
+                {'id': 20026, 'name': 'sdfdsfs27', 'slug': 'sdfsdf'}
+            ]
+
+            projects = projects.concat(example)
             @.projects = {'recents': projects.slice(0, 8), 'all': projects.slice(6)}
 
 module.controller("ProjectController", ProjectController)
 
-ProjectsPaginationDirective = () ->
+ProjectsPaginationDirective = ($timeout) ->
-    itemsPerPage = 7
     nextPage = (element, pageSize, callback) ->
         top = parseInt(element.css('top'), 10)
         newTop = top - pageSize
@@ -40,10 +71,11 @@ ProjectsPaginationDirective = () ->
         element.css('visibility', 'hidden')
 
     link = ($scope, $el, $attrs) ->
-        prevBtn = $el.find(".pagination-previous")
+        prevBtn = $el.find(".v-pagination-previous")
-        nextBtn = $el.find(".pagination-next")
+        nextBtn = $el.find(".v-pagination-next")
         container = $el.find("ul")
-        pageSize = $el.find(".pagination-list").height()
+
+        pageSize = 0
         containerSize = 0
         animationInProgess = false
 
@@ -57,6 +89,7 @@ ProjectsPaginationDirective = () ->
                 return
 
             animationInProgess = true
+
             visible(nextBtn)
 
             newTop = prevPage(container, pageSize, animationEnd)
@@ -71,6 +104,7 @@ ProjectsPaginationDirective = () ->
                 return
 
             animationInProgess = true
+
             visible(prevBtn)
 
             newTop = nextPage(container, pageSize, animationEnd)
@@ -78,11 +112,29 @@ ProjectsPaginationDirective = () ->
             if -newTop + pageSize > containerSize
                 hide(nextBtn)
 
-        $scope.$watch 'ctrl.projects', () ->
+        $scope.$watch 'active', (ee) ->
-            items = $el.find('li')
+            $timeout () ->
+                if $scope.active
+                    pageSize = $el.find(".v-pagination-list").height()
+                    containerSize = container.height()
 
-            if items.length > itemsPerPage
+                    if containerSize > pageSize
-                containerSize = container.height()
+                        visible(nextBtn)
-                visible(nextBtn)
+                    else
+                        container.css('top', 0)
+                        hide(prevBtn)
+                        hide(nextBtn)
+                else
+                    container.css('top', 0)
+                    hide(prevBtn)
+                    hide(nextBtn)
+    return {
+        scope: {
+            active: '='
+        },
+        link: link,
+        transclude: true,
+        templateUrl: 'partials/views/components/pagination.html'
+    }
 
-module.directive("tgProjectsPagination", ProjectsPaginationDirective)
+module.directive("tgProjectsPagination", ['$timeout', ProjectsPaginationDirective])

app/partials/projects.jade

@@ -16,13 +16,10 @@ block content
 
             div.all-projects
                 h1 Projects
-                div(tg-projects-pagination)
+                div(tg-projects-pagination, active="ctrl.projects.all.length")
-                    a.pagination-previous.icon.icon-arrow-up(href="")
+                    ul
-                    .pagination-list
+                        li(ng-repeat="project in ctrl.projects.all")
-                        ul
+                            a.button(href="", tg-bo-html="project.name", tg-nav="project-backlog:project=project.slug")
-                            li(ng-repeat="project in ctrl.projects.all")
-                                a.button(href="", tg-bo-html="project.name", tg-nav="project-backlog:project=project.slug")
-                    a.pagination-next.icon.icon-arrow-bottom(href="")
 
                 .create-project-button-wrapper
                     a.button.button-green(href="", tg-nav="create-project") Create project

app/partials/views/components/pagination.jade

@@ -0,0 +1,3 @@
+a.v-pagination-previous.icon.icon-arrow-up(href="")
+.v-pagination-list(ng-transclude="")
+a.v-pagination-next.icon.icon-arrow-bottom(href="")

app/partials/views/modules/projects-nav.jade

@@ -5,7 +5,8 @@ nav.projects-nav(tg-projects-nav)
             input(type="text" placeholder="Search in...", ng-model="projectsSearch.$")
             a.icon.icon-search
 
-    ul.projects-list
+    div.projects-pagination(tg-projects-pagination, active="projects.length && !projectsSearch.$.length")
-        li(ng-repeat="project in projects|filter:projectsSearch:strict track by project.id")
+        ul.projects-list
-            a(href="", tg-bo-html="project.name", tg-nav="project-backlog:project=project.slug")
+            li(ng-repeat="project in projects|filter:projectsSearch:strict track by project.id")
-                span.icon.icon-arrow-right
+                a(href="", tg-bo-html="project.name", tg-nav="project-backlog:project=project.slug")
+                    span.icon.icon-arrow-right

app/styles/components/paginator.scss

@@ -32,3 +32,22 @@
         color: $gray-light;
     }
 }
+
+.v-pagination-list {
+    overflow: hidden;
+}
+
+a.v-pagination-next,
+a.v-pagination-previous {
+    background-color: $button-gray;
+    color: $whitish;
+    display: block;
+    padding: .1rem 0;
+    text-align: center;
+    visibility: hidden;
+    width: 100%;
+    &:hover {
+        @include transition (background .3s linear);
+        background-color: $button-gray / 2;
+    }
+}

app/styles/modules/common/projects-nav.scss

@@ -1,6 +1,8 @@
 .projects-nav {
     @include transform(translate3d(-300px, 0, 0));
     background-color: #232323;
+    display: flex;
+    flex-direction: column;
     height: 100%;
     left: 0;
     overflow: hidden;
@@ -9,8 +11,12 @@
     top: 0;
     width: 300px;
     z-index: 99;
+    form {
+        flex-shrink: 0;
+    }
     h1 {
         color: $white;
+        flex-shrink: 0;
         margin-bottom: 2rem;
         text-align: center;
     }
@@ -24,7 +30,21 @@
         top: 6px;
     }
     ul {
+        left: 0;
+        margin-bottom: 0;
         margin-top: 1rem;
+        position: relative;
+        top: 0;
+        width: 100%;
+    }
+    .projects-pagination {
+        display: flex;
+        flex-direction: column;
+        margin-top: 1rem;
+    }
+    .v-pagination-previous,
+    .v-pagination-next {
+        flex-shrink: 0;
     }
 }
 

app/styles/modules/home-projects-list.scss

@@ -24,9 +24,8 @@
         color: $whitish;
         padding-left: 1rem;
     }
-    .pagination-list {
+    .v-pagination-list {
         height: 385px;
-        overflow: hidden;
     }
     ul {
         left: 0;
@@ -68,21 +67,7 @@
         top: 0;
         width: 100%;
     }
-    .pagination-next,
+    .v-pagination-next {
-    .pagination-previous {
-        background-color: $button-gray;
-        color: $whitish;
-        display: block;
-        padding: .1rem 0;
-        text-align: center;
-        visibility: hidden;
-        width: 100%;
-        &:hover {
-            @include transition (background .3s linear);
-            background-color: $button-gray / 2;
-        }
-    }
-    .pagination-next {
         margin-bottom: 1rem;
     }
 }