Merge pull request #127 from unisoncomputing/diff-add-remove-line-nums

Diffs: "added" and "removed" line numbers + colors

Author: hojberg

src/UnisonShare/DefinitionDiffCard.elm

@@ -76,23 +76,28 @@ viewDiffSegment syntaxConfig segment =
             ]
 
 
+viewGutter : Int -> Int -> String -> Html msg
+viewGutter gutterWidth ln indicator =
+    span [ class "gutter" ]
+        [ span [ class "line-number" ]
+            [ text
+                (String.padLeft
+                    gutterWidth
+                    ' '
+                    (String.fromInt ln)
+                )
+            ]
+        , text " "
+        , span [ class "change-indicator" ] [ text indicator ]
+        , text " "
+        ]
+
+
 viewDiffLine : (DiffSegment -> List (Html msg)) -> String -> Int -> DiffLine -> Html msg
 viewDiffLine viewSeg changeIndicator gutterWidth line =
     let
         gutter ln indicator =
-            span [ class "gutter" ]
-                [ span [ class "line-number" ]
-                    [ text
-                        (String.padLeft
-                            gutterWidth
-                            ' '
-                            (String.fromInt ln)
-                        )
-                    ]
-                , text " "
-                , span [ class "change-indicator" ] [ text indicator ]
-                , text " "
-                ]
+            viewGutter gutterWidth ln indicator
     in
     case line of
         ChangedLine { lineNum, segments } ->

src/UnisonShare/Page/ProjectContributionChangesPage.elm

@@ -477,23 +477,43 @@ viewChangedDefinitionCard projectRef toggledChangeLines branchDiff maxBadgeLengt
                         case ChangeLine.source changeLine of
                             Just source ->
                                 let
-                                    linked =
-                                        let
-                                            branchRef =
-                                                case changeLine of
-                                                    ChangeLine.Removed _ _ ->
-                                                        branchDiff.oldBranch.ref
+                                    ( branchRef, gutterIndicator ) =
+                                        case changeLine of
+                                            ChangeLine.Removed _ _ ->
+                                                ( branchDiff.oldBranch.ref, "-" )
 
-                                                    _ ->
-                                                        branchDiff.newBranch.ref
-                                        in
+                                            ChangeLine.Added _ _ ->
+                                                ( branchDiff.newBranch.ref, "+" )
+
+                                            _ ->
+                                                ( branchDiff.newBranch.ref, "" )
+
+                                    linked =
                                         SyntaxConfig.empty
                                             |> SyntaxConfig.withToClick
                                                 (Link.projectBranchDefinition projectRef branchRef)
 
+                                    gutter =
+                                        let
+                                            lns =
+                                                List.range 1 (Syntax.numLines source)
+
+                                            viewLn ln =
+                                                div [ class "gutter" ]
+                                                    [ span [ class "line-number" ] [ ln |> String.fromInt |> text ]
+                                                    , text " "
+                                                    , span [ class "change-indicator" ] [ text gutterIndicator ]
+                                                    , text " "
+                                                    ]
+                                        in
+                                        div [ class "gutter-lines" ] (List.map viewLn lns)
+
                                     expandedContent =
-                                        pre [ class "definition-syntax monochrome" ]
-                                            [ code [] [ Syntax.view linked source ] ]
+                                        div [ class "definition-source", class (String.toLower (ChangeLine.toString changeLine)) ]
+                                            [ gutter
+                                            , pre [ class "definition-syntax monochrome" ]
+                                                [ code [] [ Syntax.view linked source ] ]
+                                            ]
                                 in
                                 ( Just expandedContent
                                 , Icon.collapseUp

src/css/unison-share/page/project-contribution-changes-page.css

@@ -217,9 +217,33 @@
       }
     }
 
-    & .definition-change.card .definition-syntax {
-      overflow-x: auto;
-      padding: 0.5rem 1rem;
+    .definition-change.card .definition-source {
+      display: flex;
+      flex-direction: row;
+      gap: 0.5rem;
+
+      .gutter:last-child {
+        border-bottom-left-radius: var(--border-radius-base);
+      }
+
+      .definition-syntax {
+        overflow-x: auto;
+        line-height: var(--diff-line-height);
+      }
+
+      &.added {
+        background: var(--color-green-5);
+        .gutter {
+          color: var(--color-green-1);
+        }
+      }
+
+      &.removed {
+        background: var(--color-pink-5);
+        .gutter {
+          color: var(--color-pink-1);
+        }
+      }
     }
 
     & .definition-change.card .diff-side-by-side {
@@ -323,7 +347,7 @@
       line-height: 1;
     }
 
-    & .definition-change.card .gutter {
+    & .gutter {
       background: var(--u-color_element_subdued);
       color: var(--u-color_text_very-subdued);
       border-right: 1px solid var(--u-color_border_subdued);

webpack.dev.js

@@ -12,7 +12,7 @@ const docExamplesReadmeDef = require("./api-stubs/doc-examples-readme-definition
 const blogEngineLib = require("./api-stubs/blog-engine-lib.json");
 const browseBlog = require("./api-stubs/browse-blog.json");
 const notifications = require("./api-stubs/notifications.json");
-const branchDiff = require("./api-stubs/branch-diff-with-libs.json");
+const branchDiff = require("./api-stubs/branch-diff-weird-equals.json");
 
 // ENV
 const API_URL = process.env.API_URL || "http://127.0.0.1:5424";