diff section ui changes

Author: liuliu-dev

CHANGELOG.md

@@ -188,3 +188,7 @@ If you are upgrading from a version prior to 2.0.0, please note the changes to p
 ## [2.3.1]
 
 -- Add support for Dolt diff.
+
+## [2.3.2]
+
+-- Diff section UI fixes.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "commit-graph",
-  "version": "2.3.1",
+  "version": "2.3.2",
   "homepage": "https://liuliu-dev.github.io/CommitGraph/",
   "author": "Liu Liu <[email protected]>",
   "description": "A React component to visualize a commit graph.",
@@ -92,4 +92,4 @@
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts"
-}
+}

src/components/CommitDetails/index.module.css

@@ -34,7 +34,7 @@
 .tooltip {
   opacity: 1;
   z-index: 10;
-  max-width: 90%;
+  max-width: 60%;
   visibility: visible;
 }
 
@@ -44,7 +44,7 @@
   border: 1px solid #e1e4e8;
   background-color: white;
   position: absolute;
-  width: 320px;
+  width: 360px;
   right: 1rem;
   top: 1rem;
   z-index: 10;
@@ -60,3 +60,11 @@
   z-index: 10;
   right: 0;
 }
+
+.button {
+  background: transparent;
+  border: none;
+  margin-left: 1rem;
+  color: #3d91f0;
+  cursor: pointer;
+}

src/components/CommitDetails/index.tsx

