IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Overlays: Style tweaks to modal & drawer overlays (#33251)

Browse Source 
* Overlays: Style tweaks to modal & drawer overlays

* style fix
This commit is contained in:
Torkel Ödegaard 2021-04-22 10:57:10 +02:00 committed by GitHub
parent 561fd4162e
commit 0027097772
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 55 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/grafana-data/src/themes/createComponents.ts
View File

@ -15,7 +15,6 @@ export interface ThemeComponents {
borderHover: string; borderHover: string;
text: string; text: string;
}; };
tooltip: { tooltip: {
text: string; text: string;
background: string; background: string;
@ -30,6 +29,9 @@ export interface ThemeComponents {
dropdown: { dropdown: {
background: string; background: string;
}; };
overlay: {
background: string;
};
dashboard: { dashboard: {
background: string; background: string;
padding: number; padding: number;
@ -71,5 +73,8 @@ export function createComponents(colors: ThemeColors, shadows: ThemeShadows): Th
background: colors.background.canvas, background: colors.background.canvas,
padding: 1, padding: 1,
}, },
overlay: {
background: colors.mode === 'dark' ? 'rgba(0, 0, 0, 0.27)' : 'rgba(208, 209, 211, 0.24)',
},
}; };
} }

34
packages/grafana-ui/src/components/Drawer/Drawer.tsx
View File

