Use font awesome angles

This commit is contained in:
René Pfeuffer
2020-06-10 10:45:04 +02:00
parent 35c78b7ad9
commit f6916fc7e1
3 changed files with 25 additions and 12 deletions

View File

@@ -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")}
/>

View File

@@ -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;

View File

@@ -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"
},