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

Rewrite dropdown menu

Browse Source
This commit is contained in:
Frederic Guillot
2015-08-07 22:42:29 -04:00
parent 2d5621af2f
commit 679cb94de4
14 changed files with 172 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
assets/css/app.css
View File

@@ -730,7 +730,7 @@ nav .active a {
.page-header li {
display: inline;
padding-right: 10px;
font-size: 0.9em;
font-size: 0.95em;
}
@media only screen and (max-width: 640px) {
@@ -753,7 +753,6 @@ nav .active a {
/* board table */
#board-container {
padding-bottom: 220px; /* Space to avoid dropdown menu truncated */
overflow-x: scroll;
}
@@ -1576,16 +1575,16 @@ span.task-board-date-overdue {
}
.dropdown {
display: inline;
position: relative;
}
.dropdown li {
list-style: none;
}
/* submenu */
.dropdown ul {
display: none;
}
ul.dropdown-submenu-open {
display: block;
position: absolute;
left: 0;
z-index: 1000;
@@ -1599,46 +1598,25 @@ span.task-board-date-overdue {
box-shadow: 0px 1px 3px rgba(0,0,0,0.15);
}
.dropdown ul li {
padding: 0;
margin: 0;
font-size: 1.1em;
ul.dropdown-submenu-top {
bottom: 0;
}
.dropdown-submenu-open li {
display: block;
line-height: 30px;
padding: 0;
padding-left: 10px;
padding-right: 10px;
}
.page-header div.dropdown {
font-size: 0.9em;
padding-right: 10px;
}
.page-header div.dropdown,
.page-header ul.dropdown {
display: inline;
}
.page-header a.dropdown-menu {
font-size: 1.1em;
}
.page-header li.dropit-trigger {
padding: 0;
}
td li.dropit-trigger {
margin: 0;
line-height: 30px;
}
.task-board .dropit-submenu a {
.dropdown-submenu-open a {
font-weight: normal;
text-decoration: underline;
font-size: 0.9em;
}
.task-board .dropit-submenu a:hover {
text-decoration: none;
.page-header .dropdown {
padding-right: 10px;
}
#screenshot-zone {
position: relative;

1
assets/css/print.css
View File

@@ -159,7 +159,6 @@ th a:hover {
/* board table */
#board-container {
padding-bottom: 220px; /* Space to avoid dropdown menu truncated */
overflow-x: scroll;
}

1
assets/css/src/board.css
View File

@@ -11,7 +11,6 @@
/* board table */
#board-container {
padding-bottom: 220px; /* Space to avoid dropdown menu truncated */
overflow-x: scroll;
}

57
assets/css/src/dropdown.css
View File

@@ -1,14 +1,14 @@
.dropdown {
display: inline;
position: relative;
}
.dropdown li {
list-style: none;
}
/* submenu */
.dropdown ul {
display: none;
}
ul.dropdown-submenu-open {
display: block;
position: absolute;
left: 0;
z-index: 1000;
@@ -22,44 +22,23 @@
box-shadow: 0px 1px 3px rgba(0,0,0,0.15);
}
.dropdown ul li {
padding: 0;
margin: 0;
font-size: 1.1em;
ul.dropdown-submenu-top {
bottom: 0;
}
.dropdown-submenu-open li {
display: block;
line-height: 30px;
padding: 0;
padding-left: 10px;
padding-right: 10px;
margin: 0;
line-height: 30px;
}
.page-header div.dropdown {
font-size: 0.9em;
.dropdown-submenu-open a {
font-weight: normal;
}
.page-header .dropdown {
padding-right: 10px;
}
.page-header div.dropdown,
.page-header ul.dropdown {
display: inline;
}
.page-header a.dropdown-menu {
font-size: 1.1em;
}
.page-header li.dropit-trigger {
padding: 0;
}
td li.dropit-trigger {
margin: 0;
}
.task-board .dropit-submenu a {
font-weight: normal;
text-decoration: underline;
font-size: 0.9em;
}
.task-board .dropit-submenu a:hover {
text-decoration: none;
}

2
assets/css/src/header.css
View File

@@ -94,7 +94,7 @@ nav .active a {
.page-header li {
display: inline;
padding-right: 10px;
font-size: 0.9em;
font-size: 0.95em;
}
@media only screen and (max-width: 640px) {

163
assets/js/app.js
View File

File diff suppressed because one or more lines are too long

18
assets/js/src/App.js
View File

@@ -1,10 +1,11 @@
function App() {
this.popover = new Popover(this);
this.markdown = new Markdown();
this.sidebar = new Sidebar();
this.search = new Search();
this.tooltip = new Tooltip(this);
this.swimlane = new Swimlane();
this.dropdown = new Dropdown();
this.tooltip = new Tooltip(this);
this.popover = new Popover(this);
this.keyboardShortcuts();
this.boardSelector();
this.listen();
@@ -33,15 +34,12 @@ App.prototype.listen = function() {
this.markdown.listen();
this.sidebar.listen();
this.tooltip.listen();
this.dropdown.listen();
this.search.listen();
this.search.focus();
this.taskAutoComplete();
this.datePicker();
this.focus();
// Dropdown
$(".dropit-submenu").hide();
$('.dropdown').not(".dropit").dropit({ triggerParentEl : "span" });
};
App.prototype.focus = function() {
@@ -67,6 +65,8 @@ App.prototype.poll = function() {
};
App.prototype.keyboardShortcuts = function() {
var self = this;
// Submit form
Mousetrap.bindGlobal("mod+enter", function() {
$("form").submit();
@@ -77,6 +77,12 @@ App.prototype.keyboardShortcuts = function() {
e.preventDefault();
$('#board-selector').trigger('chosen:open');
});
// Close popover and dropdown
Mousetrap.bindGlobal("esc", function() {
self.popover.close();
self.dropdown.close();
});
};
App.prototype.checkSession = function() {

36
assets/js/src/Dropdown.js Normal file
View File

@@ -0,0 +1,36 @@
function Dropdown() {
}
Dropdown.prototype.listen = function() {
var self = this;
$(document).on('click', function() {
self.close();
});
$(document).on('click', '.dropdown-menu', function(e) {
e.preventDefault();
e.stopImmediatePropagation();
var submenu = $(this).next('ul');
var submenuHeight = 240;
if (! submenu.is(':visible')) {
self.close();
if ($(this).offset().top + submenuHeight > $(window).height()) {
submenu.addClass('dropdown-submenu-open dropdown-submenu-top');
}
else {
submenu.addClass('dropdown-submenu-open');
}
}
else {
self.close();
}
});
};
Dropdown.prototype.close = function() {
$('.dropdown-submenu-open').removeClass('dropdown-submenu-open');
};

2
assets/js/src/Popover.js
View File

@@ -2,7 +2,6 @@ function Popover(app) {
this.app = app;
this.router = new Router();
this.router.addRoute('screenshot-zone', Screenshot);
Mousetrap.bindGlobal("esc", this.close);
}
Popover.prototype.isOpen = function() {
@@ -11,6 +10,7 @@ Popover.prototype.isOpen = function() {
Popover.prototype.open = function(link) {
var self = this;
self.app.dropdown.close();
$.get(link, function(content) {
$("body").append('<div id="popover-container"><div id="popover-content">' + content + '</div></div>');

99
assets/js/vendor/dropit.min.js vendored
View File

@@ -1,99 +0,0 @@
/*
* 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
*/
;(function($) {
$.fn.dropit = function(method) {
var methods = {
init : function(options) {
this.dropit.settings = $.extend({}, this.dropit.defaults, options);
return this.each(function() {
var $el = $(this),
el = this,
settings = $.fn.dropit.settings;
// Hide initial submenus
$el.addClass('dropit')
.find('>'+ settings.triggerParentEl +':has('+ settings.submenuEl +')').addClass('dropit-trigger')
.find(settings.submenuEl).addClass('dropit-submenu').hide();
// Open on click
$el.on(settings.action, settings.triggerParentEl +':has('+ settings.submenuEl +') > '+ settings.triggerEl +'', function(){
// Close click menu's if clicked again
if(settings.action == 'click' && $(this).parents(settings.triggerParentEl).hasClass('dropit-open')){
settings.beforeHide.call(this);
$(this).parent().removeClass('dropit-open').find(settings.submenuEl).hide();
// $(this).parents(settings.triggerParentEl).removeClass('dropit-open').find(settings.submenuEl).hide();
settings.afterHide.call(this);
return false;
}
// Hide open menus
settings.beforeHide.call(this);
$('.dropit-open').removeClass('dropit-open').find('.dropit-submenu').hide();
settings.afterHide.call(this);
// Open this menu
settings.beforeShow.call(this);
$(this).parent().addClass('dropit-open').find(settings.submenuEl).show();
// $(this).parents(settings.triggerParentEl).addClass('dropit-open').find(settings.submenuEl).show();
settings.afterShow.call(this);
return false;
});
// Close if outside click
$(document).on('click', function(){
settings.beforeHide.call(this);
$('.dropit-open').removeClass('dropit-open').find('.dropit-submenu').hide();
settings.afterHide.call(this);
});
// If hover
if(settings.action == 'mouseenter'){
$el.on('mouseleave', function(){
settings.beforeHide.call(this);
$(this).removeClass('dropit-open').find(settings.submenuEl).hide();
settings.afterHide.call(this);
});
}
settings.afterLoad.call(this);
});
}
};
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error( 'Method "' + method + '" does not exist in dropit plugin!');
}
};
$.fn.dropit.defaults = {
action: 'click', // The open action for the trigger
submenuEl: 'ul', // The submenu element
triggerEl: 'a', // The trigger element
triggerParentEl: 'li', // The trigger parent element
afterLoad: function(){}, // Triggers when plugin has loaded
beforeShow: function(){}, // Triggers before submenu is shown
afterShow: function(){}, // Triggers after submenu is shown
beforeHide: function(){}, // Triggers before submenu is hidden
afterHide: function(){} // Triggers before submenu is hidden
};
$.fn.dropit.settings = {};
})(jQuery);