c44cd57 Fix movement of diff text when lines are selected — radicle-explorer

Radicle web interface

Fix movement of diff text when lines are selected

Thomas Scholtes committed 2 years ago

commit c44cd5771bfc4698533602b6b470f978a4c21707
parent 5ee8c8281b4b4c393378c43b03b8b53dfc9f1fa8

1 file changed +36 -60

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

@@ -47,8 +47,7 @@

     if (
       !(
         e.target instanceof HTMLElement &&
         (e.target.hasAttribute("data-line-type") ||
           e.target.classList.contains("diff-line-content"))
         e.target.closest("[data-file-diff-select]")
       )
     ) {
       updateHash("");

@@ -98,18 +97,7 @@

     }
   }
   function lineSign(line: HunkLine, hashSelected = false): string {
     if (hashSelected) {
       switch (line.type) {
         case "addition": {
           return "@+";
         }
         case "deletion": {
           return "@-";
         }
       }
       return "@";
     }
   function lineSign(line: HunkLine): string {
     switch (line.type) {
       case "addition": {
         return "+";

@@ -192,23 +180,13 @@

     }
   }
   function headerSign(
     selection: Selection | undefined,
     hunkIdx: number,
   ): string {
     if (!selection) {
       return "";
     }
     if (
   function hunkHeaderSelected(selection: Selection | undefined, hunk: number) {
     return (
       selection &&
       selection.endHunk !== undefined &&
       hunkIdx > selection.startHunk &&
       hunkIdx <= selection.endHunk
     ) {
       return "@@@";
     }
     return "";
       hunk > selection.startHunk &&
       hunk <= selection.endHunk
     );
   }
   interface Selection {

@@ -271,37 +249,27 @@

   .diff-line {
     vertical-align: top;
   }
   .diff-line[data-line-type="+"] > * {
   .diff-line.type-addition > * {
     color: var(--color-positive-6);
     background-color: var(--color-positive-2);
   }
   .diff-line[data-line-type="-"] > * {
   .diff-line.type-deletion > * {
     color: var(--color-negative-6);
     background-color: var(--color-negative-2);
   }
   .diff-line[data-line-type="@"] > * {
   .diff-line.selected > * {
     color: var(--color-foreground-6);
     background-color: var(--color-foreground-4);
   }
   .diff-line[data-line-type="@+"] > * {
   .diff-line.selected.type-addition > * {
     color: var(--color-positive-6);
     background-color: var(--color-positive-4);
   }
   .diff-line[data-line-type="@-"] > * {
   .diff-line.selected.type-deletion > * {
     color: var(--color-negative-6);
     background-color: var(--color-negative-4);
   }
   .diff-line[data-line-type="@"] {
     border-left: 4px solid var(--color-primary);
   }
   .diff-line[data-line-type="@+"] {
     border-left: 4px solid var(--color-primary);
   }
   .diff-line[data-line-type="@-"] {
     border-left: 4px solid var(--color-primary);
   }
   .diff-line[data-line-type="@@@"] {
     border-left: 4px solid var(--color-primary);
   .diff-line.hunk-header.selected {
     background-color: var(--color-foreground-4);
   }
   .diff-line-number {

@@ -312,8 +280,19 @@

     cursor: pointer;
   }
   .diff-line-number.left {
     position: relative;
     padding: 0 0.5rem 0 0.75rem;
   }
   .selection-indicator {
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     width: 4px;
   }
   .diff-line.selected .selection-indicator {
     background: var(--color-primary);
   }
   .diff-line-number.right {
     padding: 0 0.75rem 0 0.5rem;
   }

@@ -374,35 +353,32 @@

     <main>
       {#if file.diff.type === "plain"}
         {#if file.diff.hunks.length > 0}
           <table class="diff">
           <table class="diff" data-file-diff-select>
             {#each file.diff.hunks as hunk, hunkIdx}
               <tr
                 class="diff-line"
                 data-line-type={headerSign(selection, hunkIdx)}>
                 <td colspan={2} />
                 class="diff-line hunk-header"
                 class:selected={hunkHeaderSelected(selection, hunkIdx)}>
                 <td colspan={2} style:position="relative">
                   <div class="selection-indicator" />
                 </td>
                 <td colspan={6} class="diff-expand-header">
                   {hunk.header}
                 </td>
               </tr>
               {#each hunk.lines as line, lineIdx}
                 <tr
                   class="diff-line"
                   data-expanded
                   data-line-type={lineSign(
                     line,
                     isLineSelected(selection, hunkIdx, lineIdx),
                   )}>
                   class={`diff-line type-${line.type}`}
                   class:selected={isLineSelected(selection, hunkIdx, lineIdx)}>
                   <td
                     id={[file.path, "H" + hunkIdx, "L" + lineIdx].join("-")}
                     class="diff-line-number left"
                     on:click={e => selectLine(hunkIdx, lineIdx, e)}
                     data-line-type={lineSign(line)}>
                     on:click={e => selectLine(hunkIdx, lineIdx, e)}>
                     <div class="selection-indicator" />
                     {lineNumberL(line)}
                   </td>
                   <td
                     class="diff-line-number right"
                     on:click={e => selectLine(hunkIdx, lineIdx, e)}
                     data-line-type={lineSign(line)}>
                     on:click={e => selectLine(hunkIdx, lineIdx, e)}>
                     {lineNumberR(line)}
                   </td>
                   <td class="diff-line-type" data-line-type={line.type}>