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] 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); }
+                }
+            }
+        }
     }
 }