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

I+D en Taskboard

stable
Xavier Julián 2014-08-06 18:14:24 +02:00
parent c6057886ad
commit 54da933fe9
5 changed files with 35 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/partials/views/components/taskboard-task.jade
View File

@ -3,6 +3,7 @@ div.taskboard-tagline
div.taskboard-task-inner div.taskboard-task-inner
div(tg-taskboard-user-avatar="task.assigned_to", click="ctrl.editTaskAssignedTo(task)") div(tg-taskboard-user-avatar="task.assigned_to", click="ctrl.editTaskAssignedTo(task)")
p.taskboard-text p.taskboard-text
span.task-assigned Username
span.task-num(tg-bo-ref="task.ref") span.task-num(tg-bo-ref="task.ref")
a.task-name(href="", title="See task details", tg-bind-html="task.subject", a.task-name(href="", title="See task details", tg-bind-html="task.subject",
tg-nav="project-tasks-detail:project=project.slug,ref=task.ref") tg-nav="project-tasks-detail:project=project.slug,ref=task.ref")

14
app/partials/views/modules/taskboard-table.jade
View File

@ -26,9 +26,9 @@ div.taskboard-table
div.taskboard-tasks-box.task-column(ng-repeat="st in taskStatusList track by st.id", div.taskboard-tasks-box.task-column(ng-repeat="st in taskStatusList track by st.id",
tg-taskboard-sortable) tg-taskboard-sortable)
div.taskboard-task(ng-repeat="task in usTasks[us.id][st.id] track by task.id", div.taskboard-task(ng-repeat="task in usTasks[us.id][st.id] track by task.id",
tg-taskboard-task) tg-taskboard-task)
include ../components/taskboard-task include ../components/taskboard-task
div.task-row(ng-init="us = null") div.task-row(ng-init="us = null")
div.taskboard-userstory-box.task-column div.taskboard-userstory-box.task-column
@ -39,8 +39,6 @@ div.taskboard-table
a.icon.icon-bulk(href="", title="Add new tasks in bulk", a.icon.icon-bulk(href="", title="Add new tasks in bulk",
ng-click="ctrl.addNewTask('bulk', us)") ng-click="ctrl.addNewTask('bulk', us)")
div.taskboard-tasks-box.task-column(ng-repeat="st in taskStatusList track by st.id", div.taskboard-tasks-box.task-column(ng-repeat="st in taskStatusList track by st.id", tg-taskboard-sortable)
tg-taskboard-sortable) div.taskboard-task(ng-repeat="task in usTasks[null][st.id] track by task.id", tg-taskboard-task)
div.taskboard-task(ng-repeat="task in usTasks[null][st.id] track by task.id", include ../components/taskboard-task
tg-taskboard-task)
include ../components/taskboard-task

41
app/styles/components/taskboard-task.scss
View File

@ -1,49 +1,61 @@
.taskboard-task { .taskboard-task {
@include transition (box-shadow .4s linear); @include transition (box-shadow .4s linear);
background: $postit; background: $very-light-gray;
box-shadow: none; box-shadow: none;
margin-bottom: 1rem; min-height: 7rem;
position: relative; position: relative;
&:hover {
.icon {
@include transition(color .3s linear);
color: $gray-light;
}
}
&.ui-sortable-helper { &.ui-sortable-helper {
box-shadow: 1px 1px 15px rgba($black, .2); box-shadow: 1px 1px 15px rgba($black, .1);
} }
&.ui-sortable-placeholder { &.ui-sortable-placeholder {
background: $grayer; background: $grayer;
} }
.taskboard-tagline { .taskboard-tagline {
@include table-flex(); @include table-flex();
height: .4rem;
} }
.taskboard-tag { .taskboard-tag {
@include table-flex-child(1, 0, 0, 0); @include table-flex-child(1, 0, 0, 0);
background: $postit-hover; //Fallback background: $postit-hover; //Fallback
height: .3rem; height: .1rem;
} }
.taskboard-task-inner { .taskboard-task-inner {
@include table-flex(); @include table-flex();
padding: 1rem .5rem; padding: 1rem .5rem;
} }
.avatar { .avatar {
@include table-flex-child($flex-basis: 70px); @include table-flex-child($flex-basis: 50px);
a { a {
@extend %small; @extend %small;
display: block; display: block;
text-align: center; text-align: center;
} }
img { img {
border: 2px solid $postit-hover; border: 0;
margin: 0 auto; margin: 0 auto;
} }
figcaption { figcaption {
color: darken($postit-hover, 15%); color: darken($postit-hover, 15%);
display: block; display: none;
//display: block;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
width: 100%; width: 100%;
} }
} }
.task-assigned {
@extend %bold;
display: block;
}
.task-num { .task-num {
color: $postit-hover; color: $grayer;
margin-right: .5em; margin-right: .5em;
} }
.taskboard-text { .taskboard-text {
@ -51,20 +63,21 @@
@include table-flex-child($flex-grow: 10, $flex-basis: 50px); @include table-flex-child($flex-grow: 10, $flex-basis: 50px);
padding: 0 .5rem 0 1rem; padding: 0 .5rem 0 1rem;
} }
.icon {
@include transition(color .3s linear);
}
.icon-edit, .icon-edit,
.icon-drag-h { .icon-drag-h {
@extend %large; @extend %large;
bottom: .2rem; bottom: .5rem;
color: $postit-hover; color: $whitish;
display: none;
position: absolute; position: absolute;
&:hover { &:hover {
@include transition(color, .3s, linear); color: $grayer;
color: darken($postit-hover, 15%);
} }
} }
.icon-edit { .icon-edit {
right: .5rem; right: 1rem;
} }
.icon-drag-h { .icon-drag-h {
@extend %xlarge; @extend %xlarge;

1
app/styles/dependencies/colors.scss
View File

@ -7,6 +7,7 @@ $grayer: #444;
$gray-light: #cdcdcd; $gray-light: #cdcdcd;
$very-light-gray: #e3e3e3; $very-light-gray: #e3e3e3;
$whitish: #f5f5f5; $whitish: #f5f5f5;
$very-light-gray: #fcfcfc;
$white: #fff; $white: #fff;
$green-taiga: #72a114; $green-taiga: #72a114;

1
app/styles/modules/backlog/taskboard-table.scss
View File

@ -44,7 +44,6 @@ $column-margin: 0 10px 0 0;
.task-column { .task-column {
@include table-flex-child($column-flex, $column-width, $column-shrink, $column-width); @include table-flex-child($column-flex, $column-width, $column-shrink, $column-width);
margin: $column-margin; margin: $column-margin;
padding: 1rem;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }