mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Buttons: Center text in buttons (#23789)
* Buttons: Center buttons * Updated size of transformation button * removed snapshot
This commit is contained in:
Torkel Ödegaard
GitHub
parent
78a6d39ebb
commit
45dfa20467
@ -91,9 +91,9 @@ export interface GrafanaThemeCommons {
|
||||
};
|
||||
};
|
||||
height: {
|
||||
sm: string;
|
||||
md: string;
|
||||
lg: string;
|
||||
sm: number;
|
||||
md: number;
|
||||
lg: number;
|
||||
};
|
||||
panelPadding: number;
|
||||
panelHeaderHeight: number;
|
||||
|
||||
@ -87,7 +87,9 @@ export const getButtonStyles = stylesFactory((props: StyleProps) => {
|
||||
font-family: ${theme.typography.fontFamily.sansSerif};
|
||||
font-size: ${fontSize};
|
||||
padding: ${padding};
|
||||
height: ${height};
|
||||
height: ${height}px;
|
||||
// Deduct border from line-height for perfect vertical centering on windows and linux
|
||||
line-height: ${height - 2}px;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
border: 1px solid ${borderColor};
|
||||
|
||||
@ -71,8 +71,9 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme, size: RadioButt
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
font-size: ${fontSize};
|
||||
height: ${height};
|
||||
line-height: ${height};
|
||||
height: ${height}px;
|
||||
// Deduct border from line-height for perfect vertical centering on windows and linux
|
||||
line-height: ${height - 2}px;
|
||||
color: ${textColor};
|
||||
padding: 0 ${horizontalPadding};
|
||||
margin-left: -1px;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import { mount } from 'enzyme';
|
||||
import { UnthemedTimeRangePicker } from './TimeRangePicker';
|
||||
import { dateTime, TimeRange } from '@grafana/data';
|
||||
import dark from '../../themes/dark';
|
||||
@ -15,7 +15,7 @@ const value: TimeRange = {
|
||||
|
||||
describe('TimePicker', () => {
|
||||
it('renders buttons correctly', () => {
|
||||
const wrapper = shallow(
|
||||
const wrapper = mount(
|
||||
<UnthemedTimeRangePicker
|
||||
onChange={value => {}}
|
||||
value={value}
|
||||
@ -25,22 +25,6 @@ describe('TimePicker', () => {
|
||||
theme={dark}
|
||||
/>
|
||||
);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders content correctly after beeing open', () => {
|
||||
const wrapper = shallow(
|
||||
<UnthemedTimeRangePicker
|
||||
onChange={value => {}}
|
||||
value={value}
|
||||
onMoveBackward={() => {}}
|
||||
onMoveForward={() => {}}
|
||||
onZoom={() => {}}
|
||||
theme={dark}
|
||||
/>
|
||||
);
|
||||
|
||||
wrapper.find('button[aria-label="TimePicker Open Button"]').simulate('click', new Event('click'));
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
expect(wrapper.exists('.navbar-button')).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,838 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`TimePicker renders buttons correctly 1`] = `
|
||||
<div
|
||||
className="css-16ba5ut"
|
||||
>
|
||||
<div
|
||||
className="css-vyoujf"
|
||||
>
|
||||
<button
|
||||
className="btn navbar-button navbar-button--tight"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<Icon
|
||||
name="angle-left"
|
||||
size="lg"
|
||||
/>
|
||||
</button>
|
||||
<div>
|
||||
<Component
|
||||
content={
|
||||
<TimePickerTooltip
|
||||
timeRange={
|
||||
Object {
|
||||
"from": "2019-12-17T07:48:27.433Z",
|
||||
"raw": Object {
|
||||
"from": "2019-12-17T07:48:27.433Z",
|
||||
"to": "2019-12-18T07:48:27.433Z",
|
||||
},
|
||||
"to": "2019-12-18T07:48:27.433Z",
|
||||
}
|
||||
}
|
||||
/>
|
||||
}
|
||||
placement="bottom"
|
||||
>
|
||||
<button
|
||||
aria-label="TimePicker Open Button"
|
||||
className="btn navbar-button navbar-button--tight"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<Icon
|
||||
className="css-yawc0"
|
||||
name="clock-nine"
|
||||
size="lg"
|
||||
/>
|
||||
<Memo()
|
||||
onChange={[Function]}
|
||||
onMoveBackward={[Function]}
|
||||
onMoveForward={[Function]}
|
||||
onZoom={[Function]}
|
||||
theme={
|
||||
Object {
|
||||
"border": Object {
|
||||
"radius": Object {
|
||||
"lg": "5px",
|
||||
"md": "3px",
|
||||
"sm": "2px",
|
||||
},
|
||||
"width": Object {
|
||||
"sm": "1px",
|
||||
},
|
||||
},
|
||||
"breakpoints": Object {
|
||||
"lg": "992px",
|
||||
"md": "769px",
|
||||
"sm": "544px",
|
||||
"xl": "1200px",
|
||||
"xs": "0",
|
||||
},
|
||||
"colors": Object {
|
||||
"bg1": "#141619",
|
||||
"bg2": "#202226",
|
||||
"bg3": "#2c3235",
|
||||
"bgBlue1": "#3274d9",
|
||||
"bgBlue2": "#1f60c4",
|
||||
"bodyBg": "#141619",
|
||||
"border1": "#202226",
|
||||
"border2": "#2c3235",
|
||||
"border3": "#464c54",
|
||||
"dashboardBg": "#0b0c0e",
|
||||
"dropdownBg": "#0b0c0e",
|
||||
"dropdownOptionHoverBg": "#202226",
|
||||
"dropdownShadow": "#000000",
|
||||
"formCheckboxBg": "#222426",
|
||||
"formCheckboxBgChecked": "#5794f2",
|
||||
"formCheckboxBgCheckedHover": "#3274d9",
|
||||
"formCheckboxCheckmark": "#2c3235",
|
||||
"formDescription": "#7b8087",
|
||||
"formFocusOutline": "#1f60c4",
|
||||
"formInputBg": "#0b0c0e",
|
||||
"formInputBgDisabled": "#141619",
|
||||
"formInputBorder": "#2c3235",
|
||||
"formInputBorderActive": "#5794f2",
|
||||
"formInputBorderHover": "#464c54",
|
||||
"formInputBorderInvalid": "#e02f44",
|
||||
"formInputDisabledText": "#9fa7b3",
|
||||
"formInputPlaceholderText": "#464c54",
|
||||
"formInputText": "#c7d0d9",
|
||||
"formLabel": "#9fa7b3",
|
||||
"formSwitchBg": "#2c3235",
|
||||
"formSwitchBgActive": "#5794f2",
|
||||
"formSwitchBgActiveHover": "#3274d9",
|
||||
"formSwitchBgDisabled": "#2c3235",
|
||||
"formSwitchBgHover": "#464c54",
|
||||
"formSwitchDot": "#202226",
|
||||
"formValidationMessageBg": "#e02f44",
|
||||
"formValidationMessageText": "#ffffff",
|
||||
"link": "#d8d9da",
|
||||
"linkDisabled": "#8e8e8e",
|
||||
"linkExternal": "#33a2e5",
|
||||
"linkHover": "#ffffff",
|
||||
"pageHeaderBg": "#202226",
|
||||
"pageHeaderBorder": "#202226",
|
||||
"panelBg": "#141619",
|
||||
"panelBorder": "#202226",
|
||||
"text": "#c7d0d9",
|
||||
"textBlue": "#33a2e5",
|
||||
"textFaint": "#464c54",
|
||||
"textHeading": "#d8d9da",
|
||||
"textSemiWeak": "#9fa7b3",
|
||||
"textStrong": "#f7f8fa",
|
||||
"textWeak": "#7b8087",
|
||||
},
|
||||
"height": Object {
|
||||
"lg": "48px",
|
||||
"md": "32px",
|
||||
"sm": "24px",
|
||||
},
|
||||
"isDark": true,
|
||||
"isLight": false,
|
||||
"name": "Grafana Dark",
|
||||
"palette": Object {
|
||||
"black": "#000000",
|
||||
"blue77": "#1f60c4",
|
||||
"blue80": "#3274d9",
|
||||
"blue85": "#33a2e5",
|
||||
"blue95": "#5794f2",
|
||||
"brandDanger": "#e02f44",
|
||||
"brandPrimary": "#eb7b18",
|
||||
"brandSuccess": "#299c46",
|
||||
"brandWarning": "#eb7b18",
|
||||
"critical": "#e02f44",
|
||||
"dark1": "#141414",
|
||||
"dark10": "#424345",
|
||||
"dark2": "#161719",
|
||||
"dark3": "#1f1f20",
|
||||
"dark4": "#212124",
|
||||
"dark5": "#222426",
|
||||
"dark6": "#262628",
|
||||
"dark7": "#292a2d",
|
||||
"dark8": "#2f2f32",
|
||||
"dark9": "#343436",
|
||||
"gray05": "#0b0c0e",
|
||||
"gray1": "#555555",
|
||||
"gray10": "#141619",
|
||||
"gray15": "#202226",
|
||||
"gray2": "#8e8e8e",
|
||||
"gray25": "#2c3235",
|
||||
"gray3": "#b3b3b3",
|
||||
"gray33": "#464c54",
|
||||
"gray4": "#d8d9da",
|
||||
"gray5": "#ececec",
|
||||
"gray6": "#f4f5f8",
|
||||
"gray60": "#7b8087",
|
||||
"gray7": "#fbfbfb",
|
||||
"gray70": "#9fa7b3",
|
||||
"gray85": "#c7d0d9",
|
||||
"gray90": "#dce1e6",
|
||||
"gray95": "#e9edf2",
|
||||
"gray97": "#f1f5f9",
|
||||
"gray98": "#f7f8fa",
|
||||
"greenBase": "#299c46",
|
||||
"greenShade": "#23843b",
|
||||
"online": "#299c46",
|
||||
"orange": "#eb7b18",
|
||||
"orangeDark": "#ff780a",
|
||||
"purple": "#9933cc",
|
||||
"queryGreen": "#74e680",
|
||||
"queryOrange": "#eb7b18",
|
||||
"queryPurple": "#fe85fc",
|
||||
"queryRed": "#e02f44",
|
||||
"red": "#d44a3a",
|
||||
"red88": "#e02f44",
|
||||
"redBase": "#e02f44",
|
||||
"redShade": "#c4162a",
|
||||
"variable": "#32d1df",
|
||||
"warn": "#f79520",
|
||||
"white": "#ffffff",
|
||||
"yellow": "#ecbb13",
|
||||
},
|
||||
"panelHeaderHeight": 28,
|
||||
"panelPadding": 8,
|
||||
"shadows": Object {
|
||||
"listItem": "-1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3)",
|
||||
},
|
||||
"spacing": Object {
|
||||
"d": "16px",
|
||||
"formButtonHeight": 32,
|
||||
"formFieldsetMargin": "16px",
|
||||
"formInputAffixPaddingHorizontal": "4px",
|
||||
"formInputHeight": 32,
|
||||
"formInputMargin": "16px",
|
||||
"formInputPaddingHorizontal": "8px",
|
||||
"formLabelMargin": "0 0 4px 0",
|
||||
"formLabelPadding": "0 0 0 2px",
|
||||
"formMargin": "32px",
|
||||
"formSpacingBase": 8,
|
||||
"formValidationMessageMargin": "4px 0 0 0",
|
||||
"formValidationMessagePadding": "4px 8px",
|
||||
"gutter": "30px",
|
||||
"inlineFormMargin": "4px",
|
||||
"insetSquishMd": "4px 8px",
|
||||
"lg": "24px",
|
||||
"md": "16px",
|
||||
"sm": "8px",
|
||||
"xl": "32px",
|
||||
"xs": "4px",
|
||||
"xxs": "2px",
|
||||
},
|
||||
"type": "dark",
|
||||
"typography": Object {
|
||||
"fontFamily": Object {
|
||||
"monospace": "Menlo, Monaco, Consolas, 'Courier New', monospace",
|
||||
"sansSerif": "'Roboto', 'Helvetica Neue', Arial, sans-serif",
|
||||
},
|
||||
"heading": Object {
|
||||
"h1": "28px",
|
||||
"h2": "24px",
|
||||
"h3": "21px",
|
||||
"h4": "18px",
|
||||
"h5": "16px",
|
||||
"h6": "14px",
|
||||
},
|
||||
"lineHeight": Object {
|
||||
"lg": 2,
|
||||
"md": 1.5,
|
||||
"sm": 1.1,
|
||||
"xs": 1,
|
||||
},
|
||||
"link": Object {
|
||||
"decoration": "none",
|
||||
"hoverDecoration": "none",
|
||||
},
|
||||
"size": Object {
|
||||
"base": "14px",
|
||||
"lg": "18px",
|
||||
"md": "14px",
|
||||
"sm": "12px",
|
||||
"xs": "10px",
|
||||
},
|
||||
"weight": Object {
|
||||
"bold": 600,
|
||||
"light": 300,
|
||||
"regular": 400,
|
||||
"semibold": 500,
|
||||
},
|
||||
},
|
||||
"zIndex": Object {
|
||||
"dropdown": "1030",
|
||||
"modal": "1060",
|
||||
"modalBackdrop": "1050",
|
||||
"navbarFixed": "1000",
|
||||
"sidemenu": "1020",
|
||||
"tooltip": "1040",
|
||||
"typeahead": "1030",
|
||||
},
|
||||
}
|
||||
}
|
||||
value={
|
||||
Object {
|
||||
"from": "2019-12-17T07:48:27.433Z",
|
||||
"raw": Object {
|
||||
"from": "2019-12-17T07:48:27.433Z",
|
||||
"to": "2019-12-18T07:48:27.433Z",
|
||||
},
|
||||
"to": "2019-12-18T07:48:27.433Z",
|
||||
}
|
||||
}
|
||||
/>
|
||||
<span
|
||||
className="css-132xth5"
|
||||
>
|
||||
<Icon
|
||||
name="angle-down"
|
||||
size="lg"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
</Component>
|
||||
</div>
|
||||
<button
|
||||
className="btn navbar-button navbar-button--tight"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<Icon
|
||||
name="angle-right"
|
||||
size="lg"
|
||||
/>
|
||||
</button>
|
||||
<Component
|
||||
content={[Function]}
|
||||
placement="bottom"
|
||||
>
|
||||
<button
|
||||
className="btn navbar-button navbar-button--zoom"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<Icon
|
||||
name="search-minus"
|
||||
size="lg"
|
||||
/>
|
||||
</button>
|
||||
</Component>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`TimePicker renders content correctly after beeing open 1`] = `
|
||||
<div
|
||||
className="css-16ba5ut"
|
||||
>
|
||||
<div
|
||||
className="css-vyoujf"
|
||||
>
|
||||
<button
|
||||
className="btn navbar-button navbar-button--tight"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<Icon
|
||||
name="angle-left"
|
||||
size="lg"
|
||||
/>
|
||||
</button>
|
||||
<div>
|
||||
<Component
|
||||
content={
|
||||
<TimePickerTooltip
|
||||
timeRange={
|
||||
Object {
|
||||
"from": "2019-12-17T07:48:27.433Z",
|
||||
"raw": Object {
|
||||
"from": "2019-12-17T07:48:27.433Z",
|
||||
"to": "2019-12-18T07:48:27.433Z",
|
||||
},
|
||||
"to": "2019-12-18T07:48:27.433Z",
|
||||
}
|
||||
}
|
||||
/>
|
||||
}
|
||||
placement="bottom"
|
||||
>
|
||||
<button
|
||||
aria-label="TimePicker Open Button"
|
||||
className="btn navbar-button navbar-button--tight"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<Icon
|
||||
className="css-yawc0"
|
||||
name="clock-nine"
|
||||
size="lg"
|
||||
/>
|
||||
<Memo()
|
||||
onChange={[Function]}
|
||||
onMoveBackward={[Function]}
|
||||
onMoveForward={[Function]}
|
||||
onZoom={[Function]}
|
||||
theme={
|
||||
Object {
|
||||
"border": Object {
|
||||
"radius": Object {
|
||||
"lg": "5px",
|
||||
"md": "3px",
|
||||
"sm": "2px",
|
||||
},
|
||||
"width": Object {
|
||||
"sm": "1px",
|
||||
},
|
||||
},
|
||||
"breakpoints": Object {
|
||||
"lg": "992px",
|
||||
"md": "769px",
|
||||
"sm": "544px",
|
||||
"xl": "1200px",
|
||||
"xs": "0",
|
||||
},
|
||||
"colors": Object {
|
||||
"bg1": "#141619",
|
||||
"bg2": "#202226",
|
||||
"bg3": "#2c3235",
|
||||
"bgBlue1": "#3274d9",
|
||||
"bgBlue2": "#1f60c4",
|
||||
"bodyBg": "#141619",
|
||||
"border1": "#202226",
|
||||
"border2": "#2c3235",
|
||||
"border3": "#464c54",
|
||||
"dashboardBg": "#0b0c0e",
|
||||
"dropdownBg": "#0b0c0e",
|
||||
"dropdownOptionHoverBg": "#202226",
|
||||
"dropdownShadow": "#000000",
|
||||
"formCheckboxBg": "#222426",
|
||||
"formCheckboxBgChecked": "#5794f2",
|
||||
"formCheckboxBgCheckedHover": "#3274d9",
|
||||
"formCheckboxCheckmark": "#2c3235",
|
||||
"formDescription": "#7b8087",
|
||||
"formFocusOutline": "#1f60c4",
|
||||
"formInputBg": "#0b0c0e",
|
||||
"formInputBgDisabled": "#141619",
|
||||
"formInputBorder": "#2c3235",
|
||||
"formInputBorderActive": "#5794f2",
|
||||
"formInputBorderHover": "#464c54",
|
||||
"formInputBorderInvalid": "#e02f44",
|
||||
"formInputDisabledText": "#9fa7b3",
|
||||
"formInputPlaceholderText": "#464c54",
|
||||
"formInputText": "#c7d0d9",
|
||||
"formLabel": "#9fa7b3",
|
||||
"formSwitchBg": "#2c3235",
|
||||
"formSwitchBgActive": "#5794f2",
|
||||
"formSwitchBgActiveHover": "#3274d9",
|
||||
"formSwitchBgDisabled": "#2c3235",
|
||||
"formSwitchBgHover": "#464c54",
|
||||
"formSwitchDot": "#202226",
|
||||
"formValidationMessageBg": "#e02f44",
|
||||
"formValidationMessageText": "#ffffff",
|
||||
"link": "#d8d9da",
|
||||
"linkDisabled": "#8e8e8e",
|
||||
"linkExternal": "#33a2e5",
|
||||
"linkHover": "#ffffff",
|
||||
"pageHeaderBg": "#202226",
|
||||
"pageHeaderBorder": "#202226",
|
||||
"panelBg": "#141619",
|
||||
"panelBorder": "#202226",
|
||||
"text": "#c7d0d9",
|
||||
"textBlue": "#33a2e5",
|
||||
"textFaint": "#464c54",
|
||||
"textHeading": "#d8d9da",
|
||||
"textSemiWeak": "#9fa7b3",
|
||||
"textStrong": "#f7f8fa",
|
||||
"textWeak": "#7b8087",
|
||||
},
|
||||
"height": Object {
|
||||
"lg": "48px",
|
||||
"md": "32px",
|
||||
"sm": "24px",
|
||||
},
|
||||
"isDark": true,
|
||||
"isLight": false,
|
||||
"name": "Grafana Dark",
|
||||
"palette": Object {
|
||||
"black": "#000000",
|
||||
"blue77": "#1f60c4",
|
||||
"blue80": "#3274d9",
|
||||
"blue85": "#33a2e5",
|
||||
"blue95": "#5794f2",
|
||||
"brandDanger": "#e02f44",
|
||||
"brandPrimary": "#eb7b18",
|
||||
"brandSuccess": "#299c46",
|
||||
"brandWarning": "#eb7b18",
|
||||
"critical": "#e02f44",
|
||||
"dark1": "#141414",
|
||||
"dark10": "#424345",
|
||||
"dark2": "#161719",
|
||||
"dark3": "#1f1f20",
|
||||
"dark4": "#212124",
|
||||
"dark5": "#222426",
|
||||
"dark6": "#262628",
|
||||
"dark7": "#292a2d",
|
||||
"dark8": "#2f2f32",
|
||||
"dark9": "#343436",
|
||||
"gray05": "#0b0c0e",
|
||||
"gray1": "#555555",
|
||||
"gray10": "#141619",
|
||||
"gray15": "#202226",
|
||||
"gray2": "#8e8e8e",
|
||||
"gray25": "#2c3235",
|
||||
"gray3": "#b3b3b3",
|
||||
"gray33": "#464c54",
|
||||
"gray4": "#d8d9da",
|
||||
"gray5": "#ececec",
|
||||
"gray6": "#f4f5f8",
|
||||
"gray60": "#7b8087",
|
||||
"gray7": "#fbfbfb",
|
||||
"gray70": "#9fa7b3",
|
||||
"gray85": "#c7d0d9",
|
||||
"gray90": "#dce1e6",
|
||||
"gray95": "#e9edf2",
|
||||
"gray97": "#f1f5f9",
|
||||
"gray98": "#f7f8fa",
|
||||
"greenBase": "#299c46",
|
||||
"greenShade": "#23843b",
|
||||
"online": "#299c46",
|
||||
"orange": "#eb7b18",
|
||||
"orangeDark": "#ff780a",
|
||||
"purple": "#9933cc",
|
||||
"queryGreen": "#74e680",
|
||||
"queryOrange": "#eb7b18",
|
||||
"queryPurple": "#fe85fc",
|
||||
"queryRed": "#e02f44",
|
||||
"red": "#d44a3a",
|
||||
"red88": "#e02f44",
|
||||
"redBase": "#e02f44",
|
||||
"redShade": "#c4162a",
|
||||
"variable": "#32d1df",
|
||||
"warn": "#f79520",
|
||||
"white": "#ffffff",
|
||||
"yellow": "#ecbb13",
|
||||
},
|
||||
"panelHeaderHeight": 28,
|
||||
"panelPadding": 8,
|
||||
"shadows": Object {
|
||||
"listItem": "-1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3)",
|
||||
},
|
||||
"spacing": Object {
|
||||
"d": "16px",
|
||||
"formButtonHeight": 32,
|
||||
"formFieldsetMargin": "16px",
|
||||
"formInputAffixPaddingHorizontal": "4px",
|
||||
"formInputHeight": 32,
|
||||
"formInputMargin": "16px",
|
||||
"formInputPaddingHorizontal": "8px",
|
||||
"formLabelMargin": "0 0 4px 0",
|
||||
"formLabelPadding": "0 0 0 2px",
|
||||
"formMargin": "32px",
|
||||
"formSpacingBase": 8,
|
||||
"formValidationMessageMargin": "4px 0 0 0",
|
||||
"formValidationMessagePadding": "4px 8px",
|
||||
"gutter": "30px",
|
||||
"inlineFormMargin": "4px",
|
||||
"insetSquishMd": "4px 8px",
|
||||
"lg": "24px",
|
||||
"md": "16px",
|
||||
"sm": "8px",
|
||||
"xl": "32px",
|
||||
"xs": "4px",
|
||||
"xxs": "2px",
|
||||
},
|
||||
"type": "dark",
|
||||
"typography": Object {
|
||||
"fontFamily": Object {
|
||||
"monospace": "Menlo, Monaco, Consolas, 'Courier New', monospace",
|
||||
"sansSerif": "'Roboto', 'Helvetica Neue', Arial, sans-serif",
|
||||
},
|
||||
"heading": Object {
|
||||
"h1": "28px",
|
||||
"h2": "24px",
|
||||
"h3": "21px",
|
||||
"h4": "18px",
|
||||
"h5": "16px",
|
||||
"h6": "14px",
|
||||
},
|
||||
"lineHeight": Object {
|
||||
"lg": 2,
|
||||
"md": 1.5,
|
||||
"sm": 1.1,
|
||||
"xs": 1,
|
||||
},
|
||||
"link": Object {
|
||||
"decoration": "none",
|
||||
"hoverDecoration": "none",
|
||||
},
|
||||
"size": Object {
|
||||
"base": "14px",
|
||||
"lg": "18px",
|
||||
"md": "14px",
|
||||
"sm": "12px",
|
||||
"xs": "10px",
|
||||
},
|
||||
"weight": Object {
|
||||
"bold": 600,
|
||||
"light": 300,
|
||||
"regular": 400,
|
||||
"semibold": 500,
|
||||
},
|
||||
},
|
||||
"zIndex": Object {
|
||||
"dropdown": "1030",
|
||||
"modal": "1060",
|
||||
"modalBackdrop": "1050",
|
||||
"navbarFixed": "1000",
|
||||
"sidemenu": "1020",
|
||||
"tooltip": "1040",
|
||||
"typeahead": "1030",
|
||||
},
|
||||
}
|
||||
}
|
||||
value={
|
||||
Object {
|
||||
"from": "2019-12-17T07:48:27.433Z",
|
||||
"raw": Object {
|
||||
"from": "2019-12-17T07:48:27.433Z",
|
||||
"to": "2019-12-18T07:48:27.433Z",
|
||||
},
|
||||
"to": "2019-12-18T07:48:27.433Z",
|
||||
}
|
||||
}
|
||||
/>
|
||||
<span
|
||||
className="css-132xth5"
|
||||
>
|
||||
<Icon
|
||||
name="angle-up"
|
||||
size="lg"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
</Component>
|
||||
<ClickOutsideWrapper
|
||||
onClick={[Function]}
|
||||
>
|
||||
<Component
|
||||
onChange={[Function]}
|
||||
otherOptions={
|
||||
Array [
|
||||
Object {
|
||||
"display": "Yesterday",
|
||||
"from": "now-1d/d",
|
||||
"section": 3,
|
||||
"to": "now-1d/d",
|
||||
},
|
||||
Object {
|
||||
"display": "Day before yesterday",
|
||||
"from": "now-2d/d",
|
||||
"section": 3,
|
||||
"to": "now-2d/d",
|
||||
},
|
||||
Object {
|
||||
"display": "This day last week",
|
||||
"from": "now-7d/d",
|
||||
"section": 3,
|
||||
"to": "now-7d/d",
|
||||
},
|
||||
Object {
|
||||
"display": "Previous week",
|
||||
"from": "now-1w/w",
|
||||
"section": 3,
|
||||
"to": "now-1w/w",
|
||||
},
|
||||
Object {
|
||||
"display": "Previous month",
|
||||
"from": "now-1M/M",
|
||||
"section": 3,
|
||||
"to": "now-1M/M",
|
||||
},
|
||||
Object {
|
||||
"display": "Previous year",
|
||||
"from": "now-1y/y",
|
||||
"section": 3,
|
||||
"to": "now-1y/y",
|
||||
},
|
||||
Object {
|
||||
"display": "Today",
|
||||
"from": "now/d",
|
||||
"section": 3,
|
||||
"to": "now/d",
|
||||
},
|
||||
Object {
|
||||
"display": "Today so far",
|
||||
"from": "now/d",
|
||||
"section": 3,
|
||||
"to": "now",
|
||||
},
|
||||
Object {
|
||||
"display": "This week",
|
||||
"from": "now/w",
|
||||
"section": 3,
|
||||
"to": "now/w",
|
||||
},
|
||||
Object {
|
||||
"display": "This week so far",
|
||||
"from": "now/w",
|
||||
"section": 3,
|
||||
"to": "now",
|
||||
},
|
||||
Object {
|
||||
"display": "This month",
|
||||
"from": "now/M",
|
||||
"section": 3,
|
||||
"to": "now/M",
|
||||
},
|
||||
Object {
|
||||
"display": "This month so far",
|
||||
"from": "now/M",
|
||||
"section": 3,
|
||||
"to": "now",
|
||||
},
|
||||
Object {
|
||||
"display": "This year",
|
||||
"from": "now/y",
|
||||
"section": 3,
|
||||
"to": "now/y",
|
||||
},
|
||||
Object {
|
||||
"display": "This year so far",
|
||||
"from": "now/y",
|
||||
"section": 3,
|
||||
"to": "now",
|
||||
},
|
||||
]
|
||||
}
|
||||
quickOptions={
|
||||
Array [
|
||||
Object {
|
||||
"display": "Last 5 minutes",
|
||||
"from": "now-5m",
|
||||
"section": 3,
|
||||
"to": "now",
|
||||
},
|
||||
Object {
|
||||
"display": "Last 15 minutes",
|
||||
"from": "now-15m",
|
||||
"section": 3,
|
||||
"to": "now",
|
||||
},
|
||||
Object {
|
||||
"display": "Last 30 minutes",
|
||||
"from": "now-30m",
|
||||
"section": 3,
|
||||
"to": "now",
|
||||
},
|
||||
Object {
|
||||
"display": "Last 1 hour",
|
||||
"from": "now-1h",
|
||||
"section": 3,
|
||||
"to": "now",
|
||||
},
|
||||
Object {
|
||||
"display": "Last 3 hours",
|
||||
"from": "now-3h",
|
||||
"section": 3,
|
||||
"to": "now",
|
||||
},
|
||||
Object {
|
||||
"display": "Last 6 hours",
|
||||
"from": "now-6h",
|
||||
"section": 3,
|
||||
"to": "now",
|
||||
},
|
||||
Object {
|
||||
"display": "Last 12 hours",
|
||||
"from": "now-12h",
|
||||
"section": 3,
|
||||
"to": "now",
|
||||
},
|
||||
Object {
|
||||
"display": "Last 24 hours",
|
||||
"from": "now-24h",
|
||||
"section": 3,
|
||||
"to": "now",
|
||||
},
|
||||
Object {
|
||||
"display": "Last 2 days",
|
||||
"from": "now-2d",
|
||||
"section": 3,
|
||||
"to": "now",
|
||||
},
|
||||
Object {
|
||||
"display": "Last 7 days",
|
||||
"from": "now-7d",
|
||||
"section": 3,
|
||||
"to": "now",
|
||||
},
|
||||
Object {
|
||||
"display": "Last 30 days",
|
||||
"from": "now-30d",
|
||||
"section": 3,
|
||||
"to": "now",
|
||||
},
|
||||
Object {
|
||||
"display": "Last 90 days",
|
||||
"from": "now-90d",
|
||||
"section": 3,
|
||||
"to": "now",
|
||||
},
|
||||
Object {
|
||||
"display": "Last 6 months",
|
||||
"from": "now-6M",
|
||||
"section": 3,
|
||||
"to": "now",
|
||||
},
|
||||
Object {
|
||||
"display": "Last 1 year",
|
||||
"from": "now-1y",
|
||||
"section": 3,
|
||||
"to": "now",
|
||||
},
|
||||
Object {
|
||||
"display": "Last 2 years",
|
||||
"from": "now-2y",
|
||||
"section": 3,
|
||||
"to": "now",
|
||||
},
|
||||
Object {
|
||||
"display": "Last 5 years",
|
||||
"from": "now-5y",
|
||||
"section": 3,
|
||||
"to": "now",
|
||||
},
|
||||
]
|
||||
}
|
||||
value={
|
||||
Object {
|
||||
"from": "2019-12-17T07:48:27.433Z",
|
||||
"raw": Object {
|
||||
"from": "2019-12-17T07:48:27.433Z",
|
||||
"to": "2019-12-18T07:48:27.433Z",
|
||||
},
|
||||
"to": "2019-12-18T07:48:27.433Z",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</ClickOutsideWrapper>
|
||||
</div>
|
||||
<button
|
||||
className="btn navbar-button navbar-button--tight"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<Icon
|
||||
name="angle-right"
|
||||
size="lg"
|
||||
/>
|
||||
</button>
|
||||
<Component
|
||||
content={[Function]}
|
||||
placement="bottom"
|
||||
>
|
||||
<button
|
||||
className="btn navbar-button navbar-button--zoom"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<Icon
|
||||
name="search-minus"
|
||||
size="lg"
|
||||
/>
|
||||
</button>
|
||||
</Component>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -115,9 +115,9 @@ const theme: GrafanaThemeCommons = {
|
||||
},
|
||||
},
|
||||
height: {
|
||||
sm: '24px',
|
||||
md: '32px',
|
||||
lg: '48px',
|
||||
sm: 24,
|
||||
md: 32,
|
||||
lg: 48,
|
||||
},
|
||||
panelPadding: 8,
|
||||
panelHeaderHeight: 28,
|
||||
|
||||
@ -55,6 +55,7 @@ export class TransformationsEditor extends React.PureComponent<Props> {
|
||||
variant="secondary"
|
||||
label="Add transformation"
|
||||
options={availableTransformers}
|
||||
size="lg"
|
||||
onChange={this.onTransformationAdd}
|
||||
isFullWidth={false}
|
||||
/>
|
||||
|
||||
@ -54,8 +54,8 @@
|
||||
>
|
||||
<icon name="'history'" size="'xs'" style="margin-bottom: 2px"></icon> Restore
|
||||
</a>
|
||||
<a class="btn btn-outline-disabled btn-small" ng-show="revision.version === ctrl.dashboard.version">
|
||||
<icon name="'check'" size="'xs'" style="margin-bottom: 2px"></icon> Latest
|
||||
<a class="label label-tag" ng-show="revision.version === ctrl.dashboard.version">
|
||||
Latest
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@ -92,9 +92,9 @@ $grid-gutter-width: 30px !default;
|
||||
|
||||
// Component heights
|
||||
// -------------------------
|
||||
$height-sm: 24px;
|
||||
$height-md: 32px;
|
||||
$height-lg: 48px;
|
||||
$height-sm: 24;
|
||||
$height-md: 32;
|
||||
$height-lg: 48;
|
||||
|
||||
// Typography
|
||||
// -------------------------
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
height: $height-md;
|
||||
height: $height-md + px;
|
||||
|
||||
@include button-size($btn-padding-y, $space-md, $font-size-base, $border-radius-sm);
|
||||
|
||||
@ -70,7 +70,7 @@
|
||||
.btn-large {
|
||||
@include button-size($btn-padding-y-lg, $space-lg, $font-size-lg, $border-radius-sm);
|
||||
font-weight: normal;
|
||||
height: $height-lg;
|
||||
height: $height-lg + px;
|
||||
|
||||
.gicon {
|
||||
//font-size: 31px;
|
||||
@ -81,13 +81,13 @@
|
||||
|
||||
.btn-small {
|
||||
@include button-size($btn-padding-y-sm, $space-sm, $font-size-sm, $border-radius-sm);
|
||||
height: $height-sm;
|
||||
height: $height-sm + px;
|
||||
}
|
||||
|
||||
// Deprecated, only used by old plugins
|
||||
.btn-mini {
|
||||
@include button-size($btn-padding-y-sm, $space-sm, $font-size-sm, $border-radius-sm);
|
||||
height: $height-sm;
|
||||
height: #{height-sm}px;
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user