Skip to content

Commit

Permalink
Use new button styling for header buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@rudolfs
rudolfs committed Sep 12, 2024
1 parent 7c1f0fb commit 33e0b52
Show file tree
Hide file tree
Showing 4 changed files with 502 additions and 24 deletions.
42 changes: 19 additions & 23 deletions src/components/Header.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
<script lang="ts">
import Border from "./Border.svelte";
import Icon from "./Icon.svelte";
import NakedButton from "./NakedButton.svelte";
import OutlineButton from "./OutlineButton.svelte";
import Popover from "./Popover.svelte";
import ThemeSwitch from "./ThemeSwitch.svelte";
</script>
Expand All @@ -20,10 +22,6 @@
gap: 0.5rem;
padding: 0 0.5rem;
}
.navigation :global(svg:hover) {
display: flex;
color: var(--color-fill-secondary);
}
.bottom-pixel-corners {
position: absolute;
top: 0;
Expand Down Expand Up @@ -56,39 +54,37 @@

<div class="header global-flex">
<div class="wrapper global-flex">
<div class="wrapper-left global-flex">
<div class="global-flex navigation" style:gap="0.5rem">
<Icon
name="arrow-left"
<div class="wrapper-left global-flex" style:gap="0">
<div class="global-flex" style:gap="0">
<NakedButton
variant="ghost"
onclick={() => {
window.history.back();
}} />
<Icon
name="arrow-right"
}}>
<Icon name="arrow-left" />
</NakedButton>
<NakedButton
variant="ghost"
onclick={() => {
window.history.forward();
}} />
}}>
<Icon name="arrow-right" />
</NakedButton>
</div>
<slot name="icon-left" />
</div>

<slot name="center" />

<div class="global-flex" style:gap="0.5rem">
<Border variant="ghost" stylePadding="0 0.5rem" styleHeight="32px">
<OutlineButton variant="ghost">
<Icon name="offline" />
<span class="txt-small txt-semibold">Offline</span>
</Border>
Offline
</OutlineButton>
<Popover popoverPositionRight="0" popoverPositionTop="3rem">
<Border
slot="toggle"
let:toggle
onclick={toggle}
variant="ghost"
stylePadding="0 0.25rem"
styleHeight="32px">
<NakedButton variant="ghost" slot="toggle" let:toggle onclick={toggle}>
<Icon name="more-vertical" />
</Border>
</NakedButton>
<Border variant="ghost" slot="popover" stylePadding="0.5rem 1rem">
<div style="display: flex; gap: 2rem; align-items: center;">
Theme <ThemeSwitch />
Expand Down
228 changes: 228 additions & 0 deletions src/components/NakedButton.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,228 @@
<script lang="ts">
export let variant: "primary" | "secondary" | "ghost";
export let onclick: (() => void) | undefined = undefined;
$: style =
`--button-color-1: var(--color-fill-${variant});` +
`--button-color-2: var(--color-fill-${variant}-hover);` +
`--button-color-3: var(--color-fill-${variant}-shade);` +
// The ghost colors are called --color-fill-counter and --color-fill-counter-emphasized.
`--button-color-4: var(--color-fill${variant === "ghost" ? "" : `-${variant}`}-counter)`;
</script>

<style>
.pixel {
background-color: transparent;
}
.p1-1 {
grid-area: p1-1;
}
.p1-2 {
grid-area: p1-2;
}
.p1-3 {
grid-area: p1-3;
}
.p1-4 {
grid-area: p1-4;
}
.p1-5 {
grid-area: p1-5;
}
.p2-1 {
grid-area: p2-1;
}
.p2-2 {
grid-area: p2-2;
}
.p2-3 {
grid-area: p2-3;
}
.p2-4 {
grid-area: p2-4;
}
.p2-5 {
grid-area: p2-5;
}
.p3-1 {
grid-area: p3-1;
}
.p3-2 {
grid-area: p3-2;
}
.p3-3 {
grid-area: p3-3;
padding: 2px 8px;
display: flex;
align-items: center;
gap: 0.5rem;
}
.p3-4 {
grid-area: p3-4;
}
.p3-5 {
grid-area: p3-5;
}
.p4-1 {
grid-area: p4-1;
}
.p4-2 {
grid-area: p4-2;
}
.p4-3 {
grid-area: p4-3;
}
.p4-4 {
grid-area: p4-4;
}
.p4-5 {
grid-area: p4-5;
}
.p5-1 {
grid-area: p5-1;
}
.p5-2 {
grid-area: p5-2;
}
.p5-3 {
grid-area: p5-3;
}
.p5-4 {
grid-area: p5-4;
}
.p5-5 {
grid-area: p5-5;
}
.container:hover .p1-3 {
background-color: var(--button-color-1);
}
.container:hover .p2-2 {
background-color: var(--button-color-1);
}
.container:hover .p2-4 {
background-color: var(--button-color-1);
}
.container:hover .p3-1 {
background-color: var(--button-color-1);
}
.container:hover .p3-5 {
background-color: var(--button-color-1);
}
.container:hover .p4-2 {
background-color: var(--button-color-1);
}
.container:hover .p4-4 {
background-color: var(--button-color-1);
}
.container:hover .p5-3 {
background-color: var(--button-color-1);
}
.container:active .p1-3 {
background-color: var(--button-color-1);
}
.container:active .p2-2 {
background-color: var(--button-color-1);
}
.container:active .p2-3 {
background-color: var(--button-color-3);
}
.container:active .p2-4 {
background-color: var(--button-color-1);
}
.container:active .p3-1 {
background-color: var(--button-color-1);
}
.container:active .p3-2 {
background-color: var(--button-color-3);
}
.container:active .p3-3 {
background-color: var(--button-color-1);
}
.container:active .p3-4 {
background-color: var(--button-color-2);
}
.container:active .p3-5 {
background-color: var(--button-color-1);
}
.container:active .p4-2 {
background-color: var(--button-color-1);
}
.container:active .p4-3 {
background-color: var(--button-color-2);
}
.container:active .p4-4 {
background-color: var(--button-color-1);
}
.container:active .p5-3 {
background-color: var(--button-color-1);
}
.container {
height: 32px;
cursor: pointer;
white-space: nowrap;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
column-gap: 0;
row-gap: 0;
display: grid;
grid-template-columns: 2px 2px auto 2px 2px;
grid-template-rows: 2px 2px auto 2px 2px;
grid-template-areas:
"p1-1 p1-2 p1-3 p1-4 p1-5"
"p2-1 p2-2 p2-3 p2-4 p2-5"
"p3-1 p3-2 p3-3 p3-4 p3-5"
"p4-1 p4-2 p4-3 p4-4 p4-5"
"p5-1 p5-2 p5-3 p5-4 p5-5";
}
</style>

<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="container" {onclick} role="button" tabindex="0" {style}>
<div class="pixel p1-1"></div>
<div class="pixel p1-2"></div>
<div class="pixel p1-3"></div>
<div class="pixel p1-4"></div>
<div class="pixel p1-5"></div>

<div class="pixel p2-1"></div>
<div class="pixel p2-2"></div>
<div class="pixel p2-3"></div>
<div class="pixel p2-4"></div>
<div class="pixel p2-5"></div>

<div class="pixel p3-1"></div>
<div class="pixel p3-2"></div>
<div class="pixel p3-3 txt-semibold txt-small"><slot /></div>
<div class="pixel p3-4"></div>
<div class="pixel p3-5"></div>

<div class="pixel p4-1"></div>
<div class="pixel p4-2"></div>
<div class="pixel p4-3"></div>
<div class="pixel p4-4"></div>
<div class="pixel p4-5"></div>

<div class="pixel p5-1"></div>
<div class="pixel p5-2"></div>
<div class="pixel p5-3"></div>
<div class="pixel p5-4"></div>
<div class="pixel p5-5"></div>
</div>
Loading

0 comments on commit 33e0b52

Please sign in to comment.