mirror of https://github.com/grafana/grafana
PublicDashboards: Title logo and footer redesign (#74769)
--------- Co-authored-by: Agnès Toulet <35176601+AgnesToulet@users.noreply.github.com>pull/76575/head
Juan Cabanas
2 years ago
committed by
GitHub
parent
e0f32f4363
commit
cdca1518d2
@ -0,0 +1,37 @@ |
|||||||
|
import { css } from '@emotion/css'; |
||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
import { GrafanaTheme2 } from '@grafana/data'; |
||||||
|
import { useStyles2 } from '@grafana/ui'; |
||||||
|
|
||||||
|
import { useGetPublicDashboardConfig } from './usePublicDashboardConfig'; |
||||||
|
|
||||||
|
export const PublicDashboardFooter = function () { |
||||||
|
const styles = useStyles2(getStyles); |
||||||
|
const conf = useGetPublicDashboardConfig(); |
||||||
|
|
||||||
|
return conf.footerHide ? null : ( |
||||||
|
<div className={styles.footer}> |
||||||
|
<a className={styles.link} href={conf.footerLink} target="_blank" rel="noreferrer noopener"> |
||||||
|
{conf.footerText} <img className={styles.logoImg} alt="" src={conf.footerLogo} /> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const getStyles = (theme: GrafanaTheme2) => ({ |
||||||
|
footer: css({ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'end', |
||||||
|
height: '30px', |
||||||
|
padding: theme.spacing(0, 2, 0, 1), |
||||||
|
}), |
||||||
|
link: css({ |
||||||
|
display: 'flex', |
||||||
|
alignItems: 'center', |
||||||
|
}), |
||||||
|
logoImg: css({ |
||||||
|
height: '16px', |
||||||
|
marginLeft: theme.spacing(0.5), |
||||||
|
}), |
||||||
|
}); |
||||||
@ -0,0 +1,55 @@ |
|||||||
|
import { css } from '@emotion/css'; |
||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
import { GrafanaTheme2 } from '@grafana/data'; |
||||||
|
import { useStyles2, useTheme2 } from '@grafana/ui'; |
||||||
|
|
||||||
|
const FOOTER_URL = 'https://grafana.com/?src=grafananet&cnt=public-dashboards'; |
||||||
|
const GRAFANA_LOGO_LIGHT_URL = 'public/img/grafana_text_logo_light.svg'; |
||||||
|
const GRAFANA_LOGO_DARK_URL = 'public/img/grafana_text_logo_dark.svg'; |
||||||
|
const GRAFANA_LOGO_DEFAULT_VALUE = 'grafana-logo'; |
||||||
|
|
||||||
|
export interface PublicDashboardCfg { |
||||||
|
footerHide: boolean; |
||||||
|
footerText: React.ReactNode; |
||||||
|
footerLogo: string; |
||||||
|
footerLink: string; |
||||||
|
headerLogoHide: boolean; |
||||||
|
} |
||||||
|
const useGetConfig = (cfg?: PublicDashboardCfg) => { |
||||||
|
const theme = useTheme2(); |
||||||
|
const styles = useStyles2(getStyles); |
||||||
|
|
||||||
|
const { footerHide, footerText, footerLink, footerLogo, headerLogoHide } = cfg || { |
||||||
|
footerHide: false, |
||||||
|
footerText: 'Powered by', |
||||||
|
footerLogo: GRAFANA_LOGO_DEFAULT_VALUE, |
||||||
|
footerLink: FOOTER_URL, |
||||||
|
headerLogoHide: false, |
||||||
|
}; |
||||||
|
|
||||||
|
return { |
||||||
|
footerHide, |
||||||
|
footerText: <span className={styles.text}>{footerText}</span>, |
||||||
|
footerLogo: |
||||||
|
footerLogo === GRAFANA_LOGO_DEFAULT_VALUE |
||||||
|
? theme.isDark |
||||||
|
? GRAFANA_LOGO_LIGHT_URL |
||||||
|
: GRAFANA_LOGO_DARK_URL |
||||||
|
: footerLogo, |
||||||
|
footerLink, |
||||||
|
headerLogoHide, |
||||||
|
}; |
||||||
|
}; |
||||||
|
export let useGetPublicDashboardConfig = (): PublicDashboardCfg => useGetConfig(); |
||||||
|
|
||||||
|
export function setPublicDashboardConfigFn(cfg: PublicDashboardCfg) { |
||||||
|
useGetPublicDashboardConfig = (): PublicDashboardCfg => useGetConfig(cfg); |
||||||
|
} |
||||||
|
|
||||||
|
const getStyles = (theme: GrafanaTheme2) => ({ |
||||||
|
text: css({ |
||||||
|
color: theme.colors.text.secondary, |
||||||
|
fontSize: theme.typography.body.fontSize, |
||||||
|
}), |
||||||
|
}); |
||||||
@ -1,54 +0,0 @@ |
|||||||
import { css } from '@emotion/css'; |
|
||||||
import React from 'react'; |
|
||||||
|
|
||||||
import { GrafanaTheme2 } from '@grafana/data'; |
|
||||||
import { useStyles2 } from '@grafana/ui'; |
|
||||||
|
|
||||||
export interface PublicDashboardFooterCfg { |
|
||||||
hide: boolean; |
|
||||||
text: string; |
|
||||||
logo: string; |
|
||||||
link: string; |
|
||||||
} |
|
||||||
|
|
||||||
export const PublicDashboardFooter = function () { |
|
||||||
const styles = useStyles2(getStyles); |
|
||||||
const conf = getPublicDashboardFooterConfig(); |
|
||||||
|
|
||||||
return conf.hide ? null : ( |
|
||||||
<div className={styles.footer}> |
|
||||||
<a className={styles.link} href={conf.link} target="_blank" rel="noreferrer noopener"> |
|
||||||
{conf.text} <img className={styles.logoImg} alt="" src={conf.logo}></img> |
|
||||||
</a> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export function setPublicDashboardFooterConfigFn(fn: typeof getPublicDashboardFooterConfig) { |
|
||||||
getPublicDashboardFooterConfig = fn; |
|
||||||
} |
|
||||||
export let getPublicDashboardFooterConfig = (): PublicDashboardFooterCfg => ({ |
|
||||||
hide: false, |
|
||||||
text: 'powered by Grafana', |
|
||||||
logo: 'public/img/grafana_icon.svg', |
|
||||||
link: 'https://grafana.com/', |
|
||||||
}); |
|
||||||
|
|
||||||
const getStyles = (theme: GrafanaTheme2) => ({ |
|
||||||
footer: css` |
|
||||||
display: flex; |
|
||||||
justify-content: end; |
|
||||||
height: 30px; |
|
||||||
padding: ${theme.spacing(0, 2, 0, 1)}; |
|
||||||
`,
|
|
||||||
link: css` |
|
||||||
display: flex; |
|
||||||
gap: 4px; |
|
||||||
justify-content: end; |
|
||||||
align-items: center; |
|
||||||
`,
|
|
||||||
logoImg: css` |
|
||||||
height: 100%; |
|
||||||
padding: ${theme.spacing(0.25, 0, 0.5, 0)}; |
|
||||||
`,
|
|
||||||
}); |
|
||||||
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 12 KiB |
Loading…
Reference in new issue