Implemented button groups and hooked up all different types of Clear Cache available

classes/controller.php

@@ -304,7 +304,7 @@ class AdminController
 
         $results = Cache::clearCache($clear);
         if (count($results) > 0) {
-            $this->admin->json_response = ['status' => 'success', 'message' => 'Cache cleared'];
+            $this->admin->json_response = ['status' => 'success', 'message' => 'Cache cleared <br />Method: ' . $clear . ''];
         } else {
             $this->admin->json_response = ['status' => 'error', 'message' => 'Error clearing cache'];
         }

themes/grav/css-compiled/template.css

@@ -445,7 +445,7 @@ hr {
    */
   .switch-grav {
     background-color: #fff;
-    border: 1px solid #d5d5d5;
+    border: 1px solid #d4d4d4;
     border-radius: 4px;
     /* Selected ON switch-light
      */ }
@@ -574,7 +574,7 @@ form .selectize-control.multi .selectize-input {
     border-radius: 2px;
     line-height: 1.5; }
     form .selectize-control.multi .selectize-input > div.active {
-      background: #d5d5d5; }
+      background: #d4d4d4; }
 form .selectize-control.single .selectize-input:after {
   right: 27px; }
 form .selectize-control.single .selectize-input.dropdown-active:after {
@@ -593,7 +593,7 @@ form .large {
     height: 10rem; }
 form select {
   width: 100%;
-  border: 1px solid #d5d5d5;
+  border: 1px solid #d4d4d4;
   background: #fff;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -603,17 +603,17 @@ form select {
   margin: 0; }
 form input[type=text], form input[type=password], form input[type=email] {
   width: 100%;
-  border: 1px solid #d5d5d5;
+  border: 1px solid #d4d4d4;
   background: #fff; }
 form input[readonly=readonly] {
   background: #f2f2f2;
   font-weight: bold; }
 form textarea {
   width: 100%;
-  border: 1px solid #d5d5d5;
+  border: 1px solid #d4d4d4;
   background: #fff; }
 form .form-frontmatter-wrapper {
-  border: 1px solid #d5d5d5;
+  border: 1px solid #d4d4d4;
   border-radius: 4px; }
 form .switch-toggle.medium {
   width: 100%;
@@ -662,7 +662,7 @@ form .checkboxes {
     margin-right: 10px;
     position: absolute;
     background: #fff;
-    border: 1px solid #d5d5d5;
+    border: 1px solid #d4d4d4;
     border-radius: 4px; }
   form .checkboxes input[type=checkbox] {
     display: none; }
@@ -679,7 +679,7 @@ form .checkboxes {
   margin-bottom: 3rem; }
   .form-frontmatter-wrapper .dragbar {
     height: 4px;
-    background: #d5d5d5;
+    background: #d4d4d4;
     cursor: row-resize; }
 
 #frontmatter + .CodeMirror {
@@ -694,7 +694,7 @@ form .checkboxes {
   .form-order-wrapper ul#ordering li {
     padding: 0.2rem 1rem;
     border-radius: 4px;
-    border: 1px solid #d5d5d5;
+    border: 1px solid #d4d4d4;
     background: #f8f8f8;
     color: #8d959a;
     margin: 3px 0;
@@ -718,7 +718,7 @@ form .checkboxes {
     cursor: move;
     padding: 1rem;
     border-radius: 4px;
-    border: 1px solid #d5d5d5;
+    border: 1px solid #d4d4d4;
     background: #f8f8f8;
     color: #8d959a;
     margin: 3px 0;
@@ -816,13 +816,91 @@ tr {
   .button:hover {
     background: #54c5b0;
     color: #fff; }
+  .button.dropdown-toggle {
+    border-left: 1px solid #3aab97; }
   .button.secondary {
-    background: #2a7a6b;
+    background: #29796b;
     color: rgba(255, 255, 255, 0.85);
     border-radius: 4px; }
     .button.secondary:hover {
-      background: #318d7c;
+      background: #2f8c7c;
       color: #fff; }
+    .button.secondary.dropdown-toggle {
+      border-left: 1px solid #2f8c7c; }
+
+.button-group {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle; }
+  .button-group > .button:first-child:not(:last-child):not(.dropdown-toggle) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0; }
+  .button-group > .button:first-child {
+    margin-left: 0; }
+  .button-group > .button {
+    position: relative;
+    float: left; }
+  .button-group > .button + .dropdown-toggle {
+    text-align: center;
+    padding-right: 8px;
+    padding-left: 8px; }
+    .button-group > .button + .dropdown-toggle i {
+      margin: 0; }
+  .button-group > .button:last-child:not(:first-child), .button-group > .dropdown-toggle:not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0; }
+  .button-group .button + .button, .button-group .button + .button-group, .button-group .button-group + .button, .button-group .button-group + .button-group {
+    margin-left: -1px; }
+  .button-group .dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    display: none;
+    float: left;
+    min-width: 160px;
+    padding: 5px 0;
+    margin: 2px 0 0;
+    font-size: 14px;
+    text-align: left;
+    list-style: none;
+    background-color: #41bea8;
+    -webkit-background-clip: padding-box;
+    background-clip: padding-box;
+    border: 1px solid #3aab97;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); }
+    .button-group .dropdown-menu .divider {
+      height: 1px;
+      margin: 9px 0;
+      overflow: hidden;
+      background-color: #349886; }
+    .button-group .dropdown-menu li > a {
+      display: block;
+      padding: 3px 20px;
+      clear: both;
+      font-weight: 400;
+      line-height: 1.42857143;
+      color: #fff;
+      white-space: nowrap; }
+      .button-group .dropdown-menu li > a:focus, .button-group .dropdown-menu li > a:hover {
+        color: #fff;
+        text-decoration: none;
+        background-color: #349886; }
+
+.open > .dropdown-menu {
+  display: block; }
+
+.dropdown-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 990; }
 
 #error {
   text-align: center;
@@ -848,7 +926,7 @@ tr {
   #admin-login .form-data {
     padding-right: 0; }
   #admin-login h1 {
-    background: #21333e url(../images/logo.png) 50% 50% no-repeat;
+    background: #20333e url(../images/logo.png) 50% 50% no-repeat;
     font-size: 0;
     color: transparent;
     height: 216px;
@@ -864,15 +942,15 @@ tr {
       text-align: center;
       font-weight: 300;
       -webkit-font-smoothing: auto;
-      border: 1px solid #1e2e39; }
+      border: 1px solid #1d2e38; }
       #admin-login form input::-webkit-input-placeholder {
-        color: #83949d; }
+        color: #83949c; }
       #admin-login form input::-moz-placeholder {
-        color: #83949d; }
+        color: #83949c; }
       #admin-login form input:-moz-placeholder {
-        color: #83949d; }
+        color: #83949c; }
       #admin-login form input:-ms-input-placeholder {
-        color: #83949d; }
+        color: #83949c; }
     #admin-login form .form-actions {
       text-align: center;
       margin: 0 -3rem -3rem -3rem;
@@ -896,7 +974,7 @@ tr {
       color: #fff; }
 
 #admin-logo {
-  background: #21333e;
+  background: #20333e;
   height: 4.2rem; }
   #admin-logo h3 {
     text-transform: uppercase;
@@ -910,7 +988,7 @@ tr {
 
 #admin-user-details {
   padding: 2rem;
-  border-bottom: 1px solid #21333e;
+  border-bottom: 1px solid #20333e;
   overflow: hidden; }
   #admin-user-details img {
     -webkit-transition: all 0.5s ease;
@@ -945,7 +1023,7 @@ tr {
       #admin-menu li .badges .badge {
         display: inline-block;
         margin-right: -5px;
-        color: #e6e6e6; }
+        color: #e5e5e5; }
       #admin-menu li .badges .count {
         background-color: #365569; }
       #admin-menu li .badges .updates {
@@ -974,7 +1052,7 @@ tr {
         color: #afc7d5;
         margin-right: 8px; }
       #admin-menu li a:hover {
-        background: #21333e;
+        background: #20333e;
         color: #fff; }
         #admin-menu li a:hover i {
           font-size: 1.2rem; }
@@ -1636,7 +1714,7 @@ body.remodal_active .remodal {
     border-radius: 0; }
 
 .grav-mdeditor-navbar {
-  border: 1px solid #d5d5d5;
+  border: 1px solid #d4d4d4;
   border-top-right-radius: 4px;
   border-top-left-radius: 4px;
   background: #fbfbfb; }
@@ -1655,8 +1733,8 @@ body.remodal_active .remodal {
     .grav-mdeditor-navbar ul .mdeditor-active a {
       background: white;
       cursor: auto;
-      border-left: 1px solid #d5d5d5;
-      border-right: 1px solid #d5d5d5; }
+      border-left: 1px solid #d4d4d4;
+      border-right: 1px solid #d4d4d4; }
       .grav-mdeditor-navbar ul .mdeditor-active a:hover {
         background: #fff; }
     .grav-mdeditor-navbar ul a {
@@ -1679,7 +1757,7 @@ body.remodal_active .remodal {
     border-top-right-radius: 4px; }
 
 .grav-mdeditor-content {
-  border: 1px solid #d5d5d5;
+  border: 1px solid #d4d4d4;
   border-top: 0;
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px; }
@@ -1723,7 +1801,7 @@ body.remodal_active .remodal {
 [data-mode=split] .grav-mdeditor-button-code, [data-mode=split] .grav-mdeditor-button-preview {
   display: none; }
 [data-mode=split] .grav-mdeditor-code {
-  border-right: 1px solid #d5d5d5; }
+  border-right: 1px solid #d4d4d4; }
   [data-mode=split] .grav-mdeditor-code, [data-mode=split] .grav-mdeditor-code .grav-mdeditor-preview {
     float: left;
     width: 50%; }
@@ -1819,7 +1897,7 @@ body.remodal_active .remodal {
 
 .dropzone {
   position: relative;
-  border: 1px #d5d5d5 solid;
+  border: 1px #d4d4d4 solid;
   border-radius: 4px;
   min-height: 4rem;
   background: #fff; }

themes/grav/js/dropdown.js

@@ -0,0 +1,165 @@
+/* ========================================================================
+ * Bootstrap: dropdown.js v3.3.5
+ * http://getbootstrap.com/javascript/#dropdowns
+ * ========================================================================
+ * Copyright 2011-2015 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * ======================================================================== */
+
+
++function ($) {
+    'use strict';
+
+    // DROPDOWN CLASS DEFINITION
+    // =========================
+
+    var backdrop = '.dropdown-backdrop'
+    var toggle   = '[data-toggle="dropdown"]'
+    var Dropdown = function (element) {
+        $(element).on('click.bs.dropdown', this.toggle)
+    }
+
+    Dropdown.VERSION = '3.3.5'
+
+    function getParent($this) {
+        var selector = $this.attr('data-target')
+
+        if (!selector) {
+            selector = $this.attr('href')
+            selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
+        }
+
+        var $parent = selector && $(selector)
+
+        return $parent && $parent.length ? $parent : $this.parent()
+    }
+
+    function clearMenus(e) {
+        if (e && e.which === 3) return
+        $(backdrop).remove()
+        $(toggle).each(function () {
+            var $this         = $(this)
+            var $parent       = getParent($this)
+            var relatedTarget = { relatedTarget: this }
+
+            if (!$parent.hasClass('open')) return
+
+            if (e && e.type == 'click' && /input|textarea/i.test(e.target.tagName) && $.contains($parent[0], e.target)) return
+
+            $parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))
+
+            if (e.isDefaultPrevented()) return
+
+            $this.attr('aria-expanded', 'false')
+            $parent.removeClass('open').trigger($.Event('hidden.bs.dropdown', relatedTarget))
+        })
+    }
+
+    Dropdown.prototype.toggle = function (e) {
+        var $this = $(this)
+
+        if ($this.is('.disabled, :disabled')) return
+
+        var $parent  = getParent($this)
+        var isActive = $parent.hasClass('open')
+
+        clearMenus()
+
+        if (!isActive) {
+            if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
+                // if mobile we use a backdrop because click events don't delegate
+                $(document.createElement('div'))
+                    .addClass('dropdown-backdrop')
+                    .insertAfter($(this))
+                    .on('click', clearMenus)
+            }
+
+            var relatedTarget = { relatedTarget: this }
+            $parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))
+
+            if (e.isDefaultPrevented()) return
+
+            $this
+                .trigger('focus')
+                .attr('aria-expanded', 'true')
+
+            $parent
+                .toggleClass('open')
+                .trigger($.Event('shown.bs.dropdown', relatedTarget))
+        }
+
+        return false
+    }
+
+    Dropdown.prototype.keydown = function (e) {
+        if (!/(38|40|27|32)/.test(e.which) || /input|textarea/i.test(e.target.tagName)) return
+
+        var $this = $(this)
+
+        e.preventDefault()
+        e.stopPropagation()
+
+        if ($this.is('.disabled, :disabled')) return
+
+        var $parent  = getParent($this)
+        var isActive = $parent.hasClass('open')
+
+        if (!isActive && e.which != 27 || isActive && e.which == 27) {
+            if (e.which == 27) $parent.find(toggle).trigger('focus')
+            return $this.trigger('click')
+        }
+
+        var desc = ' li:not(.disabled):visible a'
+        var $items = $parent.find('.dropdown-menu' + desc)
+
+        if (!$items.length) return
+
+        var index = $items.index(e.target)
+
+        if (e.which == 38 && index > 0)                 index--         // up
+        if (e.which == 40 && index < $items.length - 1) index++         // down
+        if (!~index)                                    index = 0
+
+        $items.eq(index).trigger('focus')
+    }
+
+
+    // DROPDOWN PLUGIN DEFINITION
+    // ==========================
+
+    function Plugin(option) {
+        return this.each(function () {
+            var $this = $(this)
+            var data  = $this.data('bs.dropdown')
+
+            if (!data) $this.data('bs.dropdown', (data = new Dropdown(this)))
+            if (typeof option == 'string') data[option].call($this)
+        })
+    }
+
+    var old = $.fn.dropdown
+
+    $.fn.dropdown             = Plugin
+    $.fn.dropdown.Constructor = Dropdown
+
+
+    // DROPDOWN NO CONFLICT
+    // ====================
+
+    $.fn.dropdown.noConflict = function () {
+        $.fn.dropdown = old
+        return this
+    }
+
+
+    // APPLY TO STANDARD DROPDOWN ELEMENTS
+    // ===================================
+
+    $(document)
+        .on('click.bs.dropdown.data-api', clearMenus)
+        .on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
+        .on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
+        .on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
+        .on('keydown.bs.dropdown.data-api', '.dropdown-menu', Dropdown.prototype.keydown)
+
+}(jQuery);

themes/grav/scss/template/_buttons.scss

@@ -2,8 +2,116 @@
 	@extend %button;
     @include button-color(lighten($secondary-accent-bg, 10%));
 
+    &.dropdown-toggle {
+        border-left: 1px solid lighten($secondary-accent-bg, 5%);
+    }
+
     &.secondary {
         @include button-color(shade($secondary-accent-bg, 20%));
+
+        &.dropdown-toggle {
+            border-left: 1px solid lighten(shade($secondary-accent-bg, 20%), 5%);
+        }
     }
 }
 
+.button-group {
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+
+    // real button
+    > .button:first-child:not(:last-child):not(.dropdown-toggle) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    > .button:first-child {
+        margin-left: 0;
+    }
+
+    > .button {
+        position: relative;
+        float: left;
+    }
+
+    // toggle caret
+    > .button + .dropdown-toggle {
+        text-align: center;
+        padding-right: 8px;
+        padding-left: 8px;
+
+        i {
+            margin: 0;
+        }
+    }
+
+    > .button:last-child:not(:first-child), > .dropdown-toggle:not(:first-child) {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+
+    .button + .button, .button + .button-group, .button-group + .button, .button-group + .button-group {
+        margin-left: -1px;
+    }
+
+    .dropdown-menu {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        z-index: 1000;
+        display: none;
+        float: left;
+        min-width: 160px;
+        padding: 5px 0;
+        margin: 2px 0 0;
+        font-size: 14px;
+        text-align: left;
+        list-style: none;
+        background-color: lighten($secondary-accent-bg, 10%);
+        -webkit-background-clip: padding-box;
+        background-clip: padding-box;
+        border: 1px solid lighten($secondary-accent-bg, 5%);
+        border: 1px solid rgba(0, 0, 0, .15);
+        border-radius: 4px;
+        -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+        box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+
+        .divider {
+            height: 1px;
+            margin: 9px 0;
+            overflow: hidden;
+            background-color: $secondary-accent-bg;
+        }
+
+        li > a {
+            display: block;
+            padding: 3px 20px;
+            clear: both;
+            font-weight: 400;
+            line-height: 1.42857143;
+            color: $white;
+            white-space: nowrap;
+
+            &:focus, &:hover {
+                color: $white;
+                text-decoration: none;
+                background-color: $secondary-accent-bg;
+            }
+        }
+    }
+}
+
+.open > .dropdown-menu {
+    display: block;
+}
+
+.dropdown-backdrop {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 990;
+}

themes/grav/templates/dashboard.html.twig

@@ -2,7 +2,18 @@
 
 {% block titlebar %}
     <div class="button-bar">
-        <button data-clear-cache="{{ base_url_relative }}/cache.json/task:clearCache" class="button"><i class="fa fa-fw fa-trash"></i> Clear Cache</button>
+        <div class="button-group">
+            <button data-clear-cache="{{ base_url_relative }}/cache.json/task:clearCache" class="button"><i class="fa fa-fw fa-trash"></i> Clear Cache</button>
+            <button type="button" class="button dropdown-toggle" data-toggle="dropdown">
+                <i class="fa fa-caret-down"></i>
+            </button>
+            <ul class="dropdown-menu">
+                <li><a data-clear-cache="{{ base_url_relative }}/cache.json/task:clearCache/cleartype:all" href="#">All Cache</a></li>
+                <li><a data-clear-cache="{{ base_url_relative }}/cache.json/task:clearCache/cleartype:assets-only" href="#">Assets Only</a></li>
+                <li><a data-clear-cache="{{ base_url_relative }}/cache.json/task:clearCache/cleartype:images-only" href="#">Images Only</a></li>
+                <li><a data-clear-cache="{{ base_url_relative }}/cache.json/task:clearCache/cleartype:cache-only" href="#">Cache Only</a></li>
+            </ul>
+        </div>
     </div>
     <h1><i class="fa fa-fw fa-th"></i> Dashboard</h1>
 {% endblock %}

themes/grav/templates/partials/base.html.twig

@@ -43,6 +43,7 @@
         {% do assets.addJs(theme_url~'/js/ajax.js') %}
 
         {% do assets.addJs(theme_url~'/js/admin-all.js') %}
+        {% do assets.addJs(theme_url~'/js/dropdown.js') %}
 
         {% do assets.addJs(theme_url~'/js/datepicker/kendo.custom.min.js') %}
         {% do assets.addJs(theme_url~'/js/datepicker/init.js') %}