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

highlight validation issues for content part of blocks, first take.

Browse Source
This commit is contained in:
Niels Lyngsø
2020-08-07 16:11:13 +02:00
parent 35b6652949
commit 79478cd5e2
3 changed files with 89 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.html
View File

@@ -6,7 +6,7 @@
ng-focus="block.focus">
<span class="caret"></span>
<i class="icon {{block.content.icon}}"></i>
<span>{{block.label}}</span>
<span class="name">{{block.label}}</span>
</button>
<div class="blockelement-inlineblock-editor__inner" ng-class="{'--singleGroup':block.content.variants[0].tabs.length === 1}" ng-if="block.active === true">
<umb-element-editor-content model="block.content"></umb-element-editor-content>

53
src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.less
View File

@@ -22,6 +22,7 @@
background-color: white;
.caret {
vertical-align: middle;
transform: rotate(-90deg);
transition: transform 80ms ease-out;
}
@@ -32,7 +33,8 @@
vertical-align: middle;
}
span {
span.name {
position: relative;
display: inline-block;
vertical-align: middle;
}
@@ -54,10 +56,55 @@
}
}
&.--error {
border-color: @formErrorBorder !important;
ng-form.ng-invalid-val-server-match-content > .umb-block-list__block > .umb-block-list__block--content > div > & {
> button {
color: @formErrorText;
span.caret {
border-top-color: @formErrorText;
}
}
}
ng-form.ng-invalid-val-server-match-content > .umb-block-list__block:not(.--active) > .umb-block-list__block--content > div > & {
> button {
span.name {
&::after {
content: "!";
text-align: center;
position: absolute;
top: -6px;
right: -15px;
min-width: 10px;
color: @white;
background-color: @ui-active-type;
border: 2px solid @white;
border-radius: 50%;
font-size: 10px;
font-weight: bold;
padding: 2px;
line-height: 10px;
background-color: @formErrorText;
font-weight: 900;
animation-duration: 1.4s;
animation-iteration-count: infinite;
animation-name: blockelement-inlineblock-editor--badge-bounce;
animation-timing-function: ease;
@keyframes blockelement-inlineblock-editor--badge-bounce {
0% { transform: translateY(0); }
20% { transform: translateY(-4px); }
40% { transform: translateY(0); }
55% { transform: translateY(-2px); }
70% { transform: translateY(0); }
100% { transform: translateY(0); }
}
}
}
}
}
}
.blockelement-inlineblock-editor__inner {
border-top: 1px solid @gray-8;
background-color: @gray-12;

40
src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/labelblock/labelblock.editor.less
View File

@@ -24,6 +24,7 @@
}
span {
position: relative;
display: inline-block;
vertical-align: middle;
}
@@ -39,7 +40,42 @@
background-color: @ui-active;
}
&.--error {
border-color: @formErrorBorder !important;
ng-form.ng-invalid-val-server-match-content > .umb-block-list__block > .umb-block-list__block--content > div > & {
color: @formErrorText;
}
ng-form.ng-invalid-val-server-match-content > .umb-block-list__block:not(.--active) > .umb-block-list__block--content > div > & {
span {
&::after {
content: "!";
text-align: center;
position: absolute;
top: -6px;
right: -15px;
min-width: 10px;
color: @white;
background-color: @ui-active-type;
border: 2px solid @white;
border-radius: 50%;
font-size: 10px;
font-weight: bold;
padding: 2px;
line-height: 10px;
background-color: @formErrorText;
font-weight: 900;
animation-duration: 1.4s;
animation-iteration-count: infinite;
animation-name: blockelement-inlineblock-editor--badge-bounce;
animation-timing-function: ease;
@keyframes blockelement-inlineblock-editor--badge-bounce {
0% { transform: translateY(0); }
20% { transform: translateY(-4px); }
40% { transform: translateY(0); }
55% { transform: translateY(-2px); }
70% { transform: translateY(0); }
100% { transform: translateY(0); }
}
}
}
}
}