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

moved validation indication one element up.

Browse Source
This commit is contained in:
Niels Lyngsø
2020-08-27 22:23:51 +02:00
parent b2b9acf540
commit 459403eb9a
2 changed files with 41 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-property-editor.less
View File

@@ -38,6 +38,45 @@
opacity: 1;
}
}
&.--show-validation {
ng-form.ng-invalid-val-server-match-content > & {
border: 2px solid @formErrorText;
border-radius: @baseBorderRadius;
&::after {
content: "!";
position: absolute;
top: -12px;
right: -12px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
font-size: 13px;
text-align: center;
font-weight: bold;
background-color: @errorBackground;
color: @errorText;
border: 2px solid @white;
font-weight: 900;
animation-duration: 1.4s;
animation-iteration-count: infinite;
animation-name: umb-block-list__block--content--badge-bounce;
animation-timing-function: ease;
@keyframes umb-block-list__block--content--badge-bounce {
0% { transform: translateY(0); }
20% { transform: translateY(-6px); }
40% { transform: translateY(0); }
55% { transform: translateY(-3px); }
70% { transform: translateY(0); }
100% { transform: translateY(0); }
}
}
}
}
}
ng-form.ng-invalid-val-server-match-settings > .umb-block-list__block > .umb-block-list__block--actions {
opacity: 1;
@@ -109,44 +148,6 @@ ng-form.ng-invalid-val-server-match-settings > .umb-block-list__block > .umb-blo
box-sizing: border-box;
}
&.--show-validation {
ng-form.ng-invalid-val-server-match-content > .umb-block-list__block > & > div {
border: 2px solid @formErrorText;
border-radius: @baseBorderRadius;
&::after {
content: "!";
position: absolute;
top: -12px;
right: -12px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
font-size: 13px;
text-align: center;
font-weight: bold;
background-color: @errorBackground;
color: @errorText;
border: 2px solid @white;
font-weight: 900;
animation-duration: 1.4s;
animation-iteration-count: infinite;
animation-name: umb-block-list__block--content--badge-bounce;
animation-timing-function: ease;
@keyframes umb-block-list__block--content--badge-bounce {
0% { transform: translateY(0); }
20% { transform: translateY(-6px); }
40% { transform: translateY(0); }
55% { transform: translateY(-3px); }
70% { transform: translateY(0); }
100% { transform: translateY(0); }
}
}
}
}
}
.blockelement__draggable-element {

4
src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-row.html
View File

@@ -1,9 +1,9 @@
<ng-form name="vm.blockRowForm" val-server-match="{ 'contains' : { 'valServerMatchContent': vm.layout.$block.content.key, 'valServerMatchSettings': vm.layout.$block.settings.key } }">
<div class="umb-block-list__block" ng-class="{'--active':vm.layout.$block.active}">
<div class="umb-block-list__block" ng-class="{'--active':vm.layout.$block.active, '--show-validation': vm.layout.$block.showValidation === true}">
<umb-block-list-block stylesheet="{{::vm.layout.$block.config.stylesheet}}"
class="umb-block-list__block--content"
ng-class="{'blockelement__draggable-element': vm.layout.$block.config.stylesheet, '--show-validation': vm.layout.$block.showValidation === true}"
ng-class="{'blockelement__draggable-element': vm.layout.$block.config.stylesheet}"
view="{{vm.layout.$block.view}}"
api="vm.blockEditorApi"
block="vm.layout.$block"