From 3bd5abfc264c075f3ca22b8a9ea8ea9336cda2ca Mon Sep 17 00:00:00 2001 From: Paul Kaplan Date: Wed, 9 May 2018 09:59:44 -0400 Subject: [PATCH 1/4] Consume mode info from the VM --- src/components/monitor-list/monitor-list.jsx | 3 +++ src/containers/monitor.jsx | 5 +++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/monitor-list/monitor-list.jsx b/src/components/monitor-list/monitor-list.jsx index dd87ee7b4..4a16a9129 100644 --- a/src/components/monitor-list/monitor-list.jsx +++ b/src/components/monitor-list/monitor-list.jsx @@ -16,10 +16,13 @@ const MonitorList = props => ( ))} diff --git a/src/containers/monitor.jsx b/src/containers/monitor.jsx index 807a33c4b..3e75f9ae1 100644 --- a/src/containers/monitor.jsx +++ b/src/containers/monitor.jsx @@ -19,9 +19,9 @@ class Monitor extends React.Component { 'setElement' ]); - // @todo this eventually will be stored in the VM + // @todo consume from VM, but need to store until there are APIs to update vm this.state = { - type: 'default' + type: props.mode }; } componentDidMount () { @@ -101,6 +101,7 @@ class Monitor extends React.Component { Monitor.propTypes = { addMonitorRect: PropTypes.func.isRequired, id: PropTypes.string.isRequired, + mode: PropTypes.oneOf(['default', 'slider', 'large', 'list']), monitorLayout: PropTypes.shape({ monitors: PropTypes.object, savedMonitorPositions: PropTypes.object From 896f732c92a320ea184920d72c352f97d88b74fc Mon Sep 17 00:00:00 2001 From: Paul Kaplan Date: Wed, 9 May 2018 10:00:17 -0400 Subject: [PATCH 2/4] Fix css for large monitors to make sizing more consistent with Scratch 2 --- src/components/monitor/monitor.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/monitor/monitor.css b/src/components/monitor/monitor.css index 298d895e0..0dd717f1b 100644 --- a/src/components/monitor/monitor.css +++ b/src/components/monitor/monitor.css @@ -45,9 +45,9 @@ } .large-value { - min-height: 1.5rem; + min-height: 1.4rem; min-width: 3rem; - padding: 0.25rem; + padding: 0.1rem 0.25rem; text-align: center; color: white; font-size: 1rem; From eb60744bf2cf32217fcbec610a1f2a01e18a7300 Mon Sep 17 00:00:00 2001 From: Paul Kaplan Date: Wed, 9 May 2018 10:00:37 -0400 Subject: [PATCH 3/4] Change monitor "type" to "mode" to be consistent with vm --- src/components/monitor/monitor.jsx | 24 ++++++++++---------- src/containers/monitor.jsx | 36 +++++++++++++++--------------- 2 files changed, 30 insertions(+), 30 deletions(-) diff --git a/src/components/monitor/monitor.jsx b/src/components/monitor/monitor.jsx index 48f7268d0..0f9808a76 100644 --- a/src/components/monitor/monitor.jsx +++ b/src/components/monitor/monitor.jsx @@ -19,7 +19,7 @@ const categories = { list: '#FC662C' }; -const types = { +const modes = { default: DefaultMonitor, large: LargeMonitor }; @@ -34,9 +34,9 @@ const MonitorComponent = props => ( - {types[props.type]({ + {(modes[props.mode] || modes.default)({ // Use default until other modes arrive categoryColor: categories[props.category], label: props.label, value: props.value @@ -44,14 +44,14 @@ const MonitorComponent = props => ( - + - + ( MonitorComponent.categories = categories; -const monitorTypes = Object.keys(types); +const monitorModes = Object.keys(modes); MonitorComponent.propTypes = { category: PropTypes.oneOf(Object.keys(categories)), componentRef: PropTypes.func.isRequired, label: PropTypes.string.isRequired, + mode: PropTypes.oneOf(monitorModes), onDragEnd: PropTypes.func.isRequired, - onNextType: PropTypes.func.isRequired, - onSetTypeToDefault: PropTypes.func.isRequired, - onSetTypeToLarge: PropTypes.func.isRequired, - type: PropTypes.oneOf(monitorTypes), + onNextMode: PropTypes.func.isRequired, + onSetModeToDefault: PropTypes.func.isRequired, + onSetModeToLarge: PropTypes.func.isRequired, value: PropTypes.oneOfType([ PropTypes.string, PropTypes.number]) @@ -83,10 +83,10 @@ MonitorComponent.propTypes = { MonitorComponent.defaultProps = { category: 'data', - type: 'default' + mode: 'default' }; export { MonitorComponent as default, - monitorTypes + monitorModes }; diff --git a/src/containers/monitor.jsx b/src/containers/monitor.jsx index 3e75f9ae1..657a438f7 100644 --- a/src/containers/monitor.jsx +++ b/src/containers/monitor.jsx @@ -3,7 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import monitorAdapter from '../lib/monitor-adapter.js'; -import MonitorComponent, {monitorTypes} from '../components/monitor/monitor.jsx'; +import MonitorComponent, {monitorModes} from '../components/monitor/monitor.jsx'; import {addMonitorRect, getInitialPosition, resizeMonitorRect, removeMonitorRect} from '../reducers/monitor-layout'; import {connect} from 'react-redux'; @@ -13,15 +13,15 @@ class Monitor extends React.Component { super(props); bindAll(this, [ 'handleDragEnd', - 'handleNextType', - 'handleSetTypeToDefault', - 'handleSetTypeToLarge', + 'handleNextMode', + 'handleSetModeToDefault', + 'handleSetModeToLarge', 'setElement' ]); // @todo consume from VM, but need to store until there are APIs to update vm this.state = { - type: props.mode + mode: props.mode }; } componentDidMount () { @@ -67,17 +67,17 @@ class Monitor extends React.Component { parseInt(this.element.style.top, 10) + y ); } - handleNextType () { - // @todo the type list needs to be filtered for current available types - // i.e. no sliders for read-only monitors, only list type for list vars. - const typeIndex = monitorTypes.indexOf(this.state.type); - this.setState({type: monitorTypes[(typeIndex + 1) % monitorTypes.length]}); + handleNextMode () { + // @todo the mode list needs to be filtered for current available modes + // i.e. no sliders for read-only monitors, only list for list vars. + const modeIndex = monitorModes.indexOf(this.state.mode); + this.setState({mode: monitorModes[(modeIndex + 1) % monitorModes.length]}); } - handleSetTypeToDefault () { - this.setState({type: 'default'}); + handleSetModeToDefault () { + this.setState({mode: 'default'}); } - handleSetTypeToLarge () { - this.setState({type: 'large'}); + handleSetModeToLarge () { + this.setState({mode: 'large'}); } setElement (monitorElt) { this.element = monitorElt; @@ -88,11 +88,11 @@ class Monitor extends React.Component { ); } From 29b37e2b34918bf369e965772f02bb3aebd627c4 Mon Sep 17 00:00:00 2001 From: Paul Kaplan Date: Wed, 9 May 2018 10:03:12 -0400 Subject: [PATCH 4/4] Allow for empty mode only for backwards compatibility --- src/containers/monitor.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/containers/monitor.jsx b/src/containers/monitor.jsx index 657a438f7..189e7730e 100644 --- a/src/containers/monitor.jsx +++ b/src/containers/monitor.jsx @@ -21,7 +21,7 @@ class Monitor extends React.Component { // @todo consume from VM, but need to store until there are APIs to update vm this.state = { - mode: props.mode + mode: props.mode || 'default' }; } componentDidMount () {