From c4769c8127ee3fcd307bf7ea522a880ea915dcc6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= Date: Tue, 23 Aug 2022 12:11:42 +0200 Subject: [PATCH] Refactor icon component MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Rūdolfs Ošiņš --- src/Clipboard.svelte | 8 +- src/Header.svelte | 4 +- src/Icon.svelte | 224 +++++++++++------- src/Profile.svelte | 11 +- src/ReactionSelector.svelte | 6 +- src/SeedAddress.svelte | 7 +- src/base/projects/Commit/CommitTeaser.svelte | 2 +- src/base/projects/PeerSelector.svelte | 6 +- .../projects/SourceBrowser/FileDiff.svelte | 4 +- src/utils.ts | 4 + 10 files changed, 174 insertions(+), 102 deletions(-) diff --git a/src/Clipboard.svelte b/src/Clipboard.svelte index f798fc205..c36532c8d 100644 --- a/src/Clipboard.svelte +++ b/src/Clipboard.svelte @@ -28,10 +28,10 @@ height: 24px; } .clipboard:hover :global(svg) { - stroke: var(--color-foreground-90); + fill: var(--color-foreground-90); } .clipboard:active :global(svg) { - stroke: var(--color-positive); + fill: var(--color-positive); } .clipboard:hover { border-radius: var(--border-radius); @@ -40,8 +40,8 @@ {#if small} - + {:else} - + {/if} diff --git a/src/Header.svelte b/src/Header.svelte index f048af82e..eb6467afb 100644 --- a/src/Header.svelte +++ b/src/Header.svelte @@ -225,7 +225,9 @@ {/if}
- + + +
diff --git a/src/Icon.svelte b/src/Icon.svelte index 29166d115..f903ff284 100644 --- a/src/Icon.svelte +++ b/src/Icon.svelte @@ -1,90 +1,152 @@ -{#if svg} - - - {@html svg.data} - - -{/if} + + {#if name === "browse"} + + {:else if name === "clipboard"} + + {:else if name === "clipboard-small"} + + {:else if name === "ellipsis"} + + {:else if name === "fork"} + + {:else if name === "github"} + + {:else if name === "url"} + + {:else if name === "twitter"} + + {:else} + {unreachable(name)} + {/if} + diff --git a/src/Profile.svelte b/src/Profile.svelte index 8d70b43dc..cedec90fc 100644 --- a/src/Profile.svelte +++ b/src/Profile.svelte @@ -129,8 +129,9 @@ } .url { display: flex; /* Ensures correct vertical positioning of icons */ - margin-right: 1rem; + margin-right: 0.5rem; height: 1.6rem; + align-items: center; } .members { margin-top: 2rem; @@ -199,21 +200,21 @@ {#if profile.url} - + - + {profile.url} {/if} {#if profile.twitter} - + {/if} {#if profile.github} - + {/if} diff --git a/src/ReactionSelector.svelte b/src/ReactionSelector.svelte index aa0adf7d1..600a89ed7 100644 --- a/src/ReactionSelector.svelte +++ b/src/ReactionSelector.svelte @@ -49,11 +49,7 @@
- + {#if showReactions}
{#each config.reactions as reaction} diff --git a/src/SeedAddress.svelte b/src/SeedAddress.svelte index 11d75bf7c..035087535 100644 --- a/src/SeedAddress.svelte +++ b/src/SeedAddress.svelte @@ -9,6 +9,11 @@ -
+
{seed.emoji} {#if full} diff --git a/src/base/projects/Commit/CommitTeaser.svelte b/src/base/projects/Commit/CommitTeaser.svelte index 5978aa0f6..c5ca74838 100644 --- a/src/base/projects/Commit/CommitTeaser.svelte +++ b/src/base/projects/Commit/CommitTeaser.svelte @@ -97,7 +97,7 @@ {formatCommit(commit.header.sha1)}
browseCommit(commit.header.sha1)}> - +
diff --git a/src/base/projects/PeerSelector.svelte b/src/base/projects/PeerSelector.svelte index 5b8a2281a..7277e90ec 100644 --- a/src/base/projects/PeerSelector.svelte +++ b/src/base/projects/PeerSelector.svelte @@ -38,7 +38,7 @@ } .selector .peer { cursor: pointer; - padding: 0.5rem 0.75rem; + padding: 0.5rem; color: var(--color-secondary); background-color: var(--color-secondary-background); border-radius: var(--border-radius-small); @@ -60,7 +60,7 @@ display: flex; align-items: center; font-family: var(--font-family-monospace); - padding: 0.5rem 0.75rem; + padding: 0.5rem; height: 2.125rem; background: var(--color-foreground-background); } @@ -69,7 +69,7 @@
- + {#if meta} {meta.person?.name ?? formatSeedId(meta.id)} diff --git a/src/base/projects/SourceBrowser/FileDiff.svelte b/src/base/projects/SourceBrowser/FileDiff.svelte index bc0bf6aa0..86f0ca6ac 100644 --- a/src/base/projects/SourceBrowser/FileDiff.svelte +++ b/src/base/projects/SourceBrowser/FileDiff.svelte @@ -146,7 +146,9 @@ {/if}
dispatch("browse", file.path)}> - + + +
{#if !collapsed} diff --git a/src/utils.ts b/src/utils.ts index fd206fd5b..1884ddc9b 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -701,3 +701,7 @@ export const lookupAddress = cache.cached( (address) => address, { max: 1000 } ); + +export const unreachable = (value: never): never => { + throw new Error(`Unreachable code: ${value}`); +};