Minor renames and other fixes

This commit is contained in:
Torkel Ödegaard
2019-01-13 12:42:21 +01:00
parent 5b59d59afa
commit c11ec79056
19 changed files with 68 additions and 69 deletions

View File

@@ -1,11 +0,0 @@
.panel-option-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-row-gap: 10px;
grid-column-gap: 10px;
margin-bottom: 10px;
@include media-breakpoint-up(md) {
grid-template-columns: repeat(3, 1fr);
}
}

View File

@@ -5,10 +5,10 @@ interface Props {
children: JSX.Element[] | JSX.Element;
}
export const PanelOptionGrid: SFC<Props> = ({ children }) => {
export const PanelOptionsGrid: SFC<Props> = ({ children }) => {
return (
<div className="panel-option-grid">
<div className="panel-options-grid">
{children}
</div>
);

View File

@@ -0,0 +1,10 @@
.panel-options-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-row-gap: 10px;
grid-column-gap: 10px;
@include media-breakpoint-up(lg) {
grid-template-columns: repeat(3, 1fr);
}
}

View File

@@ -7,11 +7,11 @@ interface Props {
children: JSX.Element | JSX.Element[];
}
export const PanelOptionSection: SFC<Props> = props => {
export const PanelOptionsGroup: SFC<Props> = props => {
return (
<div className="panel-option-section">
<div className="panel-options-group">
{props.title && (
<div className="panel-option-section__header">
<div className="panel-options-group__header">
{props.title}
{props.onClose && (
<button className="btn btn-link" onClick={props.onClose}>
@@ -20,7 +20,7 @@ export const PanelOptionSection: SFC<Props> = props => {
)}
</div>
)}
<div className="panel-option-section__body">{props.children}</div>
<div className="panel-options-group__body">{props.children}</div>
</div>
);
};

View File

@@ -1,14 +1,14 @@
.panel-option-section {
.panel-options-group {
margin-bottom: 10px;
border: $panel-option-section-border;
border: $panel-options-group-border;
border-radius: $border-radius;
background: $page-bg;
}
.panel-option-section__header {
.panel-options-group__header {
padding: 4px 20px;
font-size: 1.1rem;
background: $panel-option-section-header-bg;
background: $panel-options-group-header-bg;
position: relative;
.btn {
@@ -18,7 +18,7 @@
}
}
.panel-option-section__body {
.panel-options-group__body {
padding: 20px;
&--queries {

View File

@@ -3,7 +3,7 @@ import tinycolor, { ColorInput } from 'tinycolor2';
import { Threshold, BasicGaugeColor } from '../../types';
import { ColorPicker } from '../ColorPicker/ColorPicker';
import { PanelOptionSection } from '../PanelOptionSection/PanelOptionSection';
import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup';
export interface Props {
thresholds: Threshold[];
@@ -205,7 +205,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
render() {
return (
<PanelOptionSection title="Thresholds">
<PanelOptionsGroup title="Thresholds">
<div className="thresholds">
<div className="color-indicators">
{this.renderIndicator()}
@@ -216,7 +216,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
{this.renderBase()}
</div>
</div>
</PanelOptionSection>
</PanelOptionsGroup>
);
}
}

View File

@@ -3,5 +3,5 @@
@import 'ThresholdsEditor/ThresholdsEditor';
@import 'Tooltip/Tooltip';
@import 'Select/Select';
@import 'PanelOptionSection/PanelOptionSection';
@import 'PanelOptionGrid/PanelOptionGrid';
@import 'PanelOptionsGroup/PanelOptionsGroup';
@import 'PanelOptionsGrid/PanelOptionsGrid';

View File

@@ -16,5 +16,5 @@ export { SeriesColorPicker } from './ColorPicker/SeriesColorPicker';
export { ThresholdsEditor } from './ThresholdsEditor/ThresholdsEditor';
export { GfFormLabel } from './GfFormLabel/GfFormLabel';
export { Graph } from './Graph/Graph';
export { PanelOptionSection } from './PanelOptionSection/PanelOptionSection';
export { PanelOptionGrid } from './PanelOptionGrid/PanelOptionGrid';
export { PanelOptionsGroup } from './PanelOptionsGroup/PanelOptionsGroup';
export { PanelOptionsGrid } from './PanelOptionsGrid/PanelOptionsGrid';