Make it more obvious that multi select cells have overflow when using small line height
This commit is contained in:
parent
2f97787dfb
commit
91b2f4165d
4 changed files with 15 additions and 1 deletions
|
@ -19,6 +19,7 @@
|
||||||
export let updateValue = rows.actions.updateValue
|
export let updateValue = rows.actions.updateValue
|
||||||
export let invertX = false
|
export let invertX = false
|
||||||
export let invertY = false
|
export let invertY = false
|
||||||
|
export let contentLines = 1
|
||||||
|
|
||||||
const emptyError = writable(null)
|
const emptyError = writable(null)
|
||||||
|
|
||||||
|
@ -84,5 +85,6 @@
|
||||||
{readonly}
|
{readonly}
|
||||||
{invertY}
|
{invertY}
|
||||||
{invertX}
|
{invertX}
|
||||||
|
{contentLines}
|
||||||
/>
|
/>
|
||||||
</GridCell>
|
</GridCell>
|
||||||
|
|
|
@ -12,6 +12,7 @@
|
||||||
export let api
|
export let api
|
||||||
export let invertX = false
|
export let invertX = false
|
||||||
export let invertY = false
|
export let invertY = false
|
||||||
|
export let contentLines
|
||||||
|
|
||||||
let isOpen = false
|
let isOpen = false
|
||||||
let focusedOptionIdx = null
|
let focusedOptionIdx = null
|
||||||
|
@ -86,7 +87,11 @@
|
||||||
class:open
|
class:open
|
||||||
on:click|self={editable ? open : null}
|
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}
|
{#each values as val}
|
||||||
{@const color = getOptionColor(val)}
|
{@const color = getOptionColor(val)}
|
||||||
{#if color}
|
{#if color}
|
||||||
|
@ -160,6 +165,9 @@
|
||||||
grid-row-gap: var(--cell-padding);
|
grid-row-gap: var(--cell-padding);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: var(--cell-padding);
|
padding: var(--cell-padding);
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
}
|
||||||
|
.values.wrap {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
.text {
|
.text {
|
||||||
|
|
|
@ -15,6 +15,7 @@
|
||||||
selectedCellMap,
|
selectedCellMap,
|
||||||
focusedRow,
|
focusedRow,
|
||||||
columnHorizontalInversionIndex,
|
columnHorizontalInversionIndex,
|
||||||
|
contentLines,
|
||||||
} = getContext("grid")
|
} = getContext("grid")
|
||||||
|
|
||||||
$: rowSelected = !!$selectedRows[row._id]
|
$: rowSelected = !!$selectedRows[row._id]
|
||||||
|
@ -44,6 +45,7 @@
|
||||||
focused={$focusedCellId === cellId}
|
focused={$focusedCellId === cellId}
|
||||||
selectedUser={$selectedCellMap[cellId]}
|
selectedUser={$selectedCellMap[cellId]}
|
||||||
width={column.width}
|
width={column.width}
|
||||||
|
contentLines={$contentLines}
|
||||||
/>
|
/>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -21,6 +21,7 @@
|
||||||
focusedRow,
|
focusedRow,
|
||||||
scrollLeft,
|
scrollLeft,
|
||||||
dispatch,
|
dispatch,
|
||||||
|
contentLines,
|
||||||
} = getContext("grid")
|
} = getContext("grid")
|
||||||
|
|
||||||
$: rowCount = $rows.length
|
$: rowCount = $rows.length
|
||||||
|
@ -85,6 +86,7 @@
|
||||||
selectedUser={$selectedCellMap[cellId]}
|
selectedUser={$selectedCellMap[cellId]}
|
||||||
width={$stickyColumn.width}
|
width={$stickyColumn.width}
|
||||||
column={$stickyColumn}
|
column={$stickyColumn}
|
||||||
|
contentLines={$contentLines}
|
||||||
/>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue