opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-08-06 02:29:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

CSS: Various css bug fixes (Safari fix for graph panels and more) (#23704)

Browse Source 
* CSS: Various css bug fixes

* Updated
This commit is contained in:
Torkel Ödegaard
2020-04-21 09:12:34 +02:00
committed by GitHub
parent 4a13467312
commit 4d9d3270af
15 changed files with 54 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/grafana-data/package.json
View File

@ -42,6 +42,7 @@
"@types/react": "16.8.16", "@types/react": "16.8.16",
"@types/sinon": "^7.5.2", "@types/sinon": "^7.5.2",
"@types/rollup-plugin-visualizer": "2.6.0", "@types/rollup-plugin-visualizer": "2.6.0",
"@types/braintree__sanitize-url": "4.0.0",
"pretty-format": "25.1.0", "pretty-format": "25.1.0",
"rollup": "2.0.6", "rollup": "2.0.6",
"rollup-plugin-sourcemaps": "0.5.0", "rollup-plugin-sourcemaps": "0.5.0",

10
packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx
View File

@ -6,7 +6,8 @@ import { css, cx } from 'emotion';
import RCCascader from 'rc-cascader'; import RCCascader from 'rc-cascader';
import { CascaderOption } from '../Cascader/Cascader'; import { CascaderOption } from '../Cascader/Cascader';
import { onChangeCascader, onLoadDataCascader } from '../Cascader/optionMappings'; import { onChangeCascader, onLoadDataCascader } from '../Cascader/optionMappings';
import { stylesFactory } from '../../themes'; import { stylesFactory, useTheme } from '../../themes';
import { GrafanaTheme } from '@grafana/data';
export interface ButtonCascaderProps { export interface ButtonCascaderProps {
options: CascaderOption[]; options: CascaderOption[];
@ -20,11 +21,11 @@ export interface ButtonCascaderProps {
className?: string; className?: string;
} }
const getStyles = stylesFactory(() => { const getStyles = stylesFactory((theme: GrafanaTheme) => {
return { return {
popup: css` popup: css`
label: popup; label: popup;
z-index: 100; z-index: ${theme.zIndex.dropdown};
`, `,
icon: css` icon: css`
margin: 1px 0 0 4px; margin: 1px 0 0 4px;
@ -34,7 +35,8 @@ const getStyles = stylesFactory(() => {
export const ButtonCascader: React.FC<ButtonCascaderProps> = props => { export const ButtonCascader: React.FC<ButtonCascaderProps> = props => {
const { onChange, className, loadData, ...rest } = props; const { onChange, className, loadData, ...rest } = props;
const styles = getStyles(); const theme = useTheme();
const styles = getStyles(theme);
return ( return (
<RCCascader <RCCascader

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

@ -39,7 +39,7 @@ export const getModalStyles = stylesFactory((theme: GrafanaTheme) => {
height: 42px; height: 42px;
`, `,
modalHeaderTitle: css` modalHeaderTitle: css`
font-size: ${theme.typography.heading.h3}; font-size: ${theme.typography.size.lg};
margin: 0 ${theme.spacing.md}; margin: 0 ${theme.spacing.md};
display: flex; display: flex;
align-items: center; align-items: center;

6
packages/grafana-ui/src/components/TimePicker/TimePickerContent/__snapshots__/TimePickerContent.test.tsx.snap
View File

@ -2,7 +2,7 @@
exports[`TimePickerContent renders correctly in full screen 1`] = ` exports[`TimePickerContent renders correctly in full screen 1`] = `
<div <div
className="css-1eellmz" className="css-1py091y"
> >
<div <div
className="css-dlnzj7" className="css-dlnzj7"
@ -93,7 +93,7 @@ exports[`TimePickerContent renders correctly in full screen 1`] = `
exports[`TimePickerContent renders correctly in narrow screen 1`] = ` exports[`TimePickerContent renders correctly in narrow screen 1`] = `
<div <div
className="css-1eellmz" className="css-1py091y"
> >
<div <div
className="css-dlnzj7" className="css-dlnzj7"
@ -184,7 +184,7 @@ exports[`TimePickerContent renders correctly in narrow screen 1`] = `
exports[`TimePickerContent renders recent absolute ranges correctly 1`] = ` exports[`TimePickerContent renders recent absolute ranges correctly 1`] = `
<div <div
className="css-1eellmz" className="css-1py091y"
> >
<div <div
className="css-dlnzj7" className="css-dlnzj7"

28
packages/grafana-ui/src/components/TimePicker/__snapshots__/TimeRangePicker.test.tsx.snap
View File

@ -257,13 +257,13 @@ exports[`TimePicker renders buttons correctly 1`] = `
}, },
}, },
"zIndex": Object { "zIndex": Object {
"dropdown": "1000", "dropdown": "1030",
"modal": "1050", "modal": "1060",
"modalBackdrop": "1040", "modalBackdrop": "1050",
"navbarFixed": "1020", "navbarFixed": "1000",
"sidemenu": "1025", "sidemenu": "1020",
"tooltip": "1030", "tooltip": "1040",
"typeahead": "1060", "typeahead": "1030",
}, },
} }
} }
@ -573,13 +573,13 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
}, },
}, },
"zIndex": Object { "zIndex": Object {
"dropdown": "1000", "dropdown": "1030",
"modal": "1050", "modal": "1060",
"modalBackdrop": "1040", "modalBackdrop": "1050",
"navbarFixed": "1020", "navbarFixed": "1000",
"sidemenu": "1025", "sidemenu": "1020",
"tooltip": "1030", "tooltip": "1040",
"typeahead": "1060", "typeahead": "1030",
}, },
} }
} }

2
packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
View File

@ -135,7 +135,7 @@ $divider-border-color: $gray-1;
$tight-form-func-bg: $dark-9; $tight-form-func-bg: $dark-9;
$tight-form-func-highlight-bg: $dark-10; $tight-form-func-highlight-bg: $dark-10;
$modal-backdrop-bg: #343b40; $modal-backdrop-bg: ${theme.colors.bg1};
$code-tag-bg: $dark-1; $code-tag-bg: $dark-1;
$code-tag-border: $dark-9; $code-tag-border: $dark-9;

2
packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
View File

@ -128,7 +128,7 @@ $divider-border-color: $gray-2;
$tight-form-func-bg: $gray-5; $tight-form-func-bg: $gray-5;
$tight-form-func-highlight-bg: $gray-6; $tight-form-func-highlight-bg: $gray-6;
$modal-backdrop-bg: $body-bg; $modal-backdrop-bg: ${theme.colors.bg1};
$code-tag-bg: $gray-6; $code-tag-bg: $gray-6;
$code-tag-border: $gray-4; $code-tag-border: $gray-4;

14
packages/grafana-ui/src/themes/default.ts
View File

@ -122,13 +122,13 @@ const theme: GrafanaThemeCommons = {
panelPadding: 8, panelPadding: 8,
panelHeaderHeight: 28, panelHeaderHeight: 28,
zIndex: { zIndex: {
dropdown: '1000', navbarFixed: '1000',
navbarFixed: '1020', sidemenu: '1020',
sidemenu: '1025', dropdown: '1030',
tooltip: '1030', typeahead: '1030',
modalBackdrop: '1040', tooltip: '1040',
modal: '1050', modalBackdrop: '1050',
typeahead: '1060', modal: '1060',
}, },
}; };

2
public/app/features/dashboard/utils/panel.ts
View File

@ -32,7 +32,7 @@ export const removePanel = (dashboard: DashboardModel, panel: PanelModel, ask: b
title: 'Remove Panel', title: 'Remove Panel',
text: 'Are you sure you want to remove this panel?', text: 'Are you sure you want to remove this panel?',
text2: text2, text2: text2,
icon: 'fa-trash', icon: 'trash-alt',
confirmText: confirmText, confirmText: confirmText,
yesText: 'Remove', yesText: 'Remove',
onConfirm: () => removePanel(dashboard, panel, false), onConfirm: () => removePanel(dashboard, panel, false),

2
public/sass/_variables.dark.generated.scss
View File

@ -138,7 +138,7 @@ $divider-border-color: $gray-1;
$tight-form-func-bg: $dark-9; $tight-form-func-bg: $dark-9;
$tight-form-func-highlight-bg: $dark-10; $tight-form-func-highlight-bg: $dark-10;
$modal-backdrop-bg: #343b40; $modal-backdrop-bg: #141619;
$code-tag-bg: $dark-1; $code-tag-bg: $dark-1;
$code-tag-border: $dark-9; $code-tag-border: $dark-9;

14
public/sass/_variables.generated.scss
View File

@ -160,13 +160,13 @@ $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www
// ------------------------- // -------------------------
// Used for a bird's eye view of components dependent on the z-axis // Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :) // Try to avoid customizing these :)
$zindex-dropdown: 1000; $zindex-dropdown: 1030;
$zindex-navbar-fixed: 1020; $zindex-navbar-fixed: 1000;
$zindex-sidemenu: 1025; $zindex-sidemenu: 1020;
$zindex-tooltip: 1030; $zindex-tooltip: 1040;
$zindex-modal-backdrop: 1040; $zindex-modal-backdrop: 1050;
$zindex-modal: 1050; $zindex-modal: 1060;
$zindex-typeahead: 1060; $zindex-typeahead: 1030;
// Buttons // Buttons
// //

2
public/sass/_variables.light.generated.scss
View File

@ -131,7 +131,7 @@ $divider-border-color: $gray-2;
$tight-form-func-bg: $gray-5; $tight-form-func-bg: $gray-5;
$tight-form-func-highlight-bg: $gray-6; $tight-form-func-highlight-bg: $gray-6;
$modal-backdrop-bg: $body-bg; $modal-backdrop-bg: #ffffff;
$code-tag-bg: $gray-6; $code-tag-bg: $gray-6;
$code-tag-border: $gray-4; $code-tag-border: $gray-4;

6
public/sass/components/_modals.scss
View File

@ -40,11 +40,13 @@
background: $page-header-bg; background: $page-header-bg;
box-shadow: $page-header-shadow; box-shadow: $page-header-shadow;
border-bottom: 1px solid $page-header-border-color; border-bottom: 1px solid $page-header-border-color;
@include clearfix(); display: flex;
align-items: center;
justify-content: space-between;
} }
.modal-header-title { .modal-header-title {
font-size: $font-size-h3; font-size: $font-size-lg;
float: left; float: left;
padding-top: $space-sm; padding-top: $space-sm;
margin: 0 $space-md; margin: 0 $space-md;

2
public/sass/pages/_dashboard.scss
View File

@ -84,7 +84,7 @@ div.flot-text {
padding: $panel-padding; padding: $panel-padding;
width: 100%; width: 100%;
flex-grow: 1; flex-grow: 1;
max-height: calc(100% - #{$panel-header-height}); height: calc(100% - #{$panel-header-height});
&--no-padding { &--no-padding {
padding: 0; padding: 0;

5
yarn.lock
View File

@ -5060,6 +5060,11 @@
"@types/connect" "*" "@types/connect" "*"
"@types/node" "*" "@types/node" "*"
"@types/braintree__sanitize-url@4.0.0":
version "4.0.0"
resolved "https://registry.yarnpkg.com/@types/braintree__sanitize-url/-/braintree__sanitize-url-4.0.0.tgz#0e8a834501f8c375d4b3fb8dcf9398a08ebe068d"
integrity sha512-69eGJ8808/WfTJGsvMi1pxQ9UG5Z+llD1x9ash5QX+qvxElDD+eYNAn19cTEVTq6WwUqrqlaTWVCKaTRFTuGmA==
"@types/cheerio@*": "@types/cheerio@*":
version "0.22.13" version "0.22.13"
resolved "https://registry.yarnpkg.com/@types/cheerio/-/cheerio-0.22.13.tgz#5eecda091a24514185dcba99eda77e62bf6523e6" resolved "https://registry.yarnpkg.com/@types/cheerio/-/cheerio-0.22.13.tgz#5eecda091a24514185dcba99eda77e62bf6523e6"