opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-07-30 08:52:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

Migration: Share dashboard/panel modal (#22436)

Browse Source 
* ShareModal: refactor dashboard export modal

* Modal: show react modals with appEvents

* ShareModal: embed panel tab

* ShareModal: bind to shortcut (p s)

* grafana-ui: ClipboardButton component

* ShareModal: use ClipboardButton component

* ClipboardButton: add to storybook

* ShareModal: use event-based approach for dashboard share

* ShareModal: remove unused

* ModalReact: pass theme to the component

* ShareModal: styles clean up

* DashboardExporter: fix tests

* fixed whitespace betwen icon and link

* ShareModal: use theme from config

* Modal: tab header refactor

* ShareModal: tests

* ShareModal: fix share url rendering

* ShareModal: remove unused angular files

* Chore: fix strictNullChecks errors

* Modal: provide theme for event-based modal usage

* ShareModal: use ModalsController for opening modal

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
This commit is contained in:
Alexander Zobnin
2020-03-03 15:04:28 +03:00
committed by GitHub
parent 87da6a293b
commit d66e72fa67
33 changed files with 1479 additions and 925 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
packages/grafana-ui/src/components/Modal/getModalStyles.ts Normal file
View File

@ -0,0 +1,60 @@
import { css } from 'emotion';
import { GrafanaTheme } from '@grafana/data';
import { stylesFactory } from '../../themes';
export const getModalStyles = stylesFactory((theme: GrafanaTheme) => ({
modal: css`
position: fixed;
z-index: ${theme.zIndex.modal};
background: ${theme.colors.pageBg};
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
background-clip: padding-box;
outline: none;
width: 750px;
max-width: 100%;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
top: 10%;
`,
modalBackdrop: css`
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: ${theme.zIndex.modalBackdrop};
background-color: ${theme.colors.blueFaint};
opacity: 0.8;
backdrop-filter: blur(4px);
`,
modalHeader: css`
background: ${theme.background.pageHeader};
box-shadow: ${theme.shadow.pageHeader};
border-bottom: 1px solid ${theme.colors.pageHeaderBorder};
display: flex;
`,
modalHeaderTitle: css`
font-size: ${theme.typography.heading.h3};
padding-top: ${theme.spacing.sm};
margin: 0 ${theme.spacing.md};
`,
modalHeaderIcon: css`
margin-right: ${theme.spacing.md};
font-size: inherit;
&:before {
vertical-align: baseline;
}
`,
modalHeaderClose: css`
margin-left: auto;
padding: 9px ${theme.spacing.d};
`,
modalContent: css`
padding: calc(${theme.spacing.d} * 2);
overflow: auto;
width: 100%;
max-height: calc(90vh - ${theme.spacing.d} * 2);
`,
}));