4419384 Update Changeset — radicle-explorer

Radicle web interface

Update Changeset

Sebastian Martinez committed 3 years ago

commit 44193842fd197087441795328c6ae68dcbae8872
parent c5d5053f0cfb8b6e6da7b2f835ab715ba4d2892e

3 files changed +70 -81

modified src/base/projects/SourceBrowser/Changeset.svelte

@@ -1,19 +1,29 @@

 <script lang="ts">
   import { createEventDispatcher } from "svelte";
   import type { CommitStats } from "@app/commit";
   import type { DiffStats } from "@app/commit";
   import type { Diff } from "@app/diff";
   import Icon from "@app/Icon.svelte";
   import FileDiff from "@app/base/projects/SourceBrowser/FileDiff.svelte";
   const dispatch = createEventDispatcher();
   export let diff: Diff;
   export let stats: DiffStats;
   const diffDescription = ({ modified, created, deleted }: Diff): string => {
     let s = "";
     if (created.length) {
       s = s.concat(`${created.length} file(s) created`);
     }
     if (deleted.length) {
       s = s.concat(`, ${deleted.length} file(s) deleted`);
     }
     if (modified.length) {
       s = s.concat(` and ${modified.length} file(s) changed`);
     }
     return s;
   };
 </script>
 <style>
   .changeset-summary {
     margin: 1.5rem 0;
     padding: 1.5rem 0;
     margin-left: 1rem;
   }
   .changeset-summary .additions {

@@ -22,82 +32,28 @@

   .changeset-summary .deletions {
     color: var(--color-negative);
   }
   .file-header {
     border: 1px solid var(--color-foreground-3);
     border-radius: var(--border-radius-medium);
     height: 3rem;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     background: none;
     padding: 1rem;
     margin-bottom: 1rem;
   }
   .file-header:last-child {
     margin-bottom: 1rem;
   }
   .file-header .diff-type {
     margin-left: 1rem;
     padding: 0.25rem 0.5rem;
     border-radius: var(--border-radius-medium);
   }
   .file-header .diff-type.created {
     color: var(--color-positive);
     font-family: var(--font-family-monospace);
     font-size: 0.75rem;
     background-color: var(--color-positive-1);
   }
   .file-header .diff-type.deleted {
     color: var(--color-negative);
     font-family: var(--font-family-monospace);
     font-size: 0.75rem;
     background-color: var(--color-negative-1);
   }
   .file-header .file-data {
     display: flex;
     flex-direction: row;
     align-items: center;
   }
   .browse {
     display: flex;
   .diff-listing {
     /* This border forces to keep the FileDiff margin-bottom visible */
     border: 1px solid transparent;
     margin: 0 1rem;
   }
 </style>
 <div class="changeset-summary">
   {#if diff.modified.length > 0}
     <span> {diff.modified.length} file(s) changed </span>
     with
     <span class="additions"> {stats.additions} addition(s) </span>
     and
     <span class="deletions"> {stats.deletions} deletion(s) </span>
   {/if}
   <span>{diffDescription(diff)}</span>
   with
   <span class="additions"> {stats.additions} addition(s) </span>
   and
   <span class="deletions"> {stats.deletions} deletion(s) </span>
 </div>
 <div>
   {#each diff.created as path (path)}
     <header id={path} class="file-header">
       <div class="file-data">
         <p>{path}</p>
         <span class="diff-type created">created</span>
       </div>
       <div class="browse" on:click={() => dispatch("browse", path)}>
         <Icon name="browse" width={20} inline fill />
       </div>
     </header>
 <div class="diff-listing">
   {#each diff.created as file}
     <FileDiff on:browse {file} mode="created" />
   {/each}
   {#each diff.deleted as file}
     <FileDiff on:browse {file} mode="deleted" />
   {/each}
   {#each diff.deleted as path (path)}
     <header id={path} class="file-header">
       <div class="file-data">
         <p>{path}</p>
         <span class="diff-type deleted">deleted</span>
       </div>
       <div class="browse" on:click={() => dispatch("browse", path)}>
         <Icon name="browse" width={20} inline fill />
       </div>
     </header>
   {#each diff.modified as file}
     <FileDiff on:browse {file} />
   {/each}
 </div>
 {#each diff.modified as file}
   <FileDiff on:browse {file} />
 {/each}

modified src/base/projects/SourceBrowser/FileDiff.svelte

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

   const dispatch = createEventDispatcher();
   export let file: FileDiff;
   export let mode: string | null = null;
   function collapse() {
     collapsed = !collapsed;

@@ -111,13 +112,38 @@

   .browse {
     display: flex;
   }
   .created {
     color: var(--color-positive);
     font-family: var(--font-family-monospace);
     font-size: 0.75rem;
     background-color: var(--color-positive-1);
   }
   .deleted {
     color: var(--color-negative);
     font-family: var(--font-family-monospace);
     font-size: 0.75rem;
     background-color: var(--color-negative-1);
   }
   .file-header .diff-type {
     margin-left: 1rem;
     padding: 0.25rem 0.5rem;
     border-radius: var(--border-radius-medium);
   }
 </style>
 <article id={file.path} class="changeset-file">
   <header
     on:click={collapse}>
   <header class="file-header" on:click={collapse}>
     <div class="actions">
       <p class="file-path">{file.path}</p>
       {#if mode}
         <span
           class="diff-type"
           class:created={mode === "created"}
           class:deleted={mode === "deleted"}>
           {mode}
         </span>
       {/if}
     </div>
     <div class="browse clickable" on:click|stopPropagation={() => dispatch("browse", file.path)}>
       <Icon name="browse" width={20} inline fill />

modified src/diff.ts

@@ -70,6 +70,7 @@ export type LineDiff = Addition | Deletion | Context;

 export interface FileDiff {
   path: string;
   diff: Changeset;
   eof: EofNewLine | null;
 }
 export interface Changeset {

@@ -83,9 +84,15 @@ export interface Hunk {

 }
 export interface Diff {
   created: string[];
   deleted: string[];
   created: FileDiff[];
   deleted: FileDiff[];
   moved: string[];
   copied: string[];
   modified: FileDiff[];
 }
 export enum EofNewLine {
   OldMissing = "oldMissing",
   NewMissing = "newMissing",
   BothMissing = "bothMissing",
 }