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

Integrate tooltips and code cleanup/fix bugs, see #166

This commit is contained in:
Frédéric Guillot 2014-11-24 21:32:03 -05:00
parent 5d7cff3526
commit 37c6616e50
20 changed files with 464 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
app/Controller/Board.php
View File

@ -405,4 +405,74 @@ class Board extends Base
$this->response->status(401);
}
}
/**
* Get subtasks on mouseover
*
* @access public
*/
public function subtasks()
{
$task = $this->getTask();
$this->response->html($this->template->load('board/subtasks', array(
'subtasks' => $this->subTask->getAll($task['id'])
)));
}
/**
* Change the status of a subtask from the mouseover
*
* @access public
*/
public function toggleSubtask()
{
$task = $this->getTask();
$this->subTask->toggleStatus($this->request->getIntegerParam('subtask_id'));
$this->response->html($this->template->load('board/subtasks', array(
'subtasks' => $this->subTask->getAll($task['id'])
)));
}
/**
* Display all attachments during the task mouseover
*
* @access public
*/
public function attachments()
{
$task = $this->getTask();
$this->response->html($this->template->load('board/files', array(
'files' => $this->file->getAll($task['id'])
)));
}
/**
* Display comments during a task mouseover
*
* @access public
*/
public function comments()
{
$task = $this->getTask();
$this->response->html($this->template->load('board/comments', array(
'comments' => $this->comment->getAll($task['id'])
)));
}
/**
* Display the description
*
* @access public
*/
public function description()
{
$task = $this->getTask();
$this->response->html($this->template->load('board/description', array(
'task' => $task
)));
}
}

10
app/Controller/Subtask.php
View File

