Radish alpha
r
radicle-desktop
Radicle desktop app
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Add Header component and required components
Sebastian Martinez committed 1 year ago
commit 761c59e4e4aaa73cd0bfa75c39a6e4804bf90ddf
parent 5f61400707a1ca50de4331def131327e18b01e0a
10 files changed +282 -2
modified public/colors.css
@@ -1,4 +1,9 @@
:root {

  --color-background-default: #0a0d10;

  --color-foreground-contrast: #f9f9fb;
+ 
  --color-foreground-disabled: #6a6a81;
+ 
  --color-border-default: #2e2f38;
+ 
  --color-background-float: #14151a;
+ 
  --color-fill-float-hover: #1b1c22;
+ 
  --color-fill-ghost: #24252d;

}
modified public/typography.css
@@ -29,6 +29,7 @@
  --font-size-small: 0.875rem; /* 14px */

  --font-size-regular: 1rem; /* 16px */

  --font-size-medium: 1.25rem; /* 20px */
+ 
  --font-weight-semibold: 600;

}



html {
@@ -46,3 +47,7 @@ html {
.txt-medium {

  font-size: var(--font-size-medium);

}
+
+ 
.txt-semibold {
+ 
  font-weight: var(--font-weight-semibold) !important;
+ 
}
modified src/App.svelte
@@ -1,5 +1,11 @@
<script lang="ts">
- 
  import Startup from "./views/Startup.svelte";
+ 
  import { Router, Route } from "svelte-routing";
+
+ 
  import Startup from "@app/views/Startup.svelte";
+ 
  import Repos from "@app/views/Repos.svelte";

</script>
- 
<Startup />
+ 
<Router>
+ 
  <Route path="/" component={Startup} />
+ 
  <Route path="/repos" component={Repos} />
+ 
</Router>
added src/components/Header.svelte
@@ -0,0 +1,51 @@
+ 
<script lang="ts">
+ 
  import Background from "./Header/Background.svelte";
+ 
  import Icon from "./Icon.svelte";
+ 
  import Label from "./Label.svelte";
+ 
</script>
+
+ 
<style>
+ 
  .flex-item {
+ 
    display: flex;
+ 
    align-items: center;
+ 
  }
+ 
  header {
+ 
    padding: 0 0.5rem;
+ 
    gap: 1.5rem;
+ 
    height: 3rem;
+ 
  }
+ 
  .wrapper {
+ 
    width: 100%;
+ 
    justify-content: space-between;
+ 
    padding: 0 0.5rem;
+ 
  }
+ 
  .wrapper-left {
+ 
    gap: 0.5rem;
+ 
    padding: 0 0.5rem;
+ 
  }
+ 
</style>
+
+ 
<header class="flex-item">
+ 
  <div class="wrapper flex-item">
+ 
    <div class="wrapper-left flex-item">
+ 
      <div class="flex-item" style:gap="0.5rem">
+ 
        <Icon name="arrow-left" />
+ 
        <Icon name="arrow-right" />
+ 
      </div>
+ 
      <Label
+ 
        styleBorderColor="var(--color-fill-ghost)"
+ 
        styleFillColor="var(--color-fill-ghost)">
+ 
        Repositories
+ 
      </Label>
+ 
      <Label styleBorderColor="var(--color-fill-ghost)">
+ 
        <Icon name="plus" />
+ 
      </Label>
+ 
    </div>
+ 
    <div class="flex-item">
+ 
      <Label styleBorderColor="var(--color-fill-ghost)">
+ 
        <Icon name="offline" /> Offline
+ 
      </Label>
+ 
    </div>
+ 
  </div>
+ 
  <Background />
+ 
</header>
added src/components/Header/Background.svelte
@@ -0,0 +1,49 @@
+ 
<style>
+ 
  .container {
+ 
    height: 3rem;
+ 
    z-index: -1;
+ 
    position: absolute;
+ 
    top: 0;
+ 
    left: 0.5rem;
+ 
    right: 0.5rem;
+ 
    display: grid;
+ 
    grid-template-columns: repeat(3, 2px) auto repeat(3, 2px);
+ 
    grid-template-rows: auto repeat(3, 2px);
+ 
  }
+ 
  .bg {
+ 
    background-color: var(--color-background-float);
+ 
  }
+ 
</style>
+
+ 
<div class="container">
+ 
  <div class="bg"></div>
+ 
  <div class="bg"></div>
+ 
  <div class="bg"></div>
+ 
  <div class="bg"></div>
+ 
  <div class="bg"></div>
+ 
  <div class="bg"></div>
+ 
  <div class="bg"></div>
+ 
  <div></div>
+ 
  <div class="bg"></div>
+ 
  <div class="bg"></div>
+ 
  <div class="bg"></div>
+ 
  <div class="bg"></div>
+ 
  <div class="bg"></div>
+ 
  <div></div>
+
+ 
  <div></div>
+ 
  <div></div>
+ 
  <div class="bg"></div>
+ 
  <div class="bg"></div>
+ 
  <div class="bg"></div>
+ 
  <div></div>
+ 
  <div></div>
+
+ 
  <div></div>
+ 
  <div></div>
+ 
  <div></div>
+ 
  <div class="bg"></div>
+ 
  <div></div>
+ 
  <div></div>
+ 
  <div></div>
+ 
</div>
added src/components/Icon.svelte
@@ -0,0 +1,86 @@
+ 
<script lang="ts">
+ 
  import { unreachable } from "@app/lib/utils";
+ 
  export let name: "arrow-left" | "arrow-right" | "plus" | "offline";
+ 
</script>
+
+ 
<style>
+ 
  svg {
+ 
    display: flex;
+ 
    flex-shrink: 0;
+ 
  }
+ 
</style>
+
+ 
<!-- svelte-ignore a11y-click-events-have-key-events -->
+ 
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+ 
<svg
+ 
  role="img"
+ 
  on:click
+ 
  width="16"
+ 
  height="16"
+ 
  fill="currentColor"
+ 
  viewBox="0 0 16 16">
+ 
  {#if name === "arrow-left"}
+ 
    <path d="M1.99997 7L1.99997 8L2.99997 8L2.99997 7L1.99997 7Z" />
+ 
    <path d="M2.99997 6L2.99997 7L3.99997 7L3.99997 6L2.99997 6Z" />
+ 
    <path d="M2.99997 9L2.99997 8L3.99997 8L3.99997 9L2.99997 9Z" />
+ 
    <path d="M2.99997 9L14 9L14 7L2.99997 7L2.99997 9Z" />
+ 
    <path d="M3.99997 11L4.99997 11L4.99997 5L3.99997 5L3.99997 11Z" />
+ 
    <path d="M4.99997 12L5.99997 12L5.99997 4L4.99997 4L4.99997 12Z" />
+ 
    <path d="M5.99997 13L6.99997 13L6.99997 3L5.99997 3L5.99997 13Z" />
+ 
    <path d="M2.99997 10L3.99997 10L3.99997 9L2.99997 9L2.99997 10Z" />
+ 
    <path d="M1.99997 9L2.99997 9L2.99997 8L1.99997 8L1.99997 9Z" />
+ 
  {:else if name === "arrow-right"}
+ 
    <path d="M14 9V8H13V9H14Z" />
+ 
    <path d="M13 10V9H12V10H13Z" />
+ 
    <path d="M13 7V8H12V7H13Z" />
+ 
    <path d="M13 7H2.00003V9H13V7Z" />
+ 
    <path d="M12 5H11V11H12V5Z" />
+ 
    <path d="M11 4H10V12H11V4Z" />
+ 
    <path d="M10 3H9.00003V13H10V3Z" />
+ 
    <path d="M13 6H12V7H13V6Z" />
+ 
    <path d="M14 7H13V8H14V7Z" />
+ 
  {:else if name === "plus"}
+ 
    <path d="M7.00002 2H9.00002V14H7.00002V2Z" />
+ 
    <path d="M14 7V9L2.00002 9L2.00002 7L14 7Z" />
+ 
  {:else if name === "offline"}
+ 
    <path d="M3 6L3 8H2L2 6H3Z" />
+ 
    <path d="M13 10V8H14V10H13Z" />
+ 
    <path d="M5 9V7H4V9H5Z" />
+ 
    <path d="M11 7V9H12V7H11Z" />
+ 
    <path d="M4 4L4 6H3L3 4H4Z" />
+ 
    <path d="M12 12V10H13V12H12Z" />
+ 
    <path d="M4 10V12H3L3 10H4Z" />
+ 
    <path d="M12 6V5H13V6H12Z" />
+ 
    <path d="M5 4H4V3L5 3V4Z" />
+ 
    <path d="M11 12H12V13H11V12Z" />
+ 
    <path d="M3 8L3 10H2L2 8H3Z" />
+ 
    <path d="M13 8V6H14V8H13Z" />
+ 
    <path d="M10 5L11 5V6L10 6V5Z" />
+ 
    <path d="M6 7H5L5 5H6V7Z" />
+ 
    <path d="M10 9L11 9V11H10V9Z" />
+ 
    <path d="M7 7H9V8H7V7Z" />
+ 
    <path d="M6 11H7V12H6V11Z" />
+ 
    <path d="M10 5H9V4H10V5Z" />
+ 
    <path d="M6 4H7V5H6L6 4Z" />
+ 
    <path d="M10 12H9V11H10V12Z" />
+ 
    <path d="M5 2H6V3L5 3L5 2Z" />
+ 
    <path d="M11 14H10V13H11V14Z" />
+ 
    <path d="M5 13H6V14H5V13Z" />
+ 
    <path d="M11 3L10 3V2L11 2V3Z" />
+ 
    <path d="M12 4H11V3L12 3V4Z" />
+ 
    <path d="M13 2.00001H14V3.00001H13V2.00001Z" />
+ 
    <path d="M12 3L13 3.00001V4.00001L12 4V3Z" />
+ 
    <path d="M11 4H12V5L11 5V4Z" />
+ 
    <path d="M10 5L11 5V6L10 6V5Z" />
+ 
    <path d="M9 6.00001L10 6L10 7.00001L9 7L9 6.00001Z" />
+ 
    <path d="M8 7.00001L9 7V8L8 8.00001V7.00001Z" />
+ 
    <path d="M7 8L8 8.00001V9.00001H7L7 8Z" />
+ 
    <path d="M6 9L7 9.00001V10H6V9Z" />
+ 
    <path d="M5 10H6V11L5 11V10Z" />
+ 
    <path d="M4 11L5 11V12L4 12L4 11Z" />
+ 
    <path d="M3 12H4L4 13H3L3 12Z" />
+ 
    <path d="M2 13L3 13L3 14H2V13Z" />
+ 
  {:else}
+ 
    {unreachable(name)}
+ 
  {/if}
+ 
</svg>
added src/components/Label.svelte
@@ -0,0 +1,67 @@
+ 
<script lang="ts">
+ 
  export let styleBorderColor: string;
+ 
  export let styleFillColor: string = "transparent";
+ 
  export let emptyPixels: 2 | 1 = 2;
+
+ 
  let gridTemplate = `${"2px ".repeat(emptyPixels)}auto ${"2px ".repeat(emptyPixels)}`;
+ 
</script>
+
+ 
<style>
+ 
  .content {
+ 
    padding: 2px 8px;
+ 
    display: flex;
+ 
    gap: 6px;
+ 
    align-items: center;
+ 
  }
+ 
  .container {
+ 
    white-space: nowrap;
+ 
    user-select: none;
+ 
    column-gap: 0;
+ 
    height: 2rem;
+ 
    row-gap: 0;
+ 
    display: grid;
+ 
  }
+ 
</style>
+
+ 
<div
+ 
  class="container"
+ 
  style:grid-template-columns={gridTemplate}
+ 
  style:grid-template-rows={gridTemplate}>
+ 
  {@html "<div></div>".repeat(emptyPixels)}
+ 
  <div style:background-color={styleBorderColor} />
+ 
  {@html "<div></div>".repeat(emptyPixels)}
+
+ 
  {#if emptyPixels === 2}
+ 
    <div />
+ 
    <div style:background-color={styleBorderColor} />
+ 
    <div style:background-color={styleFillColor} />
+ 
    <div style:background-color={styleBorderColor} />
+ 
    <div />
+ 
  {/if}
+
+ 
  <div style:background-color={styleBorderColor} />
+ 
  {#if emptyPixels === 2}
+ 
    <div style:background-color={styleFillColor} />
+ 
  {/if}
+ 
  <div
+ 
    class="content txt-semibold txt-small"
+ 
    style:background-color={styleFillColor}>
+ 
    <slot />
+ 
  </div>
+ 
  {#if emptyPixels === 2}
+ 
    <div style:background-color={styleFillColor} />
+ 
  {/if}
+ 
  <div style:background-color={styleBorderColor} />
+
+ 
  {#if emptyPixels === 2}
+ 
    <div />
+ 
    <div style:background-color={styleBorderColor} />
+ 
    <div style:background-color={styleFillColor} />
+ 
    <div style:background-color={styleBorderColor} />
+ 
    <div />
+ 
  {/if}
+
+ 
  {@html "<div></div>".repeat(emptyPixels)}
+ 
  <div style:background-color={styleBorderColor} />
+ 
  {@html "<div></div>".repeat(emptyPixels)}
+ 
</div>
added src/lib/utils.ts
@@ -0,0 +1,3 @@
+ 
export const unreachable = (value: never): never => {
+ 
  throw new Error(`Unreachable code: ${value}`);
+ 
};
added src/views/Repos.svelte
@@ -0,0 +1,5 @@
+ 
<script>
+ 
  import Header from "@app/components/Header.svelte";
+ 
</script>
+
+ 
<Header />
modified src/views/Startup.svelte
@@ -1,6 +1,8 @@
<script lang="ts">

  import { invoke } from "@tauri-apps/api/core";

  import { onMount } from "svelte";
+ 
  import { Link } from "svelte-routing";
+ 


  import warningIcon from "/images/warning.png";



  let loading = true;
@@ -35,5 +37,6 @@
    {/if}

  {:else if !loading}

    <p class="txt-medium">You are all set!</p>
+ 
    <Link to="/repos">Repos</Link>

  {/if}

</main>