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

Merge branch 'collapseable-panel-option-groups'

Browse Source
This commit is contained in:
Torkel Ödegaard
2019-02-01 15:39:47 +01:00
parent 3a5f03c772 59dfe794f5
commit 16f30664f5
6 changed files with 104 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx
View File

@@ -1,26 +1,38 @@
// Libraries // Libraries
import React, { SFC } from 'react'; import React, { FunctionComponent } from 'react';
interface Props { interface Props {
title?: string; title?: string;
onClose?: () => void; onClose?: () => void;
children: JSX.Element | JSX.Element[]; children: JSX.Element | JSX.Element[] | boolean;
onAdd?: () => void;
} }
export const PanelOptionsGroup: SFC<Props> = props => { export const PanelOptionsGroup: FunctionComponent<Props> = props => {
return ( return (
<div className="panel-options-group"> <div className="panel-options-group">
{props.title && ( {props.onAdd ? (
<div className="panel-options-group__header"> <div className="panel-options-group__header">
{props.title} <button className="panel-options-group__add-btn" onClick={props.onAdd}>
{props.onClose && ( <div className="panel-options-group__add-circle">
<button className="btn btn-link" onClick={props.onClose}> <i className="fa fa-plus" />
<i className="fa fa-remove" /> </div>
</button> <span className="panel-options-group__title">{props.title}</span>
)} </button>
</div> </div>
) : (
props.title && (
<div className="panel-options-group__header">
<span className="panel-options-group__title">{props.title}</span>
{props.onClose && (
<button className="btn btn-link" onClick={props.onClose}>
<i className="fa fa-remove" />
</button>
)}
</div>
)
)} )}
<div className="panel-options-group__body">{props.children}</div> {props.children && <div className="panel-options-group__body">{props.children}</div>}
</div> </div>
); );
}; };

43
packages/grafana-ui/src/components/PanelOptionsGroup/_PanelOptionsGroup.scss
View File

@@ -7,18 +7,57 @@
.panel-options-group__header { .panel-options-group__header {
padding: 4px 8px; padding: 4px 8px;
font-size: 1.1rem;
background: $panel-options-group-header-bg; background: $panel-options-group-header-bg;
position: relative; position: relative;
border-radius: $border-radius $border-radius 0 0; border-radius: $border-radius $border-radius 0 0;
display: flex;
align-items: center;
.btn { .btn {
position: absolute; position: absolute;
right: 0; right: 0;
top: 0px; top: 0;
} }
} }
.panel-options-group__add-btn {
background: none;
border: none;
display: flex;
align-items: center;
padding: 0;
&:hover {
.panel-options-group__add-circle {
background-color: $btn-success-bg;
color: $text-color-strong;
}
}
}
.panel-options-group__add-circle {
@include gradientBar($btn-success-bg, $btn-success-bg-hl, $text-color);
border-radius: 50px;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 6px;
i {
position: relative;
top: 1px;
}
}
.panel-options-group__title {
font-size: 1.1rem;
position: relative;
top: 1px;
}
.panel-options-group__body { .panel-options-group__body {
padding: 20px; padding: 20px;

14
packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss
View File

@@ -1,11 +1,11 @@
.thresholds { .thresholds {
margin-bottom: 10px; margin-bottom: 20px;
} }
.thresholds-row { .thresholds-row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 70px; height: 62px;
} }
.thresholds-row:first-child > .thresholds-row-color-indicator { .thresholds-row:first-child > .thresholds-row-color-indicator {
@@ -21,21 +21,21 @@
} }
.thresholds-row-add-button { .thresholds-row-add-button {
@include buttonBackground($btn-success-bg, $btn-success-bg-hl, $text-color);
align-self: center; align-self: center;
margin-right: 5px; margin-right: 5px;
color: $green;
height: 24px; height: 24px;
width: 24px; width: 24px;
background-color: $green;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
}
.thresholds-row-add-button > i { &:hover {
color: $white; color: $text-color-strong;
}
} }
.thresholds-row-color-indicator { .thresholds-row-color-indicator {

2
packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.test.tsx
View File

@@ -2,7 +2,7 @@ import React from 'react';
import { shallow } from 'enzyme'; import { shallow } from 'enzyme';
import { ValueMappingsEditor, Props } from './ValueMappingsEditor'; import { ValueMappingsEditor, Props } from './ValueMappingsEditor';
import { MappingType } from '../../types/panel'; import { MappingType } from '../../types';
const setup = (propOverrides?: object) => { const setup = (propOverrides?: object) => {
const props: Props = { const props: Props = {

14
packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx
View File

@@ -1,8 +1,8 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import MappingRow from './MappingRow'; import MappingRow from './MappingRow';
import { MappingType, ValueMapping } from '../../types/panel'; import { MappingType, ValueMapping } from '../../types';
import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup'; import { PanelOptionsGroup } from '..';
export interface Props { export interface Props {
valueMappings: ValueMapping[]; valueMappings: ValueMapping[];
@@ -81,8 +81,7 @@ export class ValueMappingsEditor extends PureComponent<Props, State> {
const { valueMappings } = this.state; const { valueMappings } = this.state;
return ( return (
<PanelOptionsGroup title="Value Mappings"> <PanelOptionsGroup title="Add value mapping" onAdd={this.addMapping}>
<div>
{valueMappings.length > 0 && {valueMappings.length > 0 &&
valueMappings.map((valueMapping, index) => ( valueMappings.map((valueMapping, index) => (
<MappingRow <MappingRow
@@ -92,13 +91,6 @@ export class ValueMappingsEditor extends PureComponent<Props, State> {
removeValueMapping={() => this.onRemoveMapping(valueMapping.id)} removeValueMapping={() => this.onRemoveMapping(valueMapping.id)}
/> />
))} ))}
</div>
<div className="add-mapping-row" onClick={this.addMapping}>
<div className="add-mapping-row-icon">
<i className="fa fa-plus" />
</div>
<div className="add-mapping-row-label">Add mapping</div>
</div>
</PanelOptionsGroup> </PanelOptionsGroup>
); );
} }

76
packages/grafana-ui/src/components/ValueMappingsEditor/__snapshots__/ValueMappingsEditor.test.tsx.snap
View File

@@ -2,55 +2,37 @@
exports[`Render should render component 1`] = ` exports[`Render should render component 1`] = `
<Component <Component
title="Value Mappings" onAdd={[Function]}
title="Add value mapping"
> >
<div> <MappingRow
<MappingRow key="Ok-0"
key="Ok-0" removeValueMapping={[Function]}
removeValueMapping={[Function]} updateValueMapping={[Function]}
updateValueMapping={[Function]} valueMapping={
valueMapping={ Object {
Object { "id": 1,
"id": 1, "operator": "",
"operator": "", "text": "Ok",
"text": "Ok", "type": 1,
"type": 1, "value": "20",
"value": "20",
}
} }
/> }
<MappingRow />
key="Meh-1" <MappingRow
removeValueMapping={[Function]} key="Meh-1"
updateValueMapping={[Function]} removeValueMapping={[Function]}
valueMapping={ updateValueMapping={[Function]}
Object { valueMapping={
"from": "21", Object {
"id": 2, "from": "21",
"operator": "", "id": 2,
"text": "Meh", "operator": "",
"to": "30", "text": "Meh",
"type": 2, "to": "30",
} "type": 2,
} }
/> }
</div> />
<div
className="add-mapping-row"
onClick={[Function]}
>
<div
className="add-mapping-row-icon"
>
<i
className="fa fa-plus"
/>
</div>
<div
className="add-mapping-row-label"
>
Add mapping
</div>
</div>
</Component> </Component>
`; `;