Merge pull request #642 from cachethq/component-group-collapsing

Toggle component groups

public/build/rev-manifest.json

@@ -1,4 +1,4 @@
 {
-  "dist/css/all.css": "dist/css/all-019f86e2.css",
-  "dist/js/all.js": "dist/js/all-c574dfda.js"
+  "dist/css/all.css": "dist/css/all-11e30ad0.css",
+  "dist/js/all.js": "dist/js/all-5d9782c6.js"
 }

resources/assets/js/app.js

@@ -203,6 +203,14 @@ $(function() {
         $('input[name=remove_banner]').val('1');
     });
 
+    $('.group-name').on('click', function () {
+        var $this = $(this);
+
+        $this.find('.group-toggle').toggleClass('ion-ios-minus-outline').toggleClass('ion-ios-plus-outline');
+
+        $this.next('.group-items').toggleClass('hide');
+    });
+
     // Setup wizard
     $('.wizard-next').on('click', function () {
         var $form   = $('#setup-form'),

resources/assets/sass/_status-page.scss

@@ -268,14 +268,13 @@ body.status-page {
                     top: 0.6em;
                     bottom: 0.6em;
                 }
-            }
-
-            &.sub-component {
-                &:before {
-                    @extend .ion;
-                    content: $ionicon-var-ios-plus-outline;
-                    margin-right: 10px;
-                }
+                cursor: pointer;
+                -webkit-touch-callout: none;
+                -webkit-user-select: none;
+                -khtml-user-select: none;
+                -moz-user-select: none;
+                -ms-user-select: none;
+                user-select: none;
             }
 
             &.break {

resources/views/partials/components.blade.php

@@ -2,11 +2,16 @@
     @if($componentGroups->count() > 0)
     @foreach($componentGroups as $componentGroup)
     @if($componentGroup->components->count() > 0)
-    <li class="list-group-item group-name"><strong>{{ $componentGroup->name }}</strong></li>
+    <li class="list-group-item group-name">
+        <i class="ion-ios-minus-outline group-toggle"></i>
+        <strong>{{ $componentGroup->name }}</strong>
+    </li>
 
+    <div class="group-items">
     @foreach($componentGroup->components as $component)
     @include('partials.component', compact($component))
     @endforeach
+    </div>
     @endif
     @endforeach
     @if($ungroupedComponents->count() > 0)