c00c879 Expand and collapse all files in a changeset quickly — radicle-explorer

Radicle web interface

Expand and collapse all files in a changeset quickly

Sebastian Martinez committed 2 years ago

commit c00c879d0cd365ce76499a6aa2b0a61b961f7694
parent ab88f31eef49c211d145ed55f4dedf553be6dde4

3 files changed +37 -16

modified src/components/File.svelte

@@ -3,8 +3,8 @@

   import ExpandButton from "./ExpandButton.svelte";
   export let collapsable: boolean = false;
   export let expanded: boolean = true;
   let expanded = true;
   let header: HTMLDivElement;
 </script>

modified src/views/projects/Changeset.svelte

@@ -9,6 +9,7 @@

   import { pluralize } from "@app/lib/pluralize";
   import Button from "@app/components/Button.svelte";
   import FileDiff from "@app/views/projects/Changeset/FileDiff.svelte";
   import FileLocationChange from "@app/views/projects/Changeset/FileLocationChange.svelte";
   import Observer, { intersection } from "@app/components/Observer.svelte";

@@ -19,6 +20,8 @@

   export let projectId: string;
   export let revision: string;
   let expanded = true;
   const diffDescription = ({
     modified,
     added,

@@ -59,9 +62,12 @@

 </script>
 <style>
   .summary {
   .header {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
     padding-bottom: 1.5rem;
     margin-left: 1rem;
   }
   .additions {
     color: var(--color-foreground-success);

@@ -76,18 +82,28 @@

   }
 </style>
 <div class="summary">
   <span>{diffDescription(diff)}</span>
   with
   <span class:additions={diff.stats.insertions > 0}>
     {diff.stats.insertions}
     {pluralize("insertion", diff.stats.insertions)}
   </span>
   and
   <span class:deletions={diff.stats.deletions > 0}>
     {diff.stats.deletions}
     {pluralize("deletion", diff.stats.deletions)}
   </span>
 <div class="header">
   <summary style:margin-left="1rem">
     <span>{diffDescription(diff)}</span>
     with
     <span class:additions={diff.stats.insertions > 0}>
       {diff.stats.insertions}
       {pluralize("insertion", diff.stats.insertions)}
     </span>
     and
     <span class:deletions={diff.stats.deletions > 0}>
       {diff.stats.deletions}
       {pluralize("deletion", diff.stats.deletions)}
     </span>
   </summary>
   <div style:display="flex" style:gap="1rem">
     <Button variant="outline" on:click={() => (expanded = true)}>
       Expand all
     </Button>
     <Button variant="outline" on:click={() => (expanded = false)}>
       Collapse all
     </Button>
   </div>
 </div>
 <div class="diff-list">

@@ -98,6 +114,7 @@

           {projectId}
           {baseUrl}
           {revision}
           {expanded}
           visible={filesVisibility.has(file.path)}
           content={files[file.new.oid]?.content}
           filePath={file.path}

@@ -111,6 +128,7 @@

           {projectId}
           {baseUrl}
           {revision}
           {expanded}
           visible={filesVisibility.has(file.path)}
           oldContent={files[file.old.oid]?.content}
           filePath={file.path}

@@ -124,6 +142,7 @@

           {projectId}
           {baseUrl}
           {revision}
           {expanded}
           visible={filesVisibility.has(file.path)}
           oldContent={files[file.old.oid]?.content}
           content={files[file.new.oid]?.content}

@@ -138,6 +157,7 @@

             {projectId}
             {baseUrl}
             {revision}
             {expanded}
             content=""
             visible={filesVisibility.has(file.newPath)}
             filePath={file.newPath}

modified src/views/projects/Changeset/FileDiff.svelte

@@ -30,6 +30,7 @@

   export let baseUrl: BaseUrl;
   export let projectId: string;
   export let visible: boolean = false;
   export let expanded: boolean = true;
   let selection: Selection | undefined = undefined;
   let highlighting: { new?: string[]; old?: string[] } | undefined = undefined;

@@ -376,7 +377,7 @@

   }
 </style>
 <File collapsable>
 <File collapsable {expanded}>
   <svelte:fragment slot="left-header">
     {#if (headerBadgeCaption === "moved" || headerBadgeCaption === "copied") && oldFilePath}
       <span>