From 13fd548c178e3e4946e0be5f1cae46fb905ffa2b Mon Sep 17 00:00:00 2001
From: Per Ploug <ploug@umbraco.dk>
Date: Mon, 8 Jun 2015 16:06:10 +0200
Subject: [PATCH] Adds umb-locked-field directive

---
 .../components/umblockedfield.directive.js    | 38 +++++++++++++++++++
 .../src/less/property-editors.less            | 11 ++++++
 .../components/editor/umb-editor-header.html  |  7 +++-
 .../views/components/umb-locked-field.html    | 14 +++++++
 .../editpropertysettings.html                 | 10 ++---
 5 files changed, 74 insertions(+), 6 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/components/umblockedfield.directive.js
 create mode 100644 src/Umbraco.Web.UI.Client/src/views/components/umb-locked-field.html

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umblockedfield.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umblockedfield.directive.js
new file mode 100644
index 0000000000..93225aa4ca
--- /dev/null
+++ b/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;
+					}
+				};
+
+			}
+
+		};
+		});
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
index 01430ac2ec..c9fccbaed9 100644
--- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less
+++ b/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
 // --------------------------------------------------
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html
index 54fac04f07..9dc4fda8d4 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html
+++ b/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..." />
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-locked-field.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-locked-field.html
new file mode 100644
index 0000000000..9af874f528
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/editpropertysettings/editpropertysettings.html b/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/editpropertysettings/editpropertysettings.html
index 018ec57d61..56c9b75018 100644
--- a/src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/editpropertysettings/editpropertysettings.html
+++ b/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>