diff --git a/app/partials/views/components/taskboard-task.jade b/app/partials/views/components/taskboard-task.jade index 1815191e..e46af54b 100644 --- a/app/partials/views/components/taskboard-task.jade +++ b/app/partials/views/components/taskboard-task.jade @@ -1,6 +1,7 @@ div.taskboard-tagline(tg-colorize-tags="task.tags", tg-colorize-tags-type="taskboard") div.taskboard-task-inner - div(tg-taskboard-user-avatar="task.assigned_to", ng-model="task", click="ctrl.editTaskAssignedTo(task)") + div.taskboard-user-avatar(tg-taskboard-user-avatar="task.assigned_to", ng-model="task", click="ctrl.editTaskAssignedTo(task)", ng-class="{iocaine: task.is_iocaine}") + span.icon.icon-iocaine(ng-show="task.is_iocaine") p.taskboard-text a.task-assigned(href="", ng-click="ctrl.editTaskAssignedTo(task)", title="Change assignation") span.task-num(tg-bo-ref="task.ref") diff --git a/app/styles/components/taskboard-task.scss b/app/styles/components/taskboard-task.scss index 592d9a9c..08a9d4ae 100644 --- a/app/styles/components/taskboard-task.scss +++ b/app/styles/components/taskboard-task.scss @@ -7,11 +7,9 @@ &:hover { .icon-edit, .icon-drag-h { - display: block; - } - .icon { - @include transition(coalor .3s linear, opacity .3s linear); + @include transition(color .3s linear, opacity .3s linear); color: $postit-dark-hover; + display: block; opacity: 1; } } @@ -36,27 +34,44 @@ min-height: 7.5rem; padding: 1rem .5rem; } - .avatar { - @include table-flex-child($flex-basis: 50px); - a { - @extend %small; - display: block; - text-align: center; + .taskboard-user-avatar { + .avatar { + @include table-flex-child($flex-basis: 50px); + a { + @extend %small; + display: block; + text-align: center; + } + img { + border: 0; + margin: 0 auto; + } + figcaption { + color: darken($postit-hover, 15%); + display: none; + //display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 100%; + } } - img { - border: 0; - margin: 0 auto; - } - figcaption { - color: darken($postit-hover, 15%); - display: none; - //display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 100%; + &.iocaine { + img { + @include filter(hue-rotate(150deg) saturate(200%)); + } } } + .icon-iocaine { + @extend %large; + position: absolute; + top: 1rem; + left: .2rem; + padding: .1rem; + color: $white; + background: $black; + border-radius: 5px; + } .task-assigned { @extend %small; color: $postit-dark-hover;