Fix peer branch selector gaps

radicle-dev · Aug 5, 2024 · 06fa429 · 06fa429
1 parent 4de9724
commit 06fa429
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 22 deletions.
diff --git a/src/views/projects/Source/Blob.svelte b/src/views/projects/Source/Blob.svelte
@@ -150,7 +150,7 @@
 <File sticky={false}>
   <FilePath slot="left-header" filenameWithPath={blob.path} />
   <svelte:fragment slot="right-header">
-    <CommitButton styleRoundBorders {projectId} {baseUrl} commit={lastCommit} />
+    <CommitButton {projectId} {baseUrl} commit={lastCommit} />
     <div class="global-hide-on-mobile-down teaser-buttons">
       {#if enablePreview}
         <Radio ariaLabel="Toggle render method">

diff --git a/src/views/projects/Source/Header.svelte b/src/views/projects/Source/Header.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { ProjectRoute } from "../router";
   import type { BaseUrl, Project, Remote, Tree } from "@http-client";
+  import type { ComponentProps } from "svelte";
 
   import { HttpdClient } from "@http-client";
 
@@ -27,6 +28,8 @@
 
   const api = new HttpdClient(node);
   let selectedBranch: string | undefined;
+  let commitButtonVariant: ComponentProps<CommitButton>["variant"] | undefined =
+    undefined;
 
   // Revision may be a commit ID, a branch name or `undefined` which means the
   // default branch. We assign `selectedBranch` accordingly.
@@ -37,6 +40,14 @@
   }
 
   $: lastCommit = tree.lastCommit;
+  $: onCanonical = Boolean(!peer && selectedBranch === project.defaultBranch);
+  $: if (onCanonical) {
+    commitButtonVariant = "right";
+  } else if (!selectedBranch) {
+    commitButtonVariant = "left";
+  } else {
+    commitButtonVariant = "center";
+  }
 </script>
 
 <style>
@@ -45,7 +56,7 @@
     align-items: center;
     justify-content: left;
     row-gap: 0.5rem;
-    gap: 1rem;
+    gap: 1px;
     flex-wrap: wrap;
     margin-bottom: 2rem;
   }
@@ -94,20 +105,20 @@
       {peers}
       {peer}
       {baseRoute}
-      onCanonical={Boolean(!peer && selectedBranch === project.defaultBranch)}
+      {onCanonical}
       {project}
       {selectedBranch} />
   {/if}
   <div class="global-flex-item txt-overflow" style:gap="1px">
     <CommitButton
+      variant={commitButtonVariant}
       styleMinWidth="0"
       styleWidth="100%"
       hideSummaryOnMobile={false}
       projectId={project.id}
       commit={lastCommit}
-      styleRoundBorders={Boolean(selectedBranch)}
       baseUrl={node} />
-    {#if !selectedBranch}
+    {#if !onCanonical}
       <Link route={baseRoute}>
         <Button
           variant="not-selected"

diff --git a/src/views/projects/Source/PeerBranchSelector.svelte b/src/views/projects/Source/PeerBranchSelector.svelte
@@ -118,9 +118,7 @@
       slot="toggle"
       let:expanded
       let:toggle
-      styleBorderRadius={onCanonical
-        ? "var(--border-radius-tiny)"
-        : "var(--border-radius-tiny) 0 0 var(--border-radius-tiny)"}
+      styleBorderRadius={"var(--border-radius-tiny) 0 0 var(--border-radius-tiny)"}
       styleWidth="100%"
       on:click={toggle}
       title="Change branch"
@@ -276,13 +274,4 @@
       </div>
     </div>
   </Popover>
-  {#if selectedPeer}
-    <Link route={baseRoute}>
-      <Button
-        variant="not-selected"
-        styleBorderRadius="0 var(--border-radius-tiny) var(--border-radius-tiny) 0">
-        <Icon name="cross" />
-      </Button>
-    </Link>
-  {/if}
 </div>
diff --git a/src/views/projects/components/CommitButton.svelte b/src/views/projects/components/CommitButton.svelte
@@ -3,17 +3,32 @@
 
   import Button from "@app/components/Button.svelte";
   import Link from "@app/components/Link.svelte";
-  import { formatCommit } from "@app/lib/utils";
+  import { formatCommit, unreachable } from "@app/lib/utils";
 
+  export let variant: "standalone" | "right" | "center" | "left" = "standalone";
   export let styleMinWidth: string | undefined = undefined;
   export let styleWidth: "100%" | undefined = undefined;
-  export let styleRoundBorders: boolean = false;
   export let projectId: string;
   export let baseUrl: BaseUrl;
   export let hideSummaryOnMobile: boolean = true;
   export let commit: Commit["commit"];
 
+  let styleBorderRadius: string | undefined = undefined;
+
   $: commitShortId = formatCommit(commit.id);
+  $: if (variant === "right") {
+    styleBorderRadius =
+      "0 var(--border-radius-tiny) var(--border-radius-tiny) 0";
+  } else if (variant === "standalone") {
+    styleBorderRadius = "var(--border-radius-tiny)";
+  } else if (variant === "left") {
+    styleBorderRadius =
+      "var(--border-radius-tiny) 0 0 var(--border-radius-tiny)";
+  } else if (variant === "center") {
+    styleBorderRadius = "0";
+  } else {
+    unreachable(variant);
+  }
 </script>
 
 <style>
@@ -42,9 +57,7 @@
     variant="not-selected"
     {styleWidth}
     {styleMinWidth}
-    styleBorderRadius={styleRoundBorders
-      ? "var(--border-radius-tiny)"
-      : "var(--border-radius-tiny) 0 0 var(--border-radius-tiny)"}>
+    {styleBorderRadius}>
     <div class="txt-overflow commit">
       <div class="identifier global-commit">
         {commitShortId}