Skip to content

N
nexpie-grafana-theme
Commit 4a57d594 by Peter Holmberg
Options

fixed styling

parent a0a06911
Showing with 105 additions and 50 deletions
public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx
...@@ -5,9 +5,14 @@ interface ToggleButtonGroupProps { ...@@ -5,9 +5,14 @@ interface ToggleButtonGroupProps {
value?: any; value?: any;
label?: string; label?: string;
render: (props) => void; render: (props) => void;
stackedButtons?: boolean;
} }
export default class ToggleButtonGroup extends PureComponent<ToggleButtonGroupProps> { export default class ToggleButtonGroup extends PureComponent<ToggleButtonGroupProps> {
static defaultProps = {
stackedButtons: false,
};
getValues() { getValues() {
const { children } = this.props; const { children } = this.props;
return React.Children.toArray(children).map((c: ReactElement<any>) => c.props.value); return React.Children.toArray(children).map((c: ReactElement<any>) => c.props.value);
...@@ -27,14 +32,14 @@ export default class ToggleButtonGroup extends PureComponent<ToggleButtonGroupPr ...@@ -27,14 +32,14 @@ export default class ToggleButtonGroup extends PureComponent<ToggleButtonGroupPr
} }
render() { render() {
const { value, label } = this.props; const { value, label, stackedButtons } = this.props;
const values = this.getValues(); const values = this.getValues();
const selectedValue = value || values[0]; const selectedValue = value || values[0];
const labelClassName = `gf-form-label ${this.smallChildren() ? 'small' : ''}`; const labelClassName = `gf-form-label ${this.smallChildren() ? 'small' : ''}`;
return ( return (
<div className="gf-form"> <div className="gf-form">
<div className="toggle-button-group"> <div className={`toggle-button-group ${stackedButtons ? 'stacked' : ''}`}>
{label && <label className={labelClassName}>{label}</label>} {label && <label className={labelClassName}>{label}</label>}
{this.props.render({ selectedValue, onChange: this.handleToggle.bind(this) })} {this.props.render({ selectedValue, onChange: this.handleToggle.bind(this) })}
</div> </div>
......
public/app/plugins/panel/gauge/MappingRow.tsx
...@@ -68,18 +68,24 @@ export default class MappingRow extends PureComponent<Props, State> { ...@@ -68,18 +68,24 @@ export default class MappingRow extends PureComponent<Props, State> {
const rangeMap = mapping as RangeMap; const rangeMap = mapping as RangeMap;
return ( return (
<div className="gf-form-inline"> <div className="gf-form">
<div className="gf-form-group"> <div className="gf-form-inline">
<Label>From</Label> <Label width={4}>From</Label>
<input value={rangeMap.from} onChange={this.onMappingFromChange} /> <div>
<input className="gf-form-input" value={rangeMap.from} onChange={this.onMappingFromChange} />
</div>
</div> </div>
<div className="gf-form-group"> <div className="gf-form-inline">
<Label>To</Label> <Label width={4}>To</Label>
<input value={rangeMap.to} onChange={this.onMappingToChange} /> <div>
<input className="gf-form-input" value={rangeMap.to} onChange={this.onMappingToChange} />
</div>
</div> </div>
<div className="gf-form-group"> <div className="gf-form-inline">
<Label>Text</Label> <Label width={4}>Text</Label>
<input value={rangeMap.text} onChange={this.onMappingTextChange} /> <div>
<input className="gf-form-input" value={rangeMap.text} onChange={this.onMappingTextChange} />
</div>
</div> </div>
</div> </div>
); );
...@@ -91,11 +97,15 @@ export default class MappingRow extends PureComponent<Props, State> { ...@@ -91,11 +97,15 @@ export default class MappingRow extends PureComponent<Props, State> {
<div className="gf-form"> <div className="gf-form">
<div className="gf-form-inline"> <div className="gf-form-inline">
<Label width={4}>Value</Label> <Label width={4}>Value</Label>
<input className="gf-form-input" onChange={this.onMappingValueChange} value={valueMap.value} /> <div>
<input className="gf-form-input" onChange={this.onMappingValueChange} value={valueMap.value} />
</div>
</div> </div>
<div className="gf-form-inline"> <div className="gf-form-inline">
<Label width={4}>Text</Label> <Label width={4}>Text</Label>
<input className="gf-form-input" value={valueMap.text} onChange={this.onMappingTextChange} /> <div>
<input className="gf-form-input" value={valueMap.text} onChange={this.onMappingTextChange} />
</div>
</div> </div>
</div> </div>
); );
...@@ -105,33 +115,36 @@ export default class MappingRow extends PureComponent<Props, State> { ...@@ -105,33 +115,36 @@ export default class MappingRow extends PureComponent<Props, State> {
const { mappingType } = this.state; const { mappingType } = this.state;
return ( return (
<div className="gf-form-inline"> <div className="mapping-row">
<ToggleButtonGroup <div className="mapping-row-type">
onChange={mappingType => this.onMappingTypeChange(mappingType)} <ToggleButtonGroup
value={mappingType} onChange={mappingType => this.onMappingTypeChange(mappingType)}
render={({ selectedValue, onChange }) => { value={mappingType}
return [ stackedButtons={true}
<ToggleButton render={({ selectedValue, onChange }) => {
className="btn-small" return [
key="value" <ToggleButton
onChange={onChange} className="btn-small"
selected={selectedValue === MappingType.ValueToText} key="value"
value={MappingType.ValueToText} onChange={onChange}
> selected={selectedValue === MappingType.ValueToText}
Value value={MappingType.ValueToText}
</ToggleButton>, >
<ToggleButton Value
className="btn-small" </ToggleButton>,
key="range" <ToggleButton
onChange={onChange} className="btn-small"
selected={selectedValue === MappingType.RangeToText} key="range"
value={MappingType.RangeToText} onChange={onChange}
> selected={selectedValue === MappingType.RangeToText}
Range value={MappingType.RangeToText}
</ToggleButton>, >
]; Range
}} </ToggleButton>,
/> ];
}}
/>
</div>
<div>{this.renderRow()}</div> <div>{this.renderRow()}</div>
</div> </div>
); );
......
public/app/plugins/panel/gauge/ValueMappings.tsx
...@@ -42,14 +42,18 @@ export default class ValueMappings extends PureComponent<OptionModuleProps, Stat ...@@ -42,14 +42,18 @@ export default class ValueMappings extends PureComponent<OptionModuleProps, Stat
return ( return (
<div className="section gf-form-group"> <div className="section gf-form-group">
<div className="gf-form"> <h5 className="page-heading">Value mappings</h5>
<div className="mappings"> <div>
{combinedMappings.length > 0 && {combinedMappings.length > 0 &&
combinedMappings.map((mapping, index) => { combinedMappings.map((mapping, index) => {
return <MappingRow key={index} mapping={mapping} updateMapping={this.updateGauge} />; return <MappingRow key={index} mapping={mapping} updateMapping={this.updateGauge} />;
})} })}
</div>
<div className="add-mapping-row" onClick={this.addMapping}>
<div className="add-mapping-row-icon">
<i className="fa fa-plus" />
</div> </div>
<div onClick={this.addMapping}>Add mapping</div> <div className="add-mapping-row-label">Add mapping</div>
</div> </div>
</div> </div>
); );
......
public/app/plugins/panel/gauge/module.tsx
...@@ -62,13 +62,11 @@ class Options extends PureComponent<PanelOptionsProps<OptionsProps>> { ...@@ -62,13 +62,11 @@ class Options extends PureComponent<PanelOptionsProps<OptionsProps>> {
return ( return (
<div> <div>
<div className="form-section"> <div className="form-section">
<div className="form-section__header">Options</div>
<ValueOptions onChange={onChange} options={options} /> <ValueOptions onChange={onChange} options={options} />
<GaugeOptions onChange={onChange} options={options} /> <GaugeOptions onChange={onChange} options={options} />
<Thresholds onChange={onChange} options={options} /> <Thresholds onChange={onChange} options={options} />
</div> </div>
<div className="form-section"> <div className="form-section">
<div className="form-section__header">Value mappings</div>
<ValueMappings onChange={onChange} options={options} /> <ValueMappings onChange={onChange} options={options} />
</div> </div>
</div> </div>
......
public/sass/_grafana.scss
...@@ -106,6 +106,7 @@ ...@@ -106,6 +106,7 @@
@import 'components/unit-picker'; @import 'components/unit-picker';
@import 'components/thresholds'; @import 'components/thresholds';
@import 'components/toggle_button_group'; @import 'components/toggle_button_group';
@import 'components/value-mappings';
// PAGES // PAGES
@import 'pages/login'; @import 'pages/login';
......
public/sass/components/_toggle_button_group.scss
...@@ -13,6 +13,10 @@ ...@@ -13,6 +13,10 @@
} }
} }
&.stacked {
flex-direction: column;
}
.btn { .btn {
background-color: $typeahead-selected-bg; background-color: $typeahead-selected-bg;
border-radius: 0; border-radius: 0;
......
public/sass/components/_value-mappings.scss 0 → 100644
.mapping-row {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.mapping-row-type {
margin-right: 5px;
}
.add-mapping-row {
display: flex;
overflow: hidden;
height: 37px;
cursor: pointer;
}
.add-mapping-row-icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
background-color: $green;
}
.add-mapping-row-label {
align-items: center;
display: flex;
padding: 5px 8px;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment