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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/partials/kanban.jade
View File

@ -6,11 +6,18 @@ block head
block content block content
div.wrapper div.wrapper
section.main.kanban section.main.kanban
h1 div.kanban-detail-header
span ProjectName h1
span.green Sprint Name span ProjectName
span.date 02/10/2014-15/10/2014 span.green Sprint Name
include views/components/large-summary span.date 02/10/2014-15/10/2014
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/burndown
include views/modules/list-filters-kanban //-include views/modules/list-filters-kanban
include views/modules/kanban-table include views/modules/kanban-table

11
app/partials/views/components/kanban-task.jade
View File

@ -5,10 +5,13 @@ div.kanban-task-inner
span.task-num #37 span.task-num #37
a.task-name(href="", title="task.subject"). a.task-name(href="", title="task.subject").
Para IDE de desarrollo (al menos front end) yo recomiendo Aptana Studio. Para IDE de desarrollo (al menos front end) yo recomiendo Aptana Studio.
figure.avatar //-
a(href="", title="UserName") figure.avatar
img.avatar(src="http://thecodeplayer.com/u/uifaces/12.jpg", alt="") a(href="", title="UserName")
a(href="", title="Change assignation") 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-edit(href="", title="Edit", ng-click="ctrl.editTask(task)")
a.icon.icon-drag-h(href="", title="Drag&Drop") a.icon.icon-drag-h(href="", title="Drag&Drop")
a.task-points(href="", title="task points") 8 a.task-points(href="", title="task points") 8

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

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

2
app/partials/views/modules/lightbox-assigned-to.jade
View File

@ -11,7 +11,7 @@ form
a.avatar(href="", title="Assigned to") a.avatar(href="", title="Assigned to")
img(src="{{ selectedUser.photo }}", alt="{{ selectedUser.full_name_display }}") 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.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-single(ng-repeat="user in filteredUsers")
div.watcher-avatar div.watcher-avatar

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

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

17
app/styles/components/buttons.scss
View File

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

9
app/styles/components/kanban-task.scss
View File

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

8
app/styles/layout/kanban.scss
View File

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

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

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

8
app/styles/modules/lightbox.scss
View File

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