mirror of
https://github.com/grafana/grafana.git
synced 2025-09-23 16:14:01 +08:00
36fa54a288
* image and card component * change height of getting started panel * progress * setup basic step * advanced steps * step forward and backward * do checks * fix button size * minor styling on butttons * add correct links * save tutorial click in localstorage * types and gradients * fix gradients * use spacing variable * lots of responsiveness * add links to help * Getting started work * redo according to split panel design * minor touch ups * new background images * split up docs card to different hrefs * welcome bar touch ups * hide icon on small screens * transparent false on welcome banner * fix urls * source tag in welcome urls * move images to panel dir, removed unused images * Nicer loading message * make the cards look nicer on wide screens * append utm tag on render instead * replace width with margin * new background image for light * remove target on a element * removing buttonselect, add tag to href * more polishing Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com> Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
73 lines
2.0 KiB
TypeScript
73 lines
2.0 KiB
TypeScript
import React, { FC, MouseEvent } from 'react';
|
|
import { GrafanaTheme } from '@grafana/data';
|
|
import { Icon, stylesFactory, useTheme } from '@grafana/ui';
|
|
import { css } from 'emotion';
|
|
import store from 'app/core/store';
|
|
import { cardContent, cardStyle, iconStyle } from './sharedStyles';
|
|
import { Card } from '../types';
|
|
|
|
interface Props {
|
|
card: Card;
|
|
}
|
|
|
|
export const TutorialCard: FC<Props> = ({ card }) => {
|
|
const theme = useTheme();
|
|
const styles = getStyles(theme, card.done);
|
|
|
|
return (
|
|
<a className={styles.card} onClick={(event: MouseEvent<HTMLAnchorElement>) => handleTutorialClick(event, card)}>
|
|
<div className={cardContent}>
|
|
<div className={styles.type}>{card.type}</div>
|
|
<div className={styles.heading}>{card.done ? 'complete' : card.heading}</div>
|
|
<h4>{card.title}</h4>
|
|
<div className={styles.info}>{card.info}</div>
|
|
<Icon className={iconStyle(theme, card.done)} name={card.icon} size="xxl" />
|
|
</div>
|
|
</a>
|
|
);
|
|
};
|
|
|
|
const handleTutorialClick = (event: MouseEvent<HTMLAnchorElement>, card: Card) => {
|
|
event.preventDefault();
|
|
const isSet = store.get(card.key);
|
|
if (!isSet) {
|
|
store.set(card.key, true);
|
|
}
|
|
window.open(`${card.href}?utm_source=grafana_gettingstarted`, '_blank');
|
|
};
|
|
|
|
const getStyles = stylesFactory((theme: GrafanaTheme, complete: boolean) => {
|
|
const textColor = `${complete ? theme.palette.blue95 : '#FFB357'}`;
|
|
return {
|
|
card: css`
|
|
${cardStyle(theme, complete)}
|
|
width: 460px;
|
|
min-width: 460px;
|
|
|
|
@media only screen and (max-width: ${theme.breakpoints.xl}) {
|
|
min-width: 368px;
|
|
}
|
|
|
|
@media only screen and (max-width: ${theme.breakpoints.lg}) {
|
|
min-width: 272px;
|
|
}
|
|
`,
|
|
type: css`
|
|
color: ${textColor};
|
|
text-transform: uppercase;
|
|
`,
|
|
heading: css`
|
|
text-transform: uppercase;
|
|
color: ${textColor};
|
|
margin-bottom: ${theme.spacing.sm};
|
|
`,
|
|
info: css`
|
|
margin-bottom: ${theme.spacing.md};
|
|
`,
|
|
status: css`
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
`,
|
|
};
|
|
});
|