1
0
mirror of https://github.com/ansible/awx.git synced 2024-11-01 08:21:15 +03:00

Add PF Breadcrumb components

This commit is contained in:
Marliana Lara 2018-12-17 18:48:55 -05:00
parent 976c490dc3
commit 7406421d1b
No known key found for this signature in database
GPG Key ID: 38C73B40DFA809EE
2 changed files with 29 additions and 14 deletions

View File

@ -3,7 +3,9 @@ import { Trans } from '@lingui/macro';
import {
PageSection,
PageSectionVariants,
Title,
Breadcrumb,
BreadcrumbItem,
BreadcrumbHeading
} from '@patternfly/react-core';
import {
Link
@ -21,20 +23,22 @@ const OrganizationBreadcrumb = ({ parentObj, organization, currentTab, location
.map(({ url, name }, index) => {
let elem;
if (noLastLink && parentObj.length - 1 === index) {
elem = (<Fragment key={name}>{name}</Fragment>);
elem = (<BreadcrumbHeading className="heading" key={name}>{name}</BreadcrumbHeading>);
} else {
elem = (
<Link
key={name}
to={{ pathname: url, state: { breadcrumb: parentObj, organization } }}
>
{name}
</Link>
<BreadcrumbItem key={name}>
<Link
key={name}
to={{ pathname: url, state: { breadcrumb: parentObj, organization } }}
>
{name}
</Link>
</BreadcrumbItem>
);
}
return elem;
})
.reduce((prev, curr) => [prev, ' > ', curr])}
.reduce((prev, curr) => [prev, curr])}
</Fragment>
);
@ -42,25 +46,31 @@ const OrganizationBreadcrumb = ({ parentObj, organization, currentTab, location
breadcrumb = (
<Fragment>
{generateCrumb()}
{' > '}
{getTabName(currentTab)}
<BreadcrumbHeading className="heading">
{getTabName(currentTab)}
</BreadcrumbHeading>
</Fragment>
);
} else if (location.pathname.indexOf('edit') > -1) {
breadcrumb = (
<Fragment>
{generateCrumb()}
<Trans>{' > edit'}</Trans>
<BreadcrumbHeading className="heading">
<Trans>Edit</Trans>
</BreadcrumbHeading>
</Fragment>
);
} else if (location.pathname.indexOf('add') > -1) {
breadcrumb = (
<Fragment>
{generateCrumb()}
<Trans>{' > add'}</Trans>
<BreadcrumbHeading className="heading">
<Trans>Add</Trans>
</BreadcrumbHeading>
</Fragment>
);
} else {
breadcrumb = (
<Fragment>
{generateCrumb(true)}
@ -71,7 +81,7 @@ const OrganizationBreadcrumb = ({ parentObj, organization, currentTab, location
return (
<PageSection variant={light} className="pf-m-condensed">
<Title size="2xl">{breadcrumb}</Title>
<Breadcrumb>{breadcrumb}</Breadcrumb>
</PageSection>
);
};

View File

@ -15,4 +15,9 @@
a {
display: block;
}
}
.pf-c-breadcrumb__item.heading {
flex: 100%;
font-size: 20px;
}