Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Move RID to project header
dnlklmn committed 2 years ago
commit f038827231340472bf399910f16586d6ef1216d8
parent 4e3de0f3785ab2aa1341ec387c6574d3b5598add
2 files changed +73 -78
modified src/views/projects/Sidebar.svelte
@@ -1,14 +1,10 @@
<script lang="ts">

  import type { ActiveTab } from "./Header.svelte";

  import type { BaseUrl, Project } from "@httpd-client";
- 
  import type { SvelteComponent } from "svelte";



  import { onMount } from "svelte";



  import Button from "@app/components/Button.svelte";
- 
  import Clipboard from "@app/components/Clipboard.svelte";
- 
  import CopyableId from "@app/components/CopyableId.svelte";
- 
  import IconButton from "@app/components/IconButton.svelte";

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

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

  import Popover from "@app/components/Popover.svelte";
@@ -49,8 +45,6 @@
  onMount(() => {

    expanded = loadSidebarState();

  });
-
- 
  let clipboard: SvelteComponent;

</script>



<style>
@@ -61,13 +55,6 @@
    flex-direction: column;

    justify-content: space-between;

  }
- 
  .id {
- 
    border-radius: var(--border-radius-small);
- 
    border: 1px solid var(--color-border-hint);
- 
    display: flex;
- 
    justify-content: center;
- 
    align-items: center;
- 
  }

  .project-navigation {

    display: flex;

    flex-direction: column;
@@ -97,19 +84,15 @@
    display: flex;

    justify-content: space-between;

    width: 100%;
- 
    gap: 0.25rem;

  }

</style>



<div class="sidebar">

  {#if expanded}

    <div style="display: flex; flex-direction: column; gap: 1rem;">
- 
      <div class="id" style:padding="0.5rem 0.75rem">
- 
        <CopyableId id={project.id} />
- 
      </div>

      <div class="project-navigation">

        <Link
- 
          title="Home"
+ 
          title="Source"

          route={{

            resource: "project.source",

            project: project.id,
@@ -117,6 +100,7 @@
            path: "/",

          }}>

          <Button
+ 
            stylePadding="0.5rem 0.75rem"

            size="large"

            styleWidth="100%"

            styleJustifyContent={"flex-start"}
@@ -133,6 +117,7 @@
            node: baseUrl,

          }}>

          <Button
+ 
            stylePadding="0.5rem 0.75rem"

            let:hover

            size="large"

            styleJustifyContent={"flex-start"}
@@ -159,6 +144,7 @@
            node: baseUrl,

          }}>

          <Button
+ 
            stylePadding="0.5rem 0.75rem"

            let:hover

            size="large"

            styleWidth="100%"
@@ -180,47 +166,43 @@
    </div>



    <div class="sidebar-footer" style:flex-direction="row">
- 
      <IconButton title={"Collapse"} on:click={toggleSidebar}>
- 
        <IconSmall name="chevron-left" /> Collapse
- 
      </IconButton>
+ 
      <Button title={"Collapse"} on:click={toggleSidebar} variant="background">
+ 
        <IconSmall name="chevron-left" />
+ 
      </Button>
+ 
      <div style:width="1.5rem" />
- 
      <Popover popoverPositionBottom="2rem" popoverPositionLeft="0">
- 
        <IconButton title="Settings" slot="toggle" let:toggle on:click={toggle}>
+ 
      <Popover popoverPositionBottom="2.5rem" popoverPositionLeft="0">
+ 
        <Button
+ 
          variant="background"
+ 
          title="Settings"
+ 
          slot="toggle"
+ 
          let:toggle
+ 
          on:click={toggle}>

          <IconSmall name="settings" />

          Settings
- 
        </IconButton>
+ 
        </Button>



        <Settings slot="popover" />

      </Popover>
-
- 
      <Popover popoverPositionBottom="2rem" popoverPositionLeft="0">
- 
        <IconButton title="Help" slot="toggle" let:toggle on:click={toggle}>
+ 
      <Popover popoverPositionBottom="2.5rem" popoverPositionLeft="0">
+ 
        <Button
+ 
          variant="background"
+ 
          title="Help"
+ 
          slot="toggle"
+ 
          let:toggle
+ 
          on:click={toggle}>

          <IconSmall name="help" />

          Help
- 
        </IconButton>
+ 
        </Button>



        <Help slot="popover" />

      </Popover>

    </div>

  {:else}

    <div style="display: flex; flex-direction: column; gap: 1rem;">
- 
      <!-- svelte-ignore a11y-click-events-have-key-events -->
- 
      <div
- 
        title="Copy RID to clipboard"
- 
        class="id"
- 
        style:color="var(--color-fill-secondary)"
- 
        style:cursor="pointer"
- 
        style:padding="0.5rem 0"
- 
        role="button"
- 
        tabindex="0"
