From 8e78e91543afdafda334b1068dc38f59939ada32 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Mon, 3 Aug 2015 10:07:23 +0200
Subject: [PATCH] Validate alias + editor in property settings dialog. Move
 locked field styles to it's own file.

---
 .../umbvalidatecomponent.directive.js         | 38 ++++++++++++++++++
 src/Umbraco.Web.UI.Client/src/less/belle.less |  1 +
 .../less/components/umb-group-builder.less    | 22 ++++++++++-
 .../src/less/components/umb-locked-field.less | 39 +++++++++++++++++++
 .../src/less/property-editors.less            | 13 +------
 .../views/components/umb-locked-field.html    | 20 ++++++----
 .../editpropertysettings.html                 | 21 +++++-----
 7 files changed, 124 insertions(+), 30 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/components/umbvalidatecomponent.directive.js
 create mode 100644 src/Umbraco.Web.UI.Client/src/less/components/umb-locked-field.less

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbvalidatecomponent.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbvalidatecomponent.directive.js
new file mode 100644
index 0000000000..565136608f
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbvalidatecomponent.directive.js
@@ -0,0 +1,38 @@
+(function() {
+  'use strict';
+
+  function ValRequireComponentDirective() {
+
+    function link(scope, el, attr, ngModel) {
+
+      var unbindModelWatcher = scope.$watch(function () {
+        return ngModel.$modelValue;
+      }, function(newValue) {
+
+        if(newValue === undefined || newValue === null || newValue === "") {
+          ngModel.$setValidity("valRequiredComponent", false);
+        } else {
+          ngModel.$setValidity("valRequiredComponent", true);
+        }
+
+      });
+
+      // clean up
+      scope.$on('$destroy', function(){
+        unbindModelWatcher();
+      });
+
+    }
+
+    var directive = {
+      require: 'ngModel',
+      restrict: "A",
+      link: link
+    };
+
+    return directive;
+  }
+
+  angular.module('umbraco.directives').directive('valRequireComponent', ValRequireComponentDirective);
+
+})();
diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index fc8aa3da40..4da19449c7 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -100,6 +100,7 @@
 @import "components/umb-confirm-delete.less";
 @import "components/umb-keyboard-shortcuts-overview.less";
 @import "components/umb-checkbox-list.less";
