mirror of https://github.com/grafana/grafana
Footer: Single footer component for both react & angular pages (#21389)
* Footer: Single footer implementation for both react & angular pages * Export type * Updates * Use footer links in help menu * Updates & Fixes * Updated snapshot * updated snapshotpull/21416/head
Torkel Ödegaard
6 years ago
committed by
GitHub
parent
3866f609ce
commit
91ea3b15fa
@ -0,0 +1,18 @@ |
||||
import React, { FC } from 'react'; |
||||
|
||||
export interface BrandComponentProps { |
||||
className: string; |
||||
} |
||||
|
||||
export const LogoIcon: FC<BrandComponentProps> = ({ className }) => { |
||||
return <img className={className} src="public/img/grafana_icon.svg" alt="Grafana" />; |
||||
}; |
||||
|
||||
export const Wordmark: FC<BrandComponentProps> = ({ className }) => { |
||||
return <div className={className} />; |
||||
}; |
||||
|
||||
export class Branding { |
||||
static LogoIcon = LogoIcon; |
||||
static Wordmark = Wordmark; |
||||
} |
||||
@ -1,61 +1,77 @@ |
||||
import React, { FC } from 'react'; |
||||
import { Tooltip } from '@grafana/ui'; |
||||
|
||||
interface Props { |
||||
appName: string; |
||||
buildVersion: string; |
||||
buildCommit: string; |
||||
newGrafanaVersionExists: boolean; |
||||
newGrafanaVersion: string; |
||||
import config from 'app/core/config'; |
||||
|
||||
export interface FooterLink { |
||||
text: string; |
||||
icon?: string; |
||||
url?: string; |
||||
} |
||||
|
||||
export const Footer: FC<Props> = React.memo( |
||||
({ appName, buildVersion, buildCommit, newGrafanaVersionExists, newGrafanaVersion }) => { |
||||
return ( |
||||
<footer className="footer"> |
||||
<div className="text-center"> |
||||
<ul> |
||||
<li> |
||||
<a href="http://docs.grafana.org" target="_blank" rel="noopener"> |
||||
<i className="fa fa-file-code-o" /> Docs |
||||
</a> |
||||
</li> |
||||
<li> |
||||
<a |
||||
href="https://grafana.com/products/enterprise/?utm_source=grafana_footer" |
||||
target="_blank" |
||||
rel="noopener" |
||||
> |
||||
<i className="fa fa-support" /> Support & Enterprise |
||||
</a> |
||||
</li> |
||||
<li> |
||||
<a href="https://community.grafana.com/" target="_blank" rel="noopener"> |
||||
<i className="fa fa-comments-o" /> Community |
||||
</a> |
||||
</li> |
||||
<li> |
||||
<a href="https://grafana.com" target="_blank" rel="noopener"> |
||||
{appName} |
||||
</a>{' '} |
||||
<span> |
||||
v{buildVersion} (commit: {buildCommit}) |
||||
</span> |
||||
</li> |
||||
{newGrafanaVersionExists && ( |
||||
<li> |
||||
<Tooltip placement="auto" content={newGrafanaVersion}> |
||||
<a href="https://grafana.com/get" target="_blank" rel="noopener"> |
||||
New version available! |
||||
</a> |
||||
</Tooltip> |
||||
</li> |
||||
)} |
||||
</ul> |
||||
</div> |
||||
</footer> |
||||
); |
||||
export let getFooterLinks = (): FooterLink[] => { |
||||
return [ |
||||
{ |
||||
text: 'Docs', |
||||
icon: 'fa fa-file-code-o', |
||||
url: 'https://grafana.com/docs/grafana/latest/?utm_source=grafana_footer', |
||||
}, |
||||
{ |
||||
text: 'Support & Enterprise', |
||||
icon: 'fa fa-support', |
||||
url: 'https://grafana.com/products/enterprise/?utm_source=grafana_footer', |
||||
}, |
||||
{ |
||||
text: 'Community', |
||||
icon: 'fa fa-comments-o', |
||||
url: 'https://community.grafana.com/?utm_source=grafana_footer', |
||||
}, |
||||
]; |
||||
}; |
||||
|
||||
export let getVersionLinks = (): FooterLink[] => { |
||||
const { buildInfo } = config; |
||||
|
||||
const links: FooterLink[] = [ |
||||
{ |
||||
text: `Grafana v${buildInfo.version} (commit: ${buildInfo.commit})`, |
||||
url: 'https://grafana.com', |
||||
}, |
||||
]; |
||||
|
||||
if (buildInfo.hasUpdate) { |
||||
links.push({ |
||||
text: `New version available!`, |
||||
icon: 'fa fa-download', |
||||
url: 'https://grafana.com/grafana/download?utm_source=grafana_footer', |
||||
}); |
||||
} |
||||
); |
||||
|
||||
export default Footer; |
||||
return links; |
||||
}; |
||||
|
||||
export function setFooterLinksFn(fn: typeof getFooterLinks) { |
||||
getFooterLinks = fn; |
||||
} |
||||
|
||||
export function setVersionLinkFn(fn: typeof getFooterLinks) { |
||||
getVersionLinks = fn; |
||||
} |
||||
|
||||
export const Footer: FC = React.memo(() => { |
||||
const links = getFooterLinks().concat(getVersionLinks()); |
||||
|
||||
return ( |
||||
<footer className="footer"> |
||||
<div className="text-center"> |
||||
<ul> |
||||
{links.map(link => ( |
||||
<li key={link.text}> |
||||
<a href={link.url} target="_blank" rel="noopener"> |
||||
<i className={link.icon} /> {link.text} |
||||
</a> |
||||
</li> |
||||
))} |
||||
</ul> |
||||
</div> |
||||
</footer> |
||||
); |
||||
}); |
||||
|
||||
@ -1,29 +0,0 @@ |
||||
import config from 'app/core/config'; |
||||
import { BackendSrv } from 'app/core/services/backend_srv'; |
||||
import { NavModelSrv } from 'app/core/core'; |
||||
|
||||
export default class StyleGuideCtrl { |
||||
theme: string; |
||||
buttonNames = ['primary', 'secondary', 'inverse', 'success', 'warning', 'danger']; |
||||
buttonSizes = ['btn-small', '', 'btn-large']; |
||||
buttonVariants = ['-']; |
||||
navModel: any; |
||||
|
||||
/** @ngInject */ |
||||
constructor(private $routeParams: any, private backendSrv: BackendSrv, navModelSrv: NavModelSrv) { |
||||
this.navModel = navModelSrv.getNav('admin', 'styleguide', 0); |
||||
this.theme = config.bootData.user.lightTheme ? 'light' : 'dark'; |
||||
} |
||||
|
||||
switchTheme() { |
||||
this.$routeParams.theme = this.theme === 'dark' ? 'light' : 'dark'; |
||||
|
||||
const cmd = { |
||||
theme: this.$routeParams.theme, |
||||
}; |
||||
|
||||
this.backendSrv.put('/api/user/preferences', cmd).then(() => { |
||||
window.location.href = window.location.href; |
||||
}); |
||||
} |
||||
} |
||||
@ -1,5 +1,7 @@ |
||||
<page-header ng-if="ctrl.navModel" model="ctrl.navModel"></page-header> |
||||
|
||||
<div class="page-container page-body"> |
||||
<manage-dashboards ng-if="ctrl.folderId && ctrl.uid" folder-id="ctrl.folderId" folder-uid="ctrl.uid" /> |
||||
<manage-dashboards ng-if="ctrl.folderId && ctrl.uid" folder-id="ctrl.folderId" folder-uid="ctrl.uid" /> |
||||
</div> |
||||
|
||||
<footer /> |
||||
|
||||
@ -1,33 +0,0 @@ |
||||
.style-guide-color-card { |
||||
list-style: none; |
||||
margin: 0; |
||||
padding: $spacer; |
||||
width: 100%; |
||||
text-align: left; |
||||
text-shadow: 0 0 8px #fff; |
||||
color: $black; |
||||
font-size: $font-size-sm; |
||||
} |
||||
|
||||
.color-card-body-bg { |
||||
background-color: $body-bg; |
||||
} |
||||
.color-card-page-bg { |
||||
background-color: $page-bg; |
||||
} |
||||
.color-card-gray { |
||||
background-color: $gray-1; |
||||
} |
||||
|
||||
.style-guide-button-list { |
||||
padding: $spacer; |
||||
button { |
||||
display: block; |
||||
margin: 0 $spacer $spacer 0; |
||||
} |
||||
} |
||||
|
||||
.style-guide-icon-list { |
||||
font-size: 1.8em; |
||||
text-align: center; |
||||
} |
||||
Loading…
Reference in new issue