Add dropdown menu to the board menu

app/Template/board/filters.php

@@ -1,41 +1,50 @@
 <div class="page-header">
     <ul class="board-filters">
-        <li class="hide-tablet">
+        <li>
+            <ul class="dropdown">
+                <li>
+                    <i class="fa fa-caret-down"></i> <a href="#" class="dropdown-menu"><?= t('Actions') ?></a>
+                    <ul>
+                        <li>
+                            <i class="fa fa-search fa-fw"></i>
+                            <?= $this->a(t('Search'), 'project', 'search', array('project_id' => $project['id'])) ?>
+                        </li>
+                        <li>
+                            <i class="fa fa-check-square-o fa-fw"></i>
+                            <?= $this->a(t('Completed tasks'), 'project', 'tasks', array('project_id' => $project['id'])) ?>
+                        </li>
+                        <li>
+                            <i class="fa fa-dashboard fa-fw"></i>
+                            <?= $this->a(t('Activity'), 'project', 'activity', array('project_id' => $project['id'])) ?>
+                        </li>
+                        <li>
+                            <i class="fa fa-calendar fa-fw"></i>
+                            <?= $this->a(t('Calendar'), 'calendar', 'show', array('project_id' => $project['id'])) ?>
+                        </li>
+                        <?php if ($this->acl->isManagerActionAllowed($project['id'])): ?>
+                        <li>
+                            <i class="fa fa-line-chart fa-fw"></i>
+                            <?= $this->a(t('Analytics'), 'analytic', 'tasks', array('project_id' => $project['id'])) ?>
+                        </li>
+                        <li>
+                            <i class="fa fa-cog fa-fw"></i>
+                            <?= $this->a(t('Configure'), 'project', 'show', array('project_id' => $project['id'])) ?>
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+        <li>
             <?= t('Filter by user') ?>
             <?= $this->formSelect('user_id', $users) ?>
         </li>
-        <li class="hide-tablet">
+        <li>
             <?= t('Filter by category') ?>
             <?= $this->formSelect('category_id', $categories) ?>
         </li>
-        <li class="hide-tablet">
+        <li>
             <a href="#" id="filter-due-date"><?= t('Filter by due date') ?></a>
         </li>
-        <li>
-            <i class="fa fa-search fa-fw"></i>
-            <?= $this->a(t('Search'), 'project', 'search', array('project_id' => $project['id'])) ?>
-        </li>
-        <li>
-            <i class="fa fa-check-square-o fa-fw"></i>
-            <?= $this->a(t('Completed tasks'), 'project', 'tasks', array('project_id' => $project['id'])) ?>
-        </li>
-        <li>
-            <i class="fa fa-dashboard fa-fw"></i>
-            <?= $this->a(t('Activity'), 'project', 'activity', array('project_id' => $project['id'])) ?>
-        </li>
-        <li>
-            <i class="fa fa-calendar fa-fw"></i>
-            <?= $this->a(t('Calendar'), 'calendar', 'show', array('project_id' => $project['id'])) ?>
-        </li>
-        <?php if ($this->acl->isManagerActionAllowed($project['id'])): ?>
-        <li>
-            <i class="fa fa-line-chart fa-fw"></i>
-            <?= $this->a(t('Analytics'), 'analytic', 'tasks', array('project_id' => $project['id'])) ?>
-        </li>
-        <li>
-            <i class="fa fa-cog fa-fw"></i>
-            <?= $this->a(t('Configure'), 'project', 'show', array('project_id' => $project['id'])) ?>
-        </li>
         <?php endif ?>
     </ul>
 </div>

assets/css/app.css

@@ -2002,3 +2002,72 @@ a.task-board-nobody {
         height: 18px;
     }
 }
+/*
+ * Dropit v1.1.0
+ * http://dev7studios.com/dropit
+ *
+ * Copyright 2012, Dev7studios
+ * Free to use and abuse under the MIT license.
+ * http://www.opensource.org/licenses/mit-license.php
+ */
+
+/* These styles assume you are using ul and li */
+.dropit {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.dropit .dropit-trigger {
+    position: relative;
+}
+
+.dropit .dropit-submenu {
+    position: absolute;
+    top: 100%;
+    left: 0; /* dropdown left or right */
+    z-index: 1000;
+    display: none;
+    min-width: 180px;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.dropit .dropit-open .dropit-submenu {
+    display: block;
+}
+
+.dropdown ul {
+    display: none; /* Hide before plugin loads */
+}
+
+.dropdown ul.dropit-submenu {
+    background-color: #fff;
+    border: 1px solid #b2b2b2;
+    padding: 6px 0;
+    margin: 3px 0 0 1px;
+    -webkit-border-radius: 3px;
+       -moz-border-radius: 3px;
+            border-radius: 3px;
+    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.15);
+       -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.15);
+            box-shadow: 0px 1px 3px rgba(0,0,0,0.15);
+}
+
+.dropdown ul.dropit-submenu li {
+    padding: 0;
+    margin: 0;
+    font-size: 1.1em;
+    display: block;
+    line-height: 30px;
+    padding-left: 10px;
+}
+
+.page-header ul.dropdown {
+    display: inline;
+}
+
+.page-header a.dropdown-menu {
+    font-size: 1.1em;
+}

assets/css/src/dropdown.css

@@ -0,0 +1,69 @@
+/*
+ * Dropit v1.1.0
+ * http://dev7studios.com/dropit
+ *
+ * Copyright 2012, Dev7studios
+ * Free to use and abuse under the MIT license.
+ * http://www.opensource.org/licenses/mit-license.php
+ */
+
+/* These styles assume you are using ul and li */
+.dropit {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.dropit .dropit-trigger {
+    position: relative;
+}
+
+.dropit .dropit-submenu {
+    position: absolute;
+    top: 100%;
+    left: 0; /* dropdown left or right */
+    z-index: 1000;
+    display: none;
+    min-width: 180px;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.dropit .dropit-open .dropit-submenu {
+    display: block;
+}
+
+.dropdown ul {
+    display: none; /* Hide before plugin loads */
+}
+
+.dropdown ul.dropit-submenu {
+    background-color: #fff;
+    border: 1px solid #b2b2b2;
+    padding: 6px 0;
+    margin: 3px 0 0 1px;
+    -webkit-border-radius: 3px;
+       -moz-border-radius: 3px;
+            border-radius: 3px;
+    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.15);
+       -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.15);
+            box-shadow: 0px 1px 3px rgba(0,0,0,0.15);
+}
+
+.dropdown ul.dropit-submenu li {
+    padding: 0;
+    margin: 0;
+    font-size: 1.1em;
+    display: block;
+    line-height: 30px;
+    padding-left: 10px;
+}
+
+.page-header ul.dropdown {
+    display: inline;
+}
+
+.page-header a.dropdown-menu {
+    font-size: 1.1em;
+}

assets/js/src/base.js

@@ -194,7 +194,9 @@ var Kanboard = (function() {
 
             Mousetrap.bind("ctrl+enter", function() {
                 $("form").submit();
-            }); 
+            });
+
+            $('.dropdown').dropit();
         }
     };
 

assets/js/vendor/dropit.min.js

@@ -0,0 +1,4 @@
+(function(b){b.fn.dropit=function(c){var d={init:function(c){this.dropit.settings=b.extend({},this.dropit.defaults,c);return this.each(function(){var c=b(this),a=b.fn.dropit.settings;c.addClass("dropit").find(">"+a.triggerParentEl+":has("+a.submenuEl+")").addClass("dropit-trigger").find(a.submenuEl).addClass("dropit-submenu").hide();c.on(a.action,a.triggerParentEl+":has("+a.submenuEl+") > "+a.triggerEl+"",function(){if("click"==a.action&&b(this).parents(a.triggerParentEl).hasClass("dropit-open"))return a.beforeHide.call(this),
+b(this).parents(a.triggerParentEl).removeClass("dropit-open").find(a.submenuEl).hide(),a.afterHide.call(this),!1;a.beforeHide.call(this);b(".dropit-open").removeClass("dropit-open").find(".dropit-submenu").hide();a.afterHide.call(this);a.beforeShow.call(this);b(this).parents(a.triggerParentEl).addClass("dropit-open").find(a.submenuEl).show();a.afterShow.call(this);return!1});b(document).on("click",function(){a.beforeHide.call(this);b(".dropit-open").removeClass("dropit-open").find(".dropit-submenu").hide();
+a.afterHide.call(this)});if("mouseenter"==a.action)c.on("mouseleave",function(){a.beforeHide.call(this);b(this).removeClass("dropit-open").find(a.submenuEl).hide();a.afterHide.call(this)});a.afterLoad.call(this)})}};if(d[c])return d[c].apply(this,Array.prototype.slice.call(arguments,1));if("object"!==typeof c&&c)b.error('Method "'+c+'" does not exist in dropit plugin!');else return d.init.apply(this,arguments)};b.fn.dropit.defaults={action:"click",submenuEl:"ul",triggerEl:"a",triggerParentEl:"li",
+afterLoad:function(){},beforeShow:function(){},afterShow:function(){},beforeHide:function(){},afterHide:function(){}};b.fn.dropit.settings={}})(jQuery);

scripts/make-assets.sh

@@ -1,10 +1,10 @@
 #!/bin/bash
 
-app_css="base links title table form button alert tooltip header board task comment subtask markdown listing activity dashboard pagination popover confirm sidebar responsive"
+app_css="base links title table form button alert tooltip header board task comment subtask markdown listing activity dashboard pagination popover confirm sidebar responsive dropdown"
 vendor_css="jquery-ui-1.10.4.custom chosen.min fullcalendar.min font-awesome.min"
 
 app_js="base board calendar task analytic swimlane init"
-vendor_js="jquery-1.11.1.min jquery-ui-1.10.4.custom.min jquery.ui.touch-punch.min chosen.jquery.min moment.min fullcalendar.min mousetrap.min app.min"
+vendor_js="jquery-1.11.1.min jquery-ui-1.10.4.custom.min jquery.ui.touch-punch.min chosen.jquery.min dropit.min moment.min fullcalendar.min mousetrap.min app.min"
 
 function merge_css {