Adds umb-locked-field directive

src/Umbraco.Web.UI.Client/src/common/directives/components/umblockedfield.directive.js

@@ -0,0 +1,38 @@
+/**
+* @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('umbLockedField', function ($timeout, localizationService) {
+	    return {
+
+			require: "ngModel",
+			restrict: 'E',
+			replace: true,
+
+			templateUrl: 'views/components/umb-locked-field.html',
+			
+			scope: {
+				model: '=ngModel'
+			},
+
+			link: function(scope, element, attrs, ngModel) {
+
+				scope.locked = true;
+				scope.toggleLock = function(){
+					if(scope.locked){
+						scope.locked = false;
+					}else{
+						scope.locked =true;
+					}
+				};
+
+			}
+
+		};
+		});

src/Umbraco.Web.UI.Client/src/less/property-editors.less

@@ -28,6 +28,17 @@
   width: 99%;
 }
 
+.umb-locked-field{
+    font-size: 13px;
+    color: #ccc;
+
+    a{text-decoration: none;}
+    a:hover {color: #000;}
+
+    i.icon{color: #ccc; margin-right: 5px;}
+    input{ background: transparent; border: none; line-height: 13px; font-size: 13px; padding: 0; margin-bottom: 1px}
+}
+
 //
 // Content picker
 // --------------------------------------------------

src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html

@@ -21,7 +21,12 @@
                 -->
                 <div class="umb-panel-header-name-wrapper">
                     <input type="text" class="umb-panel-header-name" ng-model="name" placeholder="Enter name..." umb-auto-resize />
-                    <div class="umb-panel-header-alias"><i class="icon icon-lock"></i>{{ alias }}</div>
+
+                    <umb-locked-field ng-model="alias"></umb-locked-field>
+
+                    <!--
+                    <div class="umb-panel-header-alias"><i class="icon icon-lock"></i>{{ alias }}</div>-->
+
                 </div>
 
                 <input type="text" class="umb-panel-header-description" ng-model="description" placeholder="Enter description..." />

src/Umbraco.Web.UI.Client/src/views/components/umb-locked-field.html

@@ -0,0 +1,14 @@
+<div class="umb-locked-field"> 
+	
+	<a href ng-click="toggleLock()"> 
+		<i class="icon icon-lock" 
+			ng-class="{'icon-lock': locked, 'icon-unlocked': locked != true}"></i>
+	</a>
+			
+	<span ng-show="locked">{{model}}</span>
+
+	<input type="text" 
+		ng-if="locked === false" 
+		ng-model="$parent.model"
+		placeholder="Enter value..." umb-auto-resize />  
+	</div>

src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/editpropertysettings/editpropertysettings.html

@@ -6,11 +6,11 @@
             <div class="umb-control-group clearfix">
 
                 <div class="title-wrapper">
-                    <input class="input-style-underline" ng-model="model.property.label" placeholder="Enter a name..." umb-auto-focus />
-                    <a href="" class="alias">
-                        <i class="icon icon-lock"></i>
-                        <span>{{ model.property.alias }}</span>
-                    </a>
+                    <input class="input-style-underline" 
+                        ng-model="model.property.label" 
+                        placeholder="Enter a name..." umb-auto-focus />
+
+                    <umb-locked-field ng-model="model.property.alias"></umb-locked-field>
                 </div>
 
             </div>