+@import "components/umb-locked-field.less";
 
 @import "components/umb-file-dropzone.less";
 
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less
index 87fed5e1fa..60b07d9a4d 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less
@@ -383,10 +383,29 @@ input.umb-group-builder__group-sort-value {
 
 /* ---------- DIALOGS ---------- */
 
+.show-validation .editor-wrapper.ng-invalid-val-required-component .editor-placeholder {
+  border-color: @red;
+  color: @red;
+}
+
 .content-type-editor-dialog.edit-property-settings {
 
-  .editor-label {
+  .validation-wrapper {
+    position: relative;
+  }
+
+  .validation-label {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    font-size: 12px;
+    color: @red;
+    transform: translate(0, -50%);
+  }
+
+  input.editor-label {
     border: none;
+    box-shadow: none;
     width: 100%;
     box-sizing: border-box;
     padding: 10px 0 0 0;
@@ -395,6 +414,7 @@ input.umb-group-builder__group-sort-value {
     font-weight: bold;
     &:focus {
       outline: none;
+      box-shadow: none !important;
     }
   }
 
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-locked-field.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-locked-field.less
new file mode 100644
index 0000000000..5680e680c9
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-locked-field.less
@@ -0,0 +1,39 @@
+.umb-locked-field {
+  font-size: 13px;
+  color: #ccc;
+  position: relative;
+}
+
+.umb-locked-field__toggle:hover,
+.umb-locked-field__toggle:focus {
+  text-decoration: none;
+}
+
+.umb-locked-field__lock-icon {
+  color: #ccc;
+  vertical-align: top;
+}
+
+input.umb-locked-field__input {
+  background: transparent;
+  border: none;
+  line-height: 13px;
+  font-size: 13px;
+  padding: 0;
+  margin-bottom: 2px;
+  min-width: 125px;
+  color: #ccc;
+}
+
+input.umb-locked-field__input:focus {
+  box-shadow: none !important;
+}
+
+.umb-locked-field__validation-label {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  font-size: 12px;
+  color: @red;
+  transform: translate(0, -50%);
+}
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 39c50cca35..acb9644a97 100644
--- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less
+++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
@@ -28,17 +28,6 @@
   width: 99%;
 }
 
-.umb-locked-field{
-    font-size: 13px;
-    color: #ccc;
-
-    a{text-decoration: none;}
-    a:hover {color: #000;}
-
-    i.icon{color: #ccc; vertical-align: top}
-    input{ background: transparent; border: none; line-height: 13px; font-size: 13px; padding: 0; margin-bottom: 2px}
-}
-
 //
 // Content picker
 // --------------------------------------------------
@@ -623,7 +612,7 @@ ul.color-picker li a  {
 // Code mirror - even though this isn't a proprety editor right now, it could be so I'm putting the styles here
 // --------------------------------------------------
 
-.CodeMirror, .CodeMirror-scroll { 
+.CodeMirror, .CodeMirror-scroll {
 	height: 100%;
     min-height:200px;
 }
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
index b441427716..a697aaeae6 100644
--- 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
@@ -1,14 +1,20 @@
 <div class="umb-locked-field">
 
-	<a href="" ng-click="toggleLock()">
-		<i class="icon" ng-class="{'icon-lock': locked, 'icon-unlocked': !locked}"></i>
+	<a href="" ng-click="toggleLock()" class="umb-locked-field__toggle">
+		<i class="umb-locked-field__lock-icon" ng-class="{'icon-lock': locked, 'icon-unlocked': !locked}"></i>
 	</a>
 
-	<span ng-if="locked">
-		<span ng-if="model">{{model}}</span>
-		<span ng-if="!model">{{ placeholderText }}</span>
-	</span>
+	<input
+		type="text"
+		class="umb-locked-field__input"
+		name="lockedField"
+		ng-model="model"
+		ng-disabled="locked"
+		placeholder="{{placeholderText}}"
+		umb-auto-resize
+		required
+	/>
 
-	<input type="text" ng-if="!locked" ng-model="$parent.model" placeholder="{{ $parent.placeholderText }}" umb-auto-resize />
+	<span class="umb-locked-field__validation-label" val-msg-for="lockedField" val-toggle-msg="required"><localize key="required" /></span>
 
 </div>
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 b89f996b66..8c55730da8 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
@@ -2,15 +2,16 @@
 
         <div class="umb-control-group clearfix">
 
-            <input class="editor-label"
-                  name="propertyLabel"
-                  ng-model="model.property.label"
-                  placeholder="Enter a name..."
-                  umb-auto-focus
-                  required
-                  />
-
-            <span class="help-inline" val-msg-for="propertyLabel" val-toggle-msg="required"><localize key="required" /></span>
+            <div class="validation-wrapper">
+              <input class="editor-label"
+                    name="propertyLabel"
+                    ng-model="model.property.label"
+                    placeholder="Enter a name..."
+                    umb-auto-focus
+                    required
+                    />
+              <span class="validation-label" val-msg-for="propertyLabel" val-toggle-msg="required"><localize key="required" /></span>
+            </div>
 
             <umb-generate-alias enable-lock="true" alias-from="model.property.label" alias="model.property.alias"></umb-generate-alias>
 
@@ -20,7 +21,7 @@
             <textarea class="editor-description" ng-model="model.property.description" placeholder="Add your description here..." umb-auto-resize></textarea>
         </div>
 
-        <div class="umb-control-group clearfix">
+        <div class="editor-wrapper umb-control-group clearfix" ng-model="model.property.editor" val-require-component>
 
             <a href="" ng-if="!model.property.editor" class="editor-placeholder" hotkey="alt+shift+e" ng-click="model.changePropertyEditor(model.property)">Add Editor</a>