yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #843 from umbraco/temp-U4-7224

Browse Source 
Temp u4 7224 - clean up content type editor validation styling
This commit is contained in:
Claus Jensen
2015-11-06 12:58:57 +01:00
parent 16126c2b4e 06a1899edf
commit 33d7292cb1
14 changed files with 232 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/Umbraco.Web.UI.Client/src/common/directives/components/umbGenerateAlias.directive.js
View File

@@ -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]();
}
});
}
};

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

@@ -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() {

49
src/Umbraco.Web.UI.Client/src/common/directives/validation/valsubview.directive.js Normal file
View File

@@ -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);
})();

1
src/Umbraco.Web.UI.Client/src/less/belle.less
View File

@@ -75,6 +75,7 @@
@import "dragdrop.less";
@import "dashboards.less";
@import "forms/umb-validation-label.less";
// Umbraco Components
@import "components/editor.less";

4
src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less
View File

@@ -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;

27
src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less
View File

@@ -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;

23
src/Umbraco.Web.UI.Client/src/less/components/umb-locked-field.less
View File

@@ -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,11 +32,12 @@
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;
border-color: transparent !important;
font-size: 13px;
margin-bottom: 0;
color: #ccc;
transition: color 0.25s;
padding: 0;
}
input.umb-locked-field__input:focus {
@@ -41,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%);
}

44
src/Umbraco.Web.UI.Client/src/less/forms/umb-validation-label.less Normal file
View File

@@ -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;
}

18
src/Umbraco.Web.UI.Client/src/less/panel.less
View File

@@ -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;
}

22
src/Umbraco.Web.UI.Client/src/views/common/overlays/contenttypeeditor/propertysettings/propertysettings.html
View File

@@ -1,17 +1,19 @@
<div class="content-type-editor-dialog edit-property-settings" ng-controller="Umbraco.Overlay.PropertySettingsOverlay as vm">
<div class="umb-control-group">
<div class="control-group -no-margin">
<div class="control-group">
<textarea class="editor-label"
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></textarea>
</div>
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>
</textarea>
<div class="umb-validation-label" val-msg-for="propertyLabel" val-toggle-msg="required">Required label</div>
</div>
<div class="control-group -no-margin">
<umb-generate-alias enable-lock="true" alias-from="model.property.label" alias="model.property.alias"></umb-generate-alias>
</div>

13
src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation.html
View File

@@ -1,10 +1,15 @@
<div>
<ul class="umb-sub-views-nav" ng-if="showNavigation">
<li ng-repeat="item in navigation">
<a tabindex="-1" class="umb-sub-views-nav-item" href="" ng-click="clickNavigationItem(item)" hotkey="{{$index+1}}" ng-class="{'is-active': item.active}">
<i class="icon {{ item.icon }}"></i>
<span class="umb-sub-views-nav-item-text">{{ item.name }}</span>
</a>
<a tabindex="-1"
class="umb-sub-views-nav-item"
href=""
ng-click="clickNavigationItem(item)"
hotkey="{{$index+1}}"
ng-class="{'is-active': item.active, '-has-error': item.hasError}">
<i class="icon {{ item.icon }}"></i>
<span class="umb-sub-views-nav-item-text">{{ item.name }}</span>
</a>
</li>
</ul>
</div>

12
src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-sub-views.html
View File

@@ -1,4 +1,10 @@
<div class="umb-editor-sub-views">
<div ng-repeat="sub in subViews" ng-include="sub.view" ng-show="activeView.name == sub.name" ng-class="'sub-view-' + sub.name"></div>
<div ng-if="!activeView.view && activeView.active" ng-transclude></div>
</div>
<div
id="sub-view-{{$index}}"
ng-repeat="subView in subViews"
ng-include="subView.view"
ng-show="activeView.name == subView.name"
ng-class="'sub-view-' + subView.name"
val-sub-view>
</div>
</div>

11
src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
View File

@@ -42,8 +42,10 @@
umb-auto-resize
required
val-server-field="{{'Groups[' + $index + '].Name'}}" />
<span class="help-inline" val-msg-for="groupName" val-toggle-msg="valServerField"></span>
<div class="umb-validation-label -arrow-left" val-msg-for="groupName" val-toggle-msg="valServerField"></div>
<div class="umb-validation-label -arrow-left" val-msg-for="groupName" val-toggle-msg="required"><localize key="required"></localize></div>
</div>
</ng-form>
@@ -110,8 +112,9 @@
umb-auto-resize
required
val-server-field="{{'Groups[' + $parent.$parent.$parent.$parent.$index + '].Properties[' + $index + '].Label'}}"></textarea>
<span class="help-inline" val-msg-for="groupName" val-toggle-msg="valServerField"></span>
<div class="umb-validation-label" val-msg-for="groupName" val-toggle-msg="valServerField"></div>
<div class="umb-validation-label" val-msg-for="groupName" val-toggle-msg="required">Required label</div>
</div>
<div class="umb-group-builder__property-meta-description">

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

@@ -1,27 +1,32 @@
<div class="umb-locked-field">
<ng-form>
<a ng-if="locked" href="" ng-click="unlock()" class="umb-locked-field__toggle">
<i class="umb-locked-field__lock-icon icon-lock"></i>
</a>
<ng-form class="umb-locked-field">
<a ng-if="!locked" href="" ng-click="lock()" class="umb-locked-field__toggle">
<i class="umb-locked-field__lock-icon icon-unlocked -unlocked"></i>
</a>
<div class="umb-locked-field__wrapper">
<input type="text"
class="umb-locked-field__input"
name="lockedField"
ng-model="model"
ng-disabled="locked"
ng-class="{'-unlocked': !locked}"
placeholder="{{placeholderText}}"
val-regex="{{regexValidation}}"
umb-auto-resize
required
val-server-field="{{serverValidationField}}" />
<a ng-if="locked" href="" ng-click="unlock()" class="umb-locked-field__toggle">
<i class="umb-locked-field__lock-icon icon-lock"></i>
</a>
<span class="validation-label" val-msg-for="lockedField" val-toggle-msg="required"><localize key="required" /></span>
<span ng-if="regexValidation.length > 0" class="validation-label" val-msg-for="lockedField" val-toggle-msg="valRegex">Invalid alias</span>
<span ng-if="serverValidationField.length > 0" class="validation-label" val-msg-for="lockedField" val-toggle-msg="valServerField"></span>
</ng-form>
</div>
<a ng-if="!locked" href="" ng-click="lock()" class="umb-locked-field__toggle">
<i class="umb-locked-field__lock-icon icon-unlocked -unlocked"></i>
</a>
<input type="text"
class="umb-locked-field__input"
name="lockedField"
ng-model="model"
ng-disabled="locked"
ng-class="{'-unlocked': !locked}"
placeholder="{{placeholderText}}"
val-regex="{{regexValidation}}"
umb-auto-resize
required
val-server-field="{{serverValidationField}}"
title="{{model}}" />
</div>
<div class="umb-validation-label" val-msg-for="lockedField" val-toggle-msg="required">Required alias</div>
<div ng-if="regexValidation.length > 0" class="umb-validation-label" val-msg-for="lockedField" val-toggle-msg="valRegex">Invalid alias</div>
<div ng-if="serverValidationField.length > 0" class="umb-validation-label" val-msg-for="lockedField" val-toggle-msg="valServerField"></div>
</ng-form>