Rewrite board drag and drop with jquery (touch devices, IE, auto-update)

This commit is contained in:
Frédéric Guillot
2014-05-17 17:35:39 -04:00
parent 09da5720e8
commit 5e4b40665f
18 changed files with 375 additions and 379 deletions

View File

@@ -27,88 +27,10 @@
</ul>
</div>
<?php if (empty($columns)): ?>
<?php if (empty($board)): ?>
<p class="alert alert-error"><?= t('There is no column in your project!') ?></p>
<?php else: ?>
<table id="board" data-project-id="<?= $current_project_id ?>">
<tr>
<?php $column_with = round(100 / count($columns), 2); ?>
<?php foreach ($columns as $column): ?>
<th width="<?= $column_with ?>%">
<a href="?controller=task&amp;action=create&amp;project_id=<?= $column['project_id'] ?>&amp;column_id=<?= $column['id'] ?>" title="<?= t('Add a new task') ?>">+</a>
<?= Helper\escape($column['title']) ?>
<?php if ($column['task_limit']): ?>
<span title="<?= t('Task limit') ?>" class="task-limit">
(
<span id="task-number-column-<?= $column['id'] ?>"><?= count($column['tasks']) ?></span>
/
<?= Helper\escape($column['task_limit']) ?>
)
</span>
<?php endif ?>
</th>
<?php endforeach ?>
</tr>
<tr>
<?php foreach ($columns as $column): ?>
<td
id="column-<?= $column['id'] ?>"
class="column <?= $column['task_limit'] && count($column['tasks']) > $column['task_limit'] ? 'task-limit-warning' : '' ?>"
data-column-id="<?= $column['id'] ?>"
data-task-limit="<?= $column['task_limit'] ?>"
dropzone="copy">
<?php foreach ($column['tasks'] as $task): ?>
<div class="draggable-item" draggable="true">
<div class="task task-<?= $task['color_id'] ?>"
data-task-id="<?= $task['id'] ?>"
data-owner-id="<?= $task['owner_id'] ?>"
data-due-date="<?= $task['date_due'] ?>"
title="<?= t('View this task') ?>">
<a href="?controller=task&amp;action=edit&amp;task_id=<?= $task['id'] ?>" title="<?= t('Edit this task') ?>">#<?= $task['id'] ?></a> -
<span class="task-user">
<?php if (! empty($task['owner_id'])): ?>
<a href="?controller=board&amp;action=assign&amp;task_id=<?= $task['id'] ?>" title="<?= t('Change assignee') ?>"><?= t('Assigned to %s', $task['username']) ?></a>
<?php else: ?>
<a href="?controller=board&amp;action=assign&amp;task_id=<?= $task['id'] ?>" title="<?= t('Change assignee') ?>" class="task-nobody"><?= t('Nobody assigned') ?></a>
<?php endif ?>
</span>
<?php if ($task['score']): ?>
<span class="task-score"><?= Helper\escape($task['score']) ?></span>
<?php endif ?>
<div class="task-title">
<a href="?controller=task&amp;action=show&amp;task_id=<?= $task['id'] ?>" title="<?= t('View this task') ?>"><?= Helper\escape($task['title']) ?></a>
</div>
<div class="task-footer">
<?php if (! empty($task['date_due'])): ?>
<div class="task-date">
<?= dt('%B %e, %G', $task['date_due']) ?>
</div>
<?php endif ?>
<div class="task-icons">
<?php if (! empty($task['nb_comments'])): ?>
<?= $task['nb_comments'] ?> <i class="fa fa-comment-o" title="<?= p($task['nb_comments'], t('%d comment', $task['nb_comments']), t('%d comments', $task['nb_comments'])) ?>"></i>
<?php endif ?>
<?php if (! empty($task['description'])): ?>
<i class="fa fa-file-text-o" title="<?= t('Description') ?>"></i>
<?php endif ?>
</div>
</div>
</div>
</div>
<?php endforeach ?>
</td>
<?php endforeach ?>
</tr>
</table>
<?= Helper\template('board_show', array('current_project_id' => $current_project_id, 'board' => $board)) ?>
<?php endif ?>
</section>

