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

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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 54 additions and 44 deletions
Show Stats 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/sinon": "^7.5.2",
"@types/rollup-plugin-visualizer": "2.6.0",
"@types/braintree__sanitize-url": "4.0.0",
"pretty-format": "25.1.0",
"rollup": "2.0.6",
"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 { CascaderOption } from '../Cascader/Cascader';
import { onChangeCascader, onLoadDataCascader } from '../Cascader/optionMappings';
import { stylesFactory } from '../../themes';
import { stylesFactory, useTheme } from '../../themes';
import { GrafanaTheme } from '@grafana/data';
export interface ButtonCascaderProps {
options: CascaderOption[];
@ -20,11 +21,11 @@ export interface ButtonCascaderProps {
className?: string;
}
const getStyles = stylesFactory(() => {
const getStyles = stylesFactory((theme: GrafanaTheme) => {
return {
popup: css`
label: popup;
z-index: 100;
z-index: ${theme.zIndex.dropdown};
`,
icon: css`
margin: 1px 0 0 4px;
@ -34,7 +35,8 @@ const getStyles = stylesFactory(() => {
export const ButtonCascader: React.FC<ButtonCascaderProps> = props => {
const { onChange, className, loadData, ...rest } = props;
const styles = getStyles();
const theme = useTheme();
const styles = getStyles(theme);
return (
<RCCascader

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

@ -39,7 +39,7 @@ export const getModalStyles = stylesFactory((theme: GrafanaTheme) => {
height: 42px;
`,
modalHeaderTitle: css`
font-size: ${theme.typography.heading.h3};
font-size: ${theme.typography.size.lg};
margin: 0 ${theme.spacing.md};
display: flex;
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`] = `
<div
className="css-1eellmz"
className="css-1py091y"
>
<div
className="css-dlnzj7"
@ -93,7 +93,7 @@ exports[`TimePickerContent renders correctly in full screen 1`] = `
exports[`TimePickerContent renders correctly in narrow screen 1`] = `
<div
className="css-1eellmz"
className="css-1py091y"
>
<div
className="css-dlnzj7"
@ -184,7 +184,7 @@ exports[`TimePickerContent renders correctly in narrow screen 1`] = `
exports[`TimePickerContent renders recent absolute ranges correctly 1`] = `
<div
className="css-1eellmz"
className="css-1py091y"
>
<div
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 {
"dropdown": "1000",
"modal": "1050",
"modalBackdrop": "1040",
"navbarFixed": "1020",
"sidemenu": "1025",
"tooltip": "1030",
"typeahead": "1060",
"dropdown": "1030",
"modal": "1060",
"modalBackdrop": "1050",
"navbarFixed": "1000",
"sidemenu": "1020",
"tooltip": "1040",
"typeahead": "1030",
},
}
}
@ -573,13 +573,13 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
},
},
"zIndex": Object {
"dropdown": "1000",
"modal": "1050",
"modalBackdrop": "1040",
"navbarFixed": "1020",
"sidemenu": "1025",
"tooltip": "1030",
"typeahead": "1060",
"dropdown": "1030",
"modal": "1060",
"modalBackdrop": "1050",
"navbarFixed": "1000",
"sidemenu": "1020",
"tooltip": "1040",
"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-highlight-bg: $dark-10;
$modal-backdrop-bg: #343b40;
$modal-backdrop-bg: ${theme.colors.bg1};
$code-tag-bg: $dark-1;
$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-highlight-bg: $gray-6;
$modal-backdrop-bg: $body-bg;
$modal-backdrop-bg: ${theme.colors.bg1};
$code-tag-bg: $gray-6;
$code-tag-border: $gray-4;

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

@ -122,13 +122,13 @@ const theme: GrafanaThemeCommons = {
panelPadding: 8,
panelHeaderHeight: 28,
zIndex: {
dropdown: '1000',
navbarFixed: '1020',
sidemenu: '1025',
tooltip: '1030',
modalBackdrop: '1040',
modal: '1050',
typeahead: '1060',
navbarFixed: '1000',
sidemenu: '1020',
dropdown: '1030',
typeahead: '1030',
tooltip: '1040',
modalBackdrop: '1050',
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',
text: 'Are you sure you want to remove this panel?',
text2: text2,
icon: 'fa-trash',
icon: 'trash-alt',
confirmText: confirmText,
yesText: 'Remove',
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-highlight-bg: $dark-10;
$modal-backdrop-bg: #343b40;
$modal-backdrop-bg: #141619;
$code-tag-bg: $dark-1;
$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
// Try to avoid customizing these :)
$zindex-dropdown: 1000;
$zindex-navbar-fixed: 1020;
$zindex-sidemenu: 1025;
$zindex-tooltip: 1030;
$zindex-modal-backdrop: 1040;
$zindex-modal: 1050;
$zindex-typeahead: 1060;
$zindex-dropdown: 1030;
$zindex-navbar-fixed: 1000;
$zindex-sidemenu: 1020;
$zindex-tooltip: 1040;
$zindex-modal-backdrop: 1050;
$zindex-modal: 1060;
$zindex-typeahead: 1030;
// 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-highlight-bg: $gray-6;
$modal-backdrop-bg: $body-bg;
$modal-backdrop-bg: #ffffff;
$code-tag-bg: $gray-6;
$code-tag-border: $gray-4;

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

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

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

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

5
yarn.lock
View File

@ -5060,6 +5060,11 @@
"@types/connect" "*"
"@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@*":
version "0.22.13"
resolved "https://registry.yarnpkg.com/@types/cheerio/-/cheerio-0.22.13.tgz#5eecda091a24514185dcba99eda77e62bf6523e6"