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 React, { FC } from 'react'; |
||||||
import { Tooltip } from '@grafana/ui'; |
import config from 'app/core/config'; |
||||||
|
|
||||||
interface Props { |
export interface FooterLink { |
||||||
appName: string; |
text: string; |
||||||
buildVersion: string; |
icon?: string; |
||||||
buildCommit: string; |
url?: string; |
||||||
newGrafanaVersionExists: boolean; |
|
||||||
newGrafanaVersion: string; |
|
||||||
} |
} |
||||||
|
|
||||||
export const Footer: FC<Props> = React.memo( |
export let getFooterLinks = (): FooterLink[] => { |
||||||
({ appName, buildVersion, buildCommit, newGrafanaVersionExists, newGrafanaVersion }) => { |
return [ |
||||||
return ( |
{ |
||||||
<footer className="footer"> |
text: 'Docs', |
||||||
<div className="text-center"> |
icon: 'fa fa-file-code-o', |
||||||
<ul> |
url: 'https://grafana.com/docs/grafana/latest/?utm_source=grafana_footer', |
||||||
<li> |
}, |
||||||
<a href="http://docs.grafana.org" target="_blank" rel="noopener"> |
{ |
||||||
<i className="fa fa-file-code-o" /> Docs |
text: 'Support & Enterprise', |
||||||
</a> |
icon: 'fa fa-support', |
||||||
</li> |
url: 'https://grafana.com/products/enterprise/?utm_source=grafana_footer', |
||||||
<li> |
}, |
||||||
<a |
{ |
||||||
href="https://grafana.com/products/enterprise/?utm_source=grafana_footer" |
text: 'Community', |
||||||
target="_blank" |
icon: 'fa fa-comments-o', |
||||||
rel="noopener" |
url: 'https://community.grafana.com/?utm_source=grafana_footer', |
||||||
> |
}, |
||||||
<i className="fa fa-support" /> Support & Enterprise |
]; |
||||||
</a> |
}; |
||||||
</li> |
|
||||||
<li> |
export let getVersionLinks = (): FooterLink[] => { |
||||||
<a href="https://community.grafana.com/" target="_blank" rel="noopener"> |
const { buildInfo } = config; |
||||||
<i className="fa fa-comments-o" /> Community |
|
||||||
</a> |
const links: FooterLink[] = [ |
||||||
</li> |
{ |
||||||
<li> |
text: `Grafana v${buildInfo.version} (commit: ${buildInfo.commit})`, |
||||||
<a href="https://grafana.com" target="_blank" rel="noopener"> |
url: 'https://grafana.com', |
||||||
{appName} |
}, |
||||||
</a>{' '} |
]; |
||||||
<span> |
|
||||||
v{buildVersion} (commit: {buildCommit}) |
if (buildInfo.hasUpdate) { |
||||||
</span> |
links.push({ |
||||||
</li> |
text: `New version available!`, |
||||||
{newGrafanaVersionExists && ( |
icon: 'fa fa-download', |
||||||
<li> |
url: 'https://grafana.com/grafana/download?utm_source=grafana_footer', |
||||||
<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 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> |
<page-header ng-if="ctrl.navModel" model="ctrl.navModel"></page-header> |
||||||
|
|
||||||
<div class="page-container page-body"> |
<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> |
</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