Radish alpha
r
radicle-desktop
Radicle desktop app
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Use new button styling for header buttons
Rūdolfs Ošiņš committed 1 year ago
commit 33e0b52e23098b4adc18aa71e742b86cbc049151
parent 7c1f0fb28fa46bcf10187456aa02ea635595df9e
4 files changed +502 -24
modified src/components/Header.svelte
@@ -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>
@@ -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;
@@ -56,18 +54,22 @@


<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>
@@ -75,20 +77,14 @@
    <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 />
added src/components/NakedButton.svelte
@@ -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>
added src/components/OutlineButton.svelte
@@ -0,0 +1,251 @@
+ 
<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;
+ 
    background-color: var(--button-color-1);
+ 
  }
+ 
  .p1-4 {
+ 
    grid-area: p1-4;
+ 
  }
+ 
  .p1-5 {
+ 
    grid-area: p1-5;
+ 
  }
+
+ 
  .p2-1 {
+ 
    grid-area: p2-1;
+ 
  }
+ 
  .p2-2 {
+ 
    grid-area: p2-2;
+ 
    background-color: var(--button-color-1);
+ 
  }
+ 
  .p2-3 {
+ 
    grid-area: p2-3;
+ 
  }
+ 
  .p2-4 {
+ 
    grid-area: p2-4;
+ 
    background-color: var(--button-color-1);
+ 
  }
+ 
  .p2-5 {
+ 
    grid-area: p2-5;
+ 
  }
+
+ 
  .p3-1 {
+ 
    grid-area: p3-1;
+ 
    background-color: var(--button-color-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;
+ 
    background-color: var(--button-color-1);
+ 
  }
+
+ 
  .p4-1 {
+ 
    grid-area: p4-1;
+ 
  }
+ 
  .p4-2 {
+ 
    grid-area: p4-2;
+ 
    background-color: var(--button-color-1);
+ 
  }
+ 
  .p4-3 {
+ 
    grid-area: p4-3;
+ 
  }
+ 
  .p4-4 {
+ 
    grid-area: p4-4;
+ 
    background-color: var(--button-color-1);
+ 
  }
+ 
  .p4-5 {
+ 
    grid-area: p4-5;
+ 
  }
+
+ 
  .p5-1 {
+ 
    grid-area: p5-1;
+ 
  }
+ 
  .p5-2 {
+ 
    grid-area: p5-2;
+ 
  }
+ 
  .p5-3 {
+ 
    grid-area: p5-3;
+ 
    background-color: var(--button-color-1);
+ 
  }
+ 
  .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-3 {
+ 
    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-2 {
+ 
    background-color: var(--button-color-1);
+ 
  }
+ 
  .container:hover .p3-3 {
+ 
    background-color: var(--button-color-1);
+ 
  }
+ 
  .container:hover .p3-4 {
+ 
    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-3 {
+ 
    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>
modified src/views/repo/Layout.svelte
@@ -5,6 +5,7 @@
  import Header from "@app/components/Header.svelte";

  import Icon from "@app/components/Icon.svelte";

  import Link from "@app/components/Link.svelte";
+ 
  import NakedButton from "@app/components/NakedButton.svelte";



  export let repo: RepoInfo;
@@ -22,7 +23,9 @@
  <div class="header">

    <Header>

      <svelte:fragment slot="icon-left">
- 
        <Icon name="sidebar" />
+ 
        <NakedButton variant="ghost">
+ 
          <Icon name="sidebar" />
+ 
        </NakedButton>

      </svelte:fragment>

      <svelte:fragment slot="center">

        <CopyableId id={repo.rid} />