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

fix validation styling a bit

Browse Source
This commit is contained in:
Mads Rasmussen
2015-10-28 09:37:54 +01:00
parent 56e6eee852
commit ac0d47122c
8 changed files with 129 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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;

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

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>

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

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

@@ -1,25 +1,31 @@
<ng-form class="umb-locked-field">
<a ng-if="locked" href="" ng-click="unlock()" class="umb-locked-field__toggle">
<i class="umb-locked-field__lock-icon icon-lock"></i>
</a>
<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>
<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}}" />
</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>
<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>