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

Merge pull request #8613 from umbraco/v8/feature/block_list_highlight_validation_issues_for_content

Browse Source 
UI for highlighting validation issues
This commit is contained in:
Warren Buckley
2020-08-11 17:55:09 +01:00
committed by GitHub
parent bd1aac7b36 5d73949b7a
commit f7e0303a6f
6 changed files with 139 additions and 12 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); }
}
}
}
}
}

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

@@ -99,11 +99,54 @@ ng-form.ng-invalid-val-server-match-settings > .umb-block-list__block > .umb-blo
}
.umb-block-list__block--content {
position: relative;
width: 100%;
min-height: @umb-block-list__item_minimum_height;
background-color: @white;
border-radius: @baseBorderRadius;
> div {
position: relative;
width: 100%;
min-height: @umb-block-list__item_minimum_height;
background-color: @white;
border-radius: @baseBorderRadius;
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 {

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

@@ -3,7 +3,7 @@
<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}"
ng-class="{'blockelement__draggable-element': vm.layout.$block.config.stylesheet, '--show-validation': vm.layout.$block.showValidation === true}"
view="{{vm.layout.$block.view}}"
api="vm.blockEditorApi"
block="vm.layout.$block"

1
src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbBlockListPropertyEditor.component.js
View File

@@ -235,6 +235,7 @@
// TODO: Why is there a '/' prefixed? that means this will never work with virtual directories
block.view = (block.config.view ? "/" + block.config.view : getDefaultViewForBlock(block));
block.showValidation = block.config.view ? true : false;
block.hideContentInOverlay = block.config.forceHideContentEditorInOverlay === true || inlineEditing === true;
block.showSettings = block.config.settingsElementTypeKey != null;