Browse Source

Add smart trunctation to all table cell types

pull/1338/head
Andrew Kingston 5 years ago
parent
commit
604d02cb4e
  1. 21
      packages/standard-components/src/table/AttachmentRenderer.svelte
  2. 21
      packages/standard-components/src/table/RelationshipRenderer.svelte
  3. 1
      packages/standard-components/src/table/StringRenderer.svelte
  4. 2
      packages/standard-components/src/table/Table.svelte

21
packages/standard-components/src/table/AttachmentRenderer.svelte

@ -1,15 +1,20 @@
<script>
export let value
const displayLimit = 5
$: attachments = value?.slice(0, displayLimit) ?? []
$: leftover = (value?.length ?? 0) - attachments.length
</script>
{#if value && value.length}
{#each value as attachment}
{#if attachment.type.startsWith('image')}
<img src={attachment.url} alt={attachment.extension} />
{:else}
<div class="file">{attachment.extension}</div>
{/if}
{/each}
{#each attachments as attachment}
{#if attachment.type.startsWith('image')}
<img src={attachment.url} alt={attachment.extension} />
{:else}
<div class="file">{attachment.extension}</div>
{/if}
{/each}
{#if leftover}
<div>+{leftover} others</div>
{/if}
<style>

21
packages/standard-components/src/table/RelationshipRenderer.svelte

@ -2,14 +2,19 @@
import "@spectrum-css/label/dist/index-vars.css"
export let value
const displayLimit = 5
$: relationships = value?.slice(0, displayLimit) ?? []
$: leftover = (value?.length ?? 0) - relationships.length
</script>
{#if value && value.length}
{#each value as item}
{#if item && item.primaryDisplay}
<span class="spectrum-Label spectrum-Label--grey">
{item.primaryDisplay}
</span>
{/if}
{/each}
{#each relationships as relationship}
{#if relationship?.primaryDisplay}
<span class="spectrum-Label spectrum-Label--grey">
{relationship.primaryDisplay}
</span>
{/if}
{/each}
{#if leftover}
<div>+{leftover} others</div>
{/if}

1
packages/standard-components/src/table/StringRenderer.svelte

@ -8,5 +8,6 @@
div {
overflow: hidden;
text-overflow: ellipsis;
max-width: 320px;
}
</style>

2
packages/standard-components/src/table/Table.svelte

@ -192,8 +192,6 @@
justify-content: flex-start;
align-items: center;
gap: 4px;
max-width: 320px;
overflow: hidden;
}
.spectrum-Table-sortedIcon {
opacity: 0;

Loading…
Cancel
Save