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

Kanban refactor

stable
Xavier Julián 2014-07-03 12:49:14 +02:00
parent f5b8d0626a
commit 8e91fb444f
9 changed files with 189 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/partials/kanban.jade
View File

@ -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
include views/modules/kanban-table

14
app/partials/views/components/kanban-task.jade Normal file
View File

@ -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

1
app/partials/views/components/large-summary.jade
View File

@ -35,3 +35,4 @@ div.summary.large-summary
span.icon.icon-iocaine
span.number 10
span.description iocanie<br />doses
a.button.button-green.toggle-analytics-visibility(href="", title="Show statistics") Show statistics

49
app/partials/views/modules/kanban-table.jade Normal file
View File

@ -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

12
app/partials/views/modules/list-filters-kanban.jade
View File

@ -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
span.icon.icon-bulk

66
app/styles/components/kanban-task.scss Normal file
View File

@ -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%;
}
}

2
app/styles/main.scss
View File

@ -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';

53
app/styles/modules/kanban-table.scss Normal file
View File

@ -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;
}

3
app/styles/shame/shame.scss
View File

@ -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;
}