From c3441d54bfb89bacdb4f559a12af45039b83a935 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 27 Oct 2015 10:32:00 +0100 Subject: [PATCH 1/6] fix locked field alignment --- .../src/less/components/umb-locked-field.less | 3 +- .../views/components/umb-locked-field.html | 46 +++++++++---------- 2 files changed, 24 insertions(+), 25 deletions(-) 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 index 9fb534e388..339c15990f 100644 --- 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 @@ -28,10 +28,11 @@ input.umb-locked-field__input { background: rgba(255, 255, 255, 0); // if using transparent it will hide the text in safari border-color:transparent; - font-size: 13px; + font-size: 13px; margin-bottom: 0; color: #ccc; transition: color 0.25s; + padding: 0; } input.umb-locked-field__input:focus { 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 7e6b556117..d23f39361d 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,27 +1,25 @@ -
- - - - + + + + - - - + + + - + - - Invalid alias - - -
+ + Invalid alias + + From 56e6eee85230c31b1f0aa60086f3c705e2f549ed Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 28 Oct 2015 09:25:01 +0100 Subject: [PATCH 2/6] fix issue with focus on locked field not being focused after child element has been added --- .../common/directives/components/umblockedfield.directive.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index dca497caa6..04fde87de5 100644 --- 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 @@ -13,7 +13,7 @@ function link(scope, el, attr, ngModel) { - var input = el.children('.umb-locked-field__input'); + var input = el.find('.umb-locked-field__input'); function activate() { From ac0d47122c2c3581026f5f89a00beecbbc8a8d6f Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 28 Oct 2015 09:37:54 +0100 Subject: [PATCH 3/6] fix validation styling a bit --- src/Umbraco.Web.UI.Client/src/less/belle.less | 1 + .../less/components/umb-group-builder.less | 27 ++++++----- .../src/less/components/umb-locked-field.less | 20 ++++---- .../src/less/forms/umb-validation-label.less | 44 ++++++++++++++++++ src/Umbraco.Web.UI.Client/src/less/panel.less | 18 ++++++++ .../propertysettings/propertysettings.html | 22 +++++---- .../views/components/umb-groups-builder.html | 11 +++-- .../views/components/umb-locked-field.html | 46 +++++++++++-------- 8 files changed, 129 insertions(+), 60 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/less/forms/umb-validation-label.less diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less index 6cd3726c8f..85f1a1d5c9 100644 --- a/src/Umbraco.Web.UI.Client/src/less/belle.less +++ b/src/Umbraco.Web.UI.Client/src/less/belle.less @@ -75,6 +75,7 @@ @import "dragdrop.less"; @import "dashboards.less"; +@import "forms/umb-validation-label.less"; // Umbraco Components @import "components/editor.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 ae5e1de146..b8f0d457dd 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 @@ -229,32 +229,29 @@ input.umb-group-builder__group-sort-value { font-weight: bold; margin-bottom: 0; color: @grayDarker; - min-width: 100%; + width: 100%; + padding: 0; min-height: 25px; box-sizing: border-box; resize: none; - position: relative; - top: -3px; - left: -7px; overflow: hidden; border-color: transparent; background: transparent; } -.umb-group-builder__property-meta-description { - margin-top: -16px; +.umb-group-builder__property-meta-label textarea.ng-invalid { + border: none; } .umb-group-builder__property-meta-description textarea { font-size: 12px; color: @grayDark; margin-bottom: 0; - min-width: 100%; + padding: 0; + width: 100%; min-height: 25px; box-sizing: border-box; resize: none; - position: relative; - left: -7px; overflow: hidden; border-color: transparent; background: transparent; @@ -391,9 +388,9 @@ input.umb-group-builder__group-sort-value { /* ---------- DIALOGS ---------- */ -.show-validation .editor-wrapper.ng-invalid-val-required-component .editor-placeholder { - border-color: @red; - color: @red; +.umb-overlay .show-validation .ng-invalid-val-required-component .editor-placeholder { + border-color: @red; + color: @red; } .content-type-editor-dialog.edit-property-settings { @@ -415,12 +412,14 @@ input.umb-group-builder__group-sort-value { border-color:transparent; box-shadow: none; width: 100%; - box-sizing: border-box; - margin-bottom: 10px; + box-sizing: border-box; + margin-bottom: 0; font-size: 16px; font-weight: bold; resize: none; line-height: 1.5em; + padding-left: 0; + border: none; &: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 index 339c15990f..d9c9b16f40 100644 --- 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 @@ -2,8 +2,13 @@ font-size: 13px; color: #ccc; position: relative; - display: flex; - align-items: center; + display: block; +} + +.umb-locked-field__wrapper { + display: flex; + align-items: center; + margin-bottom: 5px; } .umb-locked-field__toggle { @@ -27,7 +32,7 @@ input.umb-locked-field__input { background: rgba(255, 255, 255, 0); // if using transparent it will hide the text in safari - border-color:transparent; + border-color: transparent !important; font-size: 13px; margin-bottom: 0; color: #ccc; @@ -42,12 +47,3 @@ input.umb-locked-field__input:focus { input.umb-locked-field__input.-unlocked { color: #515151; } - -.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/forms/umb-validation-label.less b/src/Umbraco.Web.UI.Client/src/less/forms/umb-validation-label.less new file mode 100644 index 0000000000..52ea313829 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/less/forms/umb-validation-label.less @@ -0,0 +1,44 @@ +.umb-validation-label { + position: relative; + padding: 1px 5px; + background: @red; + color: white; + font-size: 10px; + line-height: 1.5em; +} + +.umb-validation-label:after { + bottom: 100%; + left: 10px; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: @red; + border-width: 4px; + margin-left: -4px; +} + +.umb-validation-label.-arrow-left { + margin-left: 10px; +} + +.umb-validation-label.-arrow-left:after { + right: 100%; + top: 50%; + left: auto; + bottom: auto; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-color: rgba(255, 255, 255, 0); + border-right-color: @red; + border-width: 4px; + margin-top: -4px; +} diff --git a/src/Umbraco.Web.UI.Client/src/less/panel.less b/src/Umbraco.Web.UI.Client/src/less/panel.less index b1184934a2..ba25d0e85d 100644 --- a/src/Umbraco.Web.UI.Client/src/less/panel.less +++ b/src/Umbraco.Web.UI.Client/src/less/panel.less @@ -384,6 +384,24 @@ right: 10px; } +.umb-panel-header-alias .umb-locked-field { + display: flex; + align-items: center; +} + +.umb-panel-header-alias .umb-locked-field, +.umb-panel-header-alias .umb-locked-field .umb-locked-field__wrapper { + margin-bottom: 0; +} + +.umb-panel-header-alias .umb-validation-label:after { + visibility: hidden; +} + +.umb-panel-header-alias .umb-locked-field:after { + display: none; +} + .umb-panel-header-icon.-placeholder { border: 1px dashed @grayLight; } diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/contenttypeeditor/propertysettings/propertysettings.html b/src/Umbraco.Web.UI.Client/src/views/common/overlays/contenttypeeditor/propertysettings/propertysettings.html index 64f895e291..19938ecbc7 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/contenttypeeditor/propertysettings/propertysettings.html +++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/contenttypeeditor/propertysettings/propertysettings.html @@ -1,17 +1,19 @@
-
+
-
+ name="propertyLabel" + ng-model="model.property.label" + placeholder="Enter a name..." + umb-auto-focus + focus-on-filled="true" + umb-auto-resize + required + overlay-submit-on-enter> + +
Required label
+
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html index 8636cdf803..f8c060b3df 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html @@ -42,8 +42,10 @@ umb-auto-resize required val-server-field="{{'Groups[' + $index + '].Name'}}" /> - - + +
+
+
@@ -110,8 +112,9 @@ umb-auto-resize required val-server-field="{{'Groups[' + $parent.$parent.$parent.$parent.$index + '].Properties[' + $index + '].Label'}}"> - - + +
+
Required label
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 d23f39361d..2865898588 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,25 +1,31 @@ - - - - - - +
- + + + + + + + + + + +
+ +
Required alias
+
Invalid alias
+
- - Invalid alias - From 58f21fb028874c8411f8f4d88ec7e55425986a5d Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 28 Oct 2015 09:51:00 +0100 Subject: [PATCH 4/6] make sub view icon red if it has validation errors --- .../validation/valsubview.directive.js | 49 +++++++++++++++++++ .../components/umb-editor-navigation.less | 4 ++ .../editor/umb-editor-navigation.html | 13 +++-- .../editor/umb-editor-sub-views.html | 12 +++-- 4 files changed, 71 insertions(+), 7 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/validation/valsubview.directive.js diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/validation/valsubview.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/validation/valsubview.directive.js new file mode 100644 index 0000000000..916b933063 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/common/directives/validation/valsubview.directive.js @@ -0,0 +1,49 @@ +/** +* @ngdoc directive +* @name umbraco.directives.directive:valSubView +* @restrict A +* @description Used to show validation warnings for a editor sub view to indicate that the section content has validation errors in its data. +* In order for this directive to work, the valFormManager directive must be placed on the containing form. +**/ +(function() { + 'use strict'; + + function valSubViewDirective() { + + function link(scope, el, attr, ctrl) { + + var valFormManager = ctrl[1]; + scope.subView.hasError = false; + + //listen for form validation changes + valFormManager.onValidationStatusChanged(function (evt, args) { + if (!args.form.$valid) { + + var subViewContent = el.find(".ng-invalid"); + + if (subViewContent.length > 0) { + scope.subView.hasError = true; + } else { + scope.subView.hasError = false; + } + + } + else { + scope.subView.hasError = false; + } + }); + + } + + var directive = { + require: ['^form', '^valFormManager'], + restrict: "A", + link: link + }; + + return directive; + } + + angular.module('umbraco.directives').directive('valSubView', valSubViewDirective); + +})(); diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less index 3783efa45a..b5e7cf7bed 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less @@ -24,6 +24,10 @@ color: @blue; } +.show-validation .umb-sub-views-nav-item.-has-error { + color: @red; +} + .umb-sub-views-nav-item .icon { font-size: 24px; display: block; diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation.html index b9f36e6169..ec3260b646 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation.html @@ -1,10 +1,15 @@ diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-sub-views.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-sub-views.html index c53d74176f..6327e9f310 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-sub-views.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-sub-views.html @@ -1,4 +1,10 @@
-
-
-
\ No newline at end of file +
+
+
From b632beb06717bdc96563c03f21cead62d502749b Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 3 Nov 2015 10:13:02 +0100 Subject: [PATCH 5/6] set title attr on alias input --- .../src/views/components/umb-locked-field.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 2865898588..dca8a01ef8 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 @@ -20,7 +20,8 @@ val-regex="{{regexValidation}}" umb-auto-resize required - val-server-field="{{serverValidationField}}" /> + val-server-field="{{serverValidationField}}" + title="{{model}}" /> From 06a1899edfdcd6dd1d2bbb10b0fa7ef9d4b35753 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 6 Nov 2015 11:49:01 +0100 Subject: [PATCH 6/6] clear alias when name is empty --- .../components/umbGenerateAlias.directive.js | 40 ++++++++++++------- 1 file changed, 26 insertions(+), 14 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbGenerateAlias.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbGenerateAlias.directive.js index 2fadc76173..26164baccb 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbGenerateAlias.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbGenerateAlias.directive.js @@ -11,9 +11,10 @@ angular.module("umbraco.directives") }, link: function (scope, element, attrs, ctrl) { - var unbindWatcher = function(){}; + var eventBindings = []; var bindWatcher = true; var generateAliasTimeout = ""; + var updateAlias = false; scope.locked = true; scope.placeholderText = "Enter alias..."; @@ -24,17 +25,21 @@ angular.module("umbraco.directives") $timeout.cancel(generateAliasTimeout); } - if( value !== undefined && value !== "") { + if( value !== undefined && value !== "" && value !== null) { scope.alias = "Generating Alias..."; generateAliasTimeout = $timeout(function () { + updateAlias = true; entityResource.getSafeAlias(value, true).then(function (safeAlias) { - scope.alias = safeAlias.alias; + if(updateAlias) { + scope.alias = safeAlias.alias; + } }); }, 500); } else { + updateAlias = true; scope.alias = ""; scope.placeholderText = "Enter alias..."; } @@ -42,26 +47,33 @@ angular.module("umbraco.directives") } // if alias gets unlocked - stop watching alias - scope.$watch('locked', function(newValue, oldValue){ + eventBindings.push(scope.$watch('locked', function(newValue, oldValue){ if(newValue === false) { - unbindWatcher(); - bindWatcher = false; + bindWatcher = false; } - }); + })); // validate custom entered alias - scope.$watch('alias', function(newValue, oldValue){ + eventBindings.push(scope.$watch('alias', function(newValue, oldValue){ if(scope.alias === "" && bindWatcher === true || scope.alias === null && bindWatcher === true) { // add watcher - unbindWatcher = scope.$watch('aliasFrom', function(newValue, oldValue) { - if (newValue !== undefined && newValue !== null) { - generateAlias(newValue); - } - }); + eventBindings.push(scope.$watch('aliasFrom', function(newValue, oldValue) { + if(bindWatcher) { + generateAlias(newValue); + } + })); } - }); + })); + + // clean up + scope.$on('$destroy', function(){ + // unbind watchers + for(var e in eventBindings) { + eventBindings[e](); + } + }); } };