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

Fixed Loadingspinner for Ahead / Behind

Browse Source 
Committed-by: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>
Co-authored-by: tarik-guersoy <tarik.guersoy@cloudogu.com>
This commit is contained in:
Tarik Gürsoy
2023-08-15 22:56:51 +02:00
parent cd09806edb
commit b5ac1ed4b5
2 changed files with 15 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,11 +28,12 @@ import { useTranslation } from "react-i18next";
import styled from "styled-components";
import { Tooltip } from "@scm-manager/ui-overlays";
import { Icon } from "@scm-manager/ui-buttons";
import { SmallLoadingSpinner } from "@scm-manager/ui-components";
type Props = {
branch: Branch;
details?: BranchDetails;
labelId?: string
labelId?: string;
};
const Count = styled.span`
@@ -43,24 +44,27 @@ const Count = styled.span`
const AheadBehindTag: FC<Props> = ({ branch, details, labelId }) => {
const [t] = useTranslation("repos");
if (
branch.defaultBranch ||
!details ||
typeof details.changesetsBehind !== "number" ||
typeof details.changesetsAhead !== "number"
) {
if (branch.defaultBranch) {
return null;
}
if (!details || typeof details.changesetsBehind !== "number" || typeof details.changesetsAhead !== "number") {
return <SmallLoadingSpinner />;
}
return (
<Tooltip
message={t("branch.aheadBehind.tooltip", { ahead: details.changesetsAhead, behind: details.changesetsBehind })}
>
<span aria-labelledby={labelId} className="is-inline-flex is-align-items-center">
<Icon className={details.changesetsAhead > 0 ? "has-text-success" : "has-text-grey-light"}>arrow-up</Icon>
<Count aria-label={t("branch.aheadBehind.ahead")} className="is-size-7 pl-0">{details.changesetsAhead}</Count>
<Count aria-label={t("branch.aheadBehind.ahead")} className="is-size-7 pl-0">
{details.changesetsAhead}
</Count>
<Icon className={details.changesetsBehind > 0 ? "has-text-warning" : "has-text-grey-light"}>arrow-down</Icon>
<Count aria-label={t("branch.aheadBehind.behind")} className="is-size-7 pr-1">{details.changesetsBehind}</Count>
<Count aria-label={t("branch.aheadBehind.behind")} className="is-size-7 pr-1">
{details.changesetsBehind}
</Count>
</span>
</Tooltip>
);

4
scm-ui/ui-webapp/src/repos/branches/components/BranchListItem.tsx
View File

@@ -29,7 +29,7 @@ import { Link } from "react-router-dom";
import { encodePart } from "../../sources/components/content/FileLink";
import { useKeyboardIteratorTarget } from "@scm-manager/ui-shortcuts";
import { Trans, useTranslation } from "react-i18next";
import {DateFromNow, SmallLoadingSpinner} from "@scm-manager/ui-components";
import { DateFromNow } from "@scm-manager/ui-components";
import { ExtensionPoint, extensionPoints } from "@scm-manager/ui-extensions";
import React, { FC } from "react";
import { Branch, BranchDetails, Repository } from "@scm-manager/ui-types";
@@ -108,7 +108,7 @@ const BranchListItem: FC<Props> = ({ branch, remove, isLoading, branchesDetails,
<Card.Details.Detail.Label id={labelId}>
{branch.defaultBranch ? null : t("branch.aheadBehind.label")}
</Card.Details.Detail.Label>
{isLoading? <SmallLoadingSpinner/> : <AheadBehindTag branch={branch} details={branchDetails} labelId={labelId} />}
<AheadBehindTag branch={branch} details={branchDetails} labelId={labelId} />
</>
)}
</Card.Details.Detail>