@ -183,15 +183,9 @@ class Subtask extends Base
public function toggleStatus()
{
$task = $this->getTask();
$subtask = $this->getSubtask();
$subtask_id = $this->request->getIntegerParam('subtask_id');
$value = array(
'id' => $subtask['id'],
'status' => ($subtask['status'] + 1) % 3,
'task_id' => $task['id'],
);
if (! $this->subTask->update($value)) {
if (! $this->subTask->toggleStatus($subtask_id)) {
$this->session->flashError(t('Unable to update your sub-task.'));
}

2
app/Model/Acl.php
View File

@ -32,8 +32,8 @@ class Acl extends Base
*/
private $user_actions = array(
'app' => array('index', 'preview'),
'board' => array('index', 'show', 'save', 'check', 'changeassignee', 'updateassignee', 'changecategory', 'updatecategory', 'movecolumn', 'edit', 'update', 'add', 'confirm', 'remove'),
'project' => array('index', 'show', 'exporttasks', 'exportdaily', 'share', 'edit', 'update', 'users', 'remove', 'duplicate', 'disable', 'enable', 'activity', 'search', 'tasks', 'create', 'save'),
'board' => array('index', 'show', 'save', 'check', 'changeassignee', 'updateassignee', 'changecategory', 'updatecategory', 'movecolumn', 'edit', 'update', 'add', 'confirm', 'remove', 'subtasks', 'togglesubtask', 'attachments', 'comments', 'description'),
'user' => array('edit', 'forbidden', 'logout', 'show', 'external', 'unlinkgoogle', 'unlinkgithub', 'sessions', 'removesession', 'last', 'notifications', 'password'),
'comment' => array('create', 'save', 'confirm', 'remove', 'update', 'edit', 'forbidden'),
'file' => array('create', 'save', 'download', 'confirm', 'remove', 'open', 'image'),

22
app/Model/SubTask.php
View File

@ -171,6 +171,28 @@ class SubTask extends Base
return $result;
}
/**
* Change the status of subtask
*
* Todo -> In progress -> Done -> Todo -> etc...
*
* @access public
* @param integer $subtask_id
* @return bool
*/
public function toggleStatus($subtask_id)
{
$subtask = $this->getById($subtask_id);
$values = array(
'id' => $subtask['id'],
'status' => ($subtask['status'] + 1) % 3,
'task_id' => $subtask['task_id'],
);
return $this->update($values);
}
/**
* Remove
*

13
app/Template/board/comments.php Normal file
View File

@ -0,0 +1,13 @@
<section>
<?php foreach ($comments as $comment): ?>
<p class="comment-title">
<span class="comment-username"><?= Helper\escape($comment['name'] ?: $comment['username']) ?></span> @ <span class="comment-date"><?= dt('%b %e, %Y, %k:%M %p', $comment['date']) ?></span>
</p>
<div class="comment-inner">
<div class="markdown">
<?= Helper\markdown($comment['comment']) ?>
</div>
</div>
<?php endforeach ?>
</section>

5
app/Template/board/description.php Normal file
View File

@ -0,0 +1,5 @@
<section class="tooltip-large">
<div class="markdown">
<?= Helper\markdown($task['description']) ?>
</div>
</section>

14
app/Template/board/files.php Normal file
View File

@ -0,0 +1,14 @@
<section>
<?php foreach ($files as $file): ?>
<i class="fa fa-file-o fa-fw"></i>
<?= Helper\a(
Helper\escape($file['name']),
'file',
'download',
array('file_id' => $file['id'], 'task_id' => $file['task_id'])
) ?>
<br/>
<?php endforeach ?>
</section>

16
app/Template/board/subtasks.php Normal file
View File

@ -0,0 +1,16 @@
<section id="tooltip-subtasks">
<?php foreach ($subtasks as $subtask): ?>
<?= Helper\template('subtask/icons', array('subtask' => $subtask)) ?>
<?= Helper\a(
Helper\escape($subtask['title']),
'board',
'toggleSubtask',
array('task_id' => $subtask['task_id'], 'subtask_id' => $subtask['id'])
) ?>
<?= Helper\escape(empty($subtask['username']) ? '' : ' ['.Helper\get_username($subtask).']') ?>
<br/>
<?php endforeach ?>
</section>

8
app/Template/board/task.php
View File

@ -90,19 +90,19 @@
<div class="task-board-icons">
<?php if (! empty($task['nb_subtasks'])): ?>
<span title="<?= t('Sub-Tasks') ?>"><?= $task['nb_completed_subtasks'].'/'.$task['nb_subtasks'] ?> <i class="fa fa-bars"></i></span>
<span title="<?= t('Sub-Tasks') ?>" class="task-board-tooltip" data-href="<?= helper\u('board', 'subtasks', array('task_id' => $task['id'])) ?>"><?= $task['nb_completed_subtasks'].'/'.$task['nb_subtasks'] ?> <i class="fa fa-bars"></i></span>
<?php endif ?>
<?php if (! empty($task['nb_files'])): ?>
<span title="<?= t('Attachments') ?>"><?= $task['nb_files'] ?> <i class="fa fa-paperclip"></i></span>
<span title="<?= t('Attachments') ?>" class="task-board-tooltip" data-href="<?= helper\u('board', 'attachments', array('task_id' => $task['id'])) ?>"><?= $task['nb_files'] ?> <i class="fa fa-paperclip"></i></span>
<?php endif ?>
<?php if (! empty($task['nb_comments'])): ?>
<span title="<?= p($task['nb_comments'], t('%d comment', $task['nb_comments']), t('%d comments', $task['nb_comments'])) ?>"><?= $task['nb_comments'] ?> <i class="fa fa-comment-o"></i></span>
<span title="<?= p($task['nb_comments'], t('%d comment', $task['nb_comments']), t('%d comments', $task['nb_comments'])) ?>" class="task-board-tooltip" data-href="<?= helper\u('board', 'comments', array('task_id' => $task['id'])) ?>"><?= $task['nb_comments'] ?> <i class="fa fa-comment-o"></i></span>
<?php endif ?>
<?php if (! empty($task['description'])): ?>
<span title="<?= t('Description') ?>">
<span title="<?= t('Description') ?>" class="task-board-tooltip" data-href="<?= helper\u('board', 'description', array('task_id' => $task['id'])) ?>">
<?php if (! isset($not_editable)): ?>
<a class="task-description-popover" href="?controller=task&amp;action=description&amp;task_id=<?= $task['id'] ?>"><i class="fa fa-file-text-o" data-href="?controller=task&amp;action=description&amp;task_id=<?= $task['id'] ?>"></i></a>
<?php else: ?>

7
app/Template/subtask/icons.php Normal file
View File

@ -0,0 +1,7 @@
<?php if ($subtask['status'] == 0): ?>
<i class="fa fa-square-o fa-fw"></i>
<?php elseif ($subtask['status'] == 1): ?>
<i class="fa fa-gears fa-fw"></i>
<?php else: ?>
<i class="fa fa-check-square-o fa-fw"></i>
<?php endif ?>

8
app/Template/subtask_show.php
View File

@ -19,13 +19,7 @@
<tr>
<td><?= Helper\escape($subtask['title']) ?></td>
<td>
<?php if ($subtask['status'] == 0): ?>
<i class="fa fa-square-o fa-fw"></i>
<?php elseif ($subtask['status'] == 1): ?>
<i class="fa fa-gears fa-fw"></i>
<?php else: ?>
<i class="fa fa-check-square-o fa-fw"></i>
<?php endif ?>
<?= Helper\template('subtask/icons', array('subtask' => $subtask)) ?>
<?php if (! isset($not_editable)): ?>
<?= Helper\a(Helper\escape($subtask['status_name']), 'subtask', 'toggleStatus', array('task_id' => $task['id'], 'subtask_id' => $subtask['id'])) ?>

5
app/helpers.php
View File

@ -574,11 +574,12 @@ function form_numeric($name, $values = array(), array $errors = array(), array $
* @param array $params Url parameters
* @param boolean $csrf Add a CSRF token
* @param string $class CSS class attribute
* @param boolean $new_tab Open the link in a new tab
* @return string
*/
function a($label, $controller, $action, array $params = array(), $csrf = false, $class = '', $title = '')
function a($label, $controller, $action, array $params = array(), $csrf = false, $class = '', $title = '', $new_tab = false)
{
return '<a href="'.u($controller, $action, $params, $csrf).'" class="'.$class.'" title="'.$title.'">'.$label.'</a>';
return '<a href="'.u($controller, $action, $params, $csrf).'" class="'.$class.'" title="'.$title.'" '.($new_tab ? 'target="_blank"' : '').'>'.$label.'</a>';
}
/**

87
assets/css/app.css
View File

File diff suppressed because one or more lines are too long

8
assets/css/comment.css
View File

@ -33,6 +33,14 @@
border-bottom: 1px dotted #aaa;
}
.ui-tooltip .comment-title {
font-size: 80%;
}
.ui-tooltip .comment-inner {
padding-bottom: 0;
}
.comment-actions {
font-size: 0.8em;
padding: 0;

15
assets/css/jquery-ui-1.10.4.custom.css vendored
View File

@ -1,6 +1,6 @@
/*! jQuery UI - v1.10.4 - 2014-05-29
* http://jqueryui.com
* Includes: jquery.ui.core.css, jquery.ui.datepicker.css, jquery.ui.theme.css
* Includes: jquery.ui.core.css, jquery.ui.datepicker.css, jquery.ui.tooltip.css, jquery.ui.theme.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana%2CArial%2Csans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=cccccc&bgTextureHeader=highlight_soft&bgImgOpacityHeader=75&borderColorHeader=aaaaaa&fcHeader=222222&iconColorHeader=222222&bgColorContent=ffffff&bgTextureContent=flat&bgImgOpacityContent=75&borderColorContent=aaaaaa&fcContent=222222&iconColorContent=222222&bgColorDefault=e6e6e6&bgTextureDefault=glass&bgImgOpacityDefault=75&borderColorDefault=d3d3d3&fcDefault=555555&iconColorDefault=888888&bgColorHover=dadada&bgTextureHover=glass&bgImgOpacityHover=75&borderColorHover=999999&fcHover=212121&iconColorHover=454545&bgColorActive=ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=aaaaaa&fcActive=212121&iconColorActive=454545&bgColorHighlight=fbf9ee&bgTextureHighlight=glass&bgImgOpacityHighlight=55&borderColorHighlight=fcefa1&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=glass&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px
* Copyright 2014 jQuery Foundation and other contributors; Licensed MIT */
@ -251,6 +251,17 @@
border-right-width: 0;
border-left-width: 1px;
}
.ui-tooltip {
padding: 8px;
position: absolute;
z-index: 9999;
max-width: 300px;
-webkit-box-shadow: 0 0 5px #aaa;
box-shadow: 0 0 5px #aaa;
}
body .ui-tooltip {
border-width: 2px;
}
/* Component containers
----------------------------------*/
@ -620,7 +631,7 @@
.ui-corner-right,
.ui-corner-tr {
border-top-right-radius: 4px;
}
}jquery.ui.tooltip.css,
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,

