Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-15 09:46:16 +01:00
Code Issues Packages Projects Releases Activity

Use font awesome angles

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

8
scm-ui/ui-components/src/repos/DiffFile.tsx
View File

@@ -156,6 +156,7 @@ class DiffFile extends React.Component<Props, State> {
<Decoration> <Decoration>
<HunkDivider> <HunkDivider>
<HunkExpandLink <HunkExpandLink
icon={"fa-angle-up"}
onClick={this.expandHead(expandableHunk, expandableHunk.maxExpandHeadRange)} onClick={this.expandHead(expandableHunk, expandableHunk.maxExpandHeadRange)}
text={this.props.t("diff.expandHeadComplete", { count: expandableHunk.maxExpandHeadRange })} text={this.props.t("diff.expandHeadComplete", { count: expandableHunk.maxExpandHeadRange })}
/> />
@@ -167,10 +168,12 @@ class DiffFile extends React.Component<Props, State> {
<Decoration> <Decoration>
<HunkDivider> <HunkDivider>
<HunkExpandLink <HunkExpandLink
icon={"fa-angle-up"}
onClick={this.expandHead(expandableHunk, 10)} onClick={this.expandHead(expandableHunk, 10)}
text={this.props.t("diff.expandHeadByLines", { count: 10 })} text={this.props.t("diff.expandHeadByLines", { count: 10 })}
/>{" "} />{" "}
<HunkExpandLink <HunkExpandLink
icon={"fa-angle-double-up"}
onClick={this.expandHead(expandableHunk, expandableHunk.maxExpandHeadRange)} onClick={this.expandHead(expandableHunk, expandableHunk.maxExpandHeadRange)}
text={this.props.t("diff.expandHeadComplete", { count: expandableHunk.maxExpandHeadRange })} text={this.props.t("diff.expandHeadComplete", { count: expandableHunk.maxExpandHeadRange })}
/> />
@@ -190,6 +193,7 @@ class DiffFile extends React.Component<Props, State> {
<Decoration> <Decoration>
<HunkDivider> <HunkDivider>
<HunkExpandLink <HunkExpandLink
icon={"fa-angle-double-down"}
onClick={this.expandBottom(expandableHunk, expandableHunk.maxExpandBottomRange)} onClick={this.expandBottom(expandableHunk, expandableHunk.maxExpandBottomRange)}
text={this.props.t("diff.expandBottomComplete", { count: expandableHunk.maxExpandBottomRange })} text={this.props.t("diff.expandBottomComplete", { count: expandableHunk.maxExpandBottomRange })}
/> />
@@ -201,10 +205,12 @@ class DiffFile extends React.Component<Props, State> {
<Decoration> <Decoration>
<HunkDivider> <HunkDivider>
<HunkExpandLink <HunkExpandLink
icon={"fa-angle-down"}
onClick={this.expandBottom(expandableHunk, 10)} onClick={this.expandBottom(expandableHunk, 10)}
text={this.props.t("diff.expandBottomByLines", { count: 10 })} text={this.props.t("diff.expandBottomByLines", { count: 10 })}
/>{" "} />{" "}
<HunkExpandLink <HunkExpandLink
icon={"fa-angle-double-down"}
onClick={this.expandBottom(expandableHunk, expandableHunk.maxExpandBottomRange)} onClick={this.expandBottom(expandableHunk, expandableHunk.maxExpandBottomRange)}
text={this.props.t("diff.expandBottomComplete", { count: expandableHunk.maxExpandBottomRange })} text={this.props.t("diff.expandBottomComplete", { count: expandableHunk.maxExpandBottomRange })}
/> />
@@ -223,10 +229,12 @@ class DiffFile extends React.Component<Props, State> {
<Decoration> <Decoration>
<HunkDivider> <HunkDivider>
<HunkExpandLink <HunkExpandLink
icon={"fa-angle-down"}
onClick={this.expandBottom(expandableHunk, 10)} onClick={this.expandBottom(expandableHunk, 10)}
text={this.props.t("diff.expandLastBottomByLines")} text={this.props.t("diff.expandLastBottomByLines")}
/>{" "} />{" "}
<HunkExpandLink <HunkExpandLink
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")}
/> />

9
scm-ui/ui-components/src/repos/HunkExpandLink.tsx
View File

@@ -23,22 +23,27 @@
*/ */
import React, { FC, useState } from "react"; import React, { FC, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import classNames from "classnames";
type Props = { type Props = {
icon: string;
text: string; text: string;
onClick: () => Promise<any>; onClick: () => Promise<any>;
}; };
const HunkExpandLink: FC<Props> = ({ text, onClick }) => { const HunkExpandLink: FC<Props> = ({ icon, text, onClick }) => {
const [t] = useTranslation("repos"); const [t] = useTranslation("repos");
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const onClickWithLoadingMarker = () => { const onClickWithLoadingMarker = () => {
if (loading) {
return;
}
setLoading(true); setLoading(true);
onClick().then(() => setLoading(false)); 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; export default HunkExpandLink;

20
scm-ui/ui-webapp/public/locales/en/repos.json
View File

@@ -199,16 +199,16 @@
"sideBySide": "Switch to side-by-side view", "sideBySide": "Switch to side-by-side view",
"combined": "Switch to combined view", "combined": "Switch to combined view",
"noDiffFound": "No Diff between the selected branches found.", "noDiffFound": "No Diff between the selected branches found.",
"expandHeadByLines": "> load {{count}} more line", "expandHeadByLines": "load {{count}} more line",
"expandHeadByLines_plural": "> load {{count}} more lines", "expandHeadByLines_plural": "load {{count}} more lines",
"expandHeadComplete": ">> load {{count}} line", "expandHeadComplete": "load {{count}} line",
"expandHeadComplete_plural": ">> load all {{count}} lines", "expandHeadComplete_plural": "load all {{count}} lines",
"expandBottomByLines": "> load {{count}} more line", "expandBottomByLines": "load {{count}} more line",
"expandBottomByLines_plural": "> load {{count}} more lines", "expandBottomByLines_plural": "load {{count}} more lines",
"expandBottomComplete": ">> load {{count}} line", "expandBottomComplete": "load {{count}} line",
"expandBottomComplete_plural": ">> load all {{count}} lines", "expandBottomComplete_plural": "load all {{count}} lines",
"expandLastBottomByLines": "> load up to 10 more lines", "expandLastBottomByLines": "load up to 10 more lines",
"expandLastBottomComplete": ">> load all remaining lines", "expandLastBottomComplete": "load all remaining lines",
"expanding": "loading lines ...", "expanding": "loading lines ...",
"expansionFailed": "Error loading additional content" "expansionFailed": "Error loading additional content"
}, },