Commit e8177400 authored by Steffen Vogel's avatar Steffen Vogel 🎅🏼
Browse files

reworked button widget

parent e7b5aa6c
......@@ -21,34 +21,44 @@
******************************************************************************/
import React, { Component } from 'react';
import EditWidgetColorControl from '../dialogs/edit-widget-color-control';
import { Button } from 'react-bootstrap';
class WidgetButton extends Component {
action(e) {
e.target.blur(); // Remove focus
console.log('Button widget action');
}
constructor(props) {
super(props);
render() {
this.state = {
pressed: false
}
}
let colors = EditWidgetColorControl.ColorPalette;
onPress(e) {
if (!this.props.widget.toggle) {
this.setState({ pressed: true });
this.valueChanged(this.props.widget.on_value);
}
}
let colorStyle = {
background: colors[this.props.widget.background_color],
color: colors[this.props.widget.font_color],
borderColor: colors[this.props.widget.font_color]
onRelease(e) {
let nextState = false;
if (this.props.widget.toggle) {
nextState = !this.state.pressed;
}
this.setState({ pressed: nextState });
this.valueChanged(nextState ? this.props.widget.on_value : this.props.widget.off_value);
}
valueChanged(newValue) {
if (this.props.onInputChanged)
this.props.onInputChanged(newValue);
}
render() {
return (
<div className="button-widget full">
{ this.props.editing ? (
<button className="full btn btn-default" type="button" disabled onClick={ this.action } style={colorStyle}>{this.props.widget.name}</button>
) : (
<button className="full btn btn-default" type="button" onClick={ this.action } style={colorStyle}>{this.props.widget.name}</button>
)
}
<Button active={ this.state.pressed } disabled={ this.props.editing } onMouseDown={ (e) => this.onPress(e) } onMouseUp={ (e) => this.onRelease(e) }>{this.props.widget.name}</Button>
</div>
);
}
......
......@@ -265,18 +265,7 @@ span.signal-unit::after {
}
/* Button widget styling */
.button-widget button {
border-radius: 25px;
border-style: double;
border-width: 4px;
overflow-x: hidden;
font-weight: 500;
font-size: 1.2em;
}
.button-widget button:hover {
border-style: double;
}
/* End button widget styling */
.full {
......
Supports Markdown
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