Radish alpha
r
radicle-desktop
Radicle desktop app
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Move timeline to its own tab
Rūdolfs Ošiņš committed 1 year ago
commit eec0351de8751c793701ad7bb5e0d42924e96258
parent 1ee37b7ea9a990fce2600ca4694be50193793d87
3 files changed +90 -70
modified src/components/Icon.svelte
@@ -15,6 +15,7 @@
      | "checkmark"

      | "chevron-down"

      | "chevron-right"
+ 
      | "clock"

      | "collapse-panel"

      | "comment"

      | "comment-checkmark"
@@ -185,6 +186,29 @@
    <path d="M7 10L8 10L8 11L7 11L7 10Z" />

    <path d="M9 8L10 8V9L9 9V8Z" />

    <path d="M8 9H9V10H8L8 9Z" />
+ 
  {:else if name === "clock"}
+ 
    <path d="M6 13H8V14H6V13Z" />
+ 
    <path d="M10 13H8V14H10V13Z" />
+ 
    <path d="M3 6L3 8H2L2 6H3Z" />
+ 
    <path d="M13 6V8H14V6H13Z" />
+ 
    <path d="M4 12H6V13H4V12Z" />
+ 
    <path d="M12 12H10V13H12V12Z" />
+ 
    <path d="M4 4V6H3L3 4H4Z" />
+ 
    <path d="M12 4V6L13 6V4L12 4Z" />
+ 
    <path d="M4 10L4 12H3L3 10H4Z" />
+ 
    <path d="M12 10V12H13V10H12Z" />
+ 
    <path d="M6 4L4 4L4 3L6 3V4Z" />
+ 
    <path d="M10 4L12 4V3L10 3V4Z" />
+ 
    <path d="M3 8L3 10H2L2 8H3Z" />
+ 
    <path d="M13 8V10H14V8H13Z" />
+ 
    <path d="M8 3L6 3V2L8 2V3Z" />
+ 
    <path d="M8 3L10 3L10 2L8 2V3Z" />
+ 
    <path d="M8 8H9V9H8V8Z" />
+ 
    <path d="M9 7H10V8H9V7Z" />
+ 
    <path d="M10 6H11V7L10 7V6Z" />
+ 
    <path d="M7 7H8V8L7 8V7Z" />
+ 
    <path d="M6 6H7V7L6 7V6Z" />
+ 
    <path d="M5 5H6V6H5V5Z" />

  {:else if name === "collapse-panel"}

    <path d="M2 3.00002H3V13H2V3.00002Z" />

    <path d="M13 3.00002H14V6.00002H13V3.00002Z" />
modified src/components/Revision.svelte
@@ -318,22 +318,20 @@
  </div>

</div>
- 
<div style:margin="1rem 0">
- 
  <!-- svelte-ignore a11y_click_events_have_key_events -->
- 
  <div
- 
    role="button"
- 
    tabindex="0"
- 
    class="txt-semibold global-flex"
- 
    style:margin-bottom="1rem"
- 
    style:cursor="pointer"
- 
    onclick={() => (hideChanges = !hideChanges)}>
- 
    <Icon name={hideChanges ? "chevron-right" : "chevron-down"} />Changes
- 
  </div>
- 
  <div class:hide={hideChanges}>
- 
    {#await loadHighlightedDiff(rid, revision.base, revision.head)}
- 
      <span class="txt-small">Loading…</span>
- 
    {:then diff}
- 
      <Changeset {diff} repoId={rid} />
- 
    {/await}
- 
  </div>
+ 
<!-- svelte-ignore a11y_click_events_have_key_events -->
+ 
<div
+ 
  role="button"
+ 
  tabindex="0"
+ 
  class="txt-semibold global-flex"
+ 
  style:margin-bottom={hideChanges ? undefined : "1rem"}
+ 
  style:cursor="pointer"
+ 
  onclick={() => (hideChanges = !hideChanges)}>
+ 
  <Icon name={hideChanges ? "chevron-right" : "chevron-down"} />Changes
+ 
</div>
+ 
<div class:hide={hideChanges}>
+ 
  {#await loadHighlightedDiff(rid, revision.base, revision.head)}
+ 
    <span class="txt-small">Loading…</span>
+ 
  {:then diff}
+ 
    <Changeset {diff} repoId={rid} />
+ 
  {/await}

</div>
modified src/views/repo/Patch.svelte
@@ -26,24 +26,23 @@
  import AssigneeInput from "@app/components/AssigneeInput.svelte";

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

  import CopyableId from "@app/components/CopyableId.svelte";
+ 
  import DropdownList from "@app/components/DropdownList.svelte";
+ 
  import DropdownListItem from "@app/components/DropdownListItem.svelte";

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

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

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

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

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

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

  import PatchTeaser from "@app/components/PatchTeaser.svelte";
+ 
  import PatchTimeline from "@app/components/PatchTimeline.svelte";
+ 
  import Popover, { closeFocused } from "@app/components/Popover.svelte";

  import RevisionComponent from "@app/components/Revision.svelte";

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

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

  import TextInput from "@app/components/TextInput.svelte";
- 
  import NakedButton from "@app/components/NakedButton.svelte";
- 
  import Popover, { closeFocused } from "@app/components/Popover.svelte";
- 
  import DropdownList from "@app/components/DropdownList.svelte";
- 
  import DropdownListItem from "@app/components/DropdownListItem.svelte";
- 
  import NodeId from "@app/components/NodeId.svelte";
- 
  import Avatar from "@app/components/Avatar.svelte";
- 
  import PatchTimeline from "@app/components/PatchTimeline.svelte";



  interface Props {

    repo: RepoInfo;
@@ -75,7 +74,7 @@
  let updatedTitle = $state("");

  let labelSaveInProgress: boolean = $state(false);

  let assigneesSaveInProgress: boolean = $state(false);
- 
  let tab: "patch" | "revisions" = $state("patch");
+ 
  let tab: "patch" | "revisions" | "timeline" = $state("patch");

  let hideTimeline = $state(false);

  let selectedRevision: Revision = $state(revisions.slice(-1)[0]);

  const revisionAuthors = $derived(
@@ -288,7 +287,7 @@
    padding-bottom: 1rem;

  }

  .content {
- 
    padding: 1rem 1rem 0 0;
+ 
    padding: 1rem 1rem 1rem 0;

  }



  .metadata-divider {
@@ -455,7 +454,8 @@
          class="global-flex"

          style:z-index="10"

          style:gap="1rem"
- 
          style:padding="0 1rem">
+ 
          style:padding="0 1rem"
+ 
          style:width="100%">

          <span class="txt-small" style:color="var(--color-foreground-dim)">

            Revisions

          </span>
@@ -478,11 +478,6 @@
              onclick={() => {

                tab = "revisions";

              }}>
- 
              <Avatar
- 
                publicKey={selectedRevision.author.did.replace(
- 
                  "did:key:",
- 
                  "",
- 
                )} />

              {formatOid(selectedRevision.id)}

              {#if selectedRevision.id === revisions.slice(-1)[0].id}

                <span
@@ -572,19 +567,30 @@
              {/snippet}

            </Popover>

          {/if}
+
+ 
          <div style:margin-left="auto">
+ 
            <Tab
+ 
              active={tab === "timeline"}
+ 
              onclick={() => {
+ 
                tab = "timeline";
+ 
              }}>
+ 
              <Icon name="clock" />
+ 
              Timeline
+ 
            </Tab>
+ 
          </div>

        </div>

      </Border>

    </div>
- 
    {#if tab === "patch"}
- 
      <Border
- 
        variant="ghost"
- 
        flatTop
- 
        styleWidth="100%"
- 
        stylePadding="1rem"
- 
        styleDisplay="block"
- 
        styleFlexDirection="column"
- 
        styleAlignItems="flex-start">
+ 
    <Border
+ 
      variant="ghost"
+ 
      flatTop
+ 
      styleWidth="100%"
+ 
      stylePadding="1rem"
+ 
      styleDisplay="block"
+ 
      styleFlexDirection="column"
+ 
      styleAlignItems="flex-start">
+ 
      {#if tab === "patch"}

        <RevisionComponent

          rid={repo.rid}

          repoDelegates={repo.delegates}
@@ -592,16 +598,24 @@
          {reload}

          revision={revisions[0]}

          {config} />
- 
      </Border>
- 
    {:else}
- 
      <Border
- 
        variant="ghost"
- 
        flatTop
- 
        styleWidth="100%"
- 
        stylePadding="1rem"
- 
        styleDisplay="block"
- 
        styleFlexDirection="column"
- 
        styleAlignItems="flex-start">
+ 
      {:else if tab === "timeline"}
+ 
        <div>
+ 
          <!-- svelte-ignore a11y_click_events_have_key_events -->
+ 
          <div
+ 
            role="button"
+ 
            tabindex="0"
+ 
            class="txt-semibold global-flex"
+ 
            style:margin-bottom={hideTimeline ? undefined : "1rem"}
+ 
            style:cursor="pointer"
+ 
            onclick={() => (hideTimeline = !hideTimeline)}>
+ 
            <Icon
+ 
              name={hideTimeline ? "chevron-right" : "chevron-down"} />Timeline
+ 
          </div>
+ 
          <div class:hide={hideTimeline}>
+ 
            <PatchTimeline {activity} patchId={patch.id} />
+ 
          </div>
+ 
        </div>
+ 
      {:else}

        <RevisionComponent

          rid={repo.rid}

          repoDelegates={repo.delegates}
@@ -609,23 +623,7 @@
          {reload}

          revision={selectedRevision}

          {config} />
- 
      </Border>
- 
    {/if}
- 
  </div>
-
- 
  <div style:margin-bottom="1rem">
- 
    <!-- svelte-ignore a11y_click_events_have_key_events -->
- 
    <div
- 
      role="button"
- 
      tabindex="0"
- 
      class="txt-semibold global-flex"
- 
      style:margin="1rem 0"
- 
      style:cursor="pointer"
- 
      onclick={() => (hideTimeline = !hideTimeline)}>
- 
      <Icon name={hideTimeline ? "chevron-right" : "chevron-down"} />Timeline
- 
    </div>
- 
    <div class:hide={hideTimeline}>
- 
      <PatchTimeline {activity} patchId={patch.id} />
- 
    </div>
+ 
      {/if}
+ 
    </Border>

  </div>

</Layout>