add icons
This commit is contained in:
etstringy
parent
e5d8cafd25
commit
b062153098
33 changed files with 599 additions and 50 deletions
|
|
@ -34,6 +34,9 @@
|
|||
title={label}
|
||||
aria-label={label}
|
||||
on:click={() => click()}>
|
||||
<span class="icon">
|
||||
<slot name="icon" />
|
||||
</span>
|
||||
<slot/>
|
||||
</button>
|
||||
|
||||
|
|
@ -45,7 +48,6 @@
|
|||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
font-family: inherit;
|
||||
|
|
@ -131,4 +133,17 @@
|
|||
|
||||
button.disabled:active {
|
||||
}
|
||||
|
||||
.icon:not(:empty) {
|
||||
height: 150%;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.icon :global(svg) {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.centered .icon {
|
||||
margin-right: 0px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import Logo from '$lib/../img/CampfireLogo.svelte';
|
||||
import Logo from '$lib/../img/campfire-logo.svg';
|
||||
import Button from './Button.svelte';
|
||||
import Feed from './Feed.svelte';
|
||||
import { Client } from '$lib/client/client.js';
|
||||
|
|
@ -8,6 +8,18 @@
|
|||
import { goto } from '$app/navigation';
|
||||
import { get } from 'svelte/store';
|
||||
|
||||
import TimelineIcon from '../../img/icons/timeline.svg';
|
||||
import NotificationsIcon from '../../img/icons/notifications.svg';
|
||||
import ExploreIcon from '../../img/icons/explore.svg';
|
||||
import ListIcon from '../../img/icons/lists.svg';
|
||||
import FavouritesIcon from '../../img/icons/like_fill.svg';
|
||||
import BookmarkIcon from '../../img/icons/bookmark.svg';
|
||||
import HashtagIcon from '../../img/icons/hashtag.svg';
|
||||
import PostIcon from '../../img/icons/post.svg';
|
||||
import InfoIcon from '../../img/icons/info.svg';
|
||||
import SettingsIcon from '../../img/icons/settings.svg';
|
||||
import LogoutIcon from '../../img/icons/logout.svg';
|
||||
|
||||
const VERSION = APP_VERSION;
|
||||
|
||||
let client = false;
|
||||
|
|
@ -44,36 +56,85 @@
|
|||
</header>
|
||||
{:else}
|
||||
<header class="instance-header">
|
||||
<Logo />
|
||||
<div class="app-logo">
|
||||
<Logo />
|
||||
</div>
|
||||
</header>
|
||||
{/if}
|
||||
|
||||
<div id="nav-items">
|
||||
<Button label="Timeline" on:click={() => goTimeline()} active={client.user}>🖼️ Timeline</Button>
|
||||
<Button label="Timeline" on:click={() => goTimeline()} active={client.user}>
|
||||
<svelte:fragment slot="icon">
|
||||
<TimelineIcon/>
|
||||
</svelte:fragment>
|
||||
Timeline
|
||||
</Button>
|
||||
<Button label="Notifications" disabled>
|
||||
🔔 Notifications
|
||||
<svelte:fragment slot="icon">
|
||||
<NotificationsIcon/>
|
||||
</svelte:fragment>
|
||||
Notifications
|
||||
{#if notification_count}
|
||||
<span class="notification-count">{notification_count}</span>
|
||||
{/if}
|
||||
</Button>
|
||||
<Button label="Explore" disabled>🌍 Explore</Button>
|
||||
<Button label="Lists" disabled>🗒️ Lists</Button>
|
||||
<Button label="Explore" disabled>
|
||||
<svelte:fragment slot="icon">
|
||||
<ExploreIcon height="auto"/>
|
||||
</svelte:fragment>
|
||||
Explore
|
||||
</Button>
|
||||
<Button label="Lists" disabled>
|
||||
<svelte:fragment slot="icon">
|
||||
<ListIcon/>
|
||||
</svelte:fragment>
|
||||
Lists
|
||||
</Button>
|
||||
|
||||
<div class="flex-row">
|
||||
<Button centered label="Favourites" disabled>⭐</Button>
|
||||
<Button centered label="Bookmarks" disabled>🔖</Button>
|
||||
<Button centered label="Hashtags" disabled>#</Button>
|
||||
<Button centered label="Favourites" disabled>
|
||||
<svelte:fragment slot="icon">
|
||||
<FavouritesIcon/>
|
||||
</svelte:fragment>
|
||||
</Button>
|
||||
<Button centered label="Bookmarks" disabled>
|
||||
<svelte:fragment slot="icon">
|
||||
<BookmarkIcon/>
|
||||
</svelte:fragment>
|
||||
</Button>
|
||||
<Button centered label="Hashtags" disabled>
|
||||
<svelte:fragment slot="icon">
|
||||
<HashtagIcon/>
|
||||
</svelte:fragment>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Button filled label="Post" disabled>✏️ Post</Button>
|
||||
<Button filled label="Post" disabled>
|
||||
<svelte:fragment slot="icon">
|
||||
<PostIcon/>
|
||||
</svelte:fragment>
|
||||
Post
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{#if (client.user)}
|
||||
<div id="account-items">
|
||||
<div class="flex-row">
|
||||
<Button centered label="Profile information" disabled>ℹ️</Button>
|
||||
<Button centered label="Settings" disabled>⚙️</Button>
|
||||
<Button centered label="Log out" on:click={() => log_out()}>🚪</Button>
|
||||
<Button centered label="Profile information" disabled>
|
||||
<svelte:fragment slot="icon">
|
||||
<InfoIcon/>
|
||||
</svelte:fragment>
|
||||
</Button>
|
||||
<Button centered label="Settings" disabled>
|
||||
<svelte:fragment slot="icon">
|
||||
<SettingsIcon/>
|
||||
</svelte:fragment>
|
||||
</Button>
|
||||
<Button centered label="Log out" on:click={() => log_out()}>
|
||||
<svelte:fragment slot="icon">
|
||||
<LogoutIcon/>
|
||||
</svelte:fragment>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div id="account-button">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div id="widgets">
|
||||
<input type="text" id="search" placeholder="🔍 Search">
|
||||
<input type="text" id="search" placeholder="Search">
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -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