Merge remote-tracking branch 'mediabeastnz/master'

README.md

@@ -13,6 +13,18 @@ require: "mediabeast/fancy-devbuild": "1.*"
 If you have any ideas please submit an issue and label it as Enhancement.
 Pull requests are welcome!
 
+#### Customisation
+Incase your using a custom admin theme you can quickly customise the colors of the icon and text.
+For example I have added this to the *Flat Admin* CSS. Other classes are .error and .success
+```css
+.devbuild-trigger.loading {
+    color: rgb(249, 191, 59);
+
+    .icon {
+      color: rgb(249, 191, 59);
+    }
+}
+```
 
 #### Todo List
 All ideas, issues and questions will be found under Issues.

javascript/LeftAndMain.Fancy-devbuild.js

@@ -1,9 +1,9 @@
 (function($) {
-    var dev_trigger = "#devbuild-trigger",
+    var dev_trigger = ".devbuild-trigger",
         reset_time = 5000,
         default_doc_title = document.title;
     // inject the link into the cms menu
-    $(".cms-menu-list").append('<li class="link devbuild"><a href="#" id="devbuild-trigger"><span class="icon icon-16 icon-help">&nbsp;</span><span class="text">Dev/Build</span></a></li>');
+    $(".cms-menu-list").append('<li class="link devbuild"><a href="#" class="devbuild-trigger"><span class="icon icon-16">&nbsp;</span><span class="text">Dev/Build</span></a></li>');
 
     // look out for click
     $(dev_trigger).click(function(e) {

scss/fancydevbuild.scss

@@ -1,24 +1,115 @@
 /**
- * Default styles for the fancy dev build button.
- * This contains both variables and layout for both cms/frontend.
- */
-#devbuild-trigger {
+* Default styles for the fancy dev build button.
+* This contains both variables and layout for both cms/frontend.
+*/
 
-    .icon {
-        background-image: url(../images/icon.png);
-        background-size: 16px 16px;
+// colors
+$standard-color: #303538;// #303538
+$loading-color: #303538;
+$error-color: #dd0000;
+$success-color: #208c20;
+
+.devbuild-trigger{
+    color: $standard-color;
+    &.loading{
+        color: $loading-color;
+    }
+    &.error{
+        color: $error-color;
+    }
+    &.success{
+        color: $success-color;
     }
+}
 
-    &.loading .icon {
-        background-image: url(../images/loading.gif);
+// default state
+.devbuild-trigger{
+    overflow: hidden;
+    .icon.icon-16{
+        background: none;
+        border: 3px solid;
+        border-radius: 50%;
+        transform: scale(0.7);
+        margin-left: 0;
+        margin-top: -11px;
+        transition: all 0.5s ease;
+        &:after{
+            content: "";
+            border-radius: 50%;
+            position: absolute;
+            top: -3px;
+            right: -3px;
+            bottom: -3px;
+            left: -3px;
+        }
     }
+}
 
-    &.error .icon {
-        background-image: url(../images/error.png);
+// success state
+.devbuild-trigger{
+    &.success .icon{
+        &:after{
+            opacity: 0;
+            border: 1px solid;
+            animation: pulse 1s linear infinite;
+        }
     }
+}
 
-    &.error .text {
-        color: #EF4836;
+// error state
+.devbuild-trigger{
+    &.error .icon{
+        &:after{
+            opacity: 0;
+            border: 1px solid;
+            animation: pulse 1s linear infinite;
+        }
     }
+}
 
+@keyframes pulse {
+    0% {
+        transform: scale(1);
+        opacity: 0;
+    }
+    8% {
+        transform: scale(1);
+        opacity: 0.3;
+    }
+    15% {
+        transform: scale(1.1);
+        opacity: 1;
+    }
+    30% {
+        transform: scale(1.2);
+        opacity: 1;
+    }
+    100% {
+        transform: scale(1.5);
+        opacity: 0;
+    }
+}
+
+// loading state
+.devbuild-trigger{
+    &.loading .icon{
+        color: $loading-color;
+        border-top-color: transparent;
+        border-right-color: transparent;
+        border-bottom-color: transparent;
+        animation: loader 1.4s infinite linear;
+        &:after{
+            opacity: 0.5;
+            border: 3px solid;
+        }
+    }
+}
+
+@keyframes loader {
+    0% {
+        transform: rotate(0deg) scale(0.7);
+    }
+    100% {
+        transform: rotate(360deg) scale(0.7);
+    }
 }