From 64957d923b4d5bdfa99138d2a2e541ffe1207c51 Mon Sep 17 00:00:00 2001
From: Norbert Renner <norbert.renner@gmx.de>
Date: Wed, 20 Mar 2019 13:40:54 +0100
Subject: [PATCH] Add toggle button for optional layers and make scrollable and
 expandable

---
 css/style.css           |  9 +++++++++
 index.html              |  9 +++++----
 js/control/LayersTab.js | 11 +++++++++++
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/css/style.css b/css/style.css
index 0a2cefd..8c66c5e 100644
--- a/css/style.css
+++ b/css/style.css
@@ -389,6 +389,11 @@ table.dataTable.display tbody tr.even:hover {
     height: 100%;
 }
 
+.leaflet-sidebar-content {
+    /* for optional-layers-tree */
+    overflow-x: auto;
+}
+
 /* layers control as sidebar tab */
 #layers-control-wrapper label,
 #optional-layers-tree {
@@ -406,6 +411,10 @@ table.dataTable.display tbody tr.even:hover {
     height: 23px;
 }
 
+#layers-button-group {
+    text-align: right;
+}
+
 #optional-layers-tree {
     margin-top: 5px;
 }
diff --git a/index.html b/index.html
index ac22210..7f139a3 100644
--- a/index.html
+++ b/index.html
@@ -278,13 +278,14 @@
 
                 <div class="leaflet-sidebar-content">
                     <div class="leaflet-sidebar-pane" id="tab_layers_control">
-                        <h1 class="leaflet-sidebar-header"><span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span><span data-i18n="sidebar.layers.title">Layers</span></h1>
+                        <h1 class="leaflet-sidebar-header"><span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span><span class="leaflet-sidebar-expand"><i class="fa fa-expand"></i></span><span data-i18n="sidebar.layers.title">Layers</span></h1>
                         <div id="layers-control-wrapper"></div>
                         <div class="leaflet-control-layers-separator"></div>
-                        <div>
-                            <button type="button" id="custom_layers_button" class="btn btn-sm pull-right" data-i18n="[title]sidebar.layers.customize" title="Add or remove custom layers"><span class="fa fa-plus-square"></span> <span data-i18n="sidebar.layers.custom-layers">Custom layers</span></button>
+                        <div id="layers-button-group">
+                            <button type="button" id="optional_layers_button" class="btn btn-sm" data-i18n="[title]sidebar.layers.optional" title="Add or remove optional layers"><span class="fa fa-cogs"></span> <span data-i18n="sidebar.layers.optional-layers">More</span></button>
+                            <button type="button" id="custom_layers_button" class="btn btn-sm" data-i18n="[title]sidebar.layers.customize" title="Add or remove custom layers"><span class="fa fa-plus-square"></span> <span data-i18n="sidebar.layers.custom-layers">Custom layers</span></button>
                         </div>
-                        <div id="optional-layers-tree"></div>
+                        <div hidden id="optional-layers-tree"></div>
                     </div>
 
                     <div class="leaflet-sidebar-pane" id="tab_profile">
diff --git a/js/control/LayersTab.js b/js/control/LayersTab.js
index 9055342..bc19d82 100644
--- a/js/control/LayersTab.js
+++ b/js/control/LayersTab.js
@@ -125,6 +125,17 @@ BR.LayersTab = L.Control.Layers.extend({
         };
 
         L.DomUtil.get('layers-control-wrapper').appendChild(this._form);
+
+        // custom collapse to avoid Bootstrap animation
+        var toggleOptionalLayers = function(e) {
+            var button = this;
+            var div = L.DomUtil.get('optional-layers-tree');
+
+            div.hidden = !div.hidden;
+            button.classList.toggle('active');
+        };
+        L.DomUtil.get('optional_layers_button').onclick = toggleOptionalLayers;
+
         $('#optional-layers-tree')
             .on('select_node.jstree', L.bind(onSelectNode, this))
             .on('deselect_node.jstree', L.bind(onDeselectNode, this))