View File

@@ -19,46 +19,44 @@
<?php foreach ($columns as $column): ?>
<td class="column <?= $column['task_limit'] && count($column['tasks']) > $column['task_limit'] ? 'task-limit-warning' : '' ?>">
<?php foreach ($column['tasks'] as $task): ?>
<div class="draggable-item">
<div class="task task-<?= $task['color_id'] ?>">
<div class="task task-<?= $task['color_id'] ?>">
#<?= $task['id'] ?> -
#<?= $task['id'] ?> -
<span class="task-user">
<?php if (! empty($task['owner_id'])): ?>
<?= t('Assigned to %s', $task['username']) ?>
<?php else: ?>
<span class="task-nobody"><?= t('Nobody assigned') ?></span>
<?php endif ?>
</span>
<span class="task-user">
<?php if (! empty($task['owner_id'])): ?>
<?= t('Assigned to %s', $task['username']) ?>
<?php else: ?>
<span class="task-nobody"><?= t('Nobody assigned') ?></span>
<?php endif ?>
</span>
<?php if ($task['score']): ?>
<span class="task-score"><?= Helper\escape($task['score']) ?></span>
<?php endif ?>
<?php if ($task['score']): ?>
<span class="task-score"><?= Helper\escape($task['score']) ?></span>
<?php endif ?>
<div class="task-title">
<?= Helper\escape($task['title']) ?>
<div class="task-title">
<?= Helper\escape($task['title']) ?>
</div>
<div class="task-footer">
<?php if (! empty($task['date_due'])): ?>
<div class="task-date">
<?= dt('%B %e, %G', $task['date_due']) ?>
</div>
<?php endif ?>
<div class="task-footer">
<?php if (! empty($task['date_due'])): ?>
<div class="task-date">
<?= dt('%B %e, %G', $task['date_due']) ?>
</div>
<div class="task-icons">
<?php if (! empty($task['nb_comments'])): ?>
<?= $task['nb_comments'] ?> <i class="fa fa-comment-o" title="<?= p($task['nb_comments'], t('%d comment', $task['nb_comments']), t('%d comments', $task['nb_comments'])) ?>"></i>
<?php endif ?>
<div class="task-icons">
<?php if (! empty($task['nb_comments'])): ?>
<?= $task['nb_comments'] ?> <i class="fa fa-comment-o" title="<?= p($task['nb_comments'], t('%d comment', $task['nb_comments']), t('%d comments', $task['nb_comments'])) ?>"></i>
<?php endif ?>
<?php if (! empty($task['description'])): ?>
<i class="fa fa-file-text-o" title="<?= t('Description') ?>"></i>
<?php endif ?>
</div>
<?php if (! empty($task['description'])): ?>
<i class="fa fa-file-text-o" title="<?= t('Description') ?>"></i>
<?php endif ?>
</div>
</div>
</div>
<?php endforeach ?>
</td>

75
templates/board_show.php Normal file
View File

