From c29240d7717ce3cbe86414a82cc1272ad9c4a2c7 Mon Sep 17 00:00:00 2001
From: Benjamin Renard <brenard@easter-eggs.com>
Date: Tue, 2 Jun 2020 21:10:59 +0200
Subject: [PATCH] Make LSview-actions respons

---
 src/css/default/base.css  | 29 ++++++++++++++++++++++++++---
 src/includes/js/LSview.js | 36 ++++++++++++++++++++++++++++++++++++
 2 files changed, 62 insertions(+), 3 deletions(-)

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');
+      }
     }
 
 });