From 92f23b02e1a14ce7318f72ed4d15fb9bce46adba Mon Sep 17 00:00:00 2001
From: Johan Cwiklinski <jcwiklinski@teclib.com>
Date: Thu, 7 Nov 2019 17:43:19 +0100
Subject: [PATCH] Rework lang selector

---
 galette/includes/dependencies.php          |  1 +
 galette/templates/default/page.tpl         | 19 +++---
 galette/templates/default/public_page.tpl  | 19 +++---
 galette/webroot/js/common.js               | 19 +++++-
 galette/webroot/themes/default/galette.css | 70 ++++++++++++++++------
 5 files changed, 93 insertions(+), 35 deletions(-)

diff --git a/galette/includes/dependencies.php b/galette/includes/dependencies.php
index 804fea78fb..89045a7851 100644
--- a/galette/includes/dependencies.php
+++ b/galette/includes/dependencies.php
@@ -119,6 +119,7 @@
     }
     /** galette_lang should be removed and languages used instead */
     $smarty->assign('galette_lang', $c->i18n->getAbbrev());
+    $smarty->assign('galette_lang_name', $c->i18n->getName());
     $smarty->assign('languages', $c->i18n->getList());
     $smarty->assign('plugins', $c->plugins);
     $smarty->assign('preferences', $c->preferences);
diff --git a/galette/templates/default/page.tpl b/galette/templates/default/page.tpl
index 44824129c0..24a7066d05 100644
--- a/galette/templates/default/page.tpl
+++ b/galette/templates/default/page.tpl
@@ -196,16 +196,19 @@ We have to use a template file, so Smarty will do its work (like replacing varia
 {* Include plugins menu entries *}
 {$plugins->getMenus($tpl)}
 
-        <form action="">
-            <select id="lang_selector" name="ui_pref_lang">
+        <nav id="plang_selector" class="onhover">
+            <a href="#plang_selector" class="tooltip" aria-expanded="false" aria-controls="lang_selector" title="{_T string="Change language"}">
+                <i class="fas fa-language"></i>
+                {$galette_lang_name}
+            </a>
+            <ul id="lang_selector">
 {foreach item=langue from=$languages}
-                <option value="{$langue->getID()}" lang="{$langue->getAbbrev()}"{if $galette_lang eq $langue->getAbbrev()} selected="selected"{/if}>{$langue->getName()|ucfirst}</option>
+                <li {if $galette_lang eq $langue->getAbbrev()} selected="selected"{/if}>
+                    <a href="?ui_pref_lang={$langue->getID()}" lang="{$langue->getAbbrev()}">{$langue->getName()}</a>
+                </li>
 {/foreach}
-            </select>
-            <noscript>
-                <input type="submit" name="{_T string="Change language"}" />
-            </noscript>
-        </form>
+            </ul>
+        </nav>
 {if $login->isLogged()}
         <div>{$login->loggedInAs()}</div>
         <a id="logout_10" class="button" href="{if $login->isImpersonated()}{path_for name="unimpersonate"}{else}{path_for name="logout"}{/if}"><i class="fas fa-{if $login->isImpersonated()}user-secret{else}sign-out-alt{/if}"></i>{_T string="Log off"}</a>
diff --git a/galette/templates/default/public_page.tpl b/galette/templates/default/public_page.tpl
index 95bd9fef32..7f9690fca9 100644
--- a/galette/templates/default/public_page.tpl
+++ b/galette/templates/default/public_page.tpl
@@ -70,16 +70,19 @@ We have to use a template file, so Smarty will do its work (like replacing varia
         <![endif]-->
         <header>
             <img src="{path_for name="logo"}" width="{$logo->getOptimalWidth()}" height="{$logo->getOptimalHeight()}" alt="[ Galette ]" />
-            <form action="" id="plang_selector">
-                <select id="lang_selector" name="ui_pref_lang">
+            <nav id="plang_selector" class="onhover">
+                <a href="#plang_selector" class="tooltip" aria-expanded="false" aria-controls="lang_selector" title="{_T string="Change language"}">
+                    <i class="fas fa-language"></i>
+                    {$galette_lang_name}
+                </a>
+                <ul id="lang_selector">
 {foreach item=langue from=$languages}
-                    <option value="{$langue->getID()}" lang="{$langue->getAbbrev()}"{if $galette_lang eq $langue->getAbbrev()} selected="selected"{/if}>{$langue->getName()}</option>
+                    <li {if $galette_lang eq $langue->getAbbrev()} selected="selected"{/if}>
+                        <a href="?ui_pref_lang={$langue->getID()}" lang="{$langue->getAbbrev()}">{$langue->getName()}</a>
+                    </li>
 {/foreach}
-                </select>
-                <noscript>
-                    <input type="submit" name="{_T string="Change language"}" />
-                </noscript>
-            </form>
+                </ul>
+            </nav>
 {if $login->isLogged()}
             <div id="user">
                 <a id="userlink" class="tooltip" title="{_T string="View your member card"}" href="{if $login->isSuperAdmin()}{path_for name="slash"}{else}{path_for name="me"}{/if}">{$login->loggedInAs(true)}</a>
diff --git a/galette/webroot/js/common.js b/galette/webroot/js/common.js
index c93d2ae4da..4074cc9a84 100644
--- a/galette/webroot/js/common.js
+++ b/galette/webroot/js/common.js
@@ -238,7 +238,24 @@ $(function() {
         });
     }
 
-    $('#lang_selector').change(function() {
+    $('select#lang_selector').change(function() {
         this.form.submit();
     });
+
+    /* Language selector.
+     * Works per default with CSS only, use javascript to replace with a click event,
+     * which is required because of the current way the menu is hidden on mobile devices.
+     */
+    $('#plang_selector').removeClass('onhover');
+    var _langs = $('#plang_selector ul');
+    _langs.hide();
+
+    $('#plang_selector > a').on('click', function(event) {
+        event.preventDefault();
+        var _this = $(this);
+        var _open = _this.attr('aria-expanded');
+        _this.attr('aria-expanded', !open);
+        console.log(_open);
+        _langs.toggle();
+    });
 });
diff --git a/galette/webroot/themes/default/galette.css b/galette/webroot/themes/default/galette.css
index 993d92ecbd..31fb24d1eb 100644
--- a/galette/webroot/themes/default/galette.css
+++ b/galette/webroot/themes/default/galette.css
@@ -233,7 +233,7 @@ nav a{
     border-bottom:none;
 }
 
-#menu li a{
+#menu li a, #plang_selector a {
     padding: .1em .3em;
     display:block;
     color: #212121;
@@ -693,16 +693,9 @@ a:hover i {
     background-repeat: repeat!important;
 }
 
-/*#sendmail{
-    background-image:url(images/icon-mail.png), url("jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png");
-}
-#sendmail.ui-state-hover {
-    background-image:url(images/icon-mail.png), url("jquery-ui/images/ui-bg_glass_75_ffb619_1x400.png");
-}*/
-
 #recup_mailing {
-    position: absolute;
-    right: .5em;
+    float: right;
+    margin-right: .5em;
 }
 
 h1 #sendmail {