@@ -0,0 +1,75 @@
<table id="board" data-project-id="<?= $current_project_id ?>" data-time="<?= time() ?>" data-check-interval="<?= BOARD_CHECK_INTERVAL ?>">
<tr>
<?php $column_with = round(100 / count($board), 2); ?>
<?php foreach ($board as $column): ?>
<th width="<?= $column_with ?>%">
<a href="?controller=task&amp;action=create&amp;project_id=<?= $column['project_id'] ?>&amp;column_id=<?= $column['id'] ?>" title="<?= t('Add a new task') ?>">+</a>
<?= Helper\escape($column['title']) ?>
<?php if ($column['task_limit']): ?>
<span title="<?= t('Task limit') ?>" class="task-limit">
(
<span id="task-number-column-<?= $column['id'] ?>"><?= count($column['tasks']) ?></span>
/
<?= Helper\escape($column['task_limit']) ?>
)
</span>
<?php endif ?>
</th>
<?php endforeach ?>
</tr>
<tr>
<?php foreach ($board as $column): ?>
<td
id="column-<?= $column['id'] ?>"
class="column <?= $column['task_limit'] && count($column['tasks']) > $column['task_limit'] ? 'task-limit-warning' : '' ?>"
data-column-id="<?= $column['id'] ?>"
data-task-limit="<?= $column['task_limit'] ?>"
>
<?php foreach ($column['tasks'] as $task): ?>
<div class="task draggable-item task-<?= $task['color_id'] ?>"
data-task-id="<?= $task['id'] ?>"
data-owner-id="<?= $task['owner_id'] ?>"
data-due-date="<?= $task['date_due'] ?>"
title="<?= t('View this task') ?>">
<a href="?controller=task&amp;action=edit&amp;task_id=<?= $task['id'] ?>" title="<?= t('Edit this task') ?>">#<?= $task['id'] ?></a> -
<span class="task-user">
<?php if (! empty($task['owner_id'])): ?>
<a href="?controller=board&amp;action=assign&amp;task_id=<?= $task['id'] ?>" title="<?= t('Change assignee') ?>"><?= t('Assigned to %s', $task['username']) ?></a>
<?php else: ?>
<a href="?controller=board&amp;action=assign&amp;task_id=<?= $task['id'] ?>" title="<?= t('Change assignee') ?>" class="task-nobody"><?= t('Nobody assigned') ?></a>
<?php endif ?>
</span>
<?php if ($task['score']): ?>
<span class="task-score"><?= Helper\escape($task['score']) ?></span>
<?php endif ?>
<div class="task-title">
<a href="?controller=task&amp;action=show&amp;task_id=<?= $task['id'] ?>" title="<?= t('View this task') ?>"><?= Helper\escape($task['title']) ?></a>
</div>
<div class="task-footer">
<?php if (! empty($task['date_due'])): ?>
<div class="task-date">
<?= dt('%B %e, %G', $task['date_due']) ?>
</div>
<?php endif ?>
<div class="task-icons">
<?php if (! empty($task['nb_comments'])): ?>
<?= $task['nb_comments'] ?> <i class="fa fa-comment-o" title="<?= p($task['nb_comments'], t('%d comment', $task['nb_comments']), t('%d comments', $task['nb_comments'])) ?>"></i>
<?php endif ?>
<?php if (! empty($task['description'])): ?>
<i class="fa fa-file-text-o" title="<?= t('Description') ?>"></i>
<?php endif ?>
</div>
</div>
</div>
<?php endforeach ?>
</td>
<?php endforeach ?>
</tr>
</table>

View File

@@ -3,6 +3,9 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="assets/js/jquery-1.11.1.min.js"></script>
<script src="assets/js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="assets/js/jquery.ui.touch-punch.min.js"></script>
<link rel="stylesheet" href="assets/css/app.css" media="screen">
<link rel="stylesheet" href="assets/css/font-awesome.min.css" media="screen">
<link rel="icon" type="image/png" href="assets/img/favicon.png">
@@ -12,7 +15,7 @@
<link rel="apple-touch-icon" sizes="144x144" href="assets/img/touch-icon-ipad-retina.png">
<title><?= isset($title) ? Helper\escape($title).' - Kanboard' : 'Kanboard' ?></title>
<?php if (isset($auto_refresh)): ?>
<meta http-equiv="refresh" content="<?= AUTO_REFRESH_DURATION ?>" >
<meta http-equiv="refresh" content="<?= BOARD_PUBLIC_CHECK_INTERVAL ?>" >
<?php endif ?>
</head>
<body>