From 9848e3d30e4eeffd3be7a0dc7330d4868a5bd323 Mon Sep 17 00:00:00 2001
From: Benjamin Renard <brenard@easter-eggs.com>
Date: Thu, 4 Jun 2020 16:34:40 +0200
Subject: [PATCH] LSview actions: factorize templates in LSview_actions.tpl and
 improve responsive view

---
 src/css/default/LSform.css               | 11 ++++++++--
 src/css/default/base.css                 |  8 +++++++
 src/templates/default/LSview_actions.tpl | 28 ++++++++++++++++++++++++
 src/templates/default/global_search.tpl  | 10 +--------
 src/templates/default/modify.tpl         |  9 ++------
 src/templates/default/question.tpl       |  8 +------
 src/templates/default/view.tpl           | 24 ++------------------
 src/templates/default/viewSearch.tpl     | 23 +------------------
 8 files changed, 52 insertions(+), 69 deletions(-)
 create mode 100644 src/templates/default/LSview_actions.tpl

diff --git a/src/css/default/LSform.css b/src/css/default/LSform.css
index e177bf80..fbb6496e 100644
--- a/src/css/default/LSform.css
+++ b/src/css/default/LSform.css
@@ -13,6 +13,9 @@ ul.LSform_layout_active {
   margin:             1em;
   margin-bottom:      0;
   clear:              both;
+  display:            flex;
+  flex-wrap:          nowrap;
+  overflow:           auto;
 }
 
 li.LSform_layout a {
@@ -32,7 +35,7 @@ li.LSform_layout_active {
   border-radius:      3px 3px 0px 0px;
   padding:            4px;
   display:            inline;
-  margin-right:       1px;
+  margin-right:       0.3rem;
 }
 
 li.LSform_layout_current {
@@ -56,7 +59,7 @@ div.LSform_layout {
 
 div.LSform_layout_active {
   display:            none;
-  margin-top:         4px;
+  margin-top:         0;
 }
 
 div.LSform_layout_current {
@@ -171,6 +174,10 @@ p.LSform_listAvailableDataEntryForm {
     margin-left: 0.5rem;
   }
 
+  dl.LSform {
+    clear: both;
+  }
+
   dt.LSform {
     width: 34vw;
   }
diff --git a/src/css/default/base.css b/src/css/default/base.css
index 0180f46c..7c0a4f06 100644
--- a/src/css/default/base.css
+++ b/src/css/default/base.css
@@ -308,6 +308,10 @@ li.LSview-actions {
   margin-right:       0.1rem;
 }
 
+li.LSview-actions-hidden-label a span {
+  display: none;
+}
+
 /*
  *******************
  * question
@@ -518,6 +522,10 @@ input[type='submit'].LSview_search {
     margin-top: 22px;
     border-top: 1px solid #0072b8;
   }
+
+  ul.LSview-actions-dropdown li.LSview-actions-hidden-label a span {
+    display: initial;
+  }
 }
 
 @media (max-width: 400px) {
diff --git a/src/templates/default/LSview_actions.tpl b/src/templates/default/LSview_actions.tpl
new file mode 100644
index 00000000..e9b87e4d
--- /dev/null
+++ b/src/templates/default/LSview_actions.tpl
@@ -0,0 +1,28 @@
+{if isset($LSview_actions) && is_array($LSview_actions) && !empty($LSview_actions)}
+<ul class='LSview-actions'>
+  {foreach from=$LSview_actions item=item}
+    {if is_array($item)}
+      <li class='LSview-actions{if isset($item['hideLabel']) && $item.hideLabel} LSview-actions-hidden-label{/if}'>
+        <a
+          href='{$item.url}'
+          class='
+            LSview-actions
+            {if isset($item['class'])}{$item.class|escape:"quotes"}{/if}
+            {if isset($item['helpInfo']) || (isset($item['hideLabel']) && $item.hideLabel && isset($item.label) && $item.label)} LStips{/if}
+          '
+          {if isset($item['helpInfo']) || (isset($item['hideLabel']) && $item.hideLabel && isset($item.label) && $item.label)}title='{if $item.helpInfo}{$item.helpInfo|escape:"htmlall"}{else}{$item.label|escape:"htmlall"}{/if}'{/if}
+          {if isset($item['id']) && $item.id}id='{$item.id|escape:"quotes"}'{/if}
+          {if isset($item['data']) && is_array($item['data']) && !empty($item['data'])}
+          {foreach $item['data'] as $data_key => $data_value}
+            data-{$data_key}='{$data_value|escape:'htmlall'}'
+          {/foreach}
+          {/if}
+        >
+          <img src="{img name=$item.action}" alt='{$item.label|escape:"htmlall"}' title='{$item.label|escape:"htmlall"}' />
+          <span>{$item.label}</span>
+        </a>
+      </li>
+    {/if}
+  {/foreach}
+</ul>
+{/if}
diff --git a/src/templates/default/global_search.tpl b/src/templates/default/global_search.tpl
index 4784651d..b2042b5f 100644
--- a/src/templates/default/global_search.tpl
+++ b/src/templates/default/global_search.tpl
@@ -8,15 +8,7 @@
 
 <h1>{tr msg="Global search"}</h1>
 
-{if $LSview_actions != ''}
-<ul class='LSview-actions LSview_search'>
-  {foreach from=$LSview_actions item=item}
-    {if is_array($item)}
-      <li class='LSview-actions'><a href='{$item.url}' class='LSview-actions'><img src='{img name=$item.action}' alt='{$item.label|escape:"htmlall"}' title='{$item.label|escape:"htmlall"}' /> {$item.label|escape:"htmlall"}</a></li>
-    {/if}
-  {/foreach}
-</ul>
-{/if}
+{include file='ls:LSview_actions.tpl'}
 
 {foreach from=$pages item=page}
 {$page}
diff --git a/src/templates/default/modify.tpl b/src/templates/default/modify.tpl
index ca2730b6..5bb7568f 100644
--- a/src/templates/default/modify.tpl
+++ b/src/templates/default/modify.tpl
@@ -1,13 +1,8 @@
 {extends file='ls:base_connected.tpl'}
 {block name="content"}
     {if $pagetitle != ''}<h1 id='LSform_title'>{$pagetitle|escape:"htmlall"}</h1>{/if}
-    {if $LSview_actions != ''}
-    <ul class='LSview-actions'>
-      {foreach from=$LSview_actions item=item}
-        <li class='LSview-actions'><a href='{$item.url}' class='LSview-actions'><img src='{img name=$item.action}' alt='{$item.label|escape:"htmlall"}' title='{$item.label|escape:"htmlall"}' /> {$item.label|escape:"htmlall"}</a></li>
-      {/foreach}
-    </ul>
-    {/if}
+    
+    {include file='ls:LSview_actions.tpl'}
 
     {include file='ls:LSform.tpl'}
 {/block}
diff --git a/src/templates/default/question.tpl b/src/templates/default/question.tpl
index e34fcddd..6a59a6a3 100644
--- a/src/templates/default/question.tpl
+++ b/src/templates/default/question.tpl
@@ -1,13 +1,7 @@
 {extends file='ls:base_connected.tpl'}
 {block name="content"}
     {if $pagetitle != ''}<h1>{$pagetitle|escape:"htmlall"}</h1>{/if}
-    {if $LSview_actions != ''}
-    <p class='LSview-actions'>
-      {foreach from=$LSview_actions item=item}
-        <a href='{$item.url}' class='LSview-actions'><img src='{img name=$item.action}' alt='{$item.label|escape:"htmlall"}' title='{$item.label|escape:"htmlall"}' /></a>
-      {/foreach}
-    </p>
-    {/if}
+    {include file='ls:LSview_actions.tpl'}
 
     <p class='question'>{$question}</p>
     <a href='{$validation_url}' class='question'>{$validation_label|escape:"htmlall"}</a>
diff --git a/src/templates/default/view.tpl b/src/templates/default/view.tpl
index 9dbb5651..0a085159 100644
--- a/src/templates/default/view.tpl
+++ b/src/templates/default/view.tpl
@@ -1,28 +1,8 @@
 {extends file='ls:base_connected.tpl'}
 {block name="content"}
     {if $pagetitle != ''}<h1 id='LSview_title'>{$pagetitle|escape:"htmlall"}</h1>{/if}
-    {if $LSview_actions != ''}
-    <ul class='LSview-actions'>
-      {foreach from=$LSview_actions item=item}
-        {if is_array($item)}
-        <li class='LSview-actions'>
-          <a
-            href='{$item.url}'
-            class='
-              LSview-actions
-              {if isset($item['class'])}{$item.class|escape:"quotes"}{/if}
-              {if isset($item['helpInfo']) || (isset($item['hideLabel']) && $item.hideLabel && isset($item.label) && $item.label)} LStips{/if}
-            '
-            {if isset($item['helpInfo']) || (isset($item['hideLabel']) && $item.hideLabel && isset($item.label) && $item.label)}title='{if $item.helpInfo}{$item.helpInfo|escape:"htmlall"}{else}{$item.label|escape:"htmlall"}{/if}'{/if}
-          >
-            <img src="{img name=$item.action}" alt='{$item.label|escape:"htmlall"}' title='{$item.label|escape:"htmlall"}' />
-            {if !isset($item.hideLabel) || !$item.hideLabel} {$item.label}{/if}
-          </a>
-        </li>
-        {/if}
-      {/foreach}
-    </ul>
-    {/if}
+    
+    {include file='ls:LSview_actions.tpl'}
 
     {include file='ls:LSform_view.tpl'}
 
diff --git a/src/templates/default/viewSearch.tpl b/src/templates/default/viewSearch.tpl
index 9beb524c..408fc2ea 100644
--- a/src/templates/default/viewSearch.tpl
+++ b/src/templates/default/viewSearch.tpl
@@ -19,28 +19,7 @@
   {$pagetitle|escape:"htmlall"}
 </h1>
 
-{if $LSview_actions != ''}
-<ul class='LSview-actions'>
-  {foreach from=$LSview_actions item=item}
-    {if is_array($item)}
-      <li class='LSview-actions'>
-        <a
-          href='{$item.url}'
-          class='
-            LSview-actions
-            {if isset($item['class'])}{$item.class|escape:"quotes"}{/if}
-            {if isset($item['helpInfo']) || (isset($item['hideLabel']) && $item.hideLabel && isset($item.label) && $item.label)} LStips{/if}
-          '
-          {if isset($item['helpInfo']) || (isset($item['hideLabel']) && $item.hideLabel && isset($item.label) && $item.label)}title='{if $item.helpInfo}{$item.helpInfo|escape:"htmlall"}{else}{$item.label|escape:"htmlall"}{/if}'{/if}
-        >
-          <img src="{img name=$item.action}" alt='{$item.label|escape:"htmlall"}' title='{$item.label|escape:"htmlall"}' />
-          {if !isset($item.hideLabel) || !$item.hideLabel} {$item.label}{/if}
-        </a>
-      </li>
-    {/if}
-  {/foreach}
-</ul>
-{/if}
+{include file='ls:LSview_actions.tpl'}
 
 {if count($LSsearch->predefinedFilters) != 0}
   <select id='LSview_search_predefinedFilter' name='predefinedFilter'>