Fix peer branch selector gaps — radicle-explorer

rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5

Radicle web interface

Fix peer branch selector gaps

Merged did:key:z6MkkfM3...sVz5 opened 1 year ago

4 files changed +35 -22 4de9724f → 06fa429e

modified 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">

modified 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"

modified 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>

modified 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}