From 79478cd5e2d0aeb091379ae662c49c05613b1405 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Fri, 7 Aug 2020 16:11:13 +0200
Subject: [PATCH 1/2] highlight validation issues for content part of blocks,
 first take.

---
 .../inlineblock/inlineblock.editor.html       |  2 +-
 .../inlineblock/inlineblock.editor.less       | 53 +++++++++++++++++--
 .../labelblock/labelblock.editor.less         | 40 +++++++++++++-
 3 files changed, 89 insertions(+), 6 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 360eeed8c0..e5a46cbdeb 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
@@ -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>
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 2be20946b8..08306deeba 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
@@ -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;
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 51fb7242ef..f589249f97 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
@@ -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); }
+                }
+            }
+        }
     }
 }

From 5d73949b7a75ad1ee923ce75d6be84c3dbe9a515 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Mon, 10 Aug 2020 11:37:39 +0200
Subject: [PATCH 2/2] validation highlight for custom view

---
 .../umb-block-list-property-editor.less       | 53 +++++++++++++++++--
 .../blocklist/umb-block-list-row.html         |  2 +-
 .../umbBlockListPropertyEditor.component.js   |  1 +
 3 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-property-editor.less b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-property-editor.less
index 0c92aef44b..0c7d58d245 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-property-editor.less
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-property-editor.less
@@ -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 {
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-row.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-row.html
index b76a5d583d..c2657985cf 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-row.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-row.html
@@ -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"
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbBlockListPropertyEditor.component.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbBlockListPropertyEditor.component.js
index 89f7c5d4d0..0f6d4d2bb0 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbBlockListPropertyEditor.component.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbBlockListPropertyEditor.component.js
@@ -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;