From 6b895f54495788930cdbaaf41de852326458ec42 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Wed, 9 Sep 2015 09:37:50 +0200
Subject: [PATCH] add directive for umb-buttons

---
 .../components/buttons/umbbutton.directive.js | 64 +++++++++++++
 src/Umbraco.Web.UI.Client/src/less/belle.less |  1 +
 .../less/components/buttons/umb-button.less   | 94 +++++++++++++++++++
 .../views/components/buttons/umb-button.html  | 32 +++++++
 4 files changed, 191 insertions(+)
 create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbutton.directive.js
 create mode 100644 src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less
 create mode 100644 src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbutton.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbutton.directive.js
new file mode 100644
index 0000000000..4df813f429
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbutton.directive.js
@@ -0,0 +1,64 @@
+(function() {
+   'use strict';
+
+   function ButtonDirective($timeout) {
+
+      function link(scope, el, attr, ctrl) {
+
+         scope.style = null;
+
+         function activate() {
+
+            if (!scope.state) {
+               scope.state = "init";
+            }
+
+            if (scope.buttonStyle) {
+               scope.style = "btn-" + scope.buttonStyle;
+            }
+
+         }
+
+         activate();
+
+         var unbindStateWatcher = scope.$watch('state', function(newValue, oldValue) {
+
+            if (newValue === 'success' || newValue === 'error') {
+               $timeout(function() {
+                  scope.state = 'init';
+               }, 2000);
+            }
+
+         });
+
+         scope.$on('$destroy', function() {
+            unbindStateWatcher();
+         });
+
+      }
+
+      var directive = {
+         transclude: true,
+         restrict: 'E',
+         replace: true,
+         templateUrl: 'views/components/buttons/umb-button.html',
+         link: link,
+         scope: {
+            action: "&?",
+            href: "@?",
+            type: "@",
+            buttonStyle: "@?",
+            state: "=?",
+            shortcut: "@?",
+            label: "@?",
+            labelKey: "@?"
+         }
+      };
+
+      return directive;
+
+   }
+
+   angular.module('umbraco.directives').directive('umbButton', ButtonDirective);
+
+})();
diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index 17ae3dceb8..cb7f2bd08f 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -96,6 +96,7 @@
 @import "components/umb-load-indicator.less";
 @import "components/umb-breadcrumbs.less";
 
+@import "components/buttons/umb-button.less";
 @import "components/umb-file-dropzone.less";
 
 //page specific styles
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less b/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less
new file mode 100644
index 0000000000..24c1e41a7a
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less
@@ -0,0 +1,94 @@
+.umb-button {
+   position: relative;
+   overflow: hidden;
+}
+
+.umb-button__button:active {
+   outline: none;
+}
+
+.umb-button__content {
+   opacity: 1;
+   transition: opacity 0.25s ease;
+}
+
+.umb-button__content.-hidden {
+   opacity: 0;
+}
+
+.umb-button__progress {
+   position: absolute;
+   left: 50%;
+   top: 50%;
+   width: 14px;
+   height: 14px;
+   margin-left: -9px;
+   margin-top: -9px;
+   z-index: 100;
+   border-radius: 40px;
+   border: 2px solid @btnBorder;
+   border-left-color: @green;
+   opacity: 1;
+   animation: rotating 0.4s linear infinite;
+   transition: opacity 0.25s ease;
+}
+
+.umb-button__progress.-hidden {
+   opacity: 0;
+   z-index: 0;
+}
+
+.umb-button__progress.-white {
+   border-color: rgba(255, 255, 255, 0.4);
+   border-left-color: #ffffff;
+}
+
+.umb-button__success,
+.umb-button__error {
+   position: absolute;
+   top: 50%;
+   left: 50%;
+   z-index: 10;
+   transform: translate(-50%, -50%);
+   opacity: 1;
+   font-size: 20px;
+   color: @green;
+   transition: opacity 0.25s ease;
+}
+
+.umb-button__success {
+   color: @green;
+}
+
+.umb-button__error {
+   color: @red;
+}
+
+.umb-button__success.-hidden,
+.umb-button__error.-hidden {
+   opacity: 0;
+   z-index: 0;
+}
+
+.umb-button__success.-white,
+.umb-button__error.-white {
+   color: #ffffff;
+}
+
+.umb-button__overlay {
+   position: absolute;
+   width: 100%;
+   height: 100%;
+   z-index: 10;
+   background: #ffffff;
+   opacity: 0;
+}
+
+@keyframes rotating {
+   from {
+      transform: rotate(0deg);
+   }
+   to {
+      transform: rotate(360deg);
+   }
+}
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html b/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html
new file mode 100644
index 0000000000..f1a8ccf14b
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html
@@ -0,0 +1,32 @@
+<div class="btn-group umb-button">
+
+   <div class="icon-check umb-button__success" ng-class="{'-hidden': state !== 'success', '-white': style}"></div>
+
+   <div class="icon-delete umb-button__error" ng-class="{'-hidden': state !== 'error', '-white': style}"></div>
+
+   <div class="umb-button__progress" ng-class="{'-hidden': state !== 'busy', '-white': style}"></div>
+
+   <div ng-if="state !== 'init'" class="umb-button__overlay"></div>
+
+   <a ng-if="type === 'link'" href="{{href}}" class="btn umb-button__button {{style}}" hotkey="{{shortcut}}">
+      <span class="umb-button__content" ng-class="{'-hidden': state !== 'init'}">
+         <localize ng-if="labelKey" key="{{labelKey}}">{{label}}</localize>
+         <span ng-if="!labelKey">{{label}}</span>
+      </span>
+   </a>
+
+   <button ng-if="type === 'button'" type="button" class="btn umb-button__button {{style}}" ng-click="action(model)" hotkey="{{shortcut}}">
+      <span class="umb-button__content" ng-class="{'-hidden': state !== 'init'}">
+         <localize ng-if="labelKey" key="{{labelKey}}">{{label}}</localize>
+         <span ng-if="!labelKey">{{label}}</span>
+      </span>
+   </button>
+
+   <button ng-if="type === 'submit'" type="submit" class="btn umb-button__button {{style}}" hotkey="{{shortcut}}">
+      <span class="umb-button__content" ng-class="{'-hidden': state !== 'init'}">
+         <localize ng-if="labelKey" key="{{labelKey}}">{{label}}</localize>
+         <span ng-if="!labelKey">{{label}}</span>
+      </span>
+   </button>
+
+</div>