From 06554b83dc03259711414bc67f63ff70a3106553 Mon Sep 17 00:00:00 2001
From: Gregory Wolanski <github.com@gregorywolanski.com>
Date: Wed, 25 Oct 2017 21:35:19 +0200
Subject: [PATCH 1/2] Add expand/collapse all layer groups feature (#130)

---
 src/components/layers/LayerList.jsx | 49 ++++++++++++++++++++++++++---
 src/styles/_layer.scss              |  2 +-
 2 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/src/components/layers/LayerList.jsx b/src/components/layers/LayerList.jsx
index 00bf33e..d18c356 100644
--- a/src/components/layers/LayerList.jsx
+++ b/src/components/layers/LayerList.jsx
@@ -49,6 +49,7 @@ class LayerListContainer extends React.Component {
     super(props)
     this.state = {
       collapsedGroups: {},
+      areAllGroupsExpanded: false,
       isOpen: {
         add: false,
       }
@@ -94,6 +95,31 @@ class LayerListContainer extends React.Component {
     })
   }
 
+  toggleLayers() {
+    let idx=0
+
+    let newGroups=[]
+
+    this.groupedLayers().forEach(layers => {
+      const groupPrefix = layerPrefix(layers[0].id)
+      const lookupKey = [groupPrefix, idx].join('-')
+      
+
+      if (layers.length > 1) {
+        newGroups[lookupKey] = this.state.areAllGroupsExpanded
+      }
+      
+      layers.forEach((layer) => {
+        idx += 1
+      })
+    });
+
+    this.setState({
+      collapsedGroups: newGroups,
+      areAllGroupsExpanded: !this.state.areAllGroupsExpanded
+    })
+  }
+
   groupedLayers() {
     const groups = []
     for (let i = 0; i < this.props.layers.length; i++) {
@@ -176,12 +202,25 @@ class LayerListContainer extends React.Component {
       />
       <header className="maputnik-layer-list-header">
         <span className="maputnik-layer-list-header-title">Layers</span>
+        <div className="maputnik-default-property">
+          <div className="maputnik-multibutton">
+            <a 
+              onClick={this.toggleLayers.bind(this)}
+              className="maputnik-button">
+              {this.state.areAllGroupsExpanded === true ? "Collapse" : "Expand"}
+            </a>
+          </div>
+        </div>
         <span className="maputnik-space" />
-        <Button
-          onClick={this.toggleModal.bind(this, 'add')}
-          className="maputnik-add-layer">
-      Add Layer
-      </Button>
+        <div className="maputnik-default-property">
+          <div className="maputnik-multibutton">
+            <a
+              onClick={this.toggleModal.bind(this, 'add')}
+              className="maputnik-button maputnik-button-selected">
+             Add Layer
+            </a>
+          </div>
+        </div>
       </header>
       <ul className="maputnik-layer-list-container">
         {listItems}
diff --git a/src/styles/_layer.scss b/src/styles/_layer.scss
index 50b841a..08cbd45 100644
--- a/src/styles/_layer.scss
+++ b/src/styles/_layer.scss
@@ -1,7 +1,7 @@
 // LAYER LIST
 .maputnik-layer-list {
   &-header {
-    padding: $margin-2;
+    padding: $margin-2 $margin-2 $margin-3;
 
     @include flex-row;
 

From 604fa6317c142651d6d4c41de6fb4c128149306c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Grzegorz=20Wolan=CC=81ski?= <g@wolanski.name>
Date: Thu, 30 Nov 2017 20:40:56 +0100
Subject: [PATCH 2/2] Expand/Collapse button position bug fix

---
 src/components/layers/LayerList.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/layers/LayerList.jsx b/src/components/layers/LayerList.jsx
index d18c356..e4e255f 100644
--- a/src/components/layers/LayerList.jsx
+++ b/src/components/layers/LayerList.jsx
@@ -202,6 +202,7 @@ class LayerListContainer extends React.Component {
       />
       <header className="maputnik-layer-list-header">
         <span className="maputnik-layer-list-header-title">Layers</span>
+        <span className="maputnik-space" />
         <div className="maputnik-default-property">
           <div className="maputnik-multibutton">
             <a 
@@ -211,7 +212,6 @@ class LayerListContainer extends React.Component {
             </a>
           </div>
         </div>
-        <span className="maputnik-space" />
         <div className="maputnik-default-property">
           <div className="maputnik-multibutton">
             <a