add icons
This commit is contained in:
parent
e5d8cafd25
commit
9ba2e89f5b
33 changed files with 599 additions and 50 deletions
|
|
@ -29,7 +29,11 @@
|
|||
title="{title}"
|
||||
on:click={click}>
|
||||
<span class="icon">
|
||||
<slot/>
|
||||
{#if active}
|
||||
<slot name="activeIcon"/>
|
||||
{:else}
|
||||
<slot/>
|
||||
{/if}
|
||||
</span>
|
||||
{#if count}
|
||||
<span class="count">{count}</span>
|
||||
|
|
@ -38,10 +42,11 @@
|
|||
|
||||
<style>
|
||||
button {
|
||||
height: 32px;
|
||||
/* height: 32px; */
|
||||
padding: 6px 8px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-family: inherit;
|
||||
font-size: 1em;
|
||||
|
|
@ -54,8 +59,7 @@
|
|||
}
|
||||
|
||||
button.active {
|
||||
background-color: color-mix(in srgb, transparent, var(--accent) 50%);
|
||||
color: var(--bg-1000);
|
||||
background-color: color-mix(in srgb, transparent, var(--accent) 50%);
|
||||
}
|
||||
|
||||
button:not(.disabled):hover {
|
||||
|
|
@ -74,8 +78,8 @@
|
|||
}
|
||||
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -13,6 +13,14 @@
|
|||
import * as api from '../../client/api.js';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
import ReplyIcon from '../../../img/icons/reply.svg';
|
||||
import RepostIcon from '../../../img/icons/repost.svg';
|
||||
import FavouriteIcon from '../../../img/icons/like.svg';
|
||||
import FavouriteIconFill from '../../../img/icons/like_fill.svg';
|
||||
import ReactIcon from '../../../img/icons/react.svg';
|
||||
import QuoteIcon from '../../../img/icons/quote.svg';
|
||||
import MoreIcon from '../../../img/icons/more.svg';
|
||||
|
||||
export let post_data;
|
||||
export let focused = false;
|
||||
|
||||
|
|
@ -125,12 +133,30 @@
|
|||
{/each}
|
||||
</div>
|
||||
<div class="post-actions" aria-label="Post actions" on:click|stopPropagation on:keydown|stopPropagation>
|
||||
<ActionButton type="reply" label="Reply" bind:count={post.reply_count} sound="post" disabled>🗨️</ActionButton>
|
||||
<ActionButton type="boost" label="Boost" on:click={toggleBoost} bind:active={post.boosted} bind:count={post.boost_count} sound="boost">🔁</ActionButton>
|
||||
<ActionButton type="favourite" label="Favourite" on:click={toggleFavourite} bind:active={post.favourited} bind:count={post.favourite_count}>⭐</ActionButton>
|
||||
<ActionButton type="react" label="React" disabled>😃</ActionButton>
|
||||
<ActionButton type="quote" label="Quote" disabled>🗣️</ActionButton>
|
||||
<ActionButton type="more" label="More" disabled>🛠️</ActionButton>
|
||||
<ActionButton type="reply" label="Reply" bind:count={post.reply_count} sound="post" disabled>
|
||||
<ReplyIcon/>
|
||||
</ActionButton>
|
||||
<ActionButton type="boost" label="Boost" on:click={toggleBoost} bind:active={post.boosted} bind:count={post.boost_count} sound="boost">
|
||||
<RepostIcon/>
|
||||
<svelte:fragment slot="activeIcon">
|
||||
<RepostIcon/>
|
||||
</svelte:fragment>
|
||||
</ActionButton>
|
||||
<ActionButton type="favourite" label="Favourite" on:click={toggleFavourite} bind:active={post.favourited} bind:count={post.favourite_count}>
|
||||
<FavouriteIcon/>
|
||||
<svelte:fragment slot="activeIcon">
|
||||
<FavouriteIconFill/>
|
||||
</svelte:fragment>
|
||||
</ActionButton>
|
||||
<ActionButton type="react" label="React" disabled>
|
||||
<ReactIcon/>
|
||||
</ActionButton>
|
||||
<ActionButton type="quote" label="Quote" disabled>
|
||||
<QuoteIcon/>
|
||||
</ActionButton>
|
||||
<ActionButton type="more" label="More" disabled>
|
||||
<MoreIcon/>
|
||||
</ActionButton>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -18,15 +18,15 @@
|
|||
</script>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class={[
|
||||
type="button"
|
||||
class={[
|
||||
type,
|
||||
active ? "active" : "",
|
||||
disabled ? "disabled" : "",
|
||||
].join(' ')}
|
||||
aria-label="{label}"
|
||||
title="{title}"
|
||||
on:click={click}>
|
||||
aria-label="{label}"
|
||||
title="{title}"
|
||||
on:click={click}>
|
||||
<span class="icon">
|
||||
<slot/>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,14 @@
|
|||
import * as api from '../../client/api.js';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
import ReplyIcon from '../../../img/icons/reply.svg';
|
||||
import RepostIcon from '../../../img/icons/repost.svg';
|
||||
import FavouriteIcon from '../../../img/icons/like.svg';
|
||||
import FavouriteIconFill from '../../../img/icons/like_fill.svg';
|
||||
import ReactIcon from '../../../img/icons/react.svg';
|
||||
import QuoteIcon from '../../../img/icons/quote.svg';
|
||||
import MoreIcon from '../../../img/icons/more.svg';
|
||||
|
||||
export let post;
|
||||
let time_string = post.created_at.toLocaleString();
|
||||
let aria_label = post.user.username + '; ' + post.text + '; ' + post.created_at;
|
||||
|
|
@ -107,12 +115,30 @@
|
|||
{/each}
|
||||
</div>
|
||||
<div class="post-actions" aria-label="Post actions" on:click|stopPropagation on:keydown|stopPropagation>
|
||||
<ActionButton type="reply" label="Reply" bind:count={post.reply_count} sound="post" disabled>🗨️</ActionButton>
|
||||
<ActionButton type="boost" label="Boost" on:click={toggleBoost} bind:active={post.boosted} bind:count={post.boost_count} sound="boost">🔁</ActionButton>
|
||||
<ActionButton type="favourite" label="Favourite" on:click={toggleFavourite} bind:active={post.favourited} bind:count={post.favourite_count}>⭐</ActionButton>
|
||||
<ActionButton type="react" label="React" disabled>😃</ActionButton>
|
||||
<ActionButton type="quote" label="Quote" disabled>🗣️</ActionButton>
|
||||
<ActionButton type="more" label="More" disabled>🛠️</ActionButton>
|
||||
<ActionButton type="reply" label="Reply" bind:count={post.reply_count} sound="post" disabled>
|
||||
<ReplyIcon/>
|
||||
</ActionButton>
|
||||
<ActionButton type="boost" label="Boost" on:click={toggleBoost} bind:active={post.boosted} bind:count={post.boost_count} sound="boost">
|
||||
<RepostIcon/>
|
||||
<svelte:fragment slot="activeIcon">
|
||||
<RepostIcon/>
|
||||
</svelte:fragment>
|
||||
</ActionButton>
|
||||
<ActionButton type="favourite" label="Favourite" on:click={toggleFavourite} bind:active={post.favourited} bind:count={post.favourite_count}>
|
||||
<FavouriteIcon/>
|
||||
<svelte:fragment slot="activeIcon">
|
||||
<FavouriteIconFill/>
|
||||
</svelte:fragment>
|
||||
</ActionButton>
|
||||
<ActionButton type="react" label="React" disabled>
|
||||
<ReactIcon/>
|
||||
</ActionButton>
|
||||
<ActionButton type="quote" label="Quote" disabled>
|
||||
<QuoteIcon/>
|
||||
</ActionButton>
|
||||
<ActionButton type="more" label="More" disabled>
|
||||
<MoreIcon/>
|
||||
</ActionButton>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue