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

Validate alias + editor in property settings dialog. Move locked field styles to it's own file.

Browse Source
This commit is contained in:
Mads Rasmussen
2015-08-03 10:07:23 +02:00
parent cd7597b586
commit 8e78e91543
7 changed files with 124 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/Umbraco.Web.UI.Client/src/common/directives/components/umbvalidatecomponent.directive.js Normal file
View File

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

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

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

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

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

39
src/Umbraco.Web.UI.Client/src/less/components/umb-locked-field.less Normal file
View File

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

13
src/Umbraco.Web.UI.Client/src/less/property-editors.less
View File

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

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

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

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

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