feat: show tag with array item count also when expanded

josdejong · Dec 8, 2021 · b427fe7 · b427fe7
1 parent 10fdedd
commit b427fe7
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/src/lib/components/modes/treemode/JSONNode.scss b/src/lib/components/modes/treemode/JSONNode.scss
@@ -183,25 +183,27 @@
   font-size: $font-size-small;
   font-family: $font-family;
   color: $white;
+  background: $light-gray-transparent;
   border-radius: 2px;
   cursor: pointer;
   position: relative;
-}
-
-.tag {
+  display: inline-block;
   padding: 0 4px 1px;
   margin: 0 2px;
-  position: relative;
   top: 1px;
 
   height: $line-height - 2px;
   line-height: $line-height - 4px;
 
-  background: $light-gray-transparent;
-
   &:hover {
     background: lighten($light-gray-transparent, 15%);
   }
+
+  &.readonly {
+    color: $light-gray-transparent;
+    background: $background-gray;
+    cursor: inherit;
+  }
 }
 
 .identifier {

diff --git a/src/lib/components/modes/treemode/JSONNode.svelte b/src/lib/components/modes/treemode/JSONNode.svelte
@@ -297,6 +297,9 @@
           <div class="meta-inner" data-type="selectable-value">
             {#if expanded}
               <div class="bracket expanded">[</div>
+              <span class="tag readonly">
+                {value.length} items
+              </span>
             {:else}
               <div class="bracket">[</div>
               <button type="button" class="tag" on:click={handleExpand}>

diff --git a/src/lib/components/modes/treemode/json-node-selected-mixin.scss b/src/lib/components/modes/treemode/json-node-selected-mixin.scss
@@ -62,6 +62,10 @@
         background-color: $selection-background !important;
       }
     }
+
+    .tag.readonly {
+      background: transparent;
+    }
   }
 
   .insert-area {