Fix layout and pointer hand for expand link

scm-ui/ui-components/src/repos/DiffFile.tsx

@@ -26,7 +26,7 @@ import { withTranslation, WithTranslation } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
 // @ts-ignore
-import { Decoration, getChangeKey, Hunk } from "react-diff-view";
+import { getChangeKey, Hunk } from "react-diff-view";
 import { ButtonGroup } from "../buttons";
 import Tag from "../Tag";
 import Icon from "../Icon";
@@ -38,6 +38,7 @@ import DiffExpander, { ExpandableHunk } from "./DiffExpander";
 import HunkExpandLink from "./HunkExpandLink";
 import { Modal } from "../modals";
 import ErrorNotification from "../ErrorNotification";
+import HunkExpandDivider from "./HunkExpandDivider";
 
 const EMPTY_ANNOTATION_FACTORY = {};
 
@@ -81,11 +82,6 @@ const ButtonWrapper = styled.div`
   margin-left: auto;
 `;
 
-const HunkDivider = styled.div`
-  background: #98d8f3;
-  font-size: 0.7rem;
-`;
-
 const ChangeTypeTag = styled(Tag)`
   margin-left: 0.75rem;
 `;
@@ -153,32 +149,28 @@ class DiffFile extends React.Component<Props, State> {
     if (expandableHunk.maxExpandHeadRange > 0) {
       if (expandableHunk.maxExpandHeadRange <= 10) {
         return (
-          <Decoration>
+          <HunkExpandDivider>
-            <HunkDivider>
+            <HunkExpandLink
-              <HunkExpandLink
+              icon={"fa-angle-double-up"}
-                icon={"fa-angle-double-up"}
+              onClick={this.expandHead(expandableHunk, expandableHunk.maxExpandHeadRange)}
-                onClick={this.expandHead(expandableHunk, expandableHunk.maxExpandHeadRange)}
+              text={this.props.t("diff.expandComplete", { count: expandableHunk.maxExpandHeadRange })}
-                text={this.props.t("diff.expandComplete", { count: expandableHunk.maxExpandHeadRange })}
+            />
-              />
+          </HunkExpandDivider>
-            </HunkDivider>
-          </Decoration>
         );
       } else {
         return (
-          <Decoration>
+          <HunkExpandDivider>
-            <HunkDivider>
+            <HunkExpandLink
-              <HunkExpandLink
+              icon={"fa-angle-up"}
-                icon={"fa-angle-up"}
+              onClick={this.expandHead(expandableHunk, 10)}
-                onClick={this.expandHead(expandableHunk, 10)}
+              text={this.props.t("diff.expandByLines", { count: 10 })}
-                text={this.props.t("diff.expandByLines", { count: 10 })}
+            />{" "}
-              />{" "}
+            <HunkExpandLink
-              <HunkExpandLink
+              icon={"fa-angle-double-up"}
-                icon={"fa-angle-double-up"}
+              onClick={this.expandHead(expandableHunk, expandableHunk.maxExpandHeadRange)}
-                onClick={this.expandHead(expandableHunk, expandableHunk.maxExpandHeadRange)}
+              text={this.props.t("diff.expandComplete", { count: expandableHunk.maxExpandHeadRange })}
-                text={this.props.t("diff.expandComplete", { count: expandableHunk.maxExpandHeadRange })}
+            />
-              />
+          </HunkExpandDivider>
-            </HunkDivider>
-          </Decoration>
         );
       }
     }
@@ -190,32 +182,28 @@ class DiffFile extends React.Component<Props, State> {
     if (expandableHunk.maxExpandBottomRange > 0) {
       if (expandableHunk.maxExpandBottomRange <= 10) {
         return (
-          <Decoration>
+          <HunkExpandDivider>
-            <HunkDivider>
+            <HunkExpandLink
-              <HunkExpandLink
+              icon={"fa-angle-double-down"}
-                icon={"fa-angle-double-down"}
+              onClick={this.expandBottom(expandableHunk, expandableHunk.maxExpandBottomRange)}
-                onClick={this.expandBottom(expandableHunk, expandableHunk.maxExpandBottomRange)}
+              text={this.props.t("diff.expandComplete", { count: expandableHunk.maxExpandBottomRange })}
-                text={this.props.t("diff.expandComplete", { count: expandableHunk.maxExpandBottomRange })}
+            />
-              />
+          </HunkExpandDivider>
-            </HunkDivider>
-          </Decoration>
         );
       } else {
         return (
-          <Decoration>
+          <HunkExpandDivider>
-            <HunkDivider>
+            <HunkExpandLink
-              <HunkExpandLink
+              icon={"fa-angle-down"}
-                icon={"fa-angle-down"}
+              onClick={this.expandBottom(expandableHunk, 10)}
-                onClick={this.expandBottom(expandableHunk, 10)}
+              text={this.props.t("diff.expandByLines", { count: 10 })}
-                text={this.props.t("diff.expandByLines", { count: 10 })}
+            />{" "}
-              />{" "}
+            <HunkExpandLink
-              <HunkExpandLink
+              icon={"fa-angle-double-down"}
-                icon={"fa-angle-double-down"}
+              onClick={this.expandBottom(expandableHunk, expandableHunk.maxExpandBottomRange)}
-                onClick={this.expandBottom(expandableHunk, expandableHunk.maxExpandBottomRange)}
+              text={this.props.t("diff.expandComplete", { count: expandableHunk.maxExpandBottomRange })}
-                text={this.props.t("diff.expandComplete", { count: expandableHunk.maxExpandBottomRange })}
+            />
-              />
+          </HunkExpandDivider>
-            </HunkDivider>
-          </Decoration>
         );
       }
     }
@@ -226,20 +214,18 @@ class DiffFile extends React.Component<Props, State> {
   createLastHunkFooter = (expandableHunk: ExpandableHunk) => {
     if (expandableHunk.maxExpandBottomRange !== 0) {
       return (
-        <Decoration>
+        <HunkExpandDivider>
-          <HunkDivider>
+          <HunkExpandLink
-            <HunkExpandLink
+            icon={"fa-angle-down"}
-              icon={"fa-angle-down"}
+            onClick={this.expandBottom(expandableHunk, 10)}
-              onClick={this.expandBottom(expandableHunk, 10)}
+            text={this.props.t("diff.expandLastBottomByLines", { count: 10 })}
-              text={this.props.t("diff.expandLastBottomByLines", { count: 10 })}
+          />{" "}
-            />{" "}
+          <HunkExpandLink
-            <HunkExpandLink
+            icon={"fa-angle-double-down"}
-              icon={"fa-angle-double-down"}
+            onClick={this.expandBottom(expandableHunk, expandableHunk.maxExpandBottomRange)}
-              onClick={this.expandBottom(expandableHunk, expandableHunk.maxExpandBottomRange)}
+            text={this.props.t("diff.expandLastBottomComplete")}
-              text={this.props.t("diff.expandLastBottomComplete")}
+          />
-            />
+        </HunkExpandDivider>
-          </HunkDivider>
-        </Decoration>
       );
     }
     // hunk header must be defined
@@ -269,7 +255,6 @@ class DiffFile extends React.Component<Props, State> {
   };
 
   diffExpansionFailed = (err: any) => {
-    console.log(err);
     this.setState({ expansionError: err });
   };
 

scm-ui/ui-components/src/repos/HunkExpandDivider.tsx

@@ -0,0 +1,42 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React, { FC } from "react";
+import { Decoration } from "react-diff-view";
+import styled from "styled-components";
+
+const HunkDivider = styled.div`
+  background: #98d8f3;
+  font-size: 0.7rem;
+  padding-left: 1.78em;
+`;
+
+const HunkExpandDivider: FC = ({ children }) => {
+  return (
+    <Decoration>
+      <HunkDivider>{children}</HunkDivider>
+    </Decoration>
+  );
+};
+
+export default HunkExpandDivider;

scm-ui/ui-components/src/repos/HunkExpandLink.tsx

@@ -24,6 +24,7 @@
 import React, { FC, useState } from "react";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
+import styled from "styled-components";
 
 type Props = {
   icon: string;
@@ -31,6 +32,10 @@ type Props = {
   onClick: () => Promise<any>;
 };
 
+const ExpandLink = styled.span`
+  cursor: pointer;
+`;
+
 const HunkExpandLink: FC<Props> = ({ icon, text, onClick }) => {
   const [t] = useTranslation("repos");
   const [loading, setLoading] = useState(false);
@@ -44,9 +49,9 @@ const HunkExpandLink: FC<Props> = ({ icon, text, onClick }) => {
   };
 
   return (
-    <span onClick={onClickWithLoadingMarker}>
+    <ExpandLink onClick={onClickWithLoadingMarker}>
       <i className={classNames("fa", icon)} /> {loading ? t("diff.expanding") : text}
-    </span>
+    </ExpandLink>
   );
 };