kanban visual refactor

app/partials/kanban.jade

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

app/partials/views/components/kanban-task.jade

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

app/partials/views/modules/kanban-table.jade

@@ -1,10 +1,18 @@
 div.kanban-table
     div.kanban-table-header
         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-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

app/partials/views/modules/lightbox-assigned-to.jade

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

app/partials/views/modules/list-filters-kanban.jade

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

app/styles/components/buttons.scss

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

app/styles/components/kanban-task.scss

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

app/styles/layout/kanban.scss

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

app/styles/modules/kanban-table.scss

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

app/styles/modules/lightbox.scss

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