diff --git a/app/partials/kanban.jade b/app/partials/kanban.jade index b146328c..012bc657 100644 --- a/app/partials/kanban.jade +++ b/app/partials/kanban.jade @@ -13,4 +13,4 @@ block content include views/components/large-summary include views/modules/burndown include views/modules/list-filters-kanban - include views/modules/taskboard-table \ No newline at end of file + include views/modules/kanban-table diff --git a/app/partials/views/components/kanban-task.jade b/app/partials/views/components/kanban-task.jade new file mode 100644 index 00000000..712545ad --- /dev/null +++ b/app/partials/views/components/kanban-task.jade @@ -0,0 +1,14 @@ +div.kanban-tagline + a.taskboard-tag +div.kanban-task-inner + p.task-text + span.task-num #37 + a.task-name(href="", title="task.subject"). + Para IDE de desarrollo (al menos front end) yo recomiendo Aptana Studio. + figure.avatar + a(href="", title="UserName") + img.avatar(src="http://thecodeplayer.com/u/uifaces/12.jpg", alt="") + a(href="", title="Change assignation") Username + a.icon.icon-edit(href="", title="Edit", ng-click="ctrl.editTask(task)") + a.icon.icon-drag-h(href="", title="Drag&Drop") + a.task-points(href="", title="task points") 8 \ No newline at end of file diff --git a/app/partials/views/components/large-summary.jade b/app/partials/views/components/large-summary.jade index 3f449f56..d9d73440 100644 --- a/app/partials/views/components/large-summary.jade +++ b/app/partials/views/components/large-summary.jade @@ -35,3 +35,4 @@ div.summary.large-summary span.icon.icon-iocaine span.number 10 span.description iocanie
doses + a.button.button-green.toggle-analytics-visibility(href="", title="Show statistics") Show statistics diff --git a/app/partials/views/modules/kanban-table.jade b/app/partials/views/modules/kanban-table.jade new file mode 100644 index 00000000..f3f27390 --- /dev/null +++ b/app/partials/views/modules/kanban-table.jade @@ -0,0 +1,49 @@ +div.kanban-table + div.kanban-table-header + div.kanban-table-inner + h2.task-colum_name Task + h2.task-colum_name Open + h2.task-colum_name Ready for test + h2.task-colum_name Closed + div.kanban-table-body + div.kanban-table-inner + div.taskboard_task-playground.task-column + div.kanban-task + include ../components/kanban-task + div.taskboard_task-playground.task-column + div.kanban-task + include ../components/kanban-task + div.taskboard_task-playground.task-column + div.kanban-task + include ../components/kanban-task + div.taskboard_task-playground.task-column + //- + div.taskboard-table-body + div.taskboard-table-inner(tg-taskboard-row-size-fixer) + div.task-row(ng-repeat="us in userstories track by us.id", tg-taskboard-taskrow) + div.taskboard_us-list.task-column + div.tag-list + span.tag(ng-repeat="tag in us.tags") {{ tag }} + h3.us-title + span.us-ref(tg-bo-ref="us.ref") + span(ng-bind="us.subject") + div.status(tg-us-status="us", on-update="ctrl.loadSprintState()") + a.us-status(href="", title="Status Name") + span.us-status-bind + span.icon.icon-arrow-bottom + ul.points-list(tg-taskboard-us-points="us") + include ../components/addnewtask + + div.taskboard_task-playground.task-column(ng-repeat="st in taskStatusList track by st.id") + div.taskboard-task(ng-repeat="task in usTasks[us.id][st.id] track by task.id") + include ../components/taskboard-task + + div.task-row(ng-init="us = null", tg-taskboard-taskrow) + div.taskboard_us-list.task-column + h3.us-title + span Unassigned tasks + include ../components/addnewtask + + div.taskboard_task-playground.task-column(ng-repeat="st in taskStatusList track by st.id") + div.taskboard-task(ng-repeat="task in unassignedTasks[st.id] track by task.id") + include ../components/taskboard-task diff --git a/app/partials/views/modules/list-filters-kanban.jade b/app/partials/views/modules/list-filters-kanban.jade index 9754417c..fb285fdd 100644 --- a/app/partials/views/modules/list-filters-kanban.jade +++ b/app/partials/views/modules/list-filters-kanban.jade @@ -5,19 +5,9 @@ section.list-filters span.icon.icon-filter | SHOW FILTERS - li - a(href="#") - span.icon.icon-tag - | SHOW TAGS - - li - a(href="#") - span.icon.icon-graph - | HIDE CFD GRAPH - div.new-issue a.button.button-green(href="") span.text | + NEW TASK a.button-bulk(href="") - span.icon.icon-bulk \ No newline at end of file + span.icon.icon-bulk diff --git a/app/styles/components/kanban-task.scss b/app/styles/components/kanban-task.scss new file mode 100644 index 00000000..394285ff --- /dev/null +++ b/app/styles/components/kanban-task.scss @@ -0,0 +1,66 @@ +.kanban-task { + background: $postit; + margin-bottom: 1rem; + position: relative; + &:hover { + .icon-edit, + .icon-drag-h { + @include transition(opacity .2s linear); + opacity: 1; + } + } + .kanban-tagline { + @include table-flex(); + } + .taskboard-tag { + @include table-flex-child(1, 0, 0, 0); + background: $postit-hover; //Fallback + height: .3rem; + } + .kanban-task-inner { + padding: 1rem; + } + .task-num { + color: $postit-hover; + margin-right: .5em; + } + .task-text { + padding-right: 2rem; + } + .avatar { + vertical-align: middle; + img { + margin-right: 1rem; + max-width: 3rem; + } + } + .task-points { + @extend %large; + color: $postit-hover; + padding: .5rem 1rem; + position: absolute; + right: 0; + top: .5rem; + } + .icon-edit, + .icon-drag-h { + @include transition(opacity .2s linear); + @extend %large; + bottom: .2rem; + color: $postit-hover; + opacity: 0; + position: absolute; + &:hover { + @include transition(color .3s linear); + color: darken($postit-hover, 15%); + } + } + .icon-edit { + right: .5rem; + } + .icon-drag-h { + @extend %xlarge; + cursor: move; + right: 45%; + } +} diff --git a/app/styles/main.scss b/app/styles/main.scss index b1db4922..259dbced 100755 --- a/app/styles/main.scss +++ b/app/styles/main.scss @@ -25,6 +25,7 @@ $prefix-for-spec: true; @import 'components/tag'; @import 'components/filter'; @import 'components/taskboard-task'; +@import 'components/kanban-task'; @import 'components/notification-message'; @import 'components/basic-table'; @import 'components/paginator'; @@ -40,6 +41,7 @@ $prefix-for-spec: true; @import 'modules/filters'; @import 'modules/lightbox'; @import 'modules/taskboard-table'; +@import 'modules/kanban-table'; @import 'modules/search-filter'; @import 'modules/search-result-table'; @import 'modules/search-in'; diff --git a/app/styles/modules/kanban-table.scss b/app/styles/modules/kanban-table.scss new file mode 100644 index 00000000..f075a58f --- /dev/null +++ b/app/styles/modules/kanban-table.scss @@ -0,0 +1,53 @@ +//Table basic shared vars + +$column-width: 300px; +$column-flex: 1; +$column-shrink: 0; +$column-margin: 0 10px 0 0; + +.kanban-table { + overflow: hidden; + width: 100%; +} + +.kanban-table-header { + margin-bottom: .5rem; + position: relative; + width: 100%; + .task-colum_name { + @include table-flex-child($column-flex, $column-width, $column-shrink, $column-width); + @extend %large; + background: $whitish; + margin: $column-margin; + padding: .5rem 0; + text-align: center; + text-transform: uppercase; + &:last-child { + margin-right: 0; + } + } +} + +.kanban-table-body { + height: 700px; + overflow-x: scroll; + overflow-y: scroll; + width: 100%; + .task-column { + @include table-flex-child($column-flex, $column-width, $column-shrink, $column-width); + margin: $column-margin; + padding: 1rem; + &:last-child { + margin-right: 0; + } + } + .taskboard_task-playground { + background: $whitish; + } +} + +.kanban-table-inner { + @include table-flex(); + overflow: hidden; + position: absolute; +} diff --git a/app/styles/shame/shame.scss b/app/styles/shame/shame.scss index 01fd52db..dd104a1e 100644 --- a/app/styles/shame/shame.scss +++ b/app/styles/shame/shame.scss @@ -6,6 +6,7 @@ // No clearfix or known hack fixes it // Could be because of flexbox? // height of the table has been set manually, wich is ugly. -.taskboard-table-header { +.taskboard-table-header, +.kanban-table-header { height: 40px; }