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

adds error styling

Browse Source
This commit is contained in:
Shannon
2020-07-16 17:49:23 +10:00
parent b7e25eed21
commit 2af1feadfc
4 changed files with 34 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,10 +1,16 @@
<div class="blockelement-inlineblock-editor" ng-controller="Umbraco.PropertyEditors.BlockEditor.InlineBlockEditor as vm">
<button type="button" class="btn-reset umb-outline blockelement__draggable-element" ng-click="vm.openBlock(block)" ng-focus="block.focus">
<span class="caret"></span>
<i class="icon {{block.content.icon}}"></i>
<span>{{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>
<ng-form name="blockRowForm" val-server-match="{ 'contains' : block.content.key }">
<div class="blockelement-inlineblock-editor"
ng-controller="Umbraco.PropertyEditors.BlockEditor.InlineBlockEditor as vm"
ng-class="{ '--error': blockRowForm.$invalid }">
<button type="button" class="btn-reset umb-outline blockelement__draggable-element"
ng-click="vm.openBlock(block)"
ng-focus="block.focus">
<span class="caret"></span>
<i class="icon {{block.content.icon}}"></i>
<span>{{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>
</div>
</div>
</div>
</ng-form>

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

@@ -1,5 +1,4 @@
.blockelement-inlineblock-editor {
display: block;
margin-bottom: 4px;
margin-top: 4px;
@@ -14,25 +13,24 @@
> button {
width: 100%;
min-height: 48px;
cursor: pointer;
color: @ui-action-discreet-type;
text-align: left;
padding-left: 10px;
padding-bottom: 2px;
user-select: none;
.caret {
transform: rotate(-90deg);
transition: transform 80ms ease-out;
}
i {
font-size: 22px;
display: inline-block;
vertical-align: middle;
}
span {
display: inline-block;
vertical-align: middle;
@@ -47,12 +45,19 @@
.umb-block-list__block.--active & {
border-color: @gray-8;
box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.05);
> button {
> .caret {
transform: rotate(0deg);
}
}
}
&.--error {
color: @ui-active-type;
border-color: @ui-active;
background-color: @ui-active;
}
}
.blockelement-inlineblock-editor__inner {
border-top: 1px solid @gray-8;

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

@@ -2,7 +2,7 @@
<button type="button" class="btn-reset umb-outline blockelement-labelblock-editor blockelement__draggable-element"
ng-click="api.editBlock(block, block.hideContentInOverlay, index)"
ng-focus="block.focus"
ng-class="{ '--active': block.active || blockRowForm.$invalid }"
ng-class="{ '--active': block.active, '--error': blockRowForm.$invalid }"
val-server-property-class="">
<i class="icon {{block.content.icon}}"></i>
<span>{{block.label}}</span>

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

@@ -1,5 +1,4 @@
.blockelement-labelblock-editor {
position: relative;
display: block;
margin-bottom: 4px;
@@ -8,24 +7,21 @@
min-height: 48px;
border: 1px solid @gray-9;
border-radius: @baseBorderRadius;
cursor: pointer;
color: @ui-action-discreet-type;
text-align: left;
padding-left: 20px;
padding-bottom: 2px;
user-select: none;
transition: border-color 120ms;
i {
font-size: 22px;
margin-right: 5px;
display: inline-block;
vertical-align: middle;
}
span {
display: inline-block;
vertical-align: middle;
@@ -41,4 +37,10 @@
border-color: @ui-active;
background-color: @ui-active;
}
&.--error {
color: @ui-active-type;
border-color: @ui-active;
background-color: @ui-active;
}
}