IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Catalog: Add breadcrumb to plugin details page (#37095)

Browse Source 
* feat(catalog): introduce a breadcrumb to plugindetails page

* refactor(catalog): use aria-labels and nav element for a11y breadcrumbs
This commit is contained in:
Jack Westbrook 2021-07-28 15:32:14 +02:00 committed by GitHub
parent ddf5b65c51
commit 99891e1a88
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 38 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
public/app/features/plugins/admin/pages/PluginDetails.tsx
View File

@ -51,7 +51,7 @@ export default function PluginDetails({ match }: PluginDetailsProps): JSX.Elemen
<PluginLogo
src={plugin.info.logos.small}
className={css`
object-fit: cover;
object-fit: contain;
width: 100%;
height: 68px;
max-width: 68px;
@ -59,11 +59,27 @@ export default function PluginDetails({ match }: PluginDetailsProps): JSX.Elemen
/>
<div className={styles.headerWrapper}>
<h1>{plugin.name}</h1>
<nav className={styles.breadcrumb} aria-label="Breadcrumb">
<ol>
<li>
<a
className={css`
text-decoration: underline;
`}
href={'/plugins'}
>
Plugins
</a>
</li>
<li>
<a href={`/plugins/${pluginId}`} aria-current="page">
{plugin.name}
</a>
</li>
</ol>
</nav>
<div className={styles.headerLinks}>
<a className={styles.headerOrgName} href={'/plugins'}>
{plugin.orgName}
</a>
<span>{plugin.orgName}</span>
{plugin.links.map((link: any) => (
<a key={link.name} href={link.url}>
{link.name}
@ -126,13 +142,27 @@ export const getStyles = (theme: GrafanaTheme2) => {
return {
headerContainer: css`
display: flex;
margin-bottom: 24px;
margin-top: 24px;
margin-bottom: ${theme.spacing(3)};
margin-top: ${theme.spacing(3)};
min-height: 120px;
`,
headerWrapper: css`
margin-left: ${theme.spacing(3)};
`,
breadcrumb: css`
font-size: ${theme.typography.h2.fontSize};
li {
display: inline;
list-style: none;
&::after {
content: '/';
padding: 0 0.25ch;
}
&:last-child::after {
content: '';
}
}
`,
headerLinks: css`
display: flex;
align-items: center;
@ -144,9 +174,7 @@ export const getStyles = (theme: GrafanaTheme2) => {
content: '|';
padding: 0 ${theme.spacing()};
}
}
& > *:last-child {
&::after {
&:last-child::after {
content: '';
padding-right: 0;
}