badrihippo/convo
badrihippo/convo
1
0
Fork 0
Code Issues 7 Pull requests Packages Projects 1 Releases Wiki Activity

Update ListItem to support full features (including images)

Browse source 
There are actually three kinds of list-item classes in the
kaios-native-ui stylesheet: ordinary, with indicator (a little
caret pointing to the side), and with icon (which lets you set an
image such as a profile picture, hint hint). Till now the ListItem
implementation had mixed it up a little, using the indicator
styles for an ordinary non-indicator list. Now, the code has been
revamped to properly support all three.
This commit is contained in:
Badri Sunderarajan 2024-03-24 21:46:31 +05:30
parent be74fc8e43
commit e63d9978bb
Signed by: badrihippo
GPG key ID: 9F594532AD60DE03
1 changed files with 49 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
src/components/ListItem.svelte
View file

@ -2,6 +2,7 @@
export let text = 'List Item'
export let subtext = ''
export let indicator = false
export let image
export let tabindex = -1
export let autofocus = false
export let fullheight = false
@ -9,23 +10,54 @@
</script>
<div
class="list-item-indicator focusable{fullheight ? ' fullheight' : ''}"
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 text}
<p class="list-item-indicator__text">{text}</p>
{/if}
{#if subtext}
<p class="list-item-indicator__subtext">{subtext}</p>
{/if}
{#if indicator}
<span class="list-item-indicator__indicator"></span>
{#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;
@ -37,6 +69,10 @@
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;
@ -44,6 +80,10 @@
}
/* 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;