AS1024
/
Kanboard-Prod
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change swimlane layout to save space on the screen

This commit is contained in:
Frederic Guillot 2015-09-26 19:04:58 -04:00
parent 53f4b41008
commit 16e14b76a6
14 changed files with 133 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ChangeLog
View File

@ -18,6 +18,7 @@ Core functionalities moved to plugins:
Improvements:
* Change swimlane layout to save space on the screen
* Add the possibility to set/unset max column height (column scrolling)
* Show "Open this task" in dropdown menu for closed tasks
* Show assignee on card only when someone is assigned (hide nobody text)

4
app/Controller/Board.php
View File

@ -27,7 +27,7 @@ class Board extends Base
}
// Display the board with a specific layout
$this->response->html($this->template->layout('board/public_view', array(
$this->response->html($this->template->layout('board/view_public', array(
'project' => $project,
'swimlanes' => $this->board->getBoard($project['id']),
'title' => $project['name'],
@ -49,7 +49,7 @@ class Board extends Base
{
$params = $this->getProjectFilters('board', 'show');
$this->response->html($this->template->layout('board/private_view', array(
$this->response->html($this->template->layout('board/view_private', array(
'categories_list' => $this->category->getList($params['project']['id'], false),
'users_list' => $this->projectPermission->getMemberList($params['project']['id'], false),
'swimlanes' => $this->taskFilter->search($params['filters']['search'])->getBoard($params['project']['id']),

51
app/Template/board/table_column.php Normal file
View File

@ -0,0 +1,51 @@
<!-- column titles -->
<?php ?>
<tr>
<?php foreach ($swimlane['columns'] as $column): ?>
<th class="board-column-header board-column-header-<?= $column['id'] ?>" data-column-id="<?= $column['id'] ?>">
<!-- column in collapsed mode -->
<div class="board-column-collapsed">
<span title="<?= t('Task count') ?>" class="board-column-header-task-count" title="<?= t('Show this column') ?>">
<span id="task-number-column-<?= $column['id'] ?>"><?= $column['nb_tasks'] ?></span>
</span>
</div>
<!-- column in expanded mode -->
<div class="board-column-expanded">
<?php if (! $not_editable): ?>
<div class="board-add-icon">
<?= $this->url->link('+', 'taskcreation', 'create', array('project_id' => $column['project_id'], 'column_id' => $column['id'], 'swimlane_id' => $swimlane['id']), false, 'popover', t('Add a new task')) ?>
</div>
<?php endif ?>
<span class="board-column-title" data-column-id="<?= $column['id'] ?>" title="<?= t('Hide this column') ?>">
<?= $this->e($column['title']) ?>
</span>
<?php if (! $not_editable && ! empty($column['description'])): ?>
<span class="tooltip pull-right" title='<?= $this->e($this->text->markdown($column['description'])) ?>'>
<i class="fa fa-info-circle"></i>
</span>
<?php endif ?>
<?php if (! empty($column['score'])): ?>
<span class="pull-right" title="<?= t('Score') ?>">
<?= $column['score'] ?>&nbsp;
</span>
<?php endif ?>
<?php if ($column['task_limit']): ?>
<span title="<?= t('Task limit') ?>">
(<span id="task-number-column-<?= $column['id'] ?>"><?= $column['nb_tasks'] ?></span>/<?= $this->e($column['task_limit']) ?>)
</span>
<?php else: ?>
<span title="<?= t('Task count') ?>" class="board-column-header-task-count">
(<span id="task-number-column-<?= $column['id'] ?>"><?= $column['nb_tasks'] ?></span>)
</span>
<?php endif ?>
</div>
</th>
<?php endforeach ?>
</tr>

24
app/Template/board/table_container.php
View File

@ -13,18 +13,34 @@
>
<?php endif ?>
<?php foreach ($swimlanes as $swimlane): ?>
<?php $nb_swimlanes = count($swimlanes) ?>
<?php foreach ($swimlanes as $index => $swimlane): ?>
<?php if (empty($swimlane['columns'])): ?>
<p class="alert alert-error"><?= t('There is no column in your project!') ?></p>
<?php break ?>
<?php else: ?>
<?= $this->render('board/table_swimlane', array(
<?php if ($index === 0): ?>
<?= $this->render('board/table_column', array(
'swimlane' => $swimlane,
'not_editable' => isset($not_editable),
)) ?>
<?php endif ?>
<?php if ($nb_swimlanes > 1): ?>
<?= $this->render('board/table_swimlane', array(
'project' => $project,
'swimlane' => $swimlane,
'not_editable' => isset($not_editable),
)) ?>
<?php endif ?>
<?= $this->render('board/table_tasks', array(
'project' => $project,
'swimlane' => $swimlane,
'board_highlight_period' => $board_highlight_period,
'hide_swimlane' => count($swimlanes) === 1,
'not_editable' => isset($not_editable),
'board_highlight_period' => $board_highlight_period,
)) ?>
<?php endif ?>
<?php endforeach ?>
</table>

116
app/Template/board/table_swimlane.php
View File

@ -1,104 +1,26 @@
<!-- swimlane -->
<tr id="swimlane-<?= $swimlane['id'] ?>">
<!-- swimlane toggle -->
<?php if (! $hide_swimlane): ?>
<th class="board-swimlane-header">
<?php if (! $not_editable): ?>
<a href="#" class="board-swimlane-toggle" data-swimlane-id="<?= $swimlane['id'] ?>">
<i class="fa fa-chevron-circle-up hide-icon-swimlane-<?= $swimlane['id'] ?>"></i>
<i class="fa fa-chevron-circle-down show-icon-swimlane-<?= $swimlane['id'] ?>" style="display: none"></i>
</a>
<th class="board-swimlane-header" colspan="<?= $swimlane['nb_columns'] ?>">
<?php if (! $not_editable): ?>
<a href="#" class="board-swimlane-toggle" data-swimlane-id="<?= $swimlane['id'] ?>">
<i class="fa fa-chevron-circle-up hide-icon-swimlane-<?= $swimlane['id'] ?>" title="<?= t('Collapse swimlane') ?>"></i>
<i class="fa fa-chevron-circle-down show-icon-swimlane-<?= $swimlane['id'] ?>" title="<?= t('Expand swimlane') ?>" style="display: none"></i>
</a>
<?php endif ?>
<?php if (! empty($swimlane['description'])): ?>
<span
title="<?= t('Description') ?>"
class="tooltip"
data-href="<?= $this->url->href('board', 'swimlane', array('swimlane_id' => $swimlane['id'], 'project_id' => $project['id'])) ?>">
<i class="fa fa-info-circle"></i>
</span>
<?php endif ?>
<?= $this->e($swimlane['name']) ?>
<span title="<?= t('Task count') ?>" class="board-column-header-task-count swimlane-task-count-<?= $swimlane['id'] ?>">
(<?= $swimlane['nb_tasks'] ?>)
</span>
<span class="board-swimlane-toggle-title show-icon-swimlane-<?= $swimlane['id'] ?>"><?= $this->e($swimlane['name']) ?></span>
<?php endif ?>
</th>
<?php endif ?>
<!-- column header title -->
<?php foreach ($swimlane['columns'] as $column): ?>
<th class="board-column-header board-column-header-<?= $column['id'] ?>" data-column-id="<?= $column['id'] ?>">
<div class="board-column-collapsed">
<span title="<?= t('Task count') ?>" class="board-column-header-task-count" title="<?= t('Show this column') ?>">
<span id="task-number-column-<?= $column['id'] ?>"><?= $column['nb_tasks'] ?></span>
<?php if (! $not_editable && ! empty($swimlane['description'])): ?>
<span
title="<?= t('Description') ?>"
class="tooltip"
data-href="<?= $this->url->href('board', 'swimlane', array('swimlane_id' => $swimlane['id'], 'project_id' => $project['id'])) ?>">
<i class="fa fa-info-circle"></i>
</span>
</div>
<div class="board-column-expanded">
<?php if (! $not_editable): ?>
<div class="board-add-icon">
<?= $this->url->link('+', 'taskcreation', 'create', array('project_id' => $column['project_id'], 'column_id' => $column['id'], 'swimlane_id' => $swimlane['id']), false, 'popover', t('Add a new task')) ?>
</div>
<?php endif ?>
<?php endif ?>
<span class="board-column-title" data-column-id="<?= $column['id'] ?>" title="<?= t('Hide this column') ?>">
<?= $this->e($column['title']) ?>
</span>
<?php if (! $not_editable && ! empty($column['description'])): ?>
<span class="tooltip pull-right" title='<?= $this->e($this->text->markdown($column['description'])) ?>'>
<i class="fa fa-info-circle"></i>
</span>
<?php endif ?>
<?php if (! empty($column['score'])): ?>
<span class="pull-right" title="<?= t('Score') ?>">
<?= $column['score'] ?>&nbsp;
</span>
<?php endif ?>
<?php if ($column['task_limit']): ?>
<span title="<?= t('Task limit') ?>">
(<span id="task-number-column-<?= $column['id'] ?>"><?= $column['nb_tasks'] ?></span>/<?= $this->e($column['task_limit']) ?>)
</span>
<?php else: ?>
<span title="<?= t('Task count') ?>" class="board-column-header-task-count">
(<span id="task-number-column-<?= $column['id'] ?>"><?= $column['nb_tasks'] ?></span>)
</span>
<?php endif ?>
</div>
<span title="<?= t('Task count') ?>" class="board-column-header-task-count swimlane-task-count-<?= $swimlane['id'] ?>">
(<?= $swimlane['nb_tasks'] ?>)
</span>
</th>
<?php endforeach ?>
</tr>
<tr class="board-swimlane swimlane-row-<?= $swimlane['id'] ?>">
<!-- swimlane title -->
<?php if (! $hide_swimlane): ?>
<th class="board-swimlane-title">
<?= $this->e($swimlane['name']) ?>
</th>
<?php endif ?>
<!-- task list -->
<?php foreach ($swimlane['columns'] as $column): ?>
<td class="board-column-<?= $column['id'] ?> <?= $column['task_limit'] && $column['nb_tasks'] > $column['task_limit'] ? 'board-task-list-limit' : '' ?>">
<div class="board-task-list board-column-expanded" data-column-id="<?= $column['id'] ?>" data-swimlane-id="<?= $swimlane['id'] ?>" data-task-limit="<?= $column['task_limit'] ?>">
<?php foreach ($column['tasks'] as $task): ?>
<?= $this->render($not_editable ? 'board/task_public' : 'board/task_private', array(
'project' => $project,
'task' => $task,
'board_highlight_period' => $board_highlight_period,
'not_editable' => $not_editable,
)) ?>
<?php endforeach ?>
</div>
<div class="board-column-collapsed">
<div class="board-rotation-wrapper">
<div class="board-column-title board-rotation" data-column-id="<?= $column['id'] ?>" title="<?= t('Show this column') ?>">
<i class="fa fa-chevron-circle-up tooltip" title="<?= $this->e($column['title']) ?>"></i> <?= $this->e($column['title']) ?>
</div>
</div>
</div>
</td>
<?php endforeach ?>
</tr>

28
app/Template/board/table_tasks.php Normal file
View File

@ -0,0 +1,28 @@
<!-- task row -->
<tr class="board-swimlane swimlane-row-<?= $swimlane['id'] ?>">
<?php foreach ($swimlane['columns'] as $column): ?>
<td class="board-column-<?= $column['id'] ?> <?= $column['task_limit'] && $column['nb_tasks'] > $column['task_limit'] ? 'board-task-list-limit' : '' ?>">
<!-- tasks list -->
<div class="board-task-list board-column-expanded" data-column-id="<?= $column['id'] ?>" data-swimlane-id="<?= $swimlane['id'] ?>" data-task-limit="<?= $column['task_limit'] ?>">
<?php foreach ($column['tasks'] as $task): ?>
<?= $this->render($not_editable ? 'board/task_public' : 'board/task_private', array(
'project' => $project,
'task' => $task,
'board_highlight_period' => $board_highlight_period,
'not_editable' => $not_editable,
)) ?>
<?php endforeach ?>
</div>
<!-- column in collapsed mode (rotated text) -->
<div class="board-column-collapsed">
<div class="board-rotation-wrapper">
<div class="board-column-title board-rotation" data-column-id="<?= $column['id'] ?>" title="<?= t('Show this column') ?>">
<i class="fa fa-chevron-circle-up tooltip" title="<?= $this->e($column['title']) ?>"></i> <?= $this->e($column['title']) ?>
</div>
</div>
</div>
</td>
<?php endforeach ?>
</tr>

2
app/Template/board/task_private.php
View File

@ -11,7 +11,7 @@
<div class="task-board-sort-handle" style="display: none;"><i class="fa fa-arrows-alt"></i></div>
<?= $this->render('board/task_menu', array('task' => $task)) ?>
<?php if ($this->board->isCollapsed($project['id'])): ?>
<?php if ($this->board->isCollapsed($task['project_id'])): ?>
<div class="task-board-collapsed">
<?php if (! empty($task['assignee_username'])): ?>
<span title="<?= $this->e($task['assignee_name'] ?: $task['assignee_username']) ?>">

0
app/Template/board/private_view.php → app/Template/board/view_private.php
View File

0
app/Template/board/public_view.php → app/Template/board/view_public.php
View File

2
assets/css/app.css
View File

File diff suppressed because one or more lines are too long

2
assets/css/print.css
View File

File diff suppressed because one or more lines are too long

17
assets/css/src/board.css
View File

@ -111,21 +111,16 @@ th.board-column-header-collapsed .board-column-header-task-count {
}
/* swimlanes */
th.board-swimlane-header {
width: 120px;
}
a.board-swimlane-toggle {
font-size: 0.95em;
text-decoration: none;
}
.board-swimlane-toggle-title {
font-size: 0.85em;
display: none;
}
.board-swimlane-title {
vertical-align: top;
a.board-swimlane-toggle:hover,
a.board-swimlane-toggle:focus {
color: #000;
text-decoration: none;
border: none;
}
/* board task list */

2
assets/js/app.js
View File

File diff suppressed because one or more lines are too long

6
assets/js/src/Swimlane.js
View File

@ -16,9 +16,8 @@ Swimlane.prototype.expand = function(swimlaneId) {
localStorage.setItem(this.getStorageKey(), JSON.stringify(swimlaneIds));
$('.swimlane-row-' + swimlaneId).css('display', 'table-row');
$('.show-icon-swimlane-' + swimlaneId).css('display', 'none');
$('.hide-icon-swimlane-' + swimlaneId).css('display', 'inline');
$('.swimlane-task-count-' + swimlaneId).css('display', 'inline');
$('.show-icon-swimlane-' + swimlaneId).css('display', 'none');
};
Swimlane.prototype.collapse = function(swimlaneId) {
@ -30,9 +29,8 @@ Swimlane.prototype.collapse = function(swimlaneId) {
}
$('.swimlane-row-' + swimlaneId).css('display', 'none');
$('.show-icon-swimlane-' + swimlaneId).css('display', 'inline');
$('.hide-icon-swimlane-' + swimlaneId).css('display', 'none');
$('.swimlane-task-count-' + swimlaneId).css('display', 'none');
$('.show-icon-swimlane-' + swimlaneId).css('display', 'inline');
};
Swimlane.prototype.isCollapsed = function(swimlaneId) {