Taskboard placeholder

app/locales/locale-en.json

@@ -973,6 +973,8 @@
         "TITLE_ACTION_ADD_BULK": "Add some new Tasks in bulk",
         "TITLE_ACTION_ASSIGN": "Assign task",
         "TITLE_ACTION_EDIT": "Edit task",
+        "PLACEHOLDER_CARD_TITLE": "This could be a task",
+        "PLACEHOLDER_CARD_TEXT": "Split Stories into tasks to track them separately",
         "TABLE": {
             "COLUMN": "User story",
             "TITLE_ACTION_FOLD": "Fold column",

app/partials/includes/components/card-placeholder.jade

@@ -0,0 +1,7 @@
+.placeholder-avatar
+    .image
+    .text
+        .line
+        .line
+p.title {{'TASKBOARD.PLACEHOLDER_CARD_TITLE' | translate}}
+p {{'TASKBOARD.PLACEHOLDER_CARD_TEXT' | translate}}

app/partials/includes/components/taskboard-task.jade

@@ -1,7 +1,5 @@
-div(ng-show="task.isPlaceholder") TODO PLACEHOLDER
+div.taskboard-tagline(tg-colorize-tags="task.tags", tg-colorize-tags-type="taskboard")
-
+div.taskboard-task-inner
-div.taskboard-tagline(ng-show="!task.isPlaceholder", tg-colorize-tags="task.tags", tg-colorize-tags-type="taskboard")
-div.taskboard-task-inner(ng-show="!task.isPlaceholder")
     div.taskboard-user-avatar(tg-taskboard-user-avatar, users="usersById", task="task", project="project", ng-class="{iocaine: task.is_iocaine}")
     span.icon.icon-iocaine(ng-if="task.is_iocaine", title="{{'COMMON.IOCAINE_TEXT' | translate}}")
     p.taskboard-text

app/partials/includes/modules/taskboard-table.jade

@@ -37,6 +37,15 @@ div.taskboard-table(tg-taskboard-squish-column)
                         span(translate="TASKBOARD.TABLE.ROW_UNASSIGED_TASKS_TITLE")
                     include ../components/addnewtask.jade
                 div.taskboard-tasks-box.task-column(ng-repeat="st in taskStatusList track by st.id", tg-taskboard-sortable, class="squish-status-{{st.id}}", ng-class="{'column-fold':statusesFolded[st.id]}", tg-bind-scope)
-                    div.taskboard-task(ng-repeat="task in usTasks[null][st.id] track by task.id",
+                    div.taskboard-task(
-                                       tg-taskboard-task, tg-bind-scope, tg-class-permission="{'readonly': '!modify_task'}")
+                        ng-repeat="task in usTasks[null][st.id] track by task.id"
+                        tg-taskboard-task
+                        tg-bind-scope
+                        tg-class-permission="{'readonly': '!modify_task'}"
+                        ng-class="{'card-placeholder': task.isPlaceholder}"
+                    )
+                        div(ng-if="!task.isPlaceholder")
                             include ../components/taskboard-task
+                        
+                        div(ng-if="task.isPlaceholder")
+                            include ../components/card-placeholder

app/styles/components/card-placeholder.scss

@@ -0,0 +1,37 @@
+.card-placeholder {
+    background: darken($whitish, 5%);
+    border: 1px solid darken($whitish, 8%);
+    cursor: default;
+    padding: 1rem;
+    .placeholder-avatar {
+        display: flex;
+    }
+    .image {
+        background: darken($whitish, 8%);
+        flex-basis: 48px;
+        height: 48px;
+        margin-right: .5rem;
+        width: 48px;
+    }
+    .text {
+        flex: 1;
+    }
+    .line {
+        background: darken($whitish, 8%);
+        height: 1rem;
+        margin-bottom: 1rem;
+        width: 80%;
+        &:last-child {
+            width: 40%;
+        }
+    }
+    .title {
+        @extend %large;
+        text-transform: uppercase;
+    }
+    p {
+        @extend %light;
+        color: $gray;
+        margin: 0;
+    }
+}

app/styles/components/taskboard-task.scss

@@ -36,6 +36,11 @@
             }
         }
     }
+    &.card-placeholder {
+        background: darken($whitish, 5%);
+        border: 1px solid darken($whitish, 8%);
+        cursor: default;
+    }
     .taskboard-tagline {
         border-color: $card-hover;
         display: flex;