diff --git a/src/css/default/base.css b/src/css/default/base.css index c32b2f66..60d3f9f2 100644 --- a/src/css/default/base.css +++ b/src/css/default/base.css @@ -295,6 +295,7 @@ ul.LSview-actions { margin-right: 3rem; margin-bottom: 0.8rem; color: #0072b8; + padding-left: 0; } li.LSview-actions { @@ -484,17 +485,39 @@ input[type='submit'].LSview_search { background: transparent; } - ul.LSview-actionse:not(.LSview-actions-visible) { + ul.LSview-actions-dropdown { background: url('../image/generate') center no-repeat; width: 22px; height: 22px; - margin-right: 1rem; + margin-right: 1em; cursor: pointer; } - ul.LSview-actionse:not(.LSview-actions-visible) li { + ul.LSview-actions-dropdown-opened) { + margin-top: 22px; + } + + ul.LSview-actions-dropdown:not(.LSview-actions-dropdown-opened) li { display: none; } + + ul.LSview-actions-dropdown-opened li.LSview-actions { + background: white; + position: relative; + width: 30vw; + right: 29vw; + text-align: left; + } + + ul.LSview-actions-dropdown-opened li.LSview-actions a { + display: inline-block; + width: 100%; + } + + ul.LSview-actions-dropdown-opened li.LSview-actions:first-of-type { + margin-top: 22px; + border-top: 1px solid; + } } @media (max-width: 400px) { diff --git a/src/includes/js/LSview.js b/src/includes/js/LSview.js index 8083328d..5eb919cd 100644 --- a/src/includes/js/LSview.js +++ b/src/includes/js/LSview.js @@ -33,6 +33,36 @@ var LSview = new Class({ if($type(this.LSsearchPredefinedFilter) && $type('LSsearch_form')) { this.LSsearchPredefinedFilter.addEvent('change',this.onLSsearchPredefinedFilterChange.bind(this)); } + + $$('ul.LSview-actions').each(function(ul) { + ul.addEvent('click', this.toggleLSviewActions.bind(this, ul)); + }, this); + this.onWindowResized(); + window.addEvent('resize', this.onWindowResized.bind(this)); + }, + + onWindowResized: function() { + var window_width = window.getWidth().toInt(); + if ($('LSview_title')) { + window_width = $('LSview_title').getWidth().toInt(); + } + if ($('LSview_search_predefinedFilter')) { + window_width -= $('LSview_search_predefinedFilter').getWidth().toInt(); + } + $$('ul.LSview-actions').each(function(ul) { + // Calculte menu width + var actions_width = 0; + ul.getElements('li').each(function (li) { + actions_width += li.getWidth().toInt() + 10; // Add 10 for margin/space between li + }); + + if (window.getWidth() < actions_width) { + ul.addClass('LSview-actions-dropdown'); + } + else { + ul.removeClass('LSview-actions-dropdown'); + } + }); }, onLSsearchPredefinedFilterChange: function() { @@ -114,6 +144,12 @@ var LSview = new Class({ executeCustomActionFromA: function(a) { document.location = a.href+'&valid'; + }, + + toggleLSviewActions: function(ul) { + if (ul.hasClass('LSview-actions-dropdown')) { + ul.toggleClass('LSview-actions-dropdown-opened'); + } } });