@@ -30,9 +30,8 @@ export default function CommitDetails({
   dateFormatFn,
   currentBranch,
   fullSha,
-  clicked,
   getDiff,
-  forDolt
+  forDolt,
 }: Props) {
   const date = dateFormatFn
     ? dateFormatFn(commit.commitDate)
@@ -44,6 +43,7 @@ export default function CommitDetails({
   const [color, setColor] = useState(commit.commitColor);
 
   const [showDiff, setShowDiff] = useState(false);
+  const [showDiffButton, setShowDiffButton] = useState(false);
   const diffRef = useRef<HTMLDivElement>(null);
   useOnClickOutside(diffRef, () => {
     setShowDiff(false);
@@ -53,29 +53,39 @@ export default function CommitDetails({
     <>
       <div
         className={css.container}
-        onMouseOver={mouseOver}
-        onMouseLeave={mouseLeave}
-        onClick={() => {
-          onClick();
-          if (!showDiff) {
-            setShowDiff(true);
-          }
+        onMouseOver={() => {
+          mouseOver(), setShowDiffButton(true);
         }}
+        onMouseLeave={() => {
+          mouseLeave(), setShowDiffButton(false);
+        }}
+        onClick={onClick}
       >
         <div style={{ color: commit.commitColor }} className={css.labelAndLink}>
-          {commit.commitLink ? (
-            <a
-              style={{ color: color }}
-              href={commit.commitLink}
-              className={css.bold}
-              onMouseOver={() => setColor("#1f6dc6")}
-              onMouseLeave={() => setColor(commit.commitColor)}
-            >
-              {commitHashAuthorDate}
-            </a>
-          ) : (
-            <span className={css.bold}>{commitHashAuthorDate}</span>
-          )}
+          <div>
+            {commit.commitLink ? (
+              <a
+                style={{ color: color }}
+                href={commit.commitLink}
+                className={css.bold}
+                onMouseOver={() => setColor("#1f6dc6")}
+                onMouseLeave={() => setColor(commit.commitColor)}
+              >
+                {commitHashAuthorDate}
+              </a>
+            ) : (
+              <span className={css.bold}>{commitHashAuthorDate}</span>
+            )}
+            {showDiffButton && !!getDiff && !!commit.parents.length && (
+              <button
+                type="button"
+                className={css.button}
+                onClick={() => setShowDiff(true)}
+              >
+                See commit overview
+              </button>
+            )}
+          </div>
           <BranchLabel
             branchColor={commit.commitColor}
             branches={branch}
@@ -98,9 +108,9 @@ export default function CommitDetails({
           />
         )}
       </div>
-      {showDiff && clicked && !!getDiff && (
+      {showDiff && !!getDiff && (
         <div className={css.diffSection} ref={diffRef}>
-          <DiffSection commit={commit} getDiff={getDiff} forDolt={forDolt}/>
+          <DiffSection commit={commit} getDiff={getDiff} forDolt={forDolt} />
         </div>
       )}
     </>

src/components/CommitGraph/WithInfiniteScroll.tsx

@@ -1,12 +1,6 @@
 import React from "react";
 import CommitGraph from ".";
-import {
-  Branch,
-  Commit,
-  CommitNode,
-  Diff,
-  GraphStyle,
-} from "../../types";
+import { Branch, Commit, CommitNode, Diff, GraphStyle } from "../../types";
 import InfiniteScroll from "react-infinite-scroller";
 import css from "./index.module.css";
 

src/components/CommitGraph/index.module.css

@@ -42,7 +42,7 @@
 }
 
 .clicked {
-  background-color: #3d91f0;
+  background-color: #89bcf6;
   opacity: 0.3;
 }
 

src/components/CommitGraph/index.tsx

@@ -1,11 +1,5 @@
 import React, { useRef, useState } from "react";
-import {
-  Branch,
-  Commit,
-  CommitNode,
-  Diff,
-  GraphStyle,
-} from "../../types";
+import { Branch, Commit, CommitNode, Diff, GraphStyle } from "../../types";
 import {
   defaultStyle,
   formatCommits,
@@ -42,7 +36,7 @@ export default function CommitGraph({
   fullSha,
   onCommitClick,
   getDiff,
-  forDolt
+  forDolt,
 }: Props) {
   const [hovered, setHovered] = useState(false);
   const [clicked, setClicked] = useState(false);

src/components/Curves/index.tsx

@@ -29,7 +29,7 @@ function Inner({ newBranchCurves, mergedCurves, commit }: InnerProps) {
           return (
             <CurvePath
               key={`${commit.hash}-curved-up-path-${c.id}`}
-               curve={c}
+              curve={c}
             />
           );
         })}
@@ -38,7 +38,7 @@ function Inner({ newBranchCurves, mergedCurves, commit }: InnerProps) {
           return (
             <CurvePath
               key={`${commit.hash}-curved-down-path-${curve.id}`}
-               curve={curve}
+              curve={curve}
             />
           );
         })}

src/components/DiffSection/index.module.css

@@ -2,21 +2,25 @@
   padding: 1rem 1.5rem;
 }
 
-.hashes {
+.commitAndParents {
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  flex-direction: column;
+  align-items: start;
   margin-bottom: 1rem;
 }
 
+.hashes {
+  display: flex;
+}
+
 .bold {
   font-weight: 600;
-  margin-left: 0.5rem;
+  margin-right: 0.25rem;
 }
 
 .summary {
   padding: 0 0 1rem 1.5rem;
-  display: flex;
   border-bottom: 1px solid #e1e4e8;
   div {
     display: flex;
@@ -44,20 +48,23 @@
   color: #c5a15a;
   margin-right: 0.25rem;
   font-weight: 600;
+  width: 0.75rem;
 }
 
 .deleted {
   color: #fa7978;
   margin-right: 0.25rem;
   font-weight: 600;
   stroke-width: 3px;
+  width: 0.75rem;
 }
 
 .added {
   color: #29e3c1;
   margin-right: 0.25rem;
   font-weight: 600;
   stroke-width: 3px;
+  width: 0.75rem;
 }
 
 .file {

src/components/DiffSection/index.tsx

@@ -31,24 +31,33 @@ export default function DiffSection({ commit, getDiff, forDolt }: Props) {
   }, [commit, getDiff]);
 
   const { added, modified, deleted } = getChanged(diff?.files || []);
-  const parents = commit.parents.map(parent => parent.slice(0, 7)).join(", ");
-  const file=forDolt ? "table" : "file";
+  const file = forDolt ? "table" : "file";
+
   return (
     <div>
       <div className={css.top}>
-        <div className={css.hashes}>
-          <div>
-            commit:
-            <span className={css.bold}>{commit.hash.slice(0, 7)}</span>
+        <div className={css.commitAndParents}>
+          <div className={css.hashes}>
+            <div className={css.bold}>commit:</div>
+            <div>{commit.hash}</div>
           </div>
-          <div>
-            parent:
-            <span className={css.bold}>{parents}</span>
+          <div className={css.hashes}>
+            <div className={css.bold}>
+              {pluralize(commit.parents.length, "parent")}:
+            </div>
+            <div>
+              {commit.parents.map((p, i) => (
+                <div>
+                  {p}
+                  {i === commit.parents.length - 1 ? "" : ","}
+                </div>
+              ))}
+            </div>
           </div>
         </div>
         <div className={css.message}>{commit.message}</div>
       </div>
-      {diff && (
+      {!!diff?.files.length && (
         <>
           <div className={css.summary}>
             {!!modified && (