diff --git a/src/JSONNode.scss b/src/JSONNode.scss index 68df794..c2dd531 100644 --- a/src/JSONNode.scss +++ b/src/JSONNode.scss @@ -124,6 +124,24 @@ } } +div.limit { + margin-left: $indentation-width; + + button { + background: none; + border: none; + padding: 0; + color: $black; + text-decoration: underline; + cursor: pointer; + + &:hover, + &:focus { + color: $red; + } + } +} + div.empty { &:not(:focus) { outline: 1px dotted lightgray; diff --git a/src/JSONNode.svelte b/src/JSONNode.svelte index 1b5c1d5..6ddab14 100644 --- a/src/JSONNode.svelte +++ b/src/JSONNode.svelte @@ -178,6 +178,10 @@ function handleShowAll () { onLimit(path, Infinity) } + + function handleShowMore () { + onLimit(path, (Math.round(limit / DEFAULT_LIMIT) + 1) * DEFAULT_LIMIT) + }
@@ -229,8 +233,8 @@ /> {/each} {#if limited} -
- (showing {limit} of {value.length} items ) +
+ (showing {limit} of {value.length} items )
{/if}
diff --git a/src/styles.scss b/src/styles.scss index 275c00c..da2bc19 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -7,6 +7,7 @@ $font-size-icon: 16px; $white: #fff; $black: #1A1A1A; +$red: #ee422e; $contentsMinHeight: 150px; $theme-color: #3883fa; $theme-color-light: lighten($theme-color, 5%);