Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2026-05-07 17:55:59 +02:00
Code Issues Packages Projects Releases Activity

Add file status indicator via icon stacking

Browse Source
This commit is contained in:
LukasBisz
2025-03-14 00:26:55 +01:00
parent 0be63a10ae
commit fa049d29e2
2 changed files with 62 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
gradle/changelog/add-status-icon-in-file-tree.yaml
View File

@@ -1,2 +1,2 @@
- type: added
description: Colored status icons in file tree
description: Colored status icons in file tree using icon stacking

75
scm-ui/ui-components/src/repos/diff/DiffFileTree.tsx
View File

@@ -101,7 +101,12 @@ const FileChangeTypeIcon: FC<FileChangeTypeIconProps> = ({ changeType }) => {
const [t] = useTranslation("repos");
if (changeType === "ADD") {
return (
<StyledStatus className="has-text-success" style={{ minWidth: "1.5rem" }} key={"add"} alt={t("diff.changes.add")}>
<StyledStatus
className="has-text-success"
style={{ minWidth: "1rem", fontSize: "0.7rem", verticalAlign: "top" }}
key={"add"}
alt={t("diff.changes.add")}
>
plus
</StyledStatus>
);
@@ -110,11 +115,11 @@ const FileChangeTypeIcon: FC<FileChangeTypeIconProps> = ({ changeType }) => {
return (
<StyledStatus
className="has-text-info"
style={{ minWidth: "1.5rem" }}
style={{ minWidth: "1.5rem", fontSize: "0.4rem", verticalAlign: "top" }}
key={"modify"}
alt={t("diff.changes.modify")}
>
slash
circle
</StyledStatus>
);
}
@@ -122,7 +127,7 @@ const FileChangeTypeIcon: FC<FileChangeTypeIconProps> = ({ changeType }) => {
return (
<StyledStatus
className="has-text-danger"
style={{ minWidth: "1.5rem" }}
style={{ minWidth: "1.5rem", fontSize: "0.7rem", verticalAlign: "top" }}
key={"delete"}
alt={t("diff.changes.delete")}
>
@@ -134,17 +139,22 @@ const FileChangeTypeIcon: FC<FileChangeTypeIconProps> = ({ changeType }) => {
return (
<StyledStatus
className="has-text-info"
style={{ minWidth: "1.5rem" }}
style={{ minWidth: "1.5rem", fontSize: "0.4rem", verticalAlign: "top" }}
key={"rename"}
alt={t("diff.changes.rename")}
>
slash
circle
</StyledStatus>
);
}
if (changeType === "COPY") {
return (
<StyledStatus className="has-text-info" style={{ minWidth: "1.5rem" }} key={"copy"} alt={t("diff.changes.copy")}>
<StyledStatus
className="has-text-info"
style={{ minWidth: "1.5rem", fontSize: "0.7rem", verticalAlign: "top" }}
key={"copy"}
alt={t("diff.changes.copy")}
>
plus
</StyledStatus>
);
@@ -152,6 +162,23 @@ const FileChangeTypeIcon: FC<FileChangeTypeIconProps> = ({ changeType }) => {
return null;
};
const getChangeTypeClassName = (changetype: string) => {
switch (changetype) {
case "ADD":
return "has-text-success";
case "MODIFY":
return "has-text-info";
case "DELETE":
return "has-text-danger";
case "RENAME":
return "has-text-info";
case "COPY":
return "has-text-info";
default:
return "";
}
};
type FileProps = {
changeType: string;
path: string;
@@ -175,16 +202,36 @@ const TreeFile: FC<FileProps> = ({ changeType, path, parentPath, currentFile, se
return (
<TreeFileContent className={"is-flex py-1 pl-3"} onClick={() => setCurrentFile(completePath)}>
{isCurrentFile() ? (
<StyledIcon style={{ minWidth: "1.5rem" }} key={completePath + "file"} alt={t("diff.showContent")}>
file
</StyledIcon>
<span className="fa-stack" style={{ minWidth: "1.5rem", maxWidth: "1.5rem" }}>
<StyledIcon
className="fa-stack-2x fa-xs"
style={{ minWidth: "1.5rem", fontSize: "1.5rem" }}
key={completePath + "file"}
alt={t("diff.showContent")}
>
file
</StyledIcon>
<span className="fa-stack-1x fa-xs" style={{ minWidth: "1.5rem", maxWidth: "1.5rem" }}>
<FileChangeTypeIcon changeType={changeType.toUpperCase()} />
</span>
</span>
) : (
<StyledIcon style={{ minWidth: "1.5rem" }} key={completePath + "file"} type="far" alt={t("diff.showContent")}>
file
</StyledIcon>
<span className="fa-stack" style={{ minWidth: "1.5rem", maxWidth: "1.5rem" }}>
<StyledIcon
className={"fa-stack-2x fa-xs " + getChangeTypeClassName(changeType)}
style={{ minWidth: "1.5rem", fontSize: "1.5rem" }}
key={completePath + "file"}
type="far"
alt={t("diff.showContent")}
>
file
</StyledIcon>
<span className="fa-stack-1x fa-xs" style={{ minWidth: "1.5rem", maxWidth: "1.5rem" }}>
<FileChangeTypeIcon changeType={changeType.toUpperCase()} />
</span>
</span>
)}
<div className={"ml-1"}>{path}</div>
<FileChangeTypeIcon changeType={changeType.toLowerCase()} />
</TreeFileContent>
);
};