IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-26 02:40:26 -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;
text: string;
};
tooltip: {
text: string;
background: string;
@ -30,6 +29,9 @@ export interface ThemeComponents {
dropdown: {
background: string;
};
overlay: {
background: string;
};
dashboard: {
background: string;
padding: number;
@ -71,5 +73,8 @@ export function createComponents(colors: ThemeColors, shadows: ThemeShadows): Th
background: colors.background.canvas,
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 { GrafanaTheme } from '@grafana/data';
import { GrafanaThemeV2 } from '@grafana/data';
import RcDrawer from 'rc-drawer';
import { css } from '@emotion/css';
import { selectors } from '@grafana/e2e-selectors';
import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar';
import { IconButton } from '../IconButton/IconButton';
import { stylesFactory, useTheme } from '../../themes';
import { stylesFactory, useTheme2 } from '../../themes';
export interface Props {
children: ReactNode;
@ -30,22 +30,34 @@ export interface Props {
onClose: () => void;
}
const getStyles = stylesFactory((theme: GrafanaTheme, scrollableContent: boolean) => {
const getStyles = stylesFactory((theme: GrafanaThemeV2, scrollableContent: boolean) => {
return {
drawer: css`
.drawer-content {
background-color: ${theme.colors.bg1};
background-color: ${theme.colors.background.primary};
display: flex;
flex-direction: column;
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};
`,
header: css`
background-color: ${theme.colors.bg2};
background-color: ${theme.colors.background.canvas};
z-index: 1;
flex-grow: 0;
padding-top: ${theme.spacing.xs};
padding-top: ${theme.spacing(0.5)};
`,
actions: css`
display: flex;
@ -53,14 +65,14 @@ const getStyles = stylesFactory((theme: GrafanaTheme, scrollableContent: boolean
justify-content: flex-end;
`,
titleWrapper: css`
margin-bottom: ${theme.spacing.lg};
padding: 0 ${theme.spacing.sm} 0 ${theme.spacing.lg};
margin-bottom: ${theme.spacing(3)};
padding: ${theme.spacing(0, 1, 0, 3)};
`,
titleSpacing: css`
margin-bottom: ${theme.spacing.md};
margin-bottom: ${theme.spacing(2)};
`,
content: css`
padding: ${theme.spacing.md};
padding: ${theme.spacing(2)};
flex-grow: 1;
overflow: ${!scrollableContent ? 'hidden' : 'auto'};
z-index: 0;
@ -80,7 +92,7 @@ export const Drawer: FC<Props> = ({
width = '40%',
expandable = false,
}) => {
const theme = useTheme();
const theme = useTheme2();
const drawerStyles = getStyles(theme, scrollableContent);
const [isExpanded, setIsExpanded] = useState(false);
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';
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);
return {
@ -30,8 +29,8 @@ export const getModalStyles = stylesFactory((theme: GrafanaThemeV2) => {
bottom: 0;
left: 0;
z-index: ${theme.zIndex.modalBackdrop};
background-color: ${backdropBackground};
backdrop-filter: blur(2px);
background-color: ${theme.components.overlay.background};
backdrop-filter: blur(1px);
`,
modalHeader: css`
label: modalHeader;

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

@ -1,8 +1,8 @@
import React, { useState } from 'react';
import { css } from '@emotion/css';
import { SelectableValue, GrafanaTheme } from '@grafana/data';
import { stylesFactory, useTheme } from '../../themes';
import { SelectableValue, GrafanaThemeV2 } from '@grafana/data';
import { stylesFactory, useTheme2 } from '../../themes';
import { IconName, TabsBar, Tab, IconButton, CustomScrollbar, TabContent } from '../..';
export interface TabConfig {
@ -19,14 +19,14 @@ export interface TabbedContainerProps {
onClose: () => void;
}
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const getStyles = stylesFactory((theme: GrafanaThemeV2) => {
return {
container: css`
height: 100%;
`,
tabContent: css`
padding: ${theme.spacing.md};
background-color: ${theme.colors.bodyBg};
padding: ${theme.spacing(2)};
background-color: ${theme.colors.background.primary};
height: 100%;
`,
close: css`
@ -37,16 +37,12 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
font-size: ${theme.typography.size.lg};
`,
tabs: css`
padding-top: ${theme.spacing.sm};
border-color: ${theme.colors.formInputBorder};
padding-top: ${theme.spacing(1)};
border-color: ${theme.colors.border.weak};
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 theme = useTheme();
const theme = useTheme2();
const styles = getStyles(theme);
return (
@ -77,7 +73,7 @@ export function TabbedContainer(props: TabbedContainerProps) {
))}
<IconButton className={styles.close} onClick={onClose} name="times" title={closeIconTooltip ?? 'Close'} />
</TabsBar>
<CustomScrollbar className={styles.scrollbar}>
<CustomScrollbar autoHeightMin="100%">
<TabContent className={styles.tabContent}>{tabs.find((t) => t.value === activeTab)?.content}</TabContent>
</CustomScrollbar>
</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';
// Services & Utils
import { stylesFactory, useTheme } from '@grafana/ui';
import { stylesFactory, useTheme2 } from '@grafana/ui';
// Types
import { GrafanaTheme } from '@grafana/data';
import { GrafanaThemeV2 } from '@grafana/data';
const drawerSlide = keyframes`
0% {
@ -19,19 +19,15 @@ const drawerSlide = keyframes`
}
`;
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const shadowColor = theme.isLight ? theme.palette.gray4 : theme.palette.black;
const getStyles = stylesFactory((theme: GrafanaThemeV2) => {
return {
container: css`
position: fixed !important;
bottom: 0;
background: ${theme.colors.pageHeaderBg};
border-top: 1px solid ${theme.colors.formInputBorder};
margin: 0px;
margin-right: -${theme.spacing.md};
margin-left: -${theme.spacing.md};
box-shadow: 0 0 4px ${shadowColor};
background: ${theme.colors.background.primary};
border-top: 1px solid ${theme.colors.border.weak};
margin: ${theme.spacing(0, -2, 0, -2)};
box-shadow: ${theme.shadows.z3};
z-index: ${theme.zIndex.sidemenu};
`,
drawerActive: css`
@ -39,7 +35,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
animation: 0.5s ease-out ${drawerSlide};
`,
rzHandle: css`
background: ${theme.colors.formInputBorder};
background: ${theme.colors.secondary.main};
transition: 0.3s background ease-in-out;
position: relative;
width: 200px !important;
@ -49,7 +45,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
cursor: grab;
border-radius: 4px;
&:hover {
background: ${theme.colors.formInputBorderHover};
background: ${theme.colors.secondary.shade};
}
`,
};
@ -63,7 +59,7 @@ export interface Props {
export function ExploreDrawer(props: Props) {
const { width, children, onResize } = props;
const theme = useTheme();
const theme = useTheme2();
const styles = getStyles(theme);
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';
/* If datasource was removed, card will have inactive color */
const cardColor = theme.isLight
? isRemoved
? theme.palette.gray95
: theme.palette.white
: isRemoved
? theme.palette.gray15
: theme.palette.gray05;
const cardColor = theme.colors.bg2;
return {
queryCard: css`
display: flex;
flex-direction: column;
border: 1px solid ${theme.colors.formInputBorder};
border: 1px solid ${theme.colors.border1};
margin: ${theme.spacing.sm} 0;
background-color: ${cardColor};
border-radius: ${theme.border.radius.sm};
@ -64,7 +58,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => {
padding: ${theme.spacing.sm};
border-bottom: none;
:first-of-type {
border-bottom: 1px solid ${theme.colors.formInputBorder};
border-bottom: 1px solid ${theme.colors.border1};
padding: ${theme.spacing.xs} ${theme.spacing.sm};
}
img {
@ -93,7 +87,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => {
width: calc(100% - ${rigtColumnWidth});
`,
queryRow: css`
border-top: 1px solid ${theme.colors.formInputBorder};
border-top: 1px solid ${theme.colors.border1};
word-break: break-all;
padding: 4px 2px;
:first-child {
@ -117,14 +111,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => {
}
`,
textArea: css`
border: 1px solid ${theme.colors.formInputBorder};
background: inherit;
color: inherit;
width: 100%;
font-size: ${theme.typography.size.sm};
&placeholder {
padding: 0 ${theme.spacing.sm};
}
`,
runButton: css`
max-width: ${rigtColumnContentWidth};