diff --git a/app/locales/locale-en.json b/app/locales/locale-en.json index 088340a5..c663b509 100644 --- a/app/locales/locale-en.json +++ b/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", diff --git a/app/partials/includes/components/card-placeholder.jade b/app/partials/includes/components/card-placeholder.jade new file mode 100644 index 00000000..89af6d87 --- /dev/null +++ b/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}} diff --git a/app/partials/includes/components/taskboard-task.jade b/app/partials/includes/components/taskboard-task.jade index bb0a13b8..dd34369e 100644 --- a/app/partials/includes/components/taskboard-task.jade +++ b/app/partials/includes/components/taskboard-task.jade @@ -1,7 +1,5 @@ -div(ng-show="task.isPlaceholder") TODO PLACEHOLDER - -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-tagline(tg-colorize-tags="task.tags", tg-colorize-tags-type="taskboard") +div.taskboard-task-inner 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 diff --git a/app/partials/includes/modules/taskboard-table.jade b/app/partials/includes/modules/taskboard-table.jade index e3163ba9..2b0f1476 100644 --- a/app/partials/includes/modules/taskboard-table.jade +++ b/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", - tg-taskboard-task, tg-bind-scope, tg-class-permission="{'readonly': '!modify_task'}") - include ../components/taskboard-task + div.taskboard-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 diff --git a/app/styles/components/card-placeholder.scss b/app/styles/components/card-placeholder.scss new file mode 100644 index 00000000..5a61b4b6 --- /dev/null +++ b/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; + } +} diff --git a/app/styles/components/taskboard-task.scss b/app/styles/components/taskboard-task.scss index a8d58830..b3eaeb21 100644 --- a/app/styles/components/taskboard-task.scss +++ b/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;