mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
wip: make widgets editable
This commit is contained in:
parent
9190cd52e9
commit
2f6a6851c4
13 changed files with 137 additions and 95 deletions
|
@ -41,11 +41,11 @@ class DashboardButtonGroup extends React.Component {
|
|||
buttons.push(
|
||||
<Button key={key++} onClick={this.props.onSave} style={buttonStyle}>
|
||||
<Icon icon="info" />
|
||||
<span class="glyphicon glyphicon-floppy-disk"></span> Save
|
||||
<span className="glyphicon glyphicon-floppy-disk"></span> Save
|
||||
</Button>,
|
||||
<Button key={key++} onClick={this.props.onCancel} style={buttonStyle}>
|
||||
<Icon icon="info" />
|
||||
<span class="glyphicon glyphicon-remove" ></span> Cancel
|
||||
<span className="glyphicon glyphicon-remove" ></span> Cancel
|
||||
</Button>
|
||||
);
|
||||
} else {
|
||||
|
@ -77,7 +77,7 @@ class DashboardButtonGroup extends React.Component {
|
|||
buttons.push(
|
||||
<Button key={key++} onClick={this.props.onEdit} style={buttonStyle}>
|
||||
<Icon icon="info" />
|
||||
<span className="glyphicon glyphicon-pencil"></span> Pause
|
||||
<span className="glyphicon glyphicon-pencil"></span> Edit
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -188,13 +188,13 @@ class Dashboard extends Component {
|
|||
}
|
||||
|
||||
}
|
||||
/*
|
||||
|
||||
/*
|
||||
componentWillUnmount() {
|
||||
//document.removeEventListener('keydown', this.handleKeydown.bind(this));
|
||||
}
|
||||
|
||||
/*componentDidUpdate() {
|
||||
componentDidUpdate() {
|
||||
if (this.state.dashboard._id !== this.props.match.params.dashboard) {
|
||||
this.reloadDashboard();
|
||||
}
|
||||
|
@ -224,9 +224,9 @@ class Dashboard extends Component {
|
|||
}
|
||||
});
|
||||
}
|
||||
}*
|
||||
} */
|
||||
|
||||
/*handleKeydown(e) {
|
||||
handleKeydown(e) {
|
||||
switch (e.key) {
|
||||
case ' ':
|
||||
case 'p':
|
||||
|
@ -242,7 +242,7 @@ class Dashboard extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
* Adapt the area's height with the position of the new widget.
|
||||
* Return true if the height increased, otherwise false.
|
||||
|
@ -293,16 +293,25 @@ class Dashboard extends Component {
|
|||
}
|
||||
|
||||
handleDrop(widget) {
|
||||
const widgets = this.state.dashboard.get('widgets') || [];
|
||||
|
||||
const widgetKey = this.getNewWidgetKey();
|
||||
widget.dashboardID = this.state.dashboard.id;
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
type: 'widgets/start-add',
|
||||
token: this.state.sessionToken,
|
||||
data: widget
|
||||
});
|
||||
/*let widgets = [];
|
||||
widgets = this.state.dashboard.get('widgets');
|
||||
|
||||
const widgetKey = Dashboard.getNewWidgetKey();
|
||||
widgets[widgetKey] = widget;
|
||||
|
||||
const dashboard = this.state.dashboard.set('widgets');
|
||||
const dashboard = this.state.dashboard.set('widgets',widgets);
|
||||
|
||||
// this.increaseHeightWithWidget(widget);
|
||||
|
||||
this.setState({ dashboard });
|
||||
this.setState({ dashboard });*/
|
||||
};
|
||||
|
||||
|
||||
|
@ -311,7 +320,7 @@ class Dashboard extends Component {
|
|||
this.widgetChange(updated_widget, key, this.saveChanges);
|
||||
}
|
||||
|
||||
widgetChange = (widget, index, callback = null) => {
|
||||
widgetChange(widget, index, callback = null){
|
||||
const widgets = this.state.dashboard.get('widgets');
|
||||
widgets[index] = widget;
|
||||
|
||||
|
@ -352,18 +361,21 @@ class Dashboard extends Component {
|
|||
|
||||
|
||||
closeEdit(data){
|
||||
console.log("dashboard close edit was called: ");
|
||||
console.log(data);
|
||||
if (data == null) {
|
||||
this.setState({ editModal: false });
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const widgets = this.state.dashboard.get('widgets');
|
||||
widgets[this.state.modalIndex] = data;
|
||||
AppDispatcher.dispatch({
|
||||
type: 'widgets/start-edit',
|
||||
token: this.state.sessionToken,
|
||||
data: data
|
||||
});
|
||||
|
||||
const dashboard = this.state.dashboard.set('widgets', widgets);
|
||||
|
||||
this.setState({ editModal: false, dashboard });
|
||||
this.setState({ editModal: false });
|
||||
};
|
||||
|
||||
|
||||
|
@ -390,7 +402,7 @@ class Dashboard extends Component {
|
|||
saveEditing() {
|
||||
// Provide the callback so it can be called when state change is applied
|
||||
// TODO: Check if callback is needed
|
||||
this.setState({ editing: false }, this.saveChanges );
|
||||
this.setState({ editing: false });
|
||||
};
|
||||
|
||||
saveChanges() {
|
||||
|
@ -407,9 +419,8 @@ class Dashboard extends Component {
|
|||
}
|
||||
|
||||
cancelEditing() {
|
||||
this.setState({ editing: false, dasboard: {} });
|
||||
this.setState({ editing: false });
|
||||
|
||||
this.reloadDashboard();
|
||||
};
|
||||
|
||||
setGrid(value) {
|
||||
|
@ -440,29 +451,30 @@ class Dashboard extends Component {
|
|||
|
||||
<DashboardButtonGroup
|
||||
editing={this.state.editing}
|
||||
onEdit={this.startEditing.bind(this)}
|
||||
fullscreen={this.props.isFullscreen}
|
||||
paused={this.state.paused}
|
||||
onSave={this.saveEditing}
|
||||
onCancel={this.cancelEditing}
|
||||
onSave={this.saveEditing.bind(this)}
|
||||
onCancel={this.cancelEditing.bind(this)}
|
||||
onFullscreen={this.props.toggleFullscreen}
|
||||
onPause={this.pauseData}
|
||||
onUnpause={this.unpauseData}
|
||||
onPause={this.pauseData.bind(this)}
|
||||
onUnpause={this.unpauseData.bind(this)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="box box-content" onContextMenu={ (e) => e.preventDefault() }>
|
||||
{this.state.editing &&
|
||||
<WidgetToolbox grid={grid} onGridChange={this.setGrid} widgets={widgets} />
|
||||
<WidgetToolbox grid={grid} onGridChange={this.setGrid.bind(this)} widgets={widgets} />
|
||||
}
|
||||
|
||||
<WidgetArea widgets={widgets} editing={this.state.editing} grid={grid} onWidgetAdded={this.handleDrop}>
|
||||
<WidgetArea widgets={widgets} editing={this.state.editing} grid={grid} onWidgetAdded={this.handleDrop.bind(this)}>
|
||||
{widgets != null && Object.keys(widgets).map(widgetKey => (
|
||||
<Widget
|
||||
key={widgetKey}
|
||||
data={widgets[widgetKey]}
|
||||
simulation={this.state.simulation}
|
||||
onWidgetChange={(w, k) => this.widgetChange(w, k)}
|
||||
onWidgetStatusChange={(w, k) => this.widgetStatusChange(w, k)}
|
||||
onWidgetChange={this.widgetChange.bind(this)}
|
||||
onWidgetStatusChange={this.widgetStatusChange.bind(this)}
|
||||
editing={this.state.editing}
|
||||
index={widgetKey}
|
||||
grid={grid}
|
||||
|
@ -480,16 +492,20 @@ class Dashboard extends Component {
|
|||
widget={widgets[widgetKey]}
|
||||
onEdit={this.editWidget.bind(this)}
|
||||
onDelete={this.deleteWidget.bind(this)}
|
||||
onChange={this.widgetChange} />
|
||||
onChange={this.widgetChange.bind(this)} />
|
||||
))}
|
||||
|
||||
<EditWidget sessionToken={this.state.sessionToken} show={this.state.editModal} onClose={this.closeEdit} widget={this.state.modalData} simulationModels={this.state.simulationModels} files={this.state.files} />
|
||||
<EditWidget sessionToken={this.state.sessionToken} show={this.state.editModal} onClose={this.closeEdit.bind(this)} widget={this.state.modalData} simulationModels={this.state.simulationModels} files={this.state.files} />
|
||||
|
||||
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
/*
|
||||
onWidgetChange={(w, k) => this.widgetChange(w, k)}
|
||||
onWidgetStatusChange={(w, k) => this.widgetStatusChange(w, k)}
|
||||
*/
|
||||
|
||||
let fluxContainerConverter = require('../common/FluxContainerConverter');
|
||||
export default Fullscreenable()(Container.create(fluxContainerConverter.convert(Dashboard), { withProps: true }));
|
||||
|
|
|
@ -41,6 +41,8 @@ class EditWidgetMinMaxControl extends React.Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
console.log("in minmax control, widget: ");
|
||||
console.log(this.state.widget);
|
||||
return <FormGroup>
|
||||
<FormLabel>{this.props.label}</FormLabel>
|
||||
<FormCheck id={this.props.controlId + "UseMinMax"} checked={this.state.widget[this.props.controlId + "UseMinMax"] || ''} onChange={e => this.props.handleChange(e)}>Enable min-max</FormCheck>
|
||||
|
|
|
@ -40,7 +40,7 @@ class EditWidgetNumberControl extends Component {
|
|||
return (
|
||||
<FormGroup controlId={this.props.controlId}>
|
||||
<FormLabel>{this.props.label}</FormLabel>
|
||||
<FormControl type="number" step="any" defaultValue={this.props.defaultValue} value={this.state.widget[this.props.controlId] || 0} onChange={e => this.props.handleChange(e)} />
|
||||
<FormControl type="number" step="any" value={this.state.widget[this.props.controlId] || 0} onChange={e => this.props.handleChange(e)} />
|
||||
</FormGroup>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -54,7 +54,7 @@ class EditWidgetSignalControl extends Component {
|
|||
return (
|
||||
<FormGroup controlId="signal">
|
||||
<FormLabel>Signal</FormLabel>
|
||||
<FormControl className="select" placeholder="Select signal" value={this.state.widget.signal} onChange={(e) => this.props.handleChange(e)}>
|
||||
<FormControl as="select" placeholder="Select signal" value={this.state.widget.signal} onChange={(e) => this.props.handleChange(e)}>
|
||||
{
|
||||
signalsToRender.length === 0 ? (
|
||||
<option disabled value style={{ display: 'none' }}>No signals available.</option>
|
||||
|
|
|
@ -39,10 +39,12 @@ class EditWidgetSimulationControl extends Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
console.log("editwidgetsimulationcontrol was called");
|
||||
console.log(this.state.widget);
|
||||
return (
|
||||
<FormGroup controlId="simulationModel">
|
||||
<FormLabel>Simulation Model</FormLabel>
|
||||
<FormControl className="select" placeholder="Select simulation model" value={this.state.widget.simulationModel || '' } onChange={(e) => this.props.handleChange(e)}>
|
||||
<FormControl as="select" placeholder="Select simulation model" value={this.state.widget.simulationModel || '' } onChange={(e) => this.props.handleChange(e)}>
|
||||
{
|
||||
this.props.simulationModels.length === 0 ? (
|
||||
<option disabled value style={{ display: 'none' }}> No simulation models available. </option>
|
||||
|
|
|
@ -42,7 +42,11 @@ class EditWidgetDialog extends React.Component {
|
|||
};
|
||||
}
|
||||
|
||||
|
||||
|
||||
onClose(canceled) {
|
||||
console.log("in editWidget. the temporal state: ");
|
||||
console.log(this.state.temporal);
|
||||
if (canceled === false) {
|
||||
if (this.valid) {
|
||||
this.props.onClose(this.state.temporal);
|
||||
|
@ -66,8 +70,11 @@ class EditWidgetDialog extends React.Component {
|
|||
handleChange(e) {
|
||||
if (e.constructor === Array) {
|
||||
// Every property in the array will be updated
|
||||
console.log("####its an array!");
|
||||
let changes = e.reduce( (changesObject, event) => {
|
||||
changesObject[event.target.id] = event.target.value;
|
||||
console.log("hier ist changes object: ");
|
||||
console.log(changesObject);
|
||||
|
||||
return changesObject;
|
||||
}, {});
|
||||
|
@ -96,8 +103,20 @@ class EditWidgetDialog extends React.Component {
|
|||
} else {
|
||||
changeObject[e.target.id] = e.target.value;
|
||||
}
|
||||
console.log("this.state.temporal is: ");
|
||||
console.log(this.state.temporal);
|
||||
console.log("the event target id: " + e.target.id);
|
||||
console.log("the value is: " + e.target.value)
|
||||
console.log("change Object is: ");
|
||||
console.log(changeObject);
|
||||
|
||||
this.setState({ temporal: Object.assign({}, this.state.temporal, changeObject ) });
|
||||
let finalChange = this.state.temporal;
|
||||
|
||||
finalChange.customProperties[e.target.id] = changeObject[e.target.id];
|
||||
|
||||
|
||||
|
||||
this.setState({ temporal: finalChange});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -23,7 +23,7 @@ import React from 'react';
|
|||
import PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import { Rnd } from 'react-rnd';
|
||||
import { contextMenu } from 'react-contexify';
|
||||
import { Menu } from 'react-contexify';
|
||||
|
||||
class EditableWidgetContainer extends React.Component {
|
||||
constructor(props) {
|
||||
|
@ -122,13 +122,13 @@ class EditableWidgetContainer extends React.Component {
|
|||
onDragStop={this.dragStop}
|
||||
dragGrid={gridArray}
|
||||
resizeGrid={gridArray}
|
||||
zIndex={widget.z}
|
||||
zindex={widget.z}
|
||||
enableResizing={resizing}
|
||||
disableDragging={widget.locked}
|
||||
>
|
||||
<contextMenu id={'widgetMenu' + this.props.index}>
|
||||
<Menu id={'widgetMenu' + this.props.index}>
|
||||
{this.props.children}
|
||||
</contextMenu>
|
||||
</Menu>
|
||||
</Rnd>;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -29,7 +29,7 @@ class WidgetContainer extends React.Component {
|
|||
height: Number(this.props.widget.height),
|
||||
left: Number(this.props.widget.x),
|
||||
top: Number(this.props.widget.y),
|
||||
zIndex: Number(this.props.widget.z),
|
||||
zindex: Number(this.props.widget.z),
|
||||
position: 'absolute'
|
||||
};
|
||||
|
||||
|
|
|
@ -35,13 +35,14 @@ class WidgetFactory {
|
|||
x: position.x,
|
||||
y: position.y,
|
||||
z: position.z,
|
||||
locked: false
|
||||
locked: false,
|
||||
customProperties: {}
|
||||
};
|
||||
|
||||
// set type specific properties
|
||||
switch(type) {
|
||||
case 'CustomAction':
|
||||
widget.actions = [
|
||||
widget.customProperties.actions = [
|
||||
{
|
||||
action: 'stop'
|
||||
},
|
||||
|
@ -56,51 +57,51 @@ class WidgetFactory {
|
|||
}
|
||||
];
|
||||
widget.name = 'Action';
|
||||
widget.icon = 'star';
|
||||
widget.customProperties.icon = 'star';
|
||||
widget.width = 100;
|
||||
widget.height = 50;
|
||||
widget.simulationModel = defaultSimulationModel;
|
||||
widget.customProperties.simulationModel = defaultSimulationModel;
|
||||
break;
|
||||
case 'Action':
|
||||
widget.simulationModel = defaultSimulationModel;
|
||||
widget.customProperties.simulationModel = defaultSimulationModel;
|
||||
break;
|
||||
case 'Lamp':
|
||||
widget.simulationModel = defaultSimulationModel;
|
||||
widget.signal = 0;
|
||||
widget.customProperties.simulationModel = defaultSimulationModel;
|
||||
widget.customProperties.signal = 0;
|
||||
widget.minWidth = 5;
|
||||
widget.minHeight = 5;
|
||||
widget.width = 20;
|
||||
widget.height = 20;
|
||||
widget.on_color = 6;
|
||||
widget.off_color = 8;
|
||||
widget.threshold = 0.5;
|
||||
widget.customProperties.on_color = 6;
|
||||
widget.customProperties.off_color = 8;
|
||||
widget.customProperties.threshold = 0.5;
|
||||
break;
|
||||
case 'Value':
|
||||
widget.simulationModel = defaultSimulationModel;
|
||||
widget.signal = 0;
|
||||
widget.customProperties.simulationModel = defaultSimulationModel;
|
||||
widget.customProperties.signal = 0;
|
||||
widget.minWidth = 70;
|
||||
widget.minHeight = 20;
|
||||
widget.width = 120;
|
||||
widget.height = 30;
|
||||
widget.textSize = 16;
|
||||
widget.customProperties.textSize = 16;
|
||||
widget.name = 'Value';
|
||||
widget.showUnit = false;
|
||||
widget.customProperties.showUnit = false;
|
||||
break;
|
||||
case 'Plot':
|
||||
widget.simulationModel = defaultSimulationModel;
|
||||
widget.signals = [ 0 ];
|
||||
widget.ylabel = '';
|
||||
widget.time = 60;
|
||||
widget.customProperties.simulationModel = defaultSimulationModel;
|
||||
widget.customProperties.signals = [ 0 ];
|
||||
widget.customProperties.ylabel = '';
|
||||
widget.customProperties.time = 60;
|
||||
widget.minWidth = 400;
|
||||
widget.minHeight = 200;
|
||||
widget.width = 400;
|
||||
widget.height = 200;
|
||||
widget.yMin = 0;
|
||||
widget.yMax = 10;
|
||||
widget.yUseMinMax = false;
|
||||
widget.customProperties.yMin = 0;
|
||||
widget.customProperties.yMax = 10;
|
||||
widget.customProperties.yUseMinMax = false;
|
||||
break;
|
||||
case 'Table':
|
||||
widget.simulationModel = defaultSimulationModel;
|
||||
widget.customProperties.simulationModel = defaultSimulationModel;
|
||||
widget.minWidth = 200;
|
||||
widget.width = 300;
|
||||
widget.height = 200;
|
||||
|
@ -111,80 +112,80 @@ class WidgetFactory {
|
|||
widget.width = 100;
|
||||
widget.height = 35;
|
||||
widget.name = 'Label';
|
||||
widget.textSize = 32;
|
||||
widget.fontColor = 0;
|
||||
widget.customProperties.textSize = 32;
|
||||
widget.customProperties.fontColor = 0;
|
||||
break;
|
||||
case 'PlotTable':
|
||||
widget.simulationModel = defaultSimulationModel;
|
||||
widget.preselectedSignals = [];
|
||||
widget.signals = []; // initialize selected signals
|
||||
widget.ylabel = '';
|
||||
widget.customProperties.simulationModel = defaultSimulationModel;
|
||||
widget.customProperties.preselectedSignals = [];
|
||||
widget.customProperties.signals = []; // initialize selected signals
|
||||
widget.customProperties.ylabel = '';
|
||||
widget.minWidth = 200;
|
||||
widget.minHeight = 100;
|
||||
widget.width = 600;
|
||||
widget.height = 300;
|
||||
widget.time = 60;
|
||||
widget.yMin = 0;
|
||||
widget.yMax = 10;
|
||||
widget.yUseMinMax = false;
|
||||
widget.customProperties.time = 60;
|
||||
widget.customProperties.yMin = 0;
|
||||
widget.customProperties.yMax = 10;
|
||||
widget.customProperties.yUseMinMax = false;
|
||||
break;
|
||||
case 'Image':
|
||||
widget.minWidth = 20;
|
||||
widget.minHeight = 20;
|
||||
widget.width = 200;
|
||||
widget.height = 200;
|
||||
widget.lockAspect = true;
|
||||
widget.customProperties.lockAspect = true;
|
||||
break;
|
||||
case 'Button':
|
||||
widget.minWidth = 100;
|
||||
widget.minHeight = 50;
|
||||
widget.width = 100;
|
||||
widget.height = 100;
|
||||
widget.background_color = 1;
|
||||
widget.font_color = 0;
|
||||
widget.simulationModel = defaultSimulationModel;
|
||||
widget.signal = 0;
|
||||
widget.customProperties.background_color = 1;
|
||||
widget.customProperties.font_color = 0;
|
||||
widget.customProperties.simulationModel = defaultSimulationModel;
|
||||
widget.customProperties.signal = 0;
|
||||
break;
|
||||
case 'Input':
|
||||
widget.minWidth = 200;
|
||||
widget.minHeight = 50;
|
||||
widget.width = 200;
|
||||
widget.height = 50;
|
||||
widget.simulationModel = defaultSimulationModel;
|
||||
widget.signal = 0;
|
||||
widget.customProperties.simulationModel = defaultSimulationModel;
|
||||
widget.customProperties.signal = 0;
|
||||
break;
|
||||
case 'Slider':
|
||||
widget.minWidth = 380;
|
||||
widget.minHeight = 30;
|
||||
widget.width = 400;
|
||||
widget.height = 50;
|
||||
widget.orientation = WidgetSlider.OrientationTypes.HORIZONTAL.value; // Assign default orientation
|
||||
widget.simulationModel = defaultSimulationModel;
|
||||
widget.signal = 0;
|
||||
widget.customProperties.orientation = WidgetSlider.OrientationTypes.HORIZONTAL.value; // Assign default orientation
|
||||
widget.customProperties.simulationModel = defaultSimulationModel;
|
||||
widget.customProperties.signal = 0;
|
||||
break;
|
||||
case 'Gauge':
|
||||
widget.simulationModel = defaultSimulationModel;
|
||||
widget.signal = 0;
|
||||
widget.customProperties.simulationModel = defaultSimulationModel;
|
||||
widget.customProperties.signal = 0;
|
||||
widget.minWidth = 100;
|
||||
widget.minHeight = 150;
|
||||
widget.width = 150;
|
||||
widget.height = 150;
|
||||
widget.colorZones = false;
|
||||
widget.zones = [];
|
||||
widget.valueMin = 0;
|
||||
widget.valueMax = 1;
|
||||
widget.valueUseMinMax = false;
|
||||
widget.customProperties.colorZones = false;
|
||||
widget.customProperties.zones = [];
|
||||
widget.customProperties.valueMin = 0;
|
||||
widget.customProperties.valueMax = 1;
|
||||
widget.customProperties.valueUseMinMax = false;
|
||||
break;
|
||||
case 'Box':
|
||||
widget.minWidth = 50;
|
||||
widget.minHeight = 50;
|
||||
widget.width = 100;
|
||||
widget.height = 100;
|
||||
widget.border_color = 0;
|
||||
widget.customProperties.border_color = 0;
|
||||
widget.z = 0;
|
||||
break;
|
||||
case 'HTML':
|
||||
widget.content = '<i>Hello World</i>';
|
||||
widget.customProperties.content = '<i>Hello World</i>';
|
||||
break;
|
||||
case 'Topology':
|
||||
widget.width = 600;
|
||||
|
|
|
@ -168,7 +168,7 @@ class Widget extends React.Component {
|
|||
const element = this.createWidget(this.props.data);
|
||||
|
||||
if (this.props.editing) {
|
||||
return <EditableWidgetContainer widget={this.props.data} grid={this.props.grid} index={this.props.index}>
|
||||
return <EditableWidgetContainer widget={this.props.data} grid={this.props.grid} index={parseInt(this.props.index,10)}>
|
||||
{element}
|
||||
</EditableWidgetContainer>;
|
||||
}
|
||||
|
|
|
@ -30,9 +30,9 @@ class WidgetBox extends Component {
|
|||
let colors = EditWidgetColorControl.ColorPalette;
|
||||
|
||||
let colorStyle = {
|
||||
borderColor: colors[this.props.widget.border_color],
|
||||
backgroundColor: colors[this.props.widget.background_color],
|
||||
opacity: this.props.widget.background_color_opacity
|
||||
borderColor: colors[this.props.widget.customProperties.border_color],
|
||||
backgroundColor: colors[this.props.widget.customProperties.background_color],
|
||||
opacity: this.props.widget.customProperties.background_color_opacity
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
|
@ -25,6 +25,8 @@ import EditWidgetColorControl from '../edit-widget-color-control';
|
|||
|
||||
class WidgetLabel extends Component {
|
||||
render() {
|
||||
console.log("here is the label; ");
|
||||
console.log(this.props.widget);
|
||||
const style = {
|
||||
fontSize: this.props.widget.customProperties.textSize + 'px',
|
||||
color: EditWidgetColorControl.ColorPalette[this.props.widget.customProperties.fontColor]
|
||||
|
|
Loading…
Add table
Reference in a new issue