From f6916fc7e13884ad62b1def62845294a537e27bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Pfeuffer?= <rene.pfeuffer@cloudogu.com>
Date: Wed, 10 Jun 2020 10:45:04 +0200
Subject: [PATCH] Use font awesome angles

---
 scm-ui/ui-components/src/repos/DiffFile.tsx   |  8 ++++++++
 .../src/repos/HunkExpandLink.tsx              |  9 +++++++--
 scm-ui/ui-webapp/public/locales/en/repos.json | 20 +++++++++----------
 3 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/scm-ui/ui-components/src/repos/DiffFile.tsx b/scm-ui/ui-components/src/repos/DiffFile.tsx
index 96af23d51a..f2f137a8df 100644
--- a/scm-ui/ui-components/src/repos/DiffFile.tsx
+++ b/scm-ui/ui-components/src/repos/DiffFile.tsx
@@ -156,6 +156,7 @@ class DiffFile extends React.Component<Props, State> {
           <Decoration>
             <HunkDivider>
               <HunkExpandLink
+                icon={"fa-angle-up"}
                 onClick={this.expandHead(expandableHunk, expandableHunk.maxExpandHeadRange)}
                 text={this.props.t("diff.expandHeadComplete", { count: expandableHunk.maxExpandHeadRange })}
               />
@@ -167,10 +168,12 @@ class DiffFile extends React.Component<Props, State> {
           <Decoration>
             <HunkDivider>
               <HunkExpandLink
+                icon={"fa-angle-up"}
                 onClick={this.expandHead(expandableHunk, 10)}
                 text={this.props.t("diff.expandHeadByLines", { count: 10 })}
               />{" "}
               <HunkExpandLink
+                icon={"fa-angle-double-up"}
                 onClick={this.expandHead(expandableHunk, expandableHunk.maxExpandHeadRange)}
                 text={this.props.t("diff.expandHeadComplete", { count: expandableHunk.maxExpandHeadRange })}
               />
@@ -190,6 +193,7 @@ class DiffFile extends React.Component<Props, State> {
           <Decoration>
             <HunkDivider>
               <HunkExpandLink
+                icon={"fa-angle-double-down"}
                 onClick={this.expandBottom(expandableHunk, expandableHunk.maxExpandBottomRange)}
                 text={this.props.t("diff.expandBottomComplete", { count: expandableHunk.maxExpandBottomRange })}
               />
@@ -201,10 +205,12 @@ class DiffFile extends React.Component<Props, State> {
           <Decoration>
             <HunkDivider>
               <HunkExpandLink
+                icon={"fa-angle-down"}
                 onClick={this.expandBottom(expandableHunk, 10)}
                 text={this.props.t("diff.expandBottomByLines", { count: 10 })}
               />{" "}
               <HunkExpandLink
+                icon={"fa-angle-double-down"}
                 onClick={this.expandBottom(expandableHunk, expandableHunk.maxExpandBottomRange)}
                 text={this.props.t("diff.expandBottomComplete", { count: expandableHunk.maxExpandBottomRange })}
               />
@@ -223,10 +229,12 @@ class DiffFile extends React.Component<Props, State> {
         <Decoration>
           <HunkDivider>
             <HunkExpandLink
+              icon={"fa-angle-down"}
               onClick={this.expandBottom(expandableHunk, 10)}
               text={this.props.t("diff.expandLastBottomByLines")}
             />{" "}
             <HunkExpandLink
+              icon={"fa-angle-double-down"}
               onClick={this.expandBottom(expandableHunk, expandableHunk.maxExpandBottomRange)}
               text={this.props.t("diff.expandLastBottomComplete")}
             />
diff --git a/scm-ui/ui-components/src/repos/HunkExpandLink.tsx b/scm-ui/ui-components/src/repos/HunkExpandLink.tsx
index 375f074705..7779519f55 100644
--- a/scm-ui/ui-components/src/repos/HunkExpandLink.tsx
+++ b/scm-ui/ui-components/src/repos/HunkExpandLink.tsx
@@ -23,22 +23,27 @@
  */
 import React, { FC, useState } from "react";
 import { useTranslation } from "react-i18next";
+import classNames from "classnames";
 
 type Props = {
+  icon: string;
   text: string;
   onClick: () => Promise<any>;
 };
 
-const HunkExpandLink: FC<Props> = ({ text, onClick }) => {
+const HunkExpandLink: FC<Props> = ({ icon, text, onClick }) => {
   const [t] = useTranslation("repos");
   const [loading, setLoading] = useState(false);
 
   const onClickWithLoadingMarker = () => {
+    if (loading) {
+      return;
+    }
     setLoading(true);
     onClick().then(() => setLoading(false));
   };
 
-  return <span onClick={onClickWithLoadingMarker}>{loading? t("diff.expanding"): text}</span>;
+  return <span onClick={onClickWithLoadingMarker}><i className={classNames("fa", icon)} />{" "}{loading? t("diff.expanding"): text}</span>;
 };
 
 export default HunkExpandLink;
diff --git a/scm-ui/ui-webapp/public/locales/en/repos.json b/scm-ui/ui-webapp/public/locales/en/repos.json
index aaddfb4f12..6f142b067a 100644
--- a/scm-ui/ui-webapp/public/locales/en/repos.json
+++ b/scm-ui/ui-webapp/public/locales/en/repos.json
@@ -199,16 +199,16 @@
     "sideBySide": "Switch to side-by-side view",
     "combined": "Switch to combined view",
     "noDiffFound": "No Diff between the selected branches found.",
-    "expandHeadByLines": "> load {{count}} more line",
-    "expandHeadByLines_plural": "> load {{count}} more lines",
-    "expandHeadComplete": ">> load {{count}} line",
-    "expandHeadComplete_plural": ">> load all {{count}} lines",
-    "expandBottomByLines": "> load {{count}} more line",
-    "expandBottomByLines_plural": "> load {{count}} more lines",
-    "expandBottomComplete": ">> load {{count}} line",
-    "expandBottomComplete_plural": ">> load all {{count}} lines",
-    "expandLastBottomByLines": "> load up to 10 more lines",
-    "expandLastBottomComplete": ">> load all remaining lines",
+    "expandHeadByLines": "load {{count}} more line",
+    "expandHeadByLines_plural": "load {{count}} more lines",
+    "expandHeadComplete": "load {{count}} line",
+    "expandHeadComplete_plural": "load all {{count}} lines",
+    "expandBottomByLines": "load {{count}} more line",
+    "expandBottomByLines_plural": "load {{count}} more lines",
+    "expandBottomComplete": "load {{count}} line",
+    "expandBottomComplete_plural": "load all {{count}} lines",
+    "expandLastBottomByLines": "load up to 10 more lines",
+    "expandLastBottomComplete": "load all remaining lines",
     "expanding": "loading lines ...",
     "expansionFailed": "Error loading additional content"
   },