65
assets/css/tooltip.css Normal file
View File

@ -0,0 +1,65 @@
/* tooltip */
.tooltip-arrow:after {
background: #fff;
border: 1px solid #aaaaaa;
box-shadow: 0 0 5px #aaa;
}
div.ui-tooltip {
min-width: 200px;
max-width: 600px;
font-size: 0.95em;
}
.tooltip-arrow {
width: 20px;
height: 10px;
overflow: hidden;
position: absolute;
}
.tooltip-arrow.top {
top: -10px;
}
.tooltip-arrow.bottom {
bottom: -10px;
}
.tooltip-arrow.align-left {
left: 10px;
}
.tooltip-arrow.align-right {
right: 10px;
}
.tooltip-arrow:after {
content: "";
position: absolute;
width: 14px;
height: 14px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.tooltip-arrow.bottom:after {
top: -10px;
}
.tooltip-arrow.top:after {
bottom: -10px;
}
.tooltip-arrow.align-left:after {
left: 0px;
}
.tooltip-arrow.align-right:after {
right: 0px;
}
.tooltip-large {
width: 550px;
}

71
assets/js/app.js
View File

File diff suppressed because one or more lines are too long

63
assets/js/board.js
View File

@ -35,6 +35,69 @@ Kanboard.Board = (function() {
// Description popover
$(".task-description-popover").click(Kanboard.Popover);
// Tooltips
$(".task-board-tooltip").tooltip({
track: false,
position: {
my: 'left-20 top',
at: 'center bottom+9',
using: function(position, feedback) {
$(this).css(position);
var arrow_pos = feedback.target.left + feedback.target.width / 2 - feedback.element.left - 20;
$("<div>")
.addClass("tooltip-arrow")
.addClass(feedback.vertical)
.addClass(arrow_pos == 0 ? "align-left" : "align-right")
.appendTo(this);
}
},
content: function(e) {
var href = $(this).attr('data-href');
if (! href) {
return;
}
$.get(href, function setTooltipContent(data) {
$('.ui-tooltip-content:visible').html(data);
// Toggle subtasks status
$('#tooltip-subtasks a').click(function(e) {
e.preventDefault();
e.stopPropagation();
$.get($(this).attr('href'), setTooltipContent);
});
});
return '<i class="fa fa-refresh fa-spin fa-2x"></i>';
}
}).on("mouseenter", function() {
var _this = this;
$(this).tooltip("open");
$(".ui-tooltip").on("mouseleave", function () {
$(_this).tooltip('close');
});
}).on("mouseleave focusout", function (e) {
e.stopImmediatePropagation();
var _this = this;
setTimeout(function () {
if (! $(".ui-tooltip:hover").length) {
$(_this).tooltip("close");
}
}, 100);
});
// Redirect to the task details page
$("[data-task-url]").each(function() {
$(this).click(function() {

8
assets/js/jquery-ui-1.10.4.custom.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
scripts/make-assets.sh
View File

@ -1,6 +1,6 @@
#!/bin/bash
css="base links title table form button alert header board project task comment subtask markdown listing activity dashboard pagination popover confirm sidebar responsive font-awesome.min jquery-ui-1.10.4.custom chosen.min"
css="base links title table form button alert tooltip header board project task comment subtask markdown listing activity dashboard pagination popover confirm sidebar responsive font-awesome.min jquery-ui-1.10.4.custom chosen.min"
js="jquery-1.11.1.min jquery-ui-1.10.4.custom.min jquery.ui.touch-punch.min chosen.jquery.min base board task analytic init"
rm -f assets/css/app.css