From a29c1967333023066d7a106e7eb6323f23d61588 Mon Sep 17 00:00:00 2001
From: Jos de Jong <wjosdejong@gmail.com>
Date: Thu, 30 Jul 2020 14:55:49 +0200
Subject: [PATCH] Only show validation error on parent when collapsed

---
 src/components/JSONNode.scss   |  2 +-
 src/components/JSONNode.svelte | 38 ++++++++++++++++++----------------
 2 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/components/JSONNode.scss b/src/components/JSONNode.scss
index a5bf456..928e2ec 100644
--- a/src/components/JSONNode.scss
+++ b/src/components/JSONNode.scss
@@ -238,5 +238,5 @@ div.empty {
 
 .validation-error {
   color: $warning-color;
-  padding-left: $input-padding;
+  padding: 0 $input-padding;
 }
diff --git a/src/components/JSONNode.svelte b/src/components/JSONNode.svelte
index 1646d98..4536c14 100644
--- a/src/components/JSONNode.svelte
+++ b/src/components/JSONNode.svelte
@@ -378,15 +378,16 @@
         <div class="delimiter">[</div>
         <button class="tag" on:click={handleExpand}>{value.length} items</button>
         <div class="delimiter">]</div>
-      {/if}
-      {#if validationError}
-        <!-- FIXME: implement proper tooltip -->
-        <div 
-          class='validation-error' 
-          title={validationError.isChildError ? 'Contains invalid items' : validationError.message}
-        >
-          <Icon data={faExclamationTriangle} />
-        </div>
+        {#if validationError}
+          <!-- FIXME: implement proper tooltip -->
+          <button
+            class='validation-error' 
+            title={validationError.isChildError ? 'Contains invalid items' : validationError.message}
+            on:click={handleExpand}
+          >
+            <Icon data={faExclamationTriangle} />
+          </button>
+        {/if}
       {/if}
     </div>
     {#if expanded}
@@ -456,15 +457,16 @@
         <span class="delimiter"> &#123;</span>
         <button class="tag" on:click={handleExpand}>{Object.keys(value).length} props</button>
         <span class="delimiter">&rbrace;</span>
-      {/if}
-      {#if validationError}
-        <!-- FIXME: implement proper tooltip -->
-        <div 
-          class='validation-error' 
-          title={validationError.isChildError ? 'Contains invalid properties' : validationError.message}
-        >
-          <Icon data={faExclamationTriangle} />
-        </div>
+        {#if validationError}
+          <!-- FIXME: implement proper tooltip -->
+          <button 
+            class='validation-error' 
+            title={validationError.isChildError ? 'Contains invalid properties' : validationError.message}
+            on:click={handleExpand}
+          >
+            <Icon data={faExclamationTriangle} />
+          </button>
+        {/if}
       {/if}
     </div>
     {#if expanded}