From 2af1feadfcd851dbfb067659edd38ef8e453c5fb Mon Sep 17 00:00:00 2001
From: Shannon <sdeminick@gmail.com>
Date: Thu, 16 Jul 2020 17:49:23 +1000
Subject: [PATCH] adds error styling

---
 .../inlineblock/inlineblock.editor.html       | 24 ++++++++++++-------
 .../inlineblock/inlineblock.editor.less       | 15 ++++++++----
 .../labelblock/labelblock.editor.html         |  2 +-
 .../labelblock/labelblock.editor.less         | 14 ++++++-----
 4 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.html
index 60b3542d6c..a76894ac51 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.html
@@ -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>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.less b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.less
index d07265f7db..babbcbf2b7 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.less
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.less
@@ -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;
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/labelblock/labelblock.editor.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/labelblock/labelblock.editor.html
index 90d0f4bcb4..6d3f139db2 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/labelblock/labelblock.editor.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/labelblock/labelblock.editor.html
@@ -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>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/labelblock/labelblock.editor.less b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/labelblock/labelblock.editor.less
index 0ebcfaea53..8e4709af5d 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/labelblock/labelblock.editor.less
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/labelblock/labelblock.editor.less
@@ -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;
+    }
 }