@@ -1092,8 +1085,8 @@ legend .tab-button {
 
 .public_page #user {
     position: absolute;
-    top:3em;
-    right:0;
+    top:.4em;
+    right:.4em;
     display:inline-block;
 
 }
@@ -1109,13 +1102,54 @@ legend .tab-button {
 }
 
 .public_page #logout_10 {
-    margin: 0 .5em .2em;
+    margin: 0 0 .2em;
+}
+
+nav#plang_selector {
+    background: #fff;
+    text-align: left;
+    z-index: 100;
+}
+
+nav#plang_selector > ul {
+    margin: 0;
+    padding: 0;
+    background: white;
+}
+
+#plang_selector li {
+    margin:0.5em 0;
+    list-style-type:none;
+}
+
+#plang_selector li a:hover{
+    background-color: #DDDDFF;
+    text-decoration:underline;
+}
+
+nav#plang_selector a {
+    color: #666666;
+    display: block!important;
+}
+nav#plang_selector > a {
+    padding: .1em .3em;
+}
+#menu nav#plang_selector > a {
+    border-bottom:1px #DDDDFF solid;
+}
+
+nav#plang_selector.onhover > ul {
+    display: none;
+}
+
+nav#plang_selector.onhover:hover > ul {
+    display: block;
 }
 
 .public_page #plang_selector {
     position: absolute;
-    right: .5em;
-    top: .5em;
+    left: .4em;
+    top: .4em;
 }
 
 /* =/ Public pages */
@@ -1482,8 +1516,8 @@ a.listing:hover {
 
 #content {
     margin-left:17em;
-    margin-top: 10px;
-    padding: 0.5em;
+    margin-top: .4em;
+    padding: 0 .5em .5em;
     position: relative;
     min-height: 100vh;
 }
@@ -2324,7 +2358,7 @@ label:hover > i, span.bline:hover > i {
     body {
         width: auto !important;
         margin: auto !important;
-        padding: auto !important;
+        padding: .4em 0 0;
     }
 
     #details_menu, #member_stateofdue, .details {