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

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

@ -360,30 +360,17 @@ module.directive("tgKanbanUserstory", ["$rootScope", KanbanUserstoryDirective])
############################################################################# #############################################################################
KanbanSquishColumnDirective = -> KanbanSquishColumnDirective = ->
link = ($scope, $el, $attrs) ->
#TODO: Only header is folding/unfolding so #TODO: Only header is folding/unfolding so
# 1. Fold/Unfold also related column (.task-colum-name and .task-colum) # 1. Save folded/unfolded column status.
# 2. Save folded/unfolded column status # 2. Recalculate container width.
# 3. Recalculate container width
$el.on "click", ".hfold", (event) -> link = ($scope, $el, $attrs) ->
target = angular.element(event.currentTarget) $scope.folds = []
fold(target) $scope.foldStatus = (status) ->
$scope.folds[status.id] = !!!$scope.folds[status.id]
$el.on "click", ".hunfold", (event) -> if $scope.folds[status.id]
target = angular.element(event.currentTarget) fold()
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')
return {link: link} 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(tg-kanban-squish-column)
div.kanban-table-header div.kanban-table-header
div.kanban-table-inner(tg-kanban-row-width-fixer) 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") span(tg-bo-bind="s.name")
div.options div.options
a.icon.icon-vfold.hfold(href="", title="Fold 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.hidden(href="", title="Unfold Column") 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", a.icon.icon-vfold(href="", title="Fold Cards",
ng-if="statusViewModes[s.id] == 'maximized'", ng-if="statusViewModes[s.id] == 'maximized'",
ng-click="ctrl.updateStatusViewMode(s.id, 'minimized')") 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-body
div.kanban-table-inner(tg-kanban-row-width-fixer) 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-sortable,
tg-kanban-wip-limit, tg-kanban-wip-limit,
tg-kanban-column-height-fixer) 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", 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 //Table basic shared vars
$column-width: 300px; $column-width: 300px;
$column-folded-width: 30px;
$column-flex: 1; $column-flex: 1;
$column-shrink: 0; $column-shrink: 0;
$column-margin: 0 10px 0 0; $column-margin: 0 10px 0 0;
@ -8,16 +9,22 @@ $column-margin: 0 10px 0 0;
.kanban-table { .kanban-table {
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
.fold { .vfold {
&.task-colum-name { &.task-colum-name {
@include align-items(center);
@include justify-content(center);
@include transition(opacity .3s linear); @include transition(opacity .3s linear);
cursor: pointer; cursor: pointer;
opacity: .8; opacity: .8;
padding: .5rem;
&:hover { &:hover {
@include transition(opacity .3s linear); @include transition(opacity .3s linear);
opacity: 1; opacity: 1;
} }
div, .icon-plus,
.icon-bulk,
.icon-vfold,
.icon-vunfold,
span { span {
display: none; display: none;
} }
@ -25,10 +32,9 @@ $column-margin: 0 10px 0 0;
&.task-colum-name, &.task-colum-name,
&.task-column { &.task-column {
@include table-flex-child(1, 0, 0); @include table-flex-child(1, 0, 0);
border: 0; max-width: $column-folded-width;
max-width: 30px;
min-height: 2.5rem; min-height: 2.5rem;
width: 30px; width: $column-folded-width;
} }
.kanban-task { .kanban-task {
display: none; display: none;