kanban visual refactor

stable
Xavier Julián 2014-07-10 15:35:24 +02:00
parent 8dd8e632b1
commit d99c7bb5cc
10 changed files with 84 additions and 51 deletions

View File

@ -6,11 +6,18 @@ block head
block content
div.wrapper
section.main.kanban
div.kanban-detail-header
h1
span ProjectName
span.green Sprint Name
span.date 02/10/2014-15/10/2014
include views/components/large-summary
div.kanban-settings
a.button.button-trans(href="", title="Filter")
span.icon.icon-filter
span Filters
a.button.button-gray(href="", title="Filter")
span Show Statistics
//-include views/components/large-summary
include views/modules/burndown
include views/modules/list-filters-kanban
//-include views/modules/list-filters-kanban
include views/modules/kanban-table

View File

@ -5,9 +5,12 @@ div.kanban-task-inner
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="")
span.assigned-to
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")

View File

@ -1,10 +1,18 @@
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
h2.task-colum_name
span Task
a.icon.icon-plus(href="", title="Add New task")
h2.task-colum_name
span Open
a.icon.icon-plus(href="", title="Add New task")
h2.task-colum_name
span Ready for test
a.icon.icon-plus(href="", title="Add New task")
h2.task-colum_name
span Closed
a.icon.icon-plus(href="", title="Add New task")
div.kanban-table-body
div.kanban-table-inner
div.taskboard_task-playground.task-column
@ -17,33 +25,3 @@ div.kanban-table
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

View File

@ -11,7 +11,7 @@ form
a.avatar(href="", title="Assigned to")
img(src="{{ selectedUser.photo }}", alt="{{ selectedUser.full_name_display }}")
a.watcher-name(href="", title="{{ selectedUser.full_name_display }}", ng-bind="selectedUser.full_name_display")
a.remove-assigned-to(href="", title="Remove assigned") Remove
a.icon.icon-delete.remove-assigned-to(href="", title="Remove assigned")
div.watcher-single(ng-repeat="user in filteredUsers")
div.watcher-avatar

View File

@ -1,7 +1,7 @@
section.list-filters
ul
li
a(href="#").active
a.trans-button(href="#")
span.icon.icon-filter
| SHOW FILTERS

View File

@ -24,9 +24,6 @@
&:hover {
@include transition (background .3s linear);
}
span {
color: $white;
}
.icon {
margin-right: .3rem;
}
@ -38,6 +35,9 @@
&:hover {
background: $fresh-taiga;
}
span {
color: $white;
}
}
.button-gray {
@ -46,6 +46,9 @@
background: $button-gray-hover;
color: $white;
}
span {
color: $white;
}
}
.button-red {
@ -54,6 +57,9 @@
background: $red;
color: $white;
}
span {
color: $white;
}
}
.button-orange {
@ -62,9 +68,12 @@
background: lighten($orange, 10%);
color: $white;
}
span {
color: $white;
}
}
a.button-block {
.button-block {
background: $white;
color: $red;
&:hover {

View File

@ -2,6 +2,9 @@
background: $postit;
margin-bottom: 1rem;
position: relative;
&:last-child {
margin: 0;
}
&:hover {
.icon-edit,
.icon-drag-h {
@ -25,8 +28,14 @@
margin-right: .5em;
}
.task-text {
margin-bottom: .2rem;
padding-right: 2rem;
}
.assigned-to {
@extend %small;
display: block;
margin-bottom: .5rem;
}
.avatar {
vertical-align: middle;
img {

View File

@ -1,4 +1,12 @@
.kanban {
.kanban-detail-header {
h1 {
display: inline-block;
}
}
.kanban-settings {
float: right;
}
.burndown-container {
display: none;
}

View File

@ -20,11 +20,22 @@ $column-margin: 0 10px 0 0;
background: $whitish;
margin: $column-margin;
padding: .5rem 0;
position: relative;
text-align: center;
text-transform: uppercase;
&:last-child {
margin-right: 0;
}
.icon {
@include transition(color .2s linear);
color: $gray-light;
position: absolute;
right: .5rem;
top: .5rem;
&:hover {
color: $green-taiga;
}
}
}
}

View File

@ -315,12 +315,20 @@
}
}
.watcher-single {
position: relative;
&:hover,
&.active {
@include transition(background .3s linear);
background: lighten($green-taiga, 55%);
cursor: pointer;
}
&.active {
.icon {
right: 1rem;
opacity: 1;
top: 1.3rem;
}
}
}
.more-watchers {
@extend %title;