apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

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

* style fix
pull/33258/head
Torkel Ödegaard 4 years ago 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 all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 7
      packages/grafana-data/src/themes/createComponents.ts
  2. 34
      packages/grafana-ui/src/components/Drawer/Drawer.tsx
  3. 5
      packages/grafana-ui/src/components/Modal/getModalStyles.ts
  4. 24
      packages/grafana-ui/src/components/TabbedContainer/TabbedContainer.tsx
  5. 24
      public/app/features/explore/ExploreDrawer.tsx
  6. 21
      public/app/features/explore/RichHistory/RichHistoryCard.tsx

7
packages/grafana-data/src/themes/createComponents.ts
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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};

Write Preview
Loading…
Cancel
Save