Skip to content

Commit f27974c

Browse files
rudolfsrudolfs
committed
Add sidebar
1 parent a5601e7 commit f27974c

File tree

14 files changed

+542
-253
lines changed

14 files changed

+542
-253
lines changed

‎public/index.css

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,96 @@ body {
3434
align-items: center;
3535
gap: 0.5rem;
3636
}
37+
38+
.global-tab {
39+
padding-left: 0.5rem;
40+
border-left: 1px solid var(--color-fill-ghost-hover);
41+
margin-left: 1rem;
42+
flex-direction: column;
43+
justify-content: space-between;
44+
align-items: flex-start;
45+
column-gap: 0.5rem;
46+
}
47+
48+
.global-counter {
49+
display: flex;
50+
align-items: center;
51+
justify-content: center;
52+
background-color: var(--color-fill-ghost-hover);
53+
clip-path: var(--1px-corner-fill);
54+
height: 1.5rem;
55+
padding: 0 0.5rem;
56+
min-width: 1.5rem;
57+
}
58+
59+
:root {
60+
--1px-corner-fill: polygon(
61+
0 2px,
62+
2px 2px,
63+
2px 0,
64+
calc(100% - 2px) 0,
65+
calc(100% - 2px) 2px,
66+
100% 2px,
67+
100% calc(100% - 2px),
68+
calc(100% - 2px) calc(100% - 2px),
69+
calc(100% - 2px) calc(100% - 2px),
70+
calc(100% - 2px) 100%,
71+
2px 100%,
72+
2px calc(100% - 2px),
73+
0 calc(100% - 2px)
74+
);
75+
76+
--2px-corner-fill: polygon(
77+
0 4px,
78+
2px 4px,
79+
2px 2px,
80+
4px 2px,
81+
4px 0,
82+
calc(100% - 4px) 0,
83+
calc(100% - 4px) 2px,
84+
calc(100% - 2px) 2px,
85+
calc(100% - 2px) 4px,
86+
100% 4px,
87+
100% calc(100% - 4px),
88+
calc(100% - 2px) calc(100% - 4px),
89+
calc(100% - 2px) calc(100% - 2px),
90+
calc(100% - 4px) calc(100% - 2px),
91+
calc(100% - 4px) 100%,
92+
4px 100%,
93+
4px calc(100% - 2px),
94+
2px calc(100% - 2px),
95+
2px calc(100% - 4px),
96+
0 calc(100% - 4px)
97+
);
98+
99+
--3px-corner-fill: polygon(
100+
0 6px,
101+
2px 6px,
102+
2px 4px,
103+
4px 4px,
104+
4px 2px,
105+
6px 2px,
106+
6px 0,
107+
calc(100% - 6px) 0,
108+
calc(100% - 6px) 2px,
109+
calc(100% - 4px) 2px,
110+
calc(100% - 4px) 4px,
111+
calc(100% - 2px) 4px,
112+
calc(100% - 2px) 6px,
113+
100% 6px,
114+
100% calc(100% - 6px),
115+
calc(100% - 2px) calc(100% - 6px),
116+
calc(100% - 2px) calc(100% - 4px),
117+
calc(100% - 4px) calc(100% - 4px),
118+
calc(100% - 4px) calc(100% - 2px),
119+
calc(100% - 6px) calc(100% - 2px),
120+
calc(100% - 6px) 100%,
121+
6px 100%,
122+
6px calc(100% - 2px),
123+
4px calc(100% - 2px),
124+
4px calc(100% - 4px),
125+
2px calc(100% - 4px),
126+
2px calc(100% - 6px),
127+
0 calc(100% - 6px)
128+
);
129+
}

‎src/components/Avatar.svelte

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -23,22 +23,7 @@
2323
background-repeat: no-repeat;
2424
width: 1rem;
2525
height: 1rem;
26-
clip-path: polygon(
27-
0 2px,
28-
2px 2px,
29-
2px 0,
30-
calc(100% - 2px) 0,
31-
calc(100% - 2px) 2px,
32-
100% 2px,
33-
100% calc(100% - 2px),
34-
calc(100% - 2px) calc(100% - 2px),
35-
calc(100% - 2px) calc(100% - 2px),
36-
calc(100% - 2px) 100%,
37-
2px 100%,
38-
2px calc(100% - 2px),
39-
0 calc(100% - 2px)
40-
);
41-
background-color: red;
26+
clip-path: var(--1px-corner-fill);
4227
}
4328
</style>
4429

‎src/components/Fill.svelte

Lines changed: 0 additions & 106 deletions
This file was deleted.

‎src/components/Icon.svelte

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
| "plus"
2525
| "repo"
2626
| "seedling"
27+
| "seedling-filled"
2728
| "settings"
2829
| "sidebar"
2930
| "sun"
@@ -355,6 +356,35 @@
355356
<path d="M7.33301 8V7L6.33301 7L6.33301 8H7.33301Z" />
356357
<path d="M7.33301 9L7.33301 7L6.33301 7L6.33301 9H7.33301Z" />
357358
<path d="M6.33301 10V9H5.33301L5.33301 10H6.33301Z" />
359+
{:else if name === "seedling-filled"}
360+
<path d="M10 6H9V5L10 5V6Z" />
361+
<path d="M11 5L10 5V4L11 4V5Z" />
362+
<path d="M12 4H11L11 3L12 3L12 4Z" />
363+
<path d="M13 4L12 4L12 3L13 3L13 4Z" />
364+
<path d="M14 5L13 5V4L14 4V5Z" />
365+
<path d="M13 6H12V5H13V6Z" />
366+
<path d="M5 7L5 6L4 6L4 7L5 7Z" />
367+
<path d="M4 8V7L3 7L3 8L4 8Z" />
368+
<path d="M3 9L3 8L2 8L2 9H3Z" />
369+
<path d="M3 10L3 9H2L2 10H3Z" />
370+
<path d="M4 11L4 10H3L3 11L4 11Z" />
371+
<path d="M10 7H9L9 6H10L10 7Z" />
372+
<path d="M9 8H8V7L9 7L9 8Z" />
373+
<path d="M8 8H7V7H8V8Z" />
374+
<path d="M11 8L10 8L10 7L11 7V8Z" />
375+
<path d="M12 8L10 8L10 7L12 7V8Z" />
376+
<path d="M13 7H12V6H13V7Z" />
377+
<path d="M5 10L5 9H4L4 10L5 10Z" />
378+
<path d="M9 8H8V11H9V8Z" />
379+
<path d="M8 11L7 11V14H8V11Z" />
380+
<path d="M6 7L6 6H5L5 7H6Z" />
381+
<path d="M7 8V7L6 7L6 8H7Z" />
382+
<path d="M7 9L7 7L6 7L6 9H7Z" />
383+
<path d="M6 10V9H5L5 10H6Z" />
384+
<path d="M4 7L6 7L6 9H4L4 7Z" />
385+
<path d="M3 8L4 8L4 10H3L3 8Z" />
386+
<path d="M11 4L13 4V5L11 5V4Z" />
387+
<path d="M10 5L12 5V7L10 7L10 5Z" />
358388
{:else if name === "settings"}
359389
<path d="M7 5H14V6H7V5Z" />
360390
<path d="M9 11L2 11L2 10L9 10V11Z" />

‎src/components/Link.svelte

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
66
export let route: Route;
77
export let disabled: boolean = false;
8+
export let variant: "active" | "regular" | "tab" = "regular";
89
910
function navigateToRoute(event: MouseEvent): void {
1011
event.preventDefault();
@@ -21,13 +22,41 @@
2122
color: var(--color-foreground-contrast);
2223
text-decoration: none;
2324
}
24-
a:hover {
25+
.regular:hover {
2526
text-decoration: underline;
2627
text-decoration-thickness: 1px;
2728
text-underline-offset: 2px;
2829
}
30+
31+
.tab {
32+
display: flex;
33+
width: 100%;
34+
justify-content: space-between;
35+
align-items: center;
36+
padding: 4px 4px 4px 10px;
37+
clip-path: var(--2px-corner-fill);
38+
}
39+
40+
.tab:hover {
41+
background-color: var(--color-fill-ghost);
42+
}
43+
44+
.active {
45+
background-color: var(--color-fill-ghost);
46+
display: flex;
47+
width: 100%;
48+
justify-content: space-between;
49+
align-items: center;
50+
padding: 4px 4px 4px 10px;
51+
clip-path: var(--2px-corner-fill);
52+
}
2953
</style>
3054

31-
<a onclick={navigateToRoute} href={routeToPath(route)}>
55+
<a
56+
onclick={navigateToRoute}
57+
href={routeToPath(route)}
58+
class:regular={variant === "regular"}
59+
class:active={variant === "active"}
60+
class:tab={variant === "tab"}>
3261
<slot />
3362
</a>

‎src/components/RepoHeader.svelte

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<script lang="ts">
22
import type { RepoInfo } from "@bindings/RepoInfo";
33
4-
import Fill from "./Fill.svelte";
54
import Icon from "./Icon.svelte";
65
76
export let repo: RepoInfo;
@@ -13,16 +12,21 @@
1312

1413
<style>
1514
.header {
15+
display: flex;
16+
align-items: center;
1617
justify-content: space-between;
1718
width: 100%;
19+
gap: 0.5rem;
1820
}
1921
</style>
2022

21-
<div class="global-flex header txt-small">
23+
<div class="header txt-small">
2224
<div class="global-flex">
23-
<Fill styleWidth="1.5rem" styleHeight="24px" variant="ghost">
25+
<div
26+
class="global-counter"
27+
style:background-color="var(--color-fill-ghost)">
2428
{project.data.name[0]}
25-
</Fill>
29+
</div>
2630
{#if emphasizedTitle}
2731
<span class="txt-regular txt-semibold">{project.data.name}</span>
2832
{:else}
@@ -31,24 +35,34 @@
3135
</div>
3236
<div class="global-flex">
3337
{#if repo.visibility.type === "private"}
34-
<Fill variant="private" styleWidth="24px" styleHeight="24px">
38+
<div
39+
class="global-counter"
40+
style:padding="0"
41+
style:background-color="var(--color-fill-private)">
3542
<div style:color="var(--color-foreground-yellow)">
3643
<Icon name="lock" />
3744
</div>
38-
</Fill>
45+
</div>
3946
{/if}
4047
{#if repo.delegates.find(x => x.did === selfDid)}
41-
<Fill variant="delegate" styleWidth="24px" styleHeight="24px">
48+
<div
49+
class="global-counter"
50+
style:padding="0"
51+
style:background-color="var(--color-fill-delegate)">
4252
<div style:color="var(--color-fill-primary)">
4353
<Icon name="delegate" />
4454
</div>
45-
</Fill>
55+
</div>
4656
{/if}
4757
<div class="global-flex">
48-
<Fill variant="ghost" styleHeight="24px" stylePadding="0 4px">
58+
<div
59+
class="global-counter"
60+
style:padding="0 6px"
61+
style:background-color="var(--color-fill-ghost)"
62+
style:gap="4px">
4963
<Icon name="seedling" />
50-
<span style:line-height="16px">{repo.seeding}</span>
51-
</Fill>
64+
{repo.seeding}
65+
</div>
5266
</div>
5367
</div>
5468
</div>

0 commit comments

Comments
 (0)