taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

US_121 vertical pagination directive

stable
Juanfran 2014-07-23 17:59:47 +02:00
parent 71c336f144
commit 7802f3d0f5
8 changed files with 148 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
app/coffee/modules/nav.coffee
View File

@ -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

74
app/coffee/modules/project.coffee
View File

@ -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 = () ->
itemsPerPage = 7
ProjectsPaginationDirective = ($timeout) ->
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")
nextBtn = $el.find(".pagination-next")
prevBtn = $el.find(".v-pagination-previous")
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', () ->
items = $el.find('li')
$scope.$watch 'active', (ee) ->
$timeout () ->
if $scope.active
pageSize = $el.find(".v-pagination-list").height()
containerSize = container.height()
if items.length > itemsPerPage
containerSize = container.height()
visible(nextBtn)
if containerSize > pageSize
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])

11
app/partials/projects.jade
View File

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

3
app/partials/views/components/pagination.jade Normal file
View File

@ -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="")

9
app/partials/views/modules/projects-nav.jade
View File

@ -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
li(ng-repeat="project in projects|filter:projectsSearch:strict track by project.id")
a(href="", tg-bo-html="project.name", tg-nav="project-backlog:project=project.slug")
span.icon.icon-arrow-right
div.projects-pagination(tg-projects-pagination, active="projects.length && !projectsSearch.$.length")
ul.projects-list
li(ng-repeat="project in projects|filter:projectsSearch:strict track by project.id")
a(href="", tg-bo-html="project.name", tg-nav="project-backlog:project=project.slug")
span.icon.icon-arrow-right

19
app/styles/components/paginator.scss
View File

@ -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;
}
}

20
app/styles/modules/common/projects-nav.scss
View File

@ -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;
}
}

19
app/styles/modules/home-projects-list.scss
View File

@ -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,
.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 {
.v-pagination-next {
margin-bottom: 1rem;
}
}