@ -1,12 +1,12 @@
import React, { CSSProperties, FC, ReactNode, useState } from 'react'; import React, { CSSProperties, FC, ReactNode, useState } from 'react';
import { GrafanaTheme } from '@grafana/data'; import { GrafanaThemeV2 } from '@grafana/data';
import RcDrawer from 'rc-drawer'; import RcDrawer from 'rc-drawer';
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { selectors } from '@grafana/e2e-selectors'; import { selectors } from '@grafana/e2e-selectors';
import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar'; import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar';
import { IconButton } from '../IconButton/IconButton'; import { IconButton } from '../IconButton/IconButton';
import { stylesFactory, useTheme } from '../../themes'; import { stylesFactory, useTheme2 } from '../../themes';
export interface Props { export interface Props {
children: ReactNode; children: ReactNode;
@ -30,22 +30,34 @@ export interface Props {
onClose: () => void; onClose: () => void;
} }
const getStyles = stylesFactory((theme: GrafanaTheme, scrollableContent: boolean) => { const getStyles = stylesFactory((theme: GrafanaThemeV2, scrollableContent: boolean) => {
return { return {
drawer: css` drawer: css`
.drawer-content { .drawer-content {
background-color: ${theme.colors.bg1}; background-color: ${theme.colors.background.primary};
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
} }
&.drawer-open .drawer-mask {
background-color: ${theme.components.overlay.background};
backdrop-filter: blur(1px);
opacity: 1;
}
.drawer-mask {
background-color: ${theme.components.overlay.background};
backdrop-filter: blur(1px);
}
.drawer-open .drawer-content-wrapper {
box-shadow: ${theme.shadows.z3};
}
z-index: ${theme.zIndex.dropdown}; z-index: ${theme.zIndex.dropdown};
`, `,
header: css` header: css`
background-color: ${theme.colors.bg2}; background-color: ${theme.colors.background.canvas};
z-index: 1; z-index: 1;
flex-grow: 0; flex-grow: 0;
padding-top: ${theme.spacing.xs}; padding-top: ${theme.spacing(0.5)};
`, `,
actions: css` actions: css`
display: flex; display: flex;
@ -53,14 +65,14 @@ const getStyles = stylesFactory((theme: GrafanaTheme, scrollableContent: boolean
justify-content: flex-end; justify-content: flex-end;
`, `,
titleWrapper: css` titleWrapper: css`
margin-bottom: ${theme.spacing.lg}; margin-bottom: ${theme.spacing(3)};
padding: 0 ${theme.spacing.sm} 0 ${theme.spacing.lg}; padding: ${theme.spacing(0, 1, 0, 3)};
`, `,
titleSpacing: css` titleSpacing: css`
margin-bottom: ${theme.spacing.md}; margin-bottom: ${theme.spacing(2)};
`, `,
content: css` content: css`
padding: ${theme.spacing.md}; padding: ${theme.spacing(2)};
flex-grow: 1; flex-grow: 1;
overflow: ${!scrollableContent ? 'hidden' : 'auto'}; overflow: ${!scrollableContent ? 'hidden' : 'auto'};
z-index: 0; z-index: 0;
@ -80,7 +92,7 @@ export const Drawer: FC<Props> = ({
width = '40%', width = '40%',
expandable = false, expandable = false,
}) => { }) => {
const theme = useTheme(); const theme = useTheme2();
const drawerStyles = getStyles(theme, scrollableContent); const drawerStyles = getStyles(theme, scrollableContent);
const [isExpanded, setIsExpanded] = useState(false); const [isExpanded, setIsExpanded] = useState(false);
const currentWidth = isExpanded ? '100%' : width; const currentWidth = isExpanded ? '100%' : width;

5
packages/grafana-ui/src/components/Modal/getModalStyles.ts
View File

@ -3,7 +3,6 @@ import { GrafanaThemeV2 } from '@grafana/data';
import { stylesFactory } from '../../themes'; import { stylesFactory } from '../../themes';
export const getModalStyles = stylesFactory((theme: GrafanaThemeV2) => { export const getModalStyles = stylesFactory((theme: GrafanaThemeV2) => {
const backdropBackground = theme.isDark ? 'rgba(0, 0, 0, 0.27)' : 'rgba(208, 209, 211, 0.24)';
const borderRadius = theme.shape.borderRadius(2); const borderRadius = theme.shape.borderRadius(2);
return { return {
@ -30,8 +29,8 @@ export const getModalStyles = stylesFactory((theme: GrafanaThemeV2) => {
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: ${theme.zIndex.modalBackdrop}; z-index: ${theme.zIndex.modalBackdrop};
background-color: ${backdropBackground}; background-color: ${theme.components.overlay.background};
backdrop-filter: blur(2px); backdrop-filter: blur(1px);
`, `,
modalHeader: css` modalHeader: css`
label: modalHeader; label: modalHeader;

24
packages/grafana-ui/src/components/TabbedContainer/TabbedContainer.tsx
View File

@ -1,8 +1,8 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { SelectableValue, GrafanaTheme } from '@grafana/data'; import { SelectableValue, GrafanaThemeV2 } from '@grafana/data';
import { stylesFactory, useTheme } from '../../themes'; import { stylesFactory, useTheme2 } from '../../themes';
import { IconName, TabsBar, Tab, IconButton, CustomScrollbar, TabContent } from '../..'; import { IconName, TabsBar, Tab, IconButton, CustomScrollbar, TabContent } from '../..';
export interface TabConfig { export interface TabConfig {
@ -19,14 +19,14 @@ export interface TabbedContainerProps {
onClose: () => void; onClose: () => void;
} }
const getStyles = stylesFactory((theme: GrafanaTheme) => { const getStyles = stylesFactory((theme: GrafanaThemeV2) => {
return { return {
container: css` container: css`
height: 100%; height: 100%;
`, `,
tabContent: css` tabContent: css`
padding: ${theme.spacing.md}; padding: ${theme.spacing(2)};
background-color: ${theme.colors.bodyBg}; background-color: ${theme.colors.background.primary};
height: 100%; height: 100%;
`, `,
close: css` close: css`
@ -37,16 +37,12 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
font-size: ${theme.typography.size.lg}; font-size: ${theme.typography.size.lg};
`, `,
tabs: css` tabs: css`
padding-top: ${theme.spacing.sm}; padding-top: ${theme.spacing(1)};
border-color: ${theme.colors.formInputBorder}; border-color: ${theme.colors.border.weak};
ul { ul {
margin-left: ${theme.spacing.md}; margin-left: ${theme.spacing(2)};
} }
`, `,
scrollbar: css`
min-height: 100% !important;
background-color: ${theme.colors.panelBg};
`,
}; };
}); });
@ -60,7 +56,7 @@ export function TabbedContainer(props: TabbedContainerProps) {
}; };
const { tabs, onClose, closeIconTooltip } = props; const { tabs, onClose, closeIconTooltip } = props;
const theme = useTheme(); const theme = useTheme2();
const styles = getStyles(theme); const styles = getStyles(theme);
return ( return (
@ -77,7 +73,7 @@ export function TabbedContainer(props: TabbedContainerProps) {
))} ))}
<IconButton className={styles.close} onClick={onClose} name="times" title={closeIconTooltip ?? 'Close'} /> <IconButton className={styles.close} onClick={onClose} name="times" title={closeIconTooltip ?? 'Close'} />
</TabsBar> </TabsBar>
<CustomScrollbar className={styles.scrollbar}> <CustomScrollbar autoHeightMin="100%">
<TabContent className={styles.tabContent}>{tabs.find((t) => t.value === activeTab)?.content}</TabContent> <TabContent className={styles.tabContent}>{tabs.find((t) => t.value === activeTab)?.content}</TabContent>
</CustomScrollbar> </CustomScrollbar>
</div> </div>

24
public/app/features/explore/ExploreDrawer.tsx
View File

@ -4,10 +4,10 @@ import { Resizable, ResizeCallback } from 're-resizable';
import { css, cx, keyframes } from '@emotion/css'; import { css, cx, keyframes } from '@emotion/css';
// Services & Utils // Services & Utils
import { stylesFactory, useTheme } from '@grafana/ui'; import { stylesFactory, useTheme2 } from '@grafana/ui';
// Types // Types
import { GrafanaTheme } from '@grafana/data'; import { GrafanaThemeV2 } from '@grafana/data';
const drawerSlide = keyframes` const drawerSlide = keyframes`
0% { 0% {
@ -19,19 +19,15 @@ const drawerSlide = keyframes`
} }
`; `;
const getStyles = stylesFactory((theme: GrafanaTheme) => { const getStyles = stylesFactory((theme: GrafanaThemeV2) => {
const shadowColor = theme.isLight ? theme.palette.gray4 : theme.palette.black;
return { return {
container: css` container: css`
position: fixed !important; position: fixed !important;
bottom: 0; bottom: 0;
background: ${theme.colors.pageHeaderBg}; background: ${theme.colors.background.primary};
border-top: 1px solid ${theme.colors.formInputBorder}; border-top: 1px solid ${theme.colors.border.weak};
margin: 0px; margin: ${theme.spacing(0, -2, 0, -2)};
margin-right: -${theme.spacing.md}; box-shadow: ${theme.shadows.z3};
margin-left: -${theme.spacing.md};
box-shadow: 0 0 4px ${shadowColor};
z-index: ${theme.zIndex.sidemenu}; z-index: ${theme.zIndex.sidemenu};
`, `,
drawerActive: css` drawerActive: css`
@ -39,7 +35,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
animation: 0.5s ease-out ${drawerSlide}; animation: 0.5s ease-out ${drawerSlide};
`, `,
rzHandle: css` rzHandle: css`
background: ${theme.colors.formInputBorder}; background: ${theme.colors.secondary.main};
transition: 0.3s background ease-in-out; transition: 0.3s background ease-in-out;
position: relative; position: relative;
width: 200px !important; width: 200px !important;
@ -49,7 +45,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
cursor: grab; cursor: grab;
border-radius: 4px; border-radius: 4px;
&:hover { &:hover {
background: ${theme.colors.formInputBorderHover}; background: ${theme.colors.secondary.shade};
} }
`, `,
}; };
@ -63,7 +59,7 @@ export interface Props {
export function ExploreDrawer(props: Props) { export function ExploreDrawer(props: Props) {
const { width, children, onResize } = props; const { width, children, onResize } = props;
const theme = useTheme(); const theme = useTheme2();
const styles = getStyles(theme); const styles = getStyles(theme);
const drawerWidth = `${width + 31.5}px`; const drawerWidth = `${width + 31.5}px`;

21
public/app/features/explore/RichHistory/RichHistoryCard.tsx
View File

@ -37,19 +37,13 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => {
const rigtColumnContentWidth = '170px'; const rigtColumnContentWidth = '170px';
/* If datasource was removed, card will have inactive color */ /* If datasource was removed, card will have inactive color */
const cardColor = theme.isLight const cardColor = theme.colors.bg2;
? isRemoved
? theme.palette.gray95
: theme.palette.white
: isRemoved
? theme.palette.gray15
: theme.palette.gray05;
return { return {
queryCard: css` queryCard: css`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border: 1px solid ${theme.colors.formInputBorder}; border: 1px solid ${theme.colors.border1};
margin: ${theme.spacing.sm} 0; margin: ${theme.spacing.sm} 0;
background-color: ${cardColor}; background-color: ${cardColor};
border-radius: ${theme.border.radius.sm}; border-radius: ${theme.border.radius.sm};
@ -64,7 +58,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => {
padding: ${theme.spacing.sm}; padding: ${theme.spacing.sm};
border-bottom: none; border-bottom: none;
:first-of-type { :first-of-type {
border-bottom: 1px solid ${theme.colors.formInputBorder}; border-bottom: 1px solid ${theme.colors.border1};
padding: ${theme.spacing.xs} ${theme.spacing.sm}; padding: ${theme.spacing.xs} ${theme.spacing.sm};
} }
img { img {
@ -93,7 +87,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => {
width: calc(100% - ${rigtColumnWidth}); width: calc(100% - ${rigtColumnWidth});
`, `,
queryRow: css` queryRow: css`
border-top: 1px solid ${theme.colors.formInputBorder}; border-top: 1px solid ${theme.colors.border1};
word-break: break-all; word-break: break-all;
padding: 4px 2px; padding: 4px 2px;
:first-child { :first-child {
@ -117,14 +111,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => {
} }
`, `,
textArea: css` textArea: css`
border: 1px solid ${theme.colors.formInputBorder};
background: inherit;
color: inherit;
width: 100%; width: 100%;
font-size: ${theme.typography.size.sm};
&placeholder {
padding: 0 ${theme.spacing.sm};
}
`, `,
runButton: css` runButton: css`
max-width: ${rigtColumnContentWidth}; max-width: ${rigtColumnContentWidth};