Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2026-01-28 18:29:10 +01:00
Code Issues Packages Projects Releases Activity

Accessible hunk expander

Browse Source 
Co-authored-by: René Pfeuffer<rene.pfeuffer@cloudogu.com>
This commit is contained in:
Philipp Ahrendt
2025-01-09 11:35:12 +01:00
parent 8422c3bc44
commit a4e30b94a2
8 changed files with 1277 additions and 829 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2058
scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
View File

File diff suppressed because it is too large Load Diff

3
scm-ui/ui-components/src/repos/HunkExpandDivider.tsx
View File

@@ -21,6 +21,9 @@ import styled from "styled-components";
const HunkDivider = styled.div`
background: #98d8f3;
@media screen and (max-width: 768px) {
padding-left: 0px !important;
} ;
`;
const HunkExpandDivider: FC = ({ children }) => {

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

@@ -16,7 +16,7 @@
import React, { FC, useState } from "react";
import { useTranslation } from "react-i18next";
import classNames from "classnames";
import { Icon } from "@scm-manager/ui-core";
type Props = {
icon: string;
@@ -37,9 +37,13 @@ const HunkExpandLink: FC<Props> = ({ icon, text, onClick }) => {
};
return (
<span className="is-clickable" onClick={onClickWithLoadingMarker}>
<i className={classNames("fa", icon)} /> {loading ? t("diff.expanding") : text}
</span>
<button
className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
onClick={onClickWithLoadingMarker}
>
<Icon>{icon}</Icon>
{loading ? t("diff.expanding") : text}
</button>
);
};

6
scm-ui/ui-components/src/repos/diff/HunkFooter.tsx
View File

@@ -37,7 +37,7 @@ const HunkFooter: FC<Props> = ({ expandableHunk, diffExpanded, diffExpansionFail
return (
<HunkExpandDivider>
<HunkExpandLink
icon={"fa-angle-double-down"}
icon={"angle-double-down"}
onClick={expandBottom(expandableHunk, expandableHunk.maxExpandBottomRange)}
text={t("diff.expandComplete", { count: expandableHunk.maxExpandBottomRange })}
/>
@@ -47,12 +47,12 @@ const HunkFooter: FC<Props> = ({ expandableHunk, diffExpanded, diffExpansionFail
return (
<HunkExpandDivider>
<HunkExpandLink
icon={"fa-angle-down"}
icon={"angle-down"}
onClick={expandBottom(expandableHunk, 10)}
text={t("diff.expandByLines", { count: 10 })}
/>{" "}
<HunkExpandLink
icon={"fa-angle-double-down"}
icon={"angle-double-down"}
onClick={expandBottom(expandableHunk, expandableHunk.maxExpandBottomRange)}
text={t("diff.expandComplete", { count: expandableHunk.maxExpandBottomRange })}
/>

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

@@ -37,10 +37,9 @@ const HunkHeader: FC<Props> = ({ expandableHunk, diffExpanded, diffExpansionFail
return (
<HunkExpandDivider>
<HunkExpandLink
icon={"fa-angle-double-up"}
icon={"angle-double-up"}
onClick={expandHead(expandableHunk, expandableHunk.maxExpandHeadRange)}
text={t("diff.expandComplete", { count: expandableHunk.maxExpandHeadRange })
}
text={t("diff.expandComplete", { count: expandableHunk.maxExpandHeadRange })}
/>
</HunkExpandDivider>
);
@@ -48,12 +47,12 @@ const HunkHeader: FC<Props> = ({ expandableHunk, diffExpanded, diffExpansionFail
return (
<HunkExpandDivider>
<HunkExpandLink
icon={"fa-angle-up"}
icon={"angle-up"}
onClick={expandHead(expandableHunk, 10)}
text={t("diff.expandByLines", { count: 10 })}
/>{" "}
<HunkExpandLink
icon={"fa-angle-double-up"}
icon={"angle-double-up"}
onClick={expandHead(expandableHunk, expandableHunk.maxExpandHeadRange)}
text={t("diff.expandComplete", { count: expandableHunk.maxExpandHeadRange })}
/>

4
scm-ui/ui-components/src/repos/diff/LastHunkFooter.tsx
View File

@@ -36,12 +36,12 @@ const LastHunkFooter: FC<Props> = ({ expandableHunk, diffExpanded, diffExpansion
return (
<HunkExpandDivider>
<HunkExpandLink
icon={"fa-angle-down"}
icon={"angle-down"}
onClick={expandBottom(expandableHunk, 10)}
text={t("diff.expandLastBottomByLines", { count: 10 })}
/>{" "}
<HunkExpandLink
icon={"fa-angle-double-down"}
icon={"angle-double-down"}
onClick={expandBottom(expandableHunk, expandableHunk.maxExpandBottomRange)}
text={t("diff.expandLastBottomComplete")}
/>

7
scm-ui/ui-styles/src/components/_main.scss
View File

@@ -1100,3 +1100,10 @@ form .field:not(.is-grouped) {
position: absolute;
text-align: center;
}
// Hunk expander basic mobile styles
.hunk-expander {
@media screen and (max-width: 768px) {
padding-bottom: 0.25rem;
}
}

7
scm-ui/ui-styles/src/highcontrast.scss
View File

@@ -294,6 +294,13 @@ td button:not(.is-default) {
color: $scheme-main;
}
.hunk-expander{
&:hover, :focus-visible {
color: #98d8f3;
background-color: #050514
}
}
/* transport meaning with more than color */
td:nth-child(2).diff-gutter-delete:before {
content: "-";