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