Fxies the headline directive to actually work

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

@@ -1,7 +1,7 @@
 /**
 * @ngdoc directive
 * @name umbraco.directives.directive:headline
-**/
+
 angular.module("umbraco.directives")
   .directive('headline', function ($window) {
       return function (scope, el, attrs) {
@@ -10,6 +10,8 @@ angular.module("umbraco.directives")
           el.parent().prepend(h1);
           el.addClass("umb-headline-editor");
 
+
+
           if (el.val() !== '') {
               el.hide();
               h1.text(el.val());
@@ -18,6 +20,7 @@ angular.module("umbraco.directives")
               el.focus();
           }
 
+
           el.on("blur", function () {
               //Don't hide the input field if there is no value in it
               if (el.val() !== '') {
@@ -31,4 +34,56 @@ angular.module("umbraco.directives")
               el.show().focus();
           });
       };
-  });
+  });
+*/
+
+angular.module('umbraco.directives').directive('headline', function() {
+    return {
+      restrict: 'E',
+      require: '?ngModel',
+      transclude: false,
+      template: '<div class="umb-headline-editor-wrapper"><h1 class="umb-headline-editor">{{ngModel}}</h1><input type="text"></div>',
+
+      link: function(scope, element, attrs, ngModel) {
+        
+        function read() {
+          ngModel.$setViewValue(editor.getValue());
+          textarea.val(editor.getValue());
+        }
+
+        var input = $(element).find('input');
+        var h1 = $(element).find('h1');
+        input.hide();
+        
+        if (!ngModel)
+        {
+          return; // do nothing if no ngModel
+        }
+
+        ngModel.$render = function() {
+          var value = ngModel.$viewValue || '';
+          input.val(value);
+          h1.text(value);
+
+          if(value === ''){
+            input.show();
+            h1.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();
+        });
+      } 
+    };
+  });  

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

@@ -7,7 +7,7 @@
 * 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 () {
+	.directive('umbContentName', function ($timeout) {
 	    return {
 	        require: "ngModel",
 			restrict: 'E',
@@ -18,6 +18,35 @@ angular.module("umbraco.directives")
 			    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/less/panel.less

@@ -14,27 +14,42 @@
   cursor: text;
 }
 
-.umb-panel-header h1 {
+.umb-panel-header h1.umb-headline-editor {
+  cursor: text;
+}
+
+.umb-headline-editor-wrapper h1 {
   margin: 0;
   font-size: @fontSizeLarge;
   font-weight: 400;
 }
 
-.umb-panel-header h1.umb-headline-editor:hover {
+.umb-panel-header h1 {
+  margin: 0;
   font-size: @fontSizeLarge;
   font-weight: 400;
   color: @gray;
-  border: 1px solid @grayLight;
+}
+
+.umb-headline-editor-wrapper input{
+  display: none;
+}
+
+.umb-headline-editor-wrapper h1:hover, .umb-headline-editor-wrapper input  {
+  border-bottom: 1px dashed @grayLight;
   padding: 4px 0px 4px 6px;
   line-height: 22px;
   margin: 4px 0 0 -7px;
-  background: @white
+  width: 100%;
 }
 
-.umb-panel-header h1:hover {
-  display: none
+.umb-headline-editor-wrapper input:focus  {
+  border: 1px solid @grayLight;
+  background: @white;
+  width: 100%;
 }
 
+
 .umb-panel-header .form-search {
   position: relative;
   padding: 13px 0 0 0

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

@@ -6,10 +6,11 @@
 
         <umb-header tabs="content.tabs">
 
-            <umb-content-name 
-                ng-model="content.name" 
-                placeholder="Enter a page title">
-            </umb-content-name>
+            <div class="span4">
+                <umb-content-name 
+                    placeholder="Enter a name..." 
+                    ng-model="content.name"></umb-content-name>
+            </div>
 
             <div class="span8">
                 <div class="btn-toolbar pull-right umb-btn-toolbar">

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

@@ -1,6 +1,8 @@
-<div class="span4 control-group" ng-class="{error: contentNameForm.name.$invalid}">
+<div class="umb-headline-editor-wrapper" ng-class="{error: contentNameForm.name.$invalid}">
     <ng-form name="contentNameForm">        
-        <input name="name" type="text" placeholder="{{placeholder}}" headline ng-model="model" 
+        
+    	<h1>{{model}}</h1>
+        <input name="name" type="text" placeholder="{{placeholder}}" ng-model="model" 
             required   
             val-server-field="Name" />