- 
        on:click={() => {
- 
          clipboard.copy();
- 
        }}>
- 
        <Clipboard bind:this={clipboard} text={project.id} />
- 
      </div>

      <div class="project-navigation">

        <Link
- 
          title="Home"
+ 
          title="Source"

          route={{

            resource: "project.source",

            project: project.id,
@@ -231,7 +213,7 @@
            size="large"

            stylePadding="0 0.75rem"

            variant={activeTab === "source" ? "gray" : "background"}>
- 
            <IconSmall name="home" />
+ 
            <IconSmall name="chevron-left-right" />

          </Button>

        </Link>

        <Link
@@ -266,9 +248,11 @@
      </div>

    </div>
- 
    <div class="sidebar-footer" style:flex-direction="column-reverse">
+ 
    <div
+ 
      class="sidebar-footer"
+ 
      style:flex-direction="column-reverse"
+ 
      style:gap="0.5rem">

      <Button
- 
        size="large"

        stylePadding="0 0.75rem"

        variant="background"

        title={"Expand"}
@@ -278,7 +262,6 @@


      <Popover popoverPositionBottom="0" popoverPositionLeft="3rem">

        <Button
- 
          size="large"

          stylePadding="0 0.75rem"

          variant="background"

          title="Settings"
@@ -293,7 +276,6 @@


      <Popover popoverPositionBottom="0" popoverPositionLeft="3rem">

        <Button
- 
          size="large"

          stylePadding="0 0.75rem"

          variant="background"

          title="Help"
modified src/views/projects/Source/ProjectNameHeader.svelte
@@ -12,6 +12,7 @@
  import InlineMarkdown from "@app/components/InlineMarkdown.svelte";

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

  import SeedButton from "../Header/SeedButton.svelte";
+ 
  import CopyableId from "@app/components/CopyableId.svelte";



  export let project: Project;

  export let baseUrl: BaseUrl;
@@ -68,7 +69,6 @@
    display: flex;

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

    justify-content: left;
- 
    margin-bottom: 0.5rem;

    text-align: left;

    text-overflow: ellipsis;

    padding: 1rem 1rem 0 1rem;
@@ -82,37 +82,50 @@
  .description :global(a) {

    border-bottom: 1px solid var(--color-foreground-contrast);

  }
+ 
  .id {
+ 
    padding-left: 1rem;
+ 
  }
+ 
  .title-container {
+ 
    display: flex;
+ 
    flex-direction: column;
+ 
    gap: 0rem;
+ 
    margin-bottom: 1rem;
+ 
  }

</style>
- 
<div class="title">
- 
  <span class="txt-overflow">
- 
    <Link
- 
      route={{
- 
        resource: "project.source",
- 
        project: project.id,
- 
        node: baseUrl,
- 
      }}>
- 
      <span class="project-name">
- 
        {project.name}
- 
      </span>
- 
    </Link>
- 
  </span>
- 
  {#if project.visibility && project.visibility.type === "private"}
- 
    <Badge variant="yellowOutline" size="tiny">
- 
      {capitalize(project.visibility.type)}
- 
    </Badge>
- 
  {/if}
-
- 
  <div
- 
    class="global-hide-on-mobile"
- 
    style="margin-left: auto; display: flex; gap: 0.5rem;">
- 
    <SeedButton
- 
      {seeding}
- 
      disabled={editSeedingInProgress}
- 
      editSeeding={session && editSeeding}
- 
      seedCount={project.seeding}
- 
      projectId={project.id} />
- 
    <CloneButton {baseUrl} id={project.id} name={project.name} />
+ 
<div class="title-container">
+ 
  <div class="title">
+ 
    <span class="txt-overflow">
+ 
      <Link
+ 
        route={{
+ 
          resource: "project.source",
+ 
          project: project.id,
+ 
          node: baseUrl,
+ 
        }}>
+ 
        <span class="project-name">
+ 
          {project.name}
+ 
        </span>
+ 
      </Link>
+ 
    </span>
+ 
    {#if project.visibility && project.visibility.type === "private"}
+ 
      <Badge variant="yellowOutline" size="tiny">
+ 
        {capitalize(project.visibility.type)}
+ 
      </Badge>
+ 
    {/if}
+ 
    <div
+ 
      class="global-hide-on-mobile"
+ 
      style="margin-left: auto; display: flex; gap: 0.5rem;">
+ 
      <SeedButton
+ 
        {seeding}
+ 
        disabled={editSeedingInProgress}
+ 
        editSeeding={session && editSeeding}
+ 
        seedCount={project.seeding}
+ 
        projectId={project.id} />
+ 
      <CloneButton {baseUrl} id={project.id} name={project.name} />
+ 
    </div>
+ 
  </div>
+ 
  <div class="id">
+ 
    <CopyableId id={project.id} />

  </div>

</div>

<div class="description" use:twemoji>