diff --git a/app/coffee/modules/kanban/main.coffee b/app/coffee/modules/kanban/main.coffee index 84dd65e4..5aa50532 100644 --- a/app/coffee/modules/kanban/main.coffee +++ b/app/coffee/modules/kanban/main.coffee @@ -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} diff --git a/app/partials/views/modules/kanban-table.jade b/app/partials/views/modules/kanban-table.jade index 16a2fa29..384643f1 100644 --- a/app/partials/views/modules/kanban-table.jade +++ b/app/partials/views/modules/kanban-table.jade @@ -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)") diff --git a/app/styles/modules/kanban/kanban-table.scss b/app/styles/modules/kanban/kanban-table.scss index dc2a9f5b..94ea92ca 100644 --- a/app/styles/modules/kanban/kanban-table.scss +++ b/app/styles/modules/kanban/kanban-table.scss @@ -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;