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

Fix branch table alignment (#2035)

Browse Source 
The branch table provides an extension point to add further columns, but the content was not vertically aligned anymore after the changes in #2016. This PR adds the same classes to the extension point columns as the other columns have to assure vertical alignment.
This commit is contained in:
Konstantin Schaper
2022-05-13 11:56:14 +02:00
committed by GitHub
parent 6c9e5ecf10
commit 035f7e847a
2 changed files with 11 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
scm-ui/ui-webapp/src/repos/branches/components/AheadBehindTag.tsx
View File

@@ -52,11 +52,11 @@ const Count = styled.span`
width: max-content;
`;
const Bar = styled.span.attrs<BarProps>(props => ({
const Bar = styled.span.attrs<BarProps>((props) => ({
style: {
width: props.width + "%",
borderRadius: props.direction === "left" ? "25px 0 0 25px" : "0 25px 25px 0"
}
borderRadius: props.direction === "left" ? "25px 0 0 25px" : "0 25px 25px 0",
},
}))<BarProps>`
height: 3px;
max-width: 100%;
@@ -87,17 +87,13 @@ const AheadBehindTag: FC<Props> = ({ branch, details, hiddenMobile, verbose }) =
: details.changesetsAhead;
return (
<div
className={`columns is-flex is-justify-content-center is-unselectable mt-1 ${
hiddenMobile ? "is-hidden-mobile" : ""
}`}
>
<div className={`is-flex is-justify-content-center is-unselectable my-1 ${hiddenMobile ? "is-hidden-mobile" : ""}`}>
<TooltipWithDefaultCursor
message={t("branch.aheadBehind.tooltip", { ahead: details.changesetsAhead, behind: details.changesetsBehind })}
location="top"
>
<div className="is-flex">
<Behind className="column is-flex is-flex-direction-column is-align-items-flex-end p-0">
<Behind className="is-flex is-flex-direction-column is-align-items-flex-end p-0">
<Count className="is-size-7 pr-1">{behindText}</Count>
<Bar
className="has-rounded-border-left has-background-secondary"
@@ -105,7 +101,7 @@ const AheadBehindTag: FC<Props> = ({ branch, details, hiddenMobile, verbose }) =
direction="left"
/>
</Behind>
<Ahead className="column is-flex is-flex-direction-column is-align-items-flex-start p-0">
<Ahead className="is-flex is-flex-direction-column is-align-items-flex-start p-0">
<Count className="is-size-7 pl-1">{aheadText}</Count>
<Bar
className="has-rounded-border-right has-background-secondary"

8
scm-ui/ui-webapp/src/repos/branches/components/BranchRow.tsx
View File

@@ -102,10 +102,12 @@ const BranchRow: FC<Props> = ({ repository, baseUrl, branch, onDelete, details }
)}
</td>
<td className="is-vertical-align-middle has-text-centered">{renderBranchTag()}</td>
{binder.hasExtension("repos.branches.row.details")
{binder.hasExtension("repos.branches.row.details", extensionProps)
? binder
.getExtensions("repos.branches.row.details")
.map((e) => <td>{React.createElement(e, extensionProps)}</td>)
.getExtensions("repos.branches.row.details", extensionProps)
.map((e) => (
<td className="is-vertical-align-middle has-text-centered">{React.createElement(e, extensionProps)}</td>
))
: null}
<td className="is-vertical-align-middle has-text-centered">{deleteButton}</td>
</AdaptTableFlow>