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

validation highlight for custom view

Browse Source
This commit is contained in:
Niels Lyngsø
2020-08-10 11:37:39 +02:00
parent 79478cd5e2
commit 5d73949b7a
3 changed files with 50 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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;