Skip to content

Commit

Permalink
feat: dynamic share button on drip lists
Browse files Browse the repository at this point in the history
  • Loading branch information
efstajas committed Jul 21, 2023
1 parent 73d08ad commit 1cafcf3
Show file tree
Hide file tree
Showing 3 changed files with 86 additions and 0 deletions.
2 changes: 2 additions & 0 deletions src/lib/components/drip-list-card/drip-list-card.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
import StreamStateBadge from '../stream-state-badge/stream-state-badge.svelte';
import formatTokenAmount from '$lib/utils/format-token-amount';
import tokensStore from '$lib/stores/tokens/tokens.store';
import ShareButton from '../share-button/share-button.svelte';
export let dripList: DripList;
export let representationalSplits: RepresentationalSplits;
Expand Down Expand Up @@ -74,6 +75,7 @@
<div class="header">
<h1>{dripList.name}</h1>
<div class="actions">
<ShareButton url="https://drips.network/app/drip-lists/{dripList.account.accountId}" />
{#if isOwnList}
<Button on:click={triggerEditModal} icon={Pen}>Edit list</Button>
{/if}
Expand Down
79 changes: 79 additions & 0 deletions src/lib/components/share-button/share-button.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
<script lang="ts">
import { browser } from '$app/environment';
import LinkIcon from 'radicle-design-system/icons/Link.svelte';
import ShareIcon from 'radicle-design-system/icons/Sharrow.svelte';
import CopyIcon from 'radicle-design-system/icons/Copy.svelte';
import CheckCircle from 'radicle-design-system/icons/CheckCircle.svelte';
import { fade } from 'svelte/transition';
export let text: string | undefined = undefined;
export let url: string;
let shareSupported = browser && navigator.share;
function handleClick() {
if (shareSupported) {
navigator.share({
text,
url,
});
} else {
// Copy URL to clipboard
navigator.clipboard.writeText(url);
copySuccess = true;
setTimeout(() => (copySuccess = false), 1000);
}
}
let hovering = false;
let copySuccess = false;
</script>

{#if shareSupported}
<button on:click={handleClick}>
<ShareIcon />
</button>
{:else}
<button
on:mouseenter={() => (hovering = true)}
on:focus={() => (hovering = true)}
on:mouseleave={() => (hovering = false)}
on:blur={() => (hovering = false)}
on:click={handleClick}
class:copy-success={copySuccess}
>
{#if copySuccess}
<div transition:fade|local={{ duration: 200 }}>
<CheckCircle style="fill: var(--color-positive)" />
</div>
{:else if hovering}
<div transition:fade|local={{ duration: 200 }}>
<CopyIcon style="fill: var(--color-primary-level-6)" />
</div>
{:else}
<div transition:fade|local={{ duration: 200 }}><LinkIcon /></div>
{/if}
</button>
{/if}

<style>
button {
height: 2rem;
width: 2rem;
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
border-radius: 1rem;
}
button > * {
position: absolute;
}
button:hover:not(.copy-success),
button:focus-visible:not(.copy-success) {
background-color: var(--color-primary-level-1);
}
</style>
5 changes: 5 additions & 0 deletions src/routes/app/(app)/component-showcase/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
import SplitsIcon from 'radicle-design-system/icons/Splits.svelte';
import DripsLogo from '$lib/components/header/drips-logo.svelte';
import HeadMeta from '$lib/components/head-meta/head-meta.svelte';
import ShareButton from '$lib/components/share-button/share-button.svelte';
// Button
let disabled = false;
Expand Down Expand Up @@ -231,6 +232,10 @@

<h1>Component showcase</h1>

<div class="showcase-item">
<ShareButton url="https://wikipedia.com/" text="Check this out:" />
</div>

<div class="showcase-item">
<h2>Visual Percentage Editor</h2>
<VisualPercentageEditor
Expand Down

0 comments on commit 1cafcf3

Please sign in to comment.