Improve card icons alignment on board

This commit is contained in:
Frederic Guillot
2017-02-11 14:29:44 -05:00
parent 49b3eeca2c
commit 28052edb22
7 changed files with 108 additions and 90 deletions

View File

@@ -3,6 +3,7 @@ Version 1.0.39 (unreleased)
Improvements: Improvements:
* Improve card icons alignment on board
* Adjust modal dialog width on mobile devices * Adjust modal dialog width on mobile devices
* Add priority column in list view * Add priority column in list view
* Change wording for project status (use "closed" instead of "inactive") * Change wording for project status (use "closed" instead of "inactive")

View File

@@ -29,6 +29,20 @@
<?php endif ?> <?php endif ?>
<div class="task-board-icons"> <div class="task-board-icons">
<div class="task-board-icons-row">
<?php if ($task['reference']): ?>
<span class="task-board-reference" title="<?= t('Reference') ?>">
<?= $this->text->e($task['reference']) ?>
</span>
<?php endif ?>
</div>
<div class="task-board-icons-row">
<?php if ($task['is_milestone'] == 1): ?>
<span title="<?= t('Milestone') ?>">
<i class="fa fa-flag flag-milestone"></i>
</span>
<?php endif ?>
<?php if ($task['score']): ?> <?php if ($task['score']): ?>
<span class="task-score" title="<?= t('Complexity') ?>"> <span class="task-score" title="<?= t('Complexity') ?>">
<i class="fa fa-trophy"></i> <i class="fa fa-trophy"></i>
@@ -36,18 +50,26 @@
</span> </span>
<?php endif ?> <?php endif ?>
<?php if (! empty($task['date_due'])): ?> <?php if (! empty($task['time_estimated']) || ! empty($task['time_spent'])): ?>
<?php if (date('Y-m-d') == date('Y-m-d', $task['date_due'])): ?> <span class="task-time-estimated" title="<?= t('Time spent and estimated') ?>">
<span class="task-board-date task-board-date-today"> <?= $this->text->e($task['time_spent']) ?>/<?= $this->text->e($task['time_estimated']) ?>h
<?php elseif (time() > $task['date_due']): ?> </span>
<span class="task-board-date task-board-date-overdue">
<?php else: ?>
<span class="task-board-date">
<?php endif ?> <?php endif ?>
<?php if (! empty($task['date_due'])): ?>
<span class="task-board-date
<?php if (date('Y-m-d') == date('Y-m-d', $task['date_due'])): ?>
task-board-date-today
<?php elseif (time() > $task['date_due']): ?>
task-board-date-overdue
<?php endif ?>
">
<i class="fa fa-calendar"></i> <i class="fa fa-calendar"></i>
<?= $this->dt->date($task['date_due']) ?> <?= $this->dt->date($task['date_due']) ?>
</span> </span>
<?php endif ?> <?php endif ?>
</div>
<div class="task-board-icons-row">
<?php if ($task['recurrence_status'] == \Kanboard\Model\TaskModel::RECURRING_STATUS_PENDING): ?> <?php if ($task['recurrence_status'] == \Kanboard\Model\TaskModel::RECURRING_STATUS_PENDING): ?>
<span title="<?= t('Recurrence') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'recurrence', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-refresh fa-rotate-90"></i></span> <span title="<?= t('Recurrence') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'recurrence', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-refresh fa-rotate-90"></i></span>
@@ -83,22 +105,6 @@
</span> </span>
<?php endif ?> <?php endif ?>
<?php if (! empty($task['time_estimated']) || ! empty($task['time_spent'])): ?>
<span class="task-time-estimated" title="<?= t('Time spent and estimated') ?>">
<?= $this->text->e($task['time_spent']) ?>/<?= $this->text->e($task['time_estimated']) ?>h
</span>
<?php endif ?>
<?php if ($task['is_milestone'] == 1): ?>
<span title="<?= t('Milestone') ?>">
<i class="fa fa-flag flag-milestone"></i>
</span>
<?php endif ?>
<?= $this->hook->render('template:board:task:icons', array('task' => $task)) ?>
<?= $this->task->formatPriority($project, $task) ?>
<?php if ($task['is_active'] == 1): ?> <?php if ($task['is_active'] == 1): ?>
<div class="task-board-age"> <div class="task-board-age">
<span title="<?= t('Task age in days')?>" class="task-board-age-total"><?= $this->dt->age($task['date_creation']) ?></span> <span title="<?= t('Task age in days')?>" class="task-board-age-total"><?= $this->dt->age($task['date_creation']) ?></span>
@@ -107,6 +113,11 @@
<?php else: ?> <?php else: ?>
<span class="task-board-closed"><i class="fa fa-ban fa-fw"></i><?= t('Closed') ?></span> <span class="task-board-closed"><i class="fa fa-ban fa-fw"></i><?= t('Closed') ?></span>
<?php endif ?> <?php endif ?>
<?= $this->task->formatPriority($project, $task) ?>
<?= $this->hook->render('template:board:task:icons', array('task' => $task)) ?>
</div>
</div> </div>
<?= $this->hook->render('template:board:task:footer', array('task' => $task)) ?> <?= $this->hook->render('template:board:task:footer', array('task' => $task)) ?>

View File

@@ -32,20 +32,21 @@
</div> </div>
<?php else: ?> <?php else: ?>
<div class="task-board-expanded"> <div class="task-board-expanded">
<div class="task-board-saving-icon" style="display: none;"><i class="fa fa-spinner fa-pulse fa-2x"></i></div> <div class="task-board-header">
<?php if ($this->user->hasProjectAccess('TaskModificationController', 'edit', $task['project_id'])): ?> <?php if ($this->user->hasProjectAccess('TaskModificationController', 'edit', $task['project_id'])): ?>
<?= $this->render('task/dropdown', array('task' => $task)) ?> <?= $this->render('task/dropdown', array('task' => $task)) ?>
<?php else: ?> <?php else: ?>
<strong><?= '#'.$task['id'] ?></strong> <strong><?= '#'.$task['id'] ?></strong>
<?php endif ?> <?php endif ?>
<?php if ($task['reference']): ?> <?php if (! empty($task['owner_id'])): ?>
<span class="task-board-reference" title="<?= t('Reference') ?>"> <span class="task-board-assignee">
(<?= $task['reference'] ?>) <?= $this->text->e($task['assignee_name'] ?: $task['assignee_username']) ?>
</span> </span>
<?php endif ?> <?php endif ?>
<?= $this->render('board/task_avatar', array('task' => $task)) ?> <?= $this->render('board/task_avatar', array('task' => $task)) ?>
</div>
<?= $this->hook->render('template:board:private:task:before-title', array('task' => $task)) ?> <?= $this->hook->render('template:board:private:task:before-title', array('task' => $task)) ?>
<div class="task-board-title"> <div class="task-board-title">
@@ -53,6 +54,8 @@
</div> </div>
<?= $this->hook->render('template:board:private:task:after-title', array('task' => $task)) ?> <?= $this->hook->render('template:board:private:task:after-title', array('task' => $task)) ?>
<div class="task-board-saving-icon" style="display: none;"><i class="fa fa-spinner fa-pulse fa-2x"></i></div>
<?= $this->render('board/task_footer', array( <?= $this->render('board/task_footer', array(
'task' => $task, 'task' => $task,
'not_editable' => $not_editable, 'not_editable' => $not_editable,

View File

@@ -1,14 +1,15 @@
<div class="task-board color-<?= $task['color_id'] ?> <?= $task['date_modification'] > time() - $board_highlight_period ? 'task-board-recent' : '' ?>"> <div class="task-board color-<?= $task['color_id'] ?> <?= $task['date_modification'] > time() - $board_highlight_period ? 'task-board-recent' : '' ?>">
<div class="task-board-header">
<?= $this->url->link('#'.$task['id'], 'TaskViewController', 'readonly', array('task_id' => $task['id'], 'token' => $project['token'])) ?> <?= $this->url->link('#'.$task['id'], 'TaskViewController', 'readonly', array('task_id' => $task['id'], 'token' => $project['token'])) ?>
<?php if ($task['reference']): ?> <?php if (! empty($task['owner_id'])): ?>
<span class="task-board-reference" title="<?= t('Reference') ?>"> <span class="task-board-assignee">
(<?= $task['reference'] ?>) <?= $this->text->e($task['assignee_name'] ?: $task['assignee_username']) ?>
</span> </span>
<?php endif ?> <?php endif ?>
<?= $this->render('board/task_avatar', array('task' => $task)) ?> <?= $this->render('board/task_avatar', array('task' => $task)) ?>
</div>
<?= $this->hook->render('template:board:public:task:before-title', array('task' => $task)) ?> <?= $this->hook->render('template:board:public:task:before-title', array('task' => $task)) ?>
<div class="task-board-title"> <div class="task-board-title">

File diff suppressed because one or more lines are too long

View File

@@ -7,6 +7,7 @@
padding: 2px padding: 2px
word-wrap: break-word word-wrap: break-word
font-size: size('compact') font-size: size('compact')
border-radius: 6px
div div
&.task-board-recent &.task-board-recent
@@ -21,8 +22,6 @@ div
text-decoration: none text-decoration: none
.dropdown-menu .dropdown-menu
font-weight: bold font-weight: bold
.task-score
font-weight: bold
.task-board-collapsed .task-board-collapsed
overflow: hidden overflow: hidden

View File

@@ -2,16 +2,19 @@
.task-board-icons .task-board-icons
font-size: size('small') font-size: size('small')
margin-top: 7px
text-align: right text-align: right
margin-top: 4px
margin-bottom: 2px
a a
opacity: 0.5 opacity: 0.5
span span
opacity: 0.5 opacity: 0.5
margin-left: 2px margin-left: 4px
a:hover, span:hover a:hover, span:hover
opacity: 1.0 opacity: 1.0
.task-board-icons-row
line-height: 22px
.task-score
font-weight: 500
.flag-milestone .flag-milestone
color: green color: green