Make it more obvious that multi select cells have overflow when using small line height

This commit is contained in:
Andrew Kingston 2023-04-25 14:28:18 +01:00
parent 2f97787dfb
commit 91b2f4165d
4 changed files with 15 additions and 1 deletions

View File

@ -19,6 +19,7 @@
export let updateValue = rows.actions.updateValue
export let invertX = false
export let invertY = false
export let contentLines = 1
const emptyError = writable(null)
@ -84,5 +85,6 @@
{readonly}
{invertY}
{invertX}
{contentLines}
/>
</GridCell>

View File

@ -12,6 +12,7 @@
export let api
export let invertX = false
export let invertY = false
export let contentLines
let isOpen = false
let focusedOptionIdx = null
@ -86,7 +87,11 @@
class:open
on:click|self={editable ? open : null}
>
<div class="values" on:click={editable ? open : null}>
<div
class="values"
class:wrap={contentLines > 1}
on:click={editable ? open : null}
>
{#each values as val}
{@const color = getOptionColor(val)}
{#if color}
@ -160,6 +165,9 @@
grid-row-gap: var(--cell-padding);
overflow: hidden;
padding: var(--cell-padding);
flex-wrap: nowrap;
}
.values.wrap {
flex-wrap: wrap;
}
.text {

View File

@ -15,6 +15,7 @@
selectedCellMap,
focusedRow,
columnHorizontalInversionIndex,
contentLines,
} = getContext("grid")
$: rowSelected = !!$selectedRows[row._id]
@ -44,6 +45,7 @@
focused={$focusedCellId === cellId}
selectedUser={$selectedCellMap[cellId]}
width={column.width}
contentLines={$contentLines}
/>
{/each}
</div>

View File

@ -21,6 +21,7 @@
focusedRow,
scrollLeft,
dispatch,
contentLines,
} = getContext("grid")
$: rowCount = $rows.length
@ -85,6 +86,7 @@
selectedUser={$selectedCellMap[cellId]}
width={$stickyColumn.width}
column={$stickyColumn}
contentLines={$contentLines}
/>
{/if}
</div>