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

Fold/unfold kanban columns

stable
Xavier Julián 2014-11-14 13:10:48 +01:00
parent b8862380f8
commit 38bb85bdf0
3 changed files with 27 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
app/coffee/modules/kanban/main.coffee
View File

@ -360,30 +360,17 @@ module.directive("tgKanbanUserstory", ["$rootScope", KanbanUserstoryDirective])
#############################################################################
KanbanSquishColumnDirective = ->
#TODO: Only header is folding/unfolding so
# 1. Save folded/unfolded column status.
# 2. Recalculate container width.
link = ($scope, $el, $attrs) ->
#TODO: Only header is folding/unfolding so
# 1. Fold/Unfold also related column (.task-colum-name and .task-colum)
# 2. Save folded/unfolded column status
# 3. Recalculate container width
$el.on "click", ".hfold", (event) ->
target = angular.element(event.currentTarget)
fold(target)
$el.on "click", ".hunfold", (event) ->
target = angular.element(event.currentTarget)
unfold(target)
fold = (target) ->
target.closest('.task-colum-name').addClass('fold')
target.toggleClass('hidden')
target.siblings('.hunfold').toggleClass('hidden')
unfold = (target) ->
target.closest('.task-colum-name').removeClass('fold')
target.toggleClass('hidden')
target.siblings('.hfold').toggleClass('hidden')
$scope.folds = []
$scope.foldStatus = (status) ->
$scope.folds[status.id] = !!!$scope.folds[status.id]
if $scope.folds[status.id]
fold()
return {link: link}

12
app/partials/views/modules/kanban-table.jade
View File

@ -1,11 +1,11 @@
div.kanban-table(tg-kanban-squish-column)
div.kanban-table-header
div.kanban-table-inner(tg-kanban-row-width-fixer)
h2.task-colum-name(ng-repeat="s in usStatusList track by s.id", ng-style="{'border-top-color':s.color}")
h2.task-colum-name(ng-repeat="s in usStatusList track by s.id", ng-style="{'border-top-color':s.color}", tg-bo-title="s.name", ng-class='{vfold:folds[s.id]}')
span(tg-bo-bind="s.name")
div.options
a.icon.icon-vfold.hfold(href="", title="Fold Column")
a.icon.icon-vunfold.hunfold.hidden(href="", title="Unfold Column")
a.icon.icon-vfold.hfold(href="", ng-click='foldStatus(s)' title="Fold Column", ng-class='{hidden:folds[s.id]}')
a.icon.icon-vunfold.hunfold(href="", ng-click='foldStatus(s)', title="Unfold Column", ng-class='{hidden:!folds[s.id]}')
a.icon.icon-vfold(href="", title="Fold Cards",
ng-if="statusViewModes[s.id] == 'maximized'",
ng-click="ctrl.updateStatusViewMode(s.id, 'minimized')")
@ -23,10 +23,10 @@ div.kanban-table(tg-kanban-squish-column)
div.kanban-table-body
div.kanban-table-inner(tg-kanban-row-width-fixer)
div.kanban-uses-box.task-column(ng-repeat="status in usStatusList track by status.id",
div.kanban-uses-box.task-column(ng-class='{vfold:folds[s.id]}', ng-repeat="s in usStatusList track by s.id",
tg-kanban-sortable,
tg-kanban-wip-limit,
tg-kanban-column-height-fixer)
div.kanban-task(ng-repeat="us in usByStatus[status.id] track by us.id",
div.kanban-task(ng-repeat="us in usByStatus[s.id] track by us.id",
tg-kanban-userstory, ng-model="us",
ng-class="ctrl.getCardClass(status.id)")
ng-class="ctrl.getCardClass(s.id)")

16
app/styles/modules/kanban/kanban-table.scss
View File

@ -1,6 +1,7 @@
//Table basic shared vars
$column-width: 300px;
$column-folded-width: 30px;
$column-flex: 1;
$column-shrink: 0;
$column-margin: 0 10px 0 0;
@ -8,16 +9,22 @@ $column-margin: 0 10px 0 0;
.kanban-table {
overflow: hidden;
width: 100%;
.fold {
.vfold {
&.task-colum-name {
@include align-items(center);
@include justify-content(center);
@include transition(opacity .3s linear);
cursor: pointer;
opacity: .8;
padding: .5rem;
&:hover {
@include transition(opacity .3s linear);
opacity: 1;
}
div,
.icon-plus,
.icon-bulk,
.icon-vfold,
.icon-vunfold,
span {
display: none;
}
@ -25,10 +32,9 @@ $column-margin: 0 10px 0 0;
&.task-colum-name,
&.task-column {
@include table-flex-child(1, 0, 0);
border: 0;
max-width: 30px;
max-width: $column-folded-width;
min-height: 2.5rem;
width: 30px;
width: $column-folded-width;
}
.kanban-task {
display: none;