Content name directive refactor

src/Umbraco.Web.UI.Client/src/common/directives/editors/umbcontentname.directive.js

@@ -0,0 +1,46 @@
+/**
+* @ngdoc directive
+* @name umbraco.directives.directive:umbContentName 
+* @restrict E
+* @function
+* @description 
+* Used by editors that require naming an entity. Shows a textbox/headline with a required validator within it's own form.
+**/
+angular.module("umbraco.directives")
+	.directive('umbContentName', function ($timeout) {
+	    return {
+	        require: "ngModel",
+			restrict: 'E',
+			replace: true,
+			templateUrl: 'views/directives/umb-content-name.html',
+			scope: {
+			    placeholder: '@placeholder',
+			    model: '=ngModel'
+			},
+			link: function(scope, element, attrs, ngModel) {
+
+				ngModel.$render = function(){
+					$timeout(function(){
+						if(scope.model === ""){
+							scope.goEdit();
+						}
+					}, 100);
+				};
+
+				scope.goEdit = function(){
+					scope.editMode = true;
+					$timeout(function(){
+						element.find("input").focus();
+					}, 100);
+				};
+
+				scope.exitEdit = function(){
+					scope.editMode = false;
+
+					if(scope.model === ""){
+						scope.model = "Empty...";
+					}
+				};
+			}
+	    };
+	});

src/Umbraco.Web.UI.Client/src/common/directives/umbcontentname.directive.js

@@ -1,50 +0,0 @@
-/**
-* @ngdoc directive
-* @name umbraco.directives.directive:umbContentName 
-* @restrict E
-* @function
-* @description 
-* Used by editors that require naming an entity. Shows a textbox/headline with a required validator within it's own form.
-**/
-angular.module("umbraco.directives")
-	.directive('umbContentName', function ($timeout) {
-	    return {
-	        require: "ngModel",
-			restrict: 'E',
-			replace: true,
-			templateUrl: 'views/directives/umb-content-name.html',
-			scope: {
-			    placeholder: '@placeholder',
-			    model: '=ngModel'
-			},
-			link: function(scope, element, attrs, modelCtrl) {
-
-				var input = $(element).find('input');
-				var h1 = $(element).find('h1');
-				input.hide();
-
-				
-				input.on("blur", function () {
-				    //Don't hide the input field if there is no value in it
-				    var val = input.val() || "empty";
-				    input.hide();
-
-				    h1.text(val);
-				    h1.show();
-				});
-
-
-				h1.on("click", function () {
-				    h1.hide();
-		            input.show().focus();
-				});
-
-				$timeout(function(){
-						if(!scope.model){
-							    h1.hide();
-					            input.show().focus();
-					        }    
-				}, 500);	
-			}
-	    };
-	});

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

@@ -6,7 +6,7 @@
  * @description
  * The controller for the content editor
  */
-function ContentEditController($scope, $routeParams, contentResource, notificationsService, angularHelper, serverValidationManager, contentEditingHelper, fileManager, editorContextService) {
+function ContentEditController($scope, $routeParams, $q, $timeout, $window, contentResource, notificationsService, angularHelper, serverValidationManager, contentEditingHelper, fileManager, editorContextService) {
        
     //initialize the file manager
     fileManager.clearFiles();
@@ -68,7 +68,28 @@ function ContentEditController($scope, $routeParams, contentResource, notificati
             });     
     };
 
+    $scope.preview = function(content){
+            if(!content.id){
+                $scope.save().then(function(data){
+                      $window.open('dialogs/preview.aspx?id='+data.id,'umbpreview');  
+                });
+            }else{
+                $window.open('dialogs/preview.aspx?id='+content.id,'umbpreview');
+            }    
+    };
+
+    $scope.setStatus = function(status){
+        //add localization
+        $scope.status = status;
+        $timeout(function(){
+            $scope.status = undefined;
+        }, 2500);
+    };
+
     $scope.save = function () {
+        var deferred = $q.defer();
+
+        $scope.setStatus("Saving...");
         $scope.$broadcast("saving", { scope: $scope });
             
         var currentForm = angularHelper.getRequiredCurrentForm($scope);
@@ -86,6 +107,8 @@ function ContentEditController($scope, $routeParams, contentResource, notificati
                     newContent: data,
                     rebindCallback: contentEditingHelper.reBindChangedProperties($scope.content, data)
                 });
+
+                deferred.resolve(data);
                 
             }, function (err) {
                 contentEditingHelper.handleSaveError({
@@ -93,7 +116,11 @@ function ContentEditController($scope, $routeParams, contentResource, notificati
                     allNewProps: contentEditingHelper.getAllProps(err.data),
                     allOrigProps: contentEditingHelper.getAllProps($scope.content)
                 });
+
+                deferred.reject(err);
         });
+
+        return deferred.promise;
     };
 
 }

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

@@ -13,13 +13,18 @@
             </div>
 
             <div class="span8">
+                
                 <div class="btn-toolbar pull-right umb-btn-toolbar">
-                    <div class="btn-group">
+                    <div class="btn-group" ng-animate="'fade'" ng-show="status">
-                        <a class="btn" ng-click="preview(content)">Preview page</a>
+                        <p class="btn btn-link umb-status-label">{{status}}</p>
-                        data-hotkey="ctrl+s">Preview page</a>
                     </div>
 
                     <div class="btn-group">
+                        <a class="btn" ng-click="preview(content)">Preview page</a>
+                    </div>
+
+                    <div class="btn-group">
+
                         <a class="btn btn-success" href="#" ng-click="saveAndPublish()"
                         prevent-default data-hotkey="ctrl+p">Publish</a>
                        

src/Umbraco.Web.UI.Client/src/views/directives/umb-content-name.html

@@ -2,8 +2,15 @@
     
     <ng-form name="contentNameForm">        
         
-        <h1>{{model}}</h1>
+        <h1 ng-click="goEdit()" ng-hide="editMode">{{model}}</h1>
-        <input name="name" type="text" placeholder="{{placeholder}}" ng-model="model" 
+        
+        <input
+        	on-blur="editMode = false" 
+        	ng-show="editMode" 
+        	name="name" 
+        	type="text" 
+        	placeholder="{{placeholder}}" 
+        	ng-model="model" 
                required   
                val-server-field="Name" />