Add dropdown menu for subtasks

ChangeLog

@@ -5,6 +5,10 @@ New features:
 
 * Forgot Password
 
+Improvements:
+
+* Add dropdown menu for subtasks
+
 Bug fixes:
 
 * Automatic action listeners were using the same instance

app/Template/subtask/show.php

@@ -13,7 +13,7 @@
                 <th><?= t('Assignee') ?></th>
                 <th><?= t('Time tracking') ?></th>
                 <?php if ($editable): ?>
-                    <th><?= t('Actions') ?></th>
+                    <th class="column-5"></th>
                 <?php endif ?>
             </tr>
             <?php foreach ($subtasks as $subtask): ?>
@@ -61,6 +61,8 @@
                 </td>
                 <?php if ($editable): ?>
                     <td>
+                        <div class="dropdown">
+                        <a href="#" class="dropdown-menu dropdown-menu-link-icon"><i class="fa fa-cog fa-fw"></i><i class="fa fa-caret-down"></i></a>
                         <ul>
                             <?php if ($subtask['position'] != $first_position): ?>
                                 <li>
@@ -79,6 +81,7 @@
                                 <?= $this->url->link(t('Remove'), 'subtask', 'confirm', array('task_id' => $task['id'], 'project_id' => $task['project_id'], 'subtask_id' => $subtask['id'])) ?>
                             </li>
                         </ul>
+                        </div>
                     </td>
                 <?php endif ?>
             </tr>
@@ -87,7 +90,6 @@
     <?php endif ?>
 
     <?php if ($editable && $this->user->hasProjectAccess('subtask', 'save', $task['project_id'])): ?>
-
         <?php if (empty($subtasks)): ?>
             <div class="page-header">
                 <h2><?= t('Sub-Tasks') ?></h2>

assets/css/src/dropdown.css

@@ -67,6 +67,11 @@ ul.dropdown-submenu-open {
     padding-right: 10px;
 }
 
+.dropdown-menu-link-icon {
+    color: #333;
+    text-decoration: none;
+}
+
 /* textarea dropdown */
 .textarea-dropdown {
     list-style: none;

assets/js/src/Dropdown.js

@@ -14,25 +14,31 @@ Dropdown.prototype.listen = function() {
         self.close();
 
         var submenu = $(this).next('ul');
-        var submenuHeight = 240;
         var offset = $(this).offset();
-        var height = $(this).height();
 
         // Clone the submenu outside of the column to avoid clipping issue with overflow
         $("body").append(jQuery("<div>", {"id": "dropdown"}));
         submenu.clone().appendTo("#dropdown");
 
         var clone = $("#dropdown ul");
-        clone.css('left', offset.left);
+        clone.addClass('dropdown-submenu-open');
+
+        var submenuHeight = clone.outerHeight();
+        var submenuWidth = clone.outerWidth();
 
         if (offset.top + submenuHeight - $(window).scrollTop() > $(window).height()) {
-            clone.css('top', offset.top - submenuHeight - height);
+            clone.css('top', offset.top - submenuHeight - 5);
         }
         else {
-            clone.css('top', offset.top + height);
+            clone.css('top', offset.top + $(this).height());
         }
 
-        clone.addClass('dropdown-submenu-open');
+        if (offset.left + submenuWidth > $(window).width()) {
+            clone.css('left', offset.left - submenuWidth + $(this).outerWidth());
+        }
+        else {
+            clone.css('left', offset.left);
+        }
     });
 
     $(document).on('click', '.dropdown-submenu-open li', function(e) {