Badri Sunderarajan
be8d93e946
In our case, "list icons" usually means "avatars" so think "rounded avatars, except the currently selected one which remains square". This makes things look a bit more polished, but still allow you to properly see the full avatar when you actually need to.
100 lines
2.2 KiB
Svelte
100 lines
2.2 KiB
Svelte
<script>
|
|
export let text = 'List Item'
|
|
export let subtext = ''
|
|
export let indicator = false
|
|
export let image = undefined
|
|
export let tabindex = -1
|
|
export let autofocus = false
|
|
export let fullheight = false
|
|
export let onclick = () => {}
|
|
</script>
|
|
|
|
<div
|
|
class="focusable"
|
|
class:fullheight={fullheight}
|
|
class:list-item={!indicator && !image}
|
|
class:list-item-indicator={indicator}
|
|
class:list-item-icon={image}
|
|
{tabindex}
|
|
{autofocus}
|
|
on:click={onclick}
|
|
>
|
|
{#if image}
|
|
<img
|
|
class="list-item-icon__icon"
|
|
src={image.src}
|
|
alt={image.alt}
|
|
/>
|
|
{#if text || subtext}
|
|
<div class="list-item-icon__text-container">
|
|
{#if text}
|
|
<p class="list-item-icon__text">{text}</p>
|
|
{/if}
|
|
{#if subtext}
|
|
<p class="list-item-icon__subtext">{subtext}</p>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
{:else if indicator}
|
|
{#if text}
|
|
<p class="list-item-indicator__text">{text}</p>
|
|
{/if}
|
|
{#if subtext}
|
|
<p class="list-item-indicator__subtext">{subtext}</p>
|
|
{/if}
|
|
<span class="list-item-indicator__indicator"></span>
|
|
{:else}
|
|
{#if text}
|
|
<p class="list-item__text">{text}</p>
|
|
{/if}
|
|
{#if subtext}
|
|
<p class="list-item__subtext">{subtext}</p>
|
|
{/if}
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.list-item__text,
|
|
.list-item__subtext,
|
|
.list-item-icon__text,
|
|
.list-item-icon__subtext,
|
|
.list-item-indicator__text,
|
|
.list-item-indicator__subtext {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.fullheight {
|
|
height: auto;
|
|
min-height: 6rem;
|
|
}
|
|
|
|
.fullheight .list-item__text,
|
|
.fullheight .list-item__subtext,
|
|
.fullheight .list-item-icon__text,
|
|
.fullheight .list-item-icon__subtext,
|
|
.fullheight .list-item-indicator__text,
|
|
.fullheight .list-item-indicator__subtext {
|
|
white-space: normal;
|
|
overflow: auto;
|
|
}
|
|
|
|
/* Override the first-letter capitalisation of kaios-native-ui */
|
|
.list-item__text::first-letter,
|
|
.list-item__subtext::first-letter,
|
|
.list-item-icon__text::first-letter,
|
|
.list-item-icon__subtext::first-letter,
|
|
.list-item-indicator__text::first-letter,
|
|
.list-item-indicator__subtext::first-letter {
|
|
text-transform: none;
|
|
}
|
|
|
|
/* Make all but the selected icon rounded */
|
|
.list-item-icon__icon {
|
|
border-radius: 0.6rem;
|
|
}
|
|
|
|
.list-item-icon:focus .list-item-icon__icon {
|
|
border-radius: 0;
|
|
}
|
|
</style>
|