Add sidebar

radicle-dev · Sep 17, 2024 · f27974c · f27974c
1 parent a5601e7
commit f27974c
Show file tree

Hide file tree

Showing 14 changed files with 542 additions and 253 deletions.
diff --git a/public/index.css b/public/index.css
@@ -34,3 +34,96 @@ body {
   align-items: center;
   gap: 0.5rem;
 }
+
+.global-tab {
+  padding-left: 0.5rem;
+  border-left: 1px solid var(--color-fill-ghost-hover);
+  margin-left: 1rem;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  column-gap: 0.5rem;
+}
+
+.global-counter {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--color-fill-ghost-hover);
+  clip-path: var(--1px-corner-fill);
+  height: 1.5rem;
+  padding: 0 0.5rem;
+  min-width: 1.5rem;
+}
+
+:root {
+  --1px-corner-fill: polygon(
+    0 2px,
+    2px 2px,
+    2px 0,
+    calc(100% - 2px) 0,
+    calc(100% - 2px) 2px,
+    100% 2px,
+    100% calc(100% - 2px),
+    calc(100% - 2px) calc(100% - 2px),
+    calc(100% - 2px) calc(100% - 2px),
+    calc(100% - 2px) 100%,
+    2px 100%,
+    2px calc(100% - 2px),
+    0 calc(100% - 2px)
+  );
+
+  --2px-corner-fill: polygon(
+    0 4px,
+    2px 4px,
+    2px 2px,
+    4px 2px,
+    4px 0,
+    calc(100% - 4px) 0,
+    calc(100% - 4px) 2px,
+    calc(100% - 2px) 2px,
+    calc(100% - 2px) 4px,
+    100% 4px,
+    100% calc(100% - 4px),
+    calc(100% - 2px) calc(100% - 4px),
+    calc(100% - 2px) calc(100% - 2px),
+    calc(100% - 4px) calc(100% - 2px),
+    calc(100% - 4px) 100%,
+    4px 100%,
+    4px calc(100% - 2px),
+    2px calc(100% - 2px),
+    2px calc(100% - 4px),
+    0 calc(100% - 4px)
+  );
+
+  --3px-corner-fill: polygon(
+    0 6px,
+    2px 6px,
+    2px 4px,
+    4px 4px,
+    4px 2px,
+    6px 2px,
+    6px 0,
+    calc(100% - 6px) 0,
+    calc(100% - 6px) 2px,
+    calc(100% - 4px) 2px,
+    calc(100% - 4px) 4px,
+    calc(100% - 2px) 4px,
+    calc(100% - 2px) 6px,
+    100% 6px,
+    100% calc(100% - 6px),
+    calc(100% - 2px) calc(100% - 6px),
+    calc(100% - 2px) calc(100% - 4px),
+    calc(100% - 4px) calc(100% - 4px),
+    calc(100% - 4px) calc(100% - 2px),
+    calc(100% - 6px) calc(100% - 2px),
+    calc(100% - 6px) 100%,
+    6px 100%,
+    6px calc(100% - 2px),
+    4px calc(100% - 2px),
+    4px calc(100% - 4px),
+    2px calc(100% - 4px),
+    2px calc(100% - 6px),
+    0 calc(100% - 6px)
+  );
+}
diff --git a/src/components/Avatar.svelte b/src/components/Avatar.svelte
@@ -23,22 +23,7 @@
     background-repeat: no-repeat;
     width: 1rem;
     height: 1rem;
-    clip-path: polygon(
-      0 2px,
-      2px 2px,
-      2px 0,
-      calc(100% - 2px) 0,
-      calc(100% - 2px) 2px,
-      100% 2px,
-      100% calc(100% - 2px),
-      calc(100% - 2px) calc(100% - 2px),
-      calc(100% - 2px) calc(100% - 2px),
-      calc(100% - 2px) 100%,
-      2px 100%,
-      2px calc(100% - 2px),
-      0 calc(100% - 2px)
-    );
-    background-color: red;
+    clip-path: var(--1px-corner-fill);
   }
 </style>
 

diff --git a/src/components/Fill.svelte b/src/components/Fill.svelte
diff --git a/src/components/Icon.svelte b/src/components/Icon.svelte
@@ -24,6 +24,7 @@
     | "plus"
     | "repo"
     | "seedling"
+    | "seedling-filled"
     | "settings"
     | "sidebar"
     | "sun"
@@ -355,6 +356,35 @@
     <path d="M7.33301 8V7L6.33301 7L6.33301 8H7.33301Z" />
     <path d="M7.33301 9L7.33301 7L6.33301 7L6.33301 9H7.33301Z" />
     <path d="M6.33301 10V9H5.33301L5.33301 10H6.33301Z" />
+  {:else if name === "seedling-filled"}
+    <path d="M10 6H9V5L10 5V6Z" />
+    <path d="M11 5L10 5V4L11 4V5Z" />
+    <path d="M12 4H11L11 3L12 3L12 4Z" />
+    <path d="M13 4L12 4L12 3L13 3L13 4Z" />
+    <path d="M14 5L13 5V4L14 4V5Z" />
+    <path d="M13 6H12V5H13V6Z" />
+    <path d="M5 7L5 6L4 6L4 7L5 7Z" />
+    <path d="M4 8V7L3 7L3 8L4 8Z" />
+    <path d="M3 9L3 8L2 8L2 9H3Z" />
+    <path d="M3 10L3 9H2L2 10H3Z" />
+    <path d="M4 11L4 10H3L3 11L4 11Z" />
+    <path d="M10 7H9L9 6H10L10 7Z" />
+    <path d="M9 8H8V7L9 7L9 8Z" />
+    <path d="M8 8H7V7H8V8Z" />
+    <path d="M11 8L10 8L10 7L11 7V8Z" />
+    <path d="M12 8L10 8L10 7L12 7V8Z" />
+    <path d="M13 7H12V6H13V7Z" />
+    <path d="M5 10L5 9H4L4 10L5 10Z" />
+    <path d="M9 8H8V11H9V8Z" />
+    <path d="M8 11L7 11V14H8V11Z" />
+    <path d="M6 7L6 6H5L5 7H6Z" />
+    <path d="M7 8V7L6 7L6 8H7Z" />
+    <path d="M7 9L7 7L6 7L6 9H7Z" />
+    <path d="M6 10V9H5L5 10H6Z" />
+    <path d="M4 7L6 7L6 9H4L4 7Z" />
+    <path d="M3 8L4 8L4 10H3L3 8Z" />
+    <path d="M11 4L13 4V5L11 5V4Z" />
+    <path d="M10 5L12 5V7L10 7L10 5Z" />
   {:else if name === "settings"}
     <path d="M7 5H14V6H7V5Z" />
     <path d="M9 11L2 11L2 10L9 10V11Z" />

diff --git a/src/components/Link.svelte b/src/components/Link.svelte
@@ -5,6 +5,7 @@
 
   export let route: Route;
   export let disabled: boolean = false;
+  export let variant: "active" | "regular" | "tab" = "regular";
 
   function navigateToRoute(event: MouseEvent): void {
     event.preventDefault();
@@ -21,13 +22,41 @@
     color: var(--color-foreground-contrast);
     text-decoration: none;
   }
-  a:hover {
+  .regular:hover {
     text-decoration: underline;
     text-decoration-thickness: 1px;
     text-underline-offset: 2px;
   }
+
+  .tab {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    padding: 4px 4px 4px 10px;
+    clip-path: var(--2px-corner-fill);
+  }
+
+  .tab:hover {
+    background-color: var(--color-fill-ghost);
+  }
+
+  .active {
+    background-color: var(--color-fill-ghost);
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    padding: 4px 4px 4px 10px;
+    clip-path: var(--2px-corner-fill);
+  }
 </style>
 
-<a onclick={navigateToRoute} href={routeToPath(route)}>
+<a
+  onclick={navigateToRoute}
+  href={routeToPath(route)}
+  class:regular={variant === "regular"}
+  class:active={variant === "active"}
+  class:tab={variant === "tab"}>
   <slot />
 </a>
diff --git a/src/components/RepoHeader.svelte b/src/components/RepoHeader.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import type { RepoInfo } from "@bindings/RepoInfo";
 
-  import Fill from "./Fill.svelte";
   import Icon from "./Icon.svelte";
 
   export let repo: RepoInfo;
@@ -13,16 +12,21 @@
 
 <style>
   .header {
+    display: flex;
+    align-items: center;
     justify-content: space-between;
     width: 100%;
+    gap: 0.5rem;
   }
 </style>
 
-<div class="global-flex header txt-small">
+<div class="header txt-small">
   <div class="global-flex">
-    <Fill styleWidth="1.5rem" styleHeight="24px" variant="ghost">
+    <div
+      class="global-counter"
+      style:background-color="var(--color-fill-ghost)">
       {project.data.name[0]}
-    </Fill>
+    </div>
     {#if emphasizedTitle}
       <span class="txt-regular txt-semibold">{project.data.name}</span>
     {:else}
@@ -31,24 +35,34 @@
   </div>
   <div class="global-flex">
     {#if repo.visibility.type === "private"}
-      <Fill variant="private" styleWidth="24px" styleHeight="24px">
+      <div
+        class="global-counter"
+        style:padding="0"
+        style:background-color="var(--color-fill-private)">
         <div style:color="var(--color-foreground-yellow)">
           <Icon name="lock" />
         </div>
-      </Fill>
+      </div>
     {/if}
     {#if repo.delegates.find(x => x.did === selfDid)}
-      <Fill variant="delegate" styleWidth="24px" styleHeight="24px">
+      <div
+        class="global-counter"
+        style:padding="0"
+        style:background-color="var(--color-fill-delegate)">
         <div style:color="var(--color-fill-primary)">
           <Icon name="delegate" />
         </div>
-      </Fill>
+      </div>
     {/if}
     <div class="global-flex">
-      <Fill variant="ghost" styleHeight="24px" stylePadding="0 4px">
+      <div
+        class="global-counter"
+        style:padding="0 6px"
+        style:background-color="var(--color-fill-ghost)"
+        style:gap="4px">
         <Icon name="seedling" />
-        <span style:line-height="16px">{repo.seeding}</span>
-      </Fill>
+        {repo.seeding}
+      </div>
     </div>
   </div>
 </div>