From 97170673fa547668d77b933eb52f8c68183a01f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= Date: Thu, 13 Nov 2014 17:29:47 +0100 Subject: [PATCH] Column fold in taskboard --- app/partials/taskboard.jade | 2 +- .../views/modules/taskboard-table.jade | 9 +- app/styles/components/taskboard-task.scss | 1 - .../modules/backlog/taskboard-table.scss | 85 +++++++++++++++++-- 4 files changed, 86 insertions(+), 11 deletions(-) diff --git a/app/partials/taskboard.jade b/app/partials/taskboard.jade index 9cdf3e1e..a9a191c0 100644 --- a/app/partials/taskboard.jade +++ b/app/partials/taskboard.jade @@ -11,7 +11,7 @@ block content span(tg-bo-bind="project.name", class="project-name-short") span.green(tg-bo-bind="sprint.name") span.date(tg-date-range="sprint.estimated_start,sprint.estimated_finish") - include views/components/sprint-summary + //- include views/components/sprint-summary div.graphics-container div.burndown(tg-sprint-graph) diff --git a/app/partials/views/modules/taskboard-table.jade b/app/partials/views/modules/taskboard-table.jade index d346793f..7cd36876 100644 --- a/app/partials/views/modules/taskboard-table.jade +++ b/app/partials/views/modules/taskboard-table.jade @@ -2,9 +2,12 @@ div.taskboard-table div.taskboard-table-header div.taskboard-table-inner(tg-taskboard-row-width-fixer) h2.task-colum-name "User story" + //- Add class .colum-hfold in .task-column h2.task-colum-name(ng-repeat="s in taskStatusList track by s.id", - ng-style="{'border-top-color':s.color}") + ng-style="{'border-top-color':s.color}", tg-bo-title="s.name") span(tg-bo-bind="s.name") + a.icon.icon-vfold.hfold(href="", title="Fold Column") + a.icon.icon-vunfold.hunfold.hidden(href="", title="Unfold Column") div.taskboard-table-body(tg-taskboard-table-height-fixer) div.taskboard-table-inner(tg-taskboard-row-width-fixer) @@ -19,7 +22,7 @@ div.taskboard-table span(ng-bind="us.total_points") span points include ../components/addnewtask.jade - + //- Add class .colum-hfold in .task-column div.taskboard-tasks-box.task-column(ng-repeat="st in taskStatusList track by st.id", tg-taskboard-sortable) div.taskboard-task(ng-repeat="task in usTasks[us.id][st.id] track by task.id", @@ -31,7 +34,7 @@ div.taskboard-table h3.us-title span Unassigned tasks include ../components/addnewtask.jade - + //- Add class .colum-hfold in .task-column div.taskboard-tasks-box.task-column(ng-repeat="st in taskStatusList track by st.id", tg-taskboard-sortable) div.taskboard-task(ng-repeat="task in usTasks[null][st.id] track by task.id", diff --git a/app/styles/components/taskboard-task.scss b/app/styles/components/taskboard-task.scss index 7b9fe6e0..2a45c564 100644 --- a/app/styles/components/taskboard-task.scss +++ b/app/styles/components/taskboard-task.scss @@ -45,7 +45,6 @@ } .taskboard-task-inner { @include table-flex(); - min-height: 7rem; padding: .5rem; } .taskboard-user-avatar { diff --git a/app/styles/modules/backlog/taskboard-table.scss b/app/styles/modules/backlog/taskboard-table.scss index 1d028e95..4a0f540d 100644 --- a/app/styles/modules/backlog/taskboard-table.scss +++ b/app/styles/modules/backlog/taskboard-table.scss @@ -1,6 +1,7 @@ //Table basic shared vars $column-width: 300px; +$column-folded-width: 45px; $column-flex: 1; $column-shrink: 0; $column-margin: 0 10px 0 0; @@ -21,18 +22,63 @@ $column-margin: 0 10px 0 0; position: absolute; } .task-colum-name { - @extend %large; @include table-flex-child($column-flex, $column-width, $column-shrink, $column-width); + @include table-flex(); + @include justify-content(space-between); + @extend %large; background: $whitish; border-top: 3px solid $gray-light; + cursor: pointer; margin: $column-margin; - padding: .5rem 0; + max-width: $column-width; + padding: .5rem 1rem; position: relative; - text-align: center; text-transform: uppercase; + width: $column-width; &:last-child { margin-right: 0; } + &:hover { + .icon { + &.hfold, + &.hunfold { + @include transition(opacity .2s linear); + opacity: 1; + } + } + } + .icon { + @extend %medium; + @include transition(color .2s linear); + color: $gray-light; + margin-right: .3rem; + &:hover { + color: $green-taiga; + } + &.hfold, + &.hunfold { + @include transition(opacity .2s linear); + @include transform(rotate(90deg)); + display: inline-block; + opacity: 0; + } + } + &.column-hfold { + @include align-items(center); + @include justify-content(center); + max-width: $column-folded-width; + padding: .3rem 0; + width: $column-folded-width; + span { + display: none; + } + .icon { + &.hfold, + &.hunfold { + margin: 0; + } + } + } } } @@ -42,11 +88,40 @@ $column-margin: 0 10px 0 0; overflow-y: scroll; width: 100%; .task-column { - @include table-flex-child($column-flex, $column-width, $column-shrink, $column-width); + @include table-flex-child(); margin: $column-margin; + max-width: $column-width; + width: $column-width; &:last-child { margin-right: 0; } + &.colum-hfold { + max-width: $column-folded-width; + width: $column-folded-width; + .taskboard-task { + background: none; + border: 0; + margin: 0; + min-height: 0; + .taskboard-task-inner { + padding: .2rem; + } + .taskboard-tagline, + .taskboard-text { + display: none; + } + .avatar { + height: 35px; + width: 35px; + } + .icon { + display: none; + } + &.ui-sortable-helper { + box-shadow: none; + } + } + } } .task-row { @include table-flex(); @@ -74,14 +149,12 @@ $column-margin: 0 10px 0 0; } } .taskboard-tasks-box { - //@include filter(saturate(20%)); background: rgba($red, .1); } } } .taskboard-tasks-box { background: $whitish; - //background: $very-light-gray; } .taskboard-userstory-box {