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

Add fold option to only one column

stable
Xavier Julián 2014-11-12 18:22:58 +01:00
parent 6b6c06b39e
commit f7421b4440
2 changed files with 15 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,16 +1,15 @@
div.kanban-table //-.fold div.kanban-table
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", h2.task-colum-name(ng-repeat="s in usStatusList track by s.id", ng-style="{'border-top-color':s.color}") //Add '.fold' class here if folded
ng-style="{'border-top-color':s.color}")
span(tg-bo-bind="s.name") span(tg-bo-bind="s.name")
div.options div.options
a.icon.icon-vfold.hfold(href="", title="Fold") a.icon.icon-vfold.hfold(href="", title="Fold Column") //Toggle hidden class if folded
a.icon.icon-vunfold.hunfold(href="", title="Unfold") //-.hidden a.icon.icon-vunfold.hunfold.hidden(href="", title="Unfold Column") //Toggle hidden class if folded
a.icon.icon-vfold(href="", title="Minimize", 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')")
a.icon.icon-vunfold(href="", title="Maximize", a.icon.icon-vunfold(href="", title="Unfold Cards",
ng-if="statusViewModes[s.id] == 'minimized'", ng-if="statusViewModes[s.id] == 'minimized'",
ng-click="ctrl.updateStatusViewMode(s.id, 'maximized')") ng-click="ctrl.updateStatusViewMode(s.id, 'maximized')")
@ -27,7 +26,7 @@ div.kanban-table //-.fold
div.kanban-uses-box.task-column(ng-repeat="status in usStatusList track by status.id", div.kanban-uses-box.task-column(ng-repeat="status in usStatusList track by status.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) //Add '.fold' class here if folded
div.kanban-task(ng-repeat="us in usByStatus[status.id] track by us.id", div.kanban-task(ng-repeat="us in usByStatus[status.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(status.id)")

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

@ -8,9 +8,8 @@ $column-margin: 0 10px 0 0;
.kanban-table { .kanban-table {
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
&.fold { .fold {
@include table-flex(); &.task-colum-name {
.task-colum-name {
@include transition(opacity .3s linear); @include transition(opacity .3s linear);
cursor: pointer; cursor: pointer;
opacity: .8; opacity: .8;
@ -18,22 +17,18 @@ $column-margin: 0 10px 0 0;
@include transition(opacity .3s linear); @include transition(opacity .3s linear);
opacity: 1; opacity: 1;
} }
}
.task-colum-name,
.task-column {
@include table-flex-child(1, 0, 0);
border: 0;
max-width: 30px;
min-height: 2.5rem;
width: 30px;
}
.kanban-table-header {
.task-colum-name {
div, div,
span { span {
display: none; display: none;
} }
} }
&.task-colum-name,
&.task-column {
@include table-flex-child(1, 0, 0);
border: 0;
max-width: 30px;
min-height: 2.5rem;
width: 30px;
} }
.kanban-task { .kanban-task {
display: none; display: none;