Add dropdown menu to the board menu

This commit is contained in:
Frederic Guillot 2015-02-01 16:12:47 -05:00
parent 3e2f4f9c2c
commit 695ed5701c
7 changed files with 189 additions and 33 deletions

View File

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

View File

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

View File

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

File diff suppressed because one or more lines are too long

View File

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

4
assets/js/vendor/dropit.min.js vendored Normal file
View File

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

View File

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