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

app/Controller/Board.php

@@ -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
+        )));
+    }
 }

app/Controller/Subtask.php

@@ -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(
+        if (! $this->subTask->toggleStatus($subtask_id)) {
-            'id' => $subtask['id'],
-            'status' => ($subtask['status'] + 1) % 3,
-            'task_id' => $task['id'],
-        );
-
-        if (! $this->subTask->update($value)) {
             $this->session->flashError(t('Unable to update your sub-task.'));
         }
 

app/Model/Acl.php

@@ -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'),

app/Model/SubTask.php

@@ -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
      *

app/Template/board/comments.php

@@ -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>

app/Template/board/description.php

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

app/Template/board/files.php

@@ -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>

app/Template/board/subtasks.php

@@ -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>

app/Template/board/task.php

@@ -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: ?>

app/Template/subtask/icons.php

@@ -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 ?>

app/Template/subtask_show.php

@@ -19,13 +19,7 @@
         <tr>
             <td><?= Helper\escape($subtask['title']) ?></td>
             <td>
-                <?php if ($subtask['status'] == 0): ?>
+                <?= Helper\template('subtask/icons', array('subtask' => $subtask)) ?>
-                    <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 ?>
 
                 <?php if (! isset($not_editable)): ?>
                     <?= Helper\a(Helper\escape($subtask['status_name']), 'subtask', 'toggleStatus', array('task_id' => $task['id'], 'subtask_id' => $subtask['id'])) ?>

app/helpers.php

@@ -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>';
 }
 
 /**

assets/css/comment.css

@@ -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;

assets/css/jquery-ui-1.10.4.custom.css

@@ -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,

assets/css/tooltip.css

@@ -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;
+}

assets/js/board.js

@@ -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() {

scripts/make-assets.sh

@@ -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