Content: change buttons to umb-button and umb-button-group

src/Umbraco.Web.UI.Client/src/views/content/content.edit.controller.js

@@ -11,13 +11,15 @@ function ContentEditController($scope, $rootScope, $routeParams, $q, $timeout, $
     //setup scope vars
     $scope.defaultButton = null;
     $scope.subButtons = [];
-    $scope.isNew = $routeParams.create;
 
     $scope.page = {};
     $scope.page.loading = false;
     $scope.page.menu = {};
     $scope.page.menu.currentNode = null;
     $scope.page.menu.currentSection = appState.getSectionState("currentSection");
+    $scope.page.listViewPath = null;
+    $scope.page.isNew = $routeParams.create;
+    $scope.page.buttonGroupState = "init";
 
     function init(content) {
 
@@ -74,6 +76,8 @@ function ContentEditController($scope, $rootScope, $routeParams, $q, $timeout, $
     function performSave(args) {
         var deferred = $q.defer();
 
+        $scope.page.buttonGroupState = "busy";
+
         contentEditingHelper.contentEditorPerformSave({
             statusMessage: args.statusMessage,
             saveMethod: args.saveMethod,
@@ -84,12 +88,17 @@ function ContentEditController($scope, $rootScope, $routeParams, $q, $timeout, $
             init($scope.content);
             syncTreeNode($scope.content, data.path);
 
+            $scope.page.buttonGroupState = "success";
+
             deferred.resolve(data);
         }, function (err) {
             //error
             if (err) {
                 editorState.set($scope.content);
             }
+
+            $scope.page.buttonGroupState = "error";
+
             deferred.reject(err);
         });
 
@@ -134,7 +143,7 @@ function ContentEditController($scope, $rootScope, $routeParams, $q, $timeout, $
                 $scope.content = data;
 
                 if (data.isChildOfListView && data.trashed === false) {
-                    $scope.listViewPath = ($routeParams.page)
+                    $scope.page.listViewPath = ($routeParams.page)
                         ? "/content/content/edit/" + data.parentId + "?page=" + $routeParams.page
                         : "/content/content/edit/" + data.parentId;
                 }
@@ -161,6 +170,8 @@ function ContentEditController($scope, $rootScope, $routeParams, $q, $timeout, $
 
         if (formHelper.submitForm({ scope: $scope, statusMessage: "Unpublishing...", skipValidation: true })) {
 
+           $scope.page.buttonGroupState = "busy";
+
             contentResource.unPublish($scope.content.id)
                 .then(function (data) {
 
@@ -176,6 +187,8 @@ function ContentEditController($scope, $rootScope, $routeParams, $q, $timeout, $
 
                     syncTreeNode($scope.content, data.path);
 
+                    $scope.page.buttonGroupState = "success";
+
                 });
         }
 
@@ -210,19 +223,7 @@ function ContentEditController($scope, $rootScope, $routeParams, $q, $timeout, $
 
 
         }
- 
-    };
 
-    // this method is called for all action buttons and then we proxy based on the btn definition
-    $scope.performAction = function (btn) {
-
-        if (!btn || !angular.isFunction(btn.handler)) {
-            throw "btn.handler must be a function reference";
-        }
-
-        if (!$scope.busy) {
-            btn.handler.apply(this);
-        }
     };
 
 }

src/Umbraco.Web.UI.Client/src/views/content/edit.html

@@ -39,41 +39,33 @@
             </umb-editor-footer-content-left>
 
 
-            <umb-editor-footer-content-right ng-class="{'umb-dimmed': busy}">
+            <umb-editor-footer-content-right>
 
-               <div class="btn-group" ng-show="listViewPath">
-                  <a class="btn" href="#{{listViewPath}}">
-                     <localize key="buttons_returnToList">Return to list</localize>
-                  </a>
-               </div>
+               <umb-button
+                  ng-if="page.listViewPath"
+                  type="link"
+                  href="#{{page.listViewPath}}"
+                  label="Return to list"
+                  label-key="buttons_returnToList">
+               </umb-button>
 
-               <div class="btn-group" ng-show="!isNew">
-                  <a class="btn" ng-click="preview(content)">
-                     <localize key="buttons_showPage">Preview page</localize>
-                  </a>
-               </div>
+               <umb-button
+                  ng-if="!page.isNew"
+                  type="button"
+                  action="preview(content)"
+                  label="Preview page"
+                  label-key="buttons_showPage">
+               </umb-button>
 
-               <div class="btn-group dropup" ng-if="defaultButton">
+               <umb-button-group
+                  ng-if="defaultButton"
+                  default-button="defaultButton"
+                  sub-buttons="subButtons"
+                  state="page.buttonGroupState"
+                  direction="up"
+                  float="right">
+               </umb-button-group>
 
-                  <a class="btn btn-success" href="#" ng-click="performAction(defaultButton)" prevent-default>
-                     <localize key="{{defaultButton.labelKey}}">{{defaultButton.labelKey}}</localize>
-                  </a>
-
-                  <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" ng-if="subButtons.length > 0">
-                     <span class="caret"></span>
-                  </a>
-
-                  <a href="#">Return to list</a>
-
-                  <ul aria-labelledby="dLabel" class="dropdown-menu bottom-up" ng-if="subButtons.length > 0" role="menu">
-                     <li ng-repeat="btn in subButtons">
-                        <a href="#" ng-click="performAction(btn)" prevent-default>
-                           <localize key="{{btn.labelKey}}">{{btn.labelKey}}</localize>
-                        </a>
-                     </li>
-                  </ul>
-
-               </div>
 
             </umb-editor-footer-content-right>