From 05abc101168cfd649d678530739d77d7e9b0fd4e Mon Sep 17 00:00:00 2001 From: Evelyn Eastmond <evhan55@gmail.com> Date: Wed, 29 Aug 2018 11:15:46 -0400 Subject: [PATCH] Changing 'device' to 'peripheral' in the GUI code, etc. --- .../connection-modal/auto-scanning-step.jsx | 8 ++--- .../connection-modal/connected-step.jsx | 8 ++--- .../connection-modal/connecting-step.jsx | 8 ++--- .../connection-modal/connection-modal.css | 26 +++++++------- .../connection-modal/connection-modal.jsx | 6 ++-- .../connection-modal/error-step.jsx | 8 ++--- .../{device-tile.jsx => peripheral-tile.jsx} | 26 +++++++------- .../connection-modal/scanning-step.jsx | 32 ++++++++--------- src/containers/auto-scanning-step.jsx | 8 ++--- src/containers/blocks.jsx | 8 ++--- src/containers/connection-modal.jsx | 14 ++++---- src/containers/scanning-step.jsx | 16 ++++----- src/lib/libraries/extensions/index.jsx | 34 +++++++++---------- 13 files changed, 101 insertions(+), 101 deletions(-) rename src/components/connection-modal/{device-tile.jsx => peripheral-tile.jsx} (77%) diff --git a/src/components/connection-modal/auto-scanning-step.jsx b/src/components/connection-modal/auto-scanning-step.jsx index 623bbdd02..36afc0952 100644 --- a/src/components/connection-modal/auto-scanning-step.jsx +++ b/src/components/connection-modal/auto-scanning-step.jsx @@ -45,8 +45,8 @@ const AutoScanningStep = props => ( src={radarIcon} /> <img - className={styles.deviceButtonImage} - src={props.deviceButtonImage} + className={styles.peripheralButtonImage} + src={props.peripheralButtonImage} /> </React.Fragment> )} @@ -55,7 +55,7 @@ const AutoScanningStep = props => ( <FormattedMessage defaultMessage="No devices found" description="Text shown when no devices could be found" - id="gui.connection.auto-scanning.noDevicesFound" + id="gui.connection.auto-scanning.noPeripheralsFound" /> </Box> )} @@ -139,7 +139,7 @@ const AutoScanningStep = props => ( ); AutoScanningStep.propTypes = { - deviceButtonImage: PropTypes.string, + peripheralButtonImage: PropTypes.string, onRefresh: PropTypes.func, onStartScan: PropTypes.func, phase: PropTypes.oneOf(Object.keys(PHASES)) diff --git a/src/components/connection-modal/connected-step.jsx b/src/components/connection-modal/connected-step.jsx index c02f644bc..f7da3095d 100644 --- a/src/components/connection-modal/connected-step.jsx +++ b/src/components/connection-modal/connected-step.jsx @@ -12,10 +12,10 @@ const ConnectedStep = props => ( <Box className={styles.body}> <Box className={styles.activityArea}> <Box className={styles.centeredRow}> - <div className={styles.deviceActivity}> + <div className={styles.peripheralActivity}> <img - className={styles.deviceActivityIcon} - src={props.deviceImage} + className={styles.peripheralActivityIcon} + src={props.peripheralImage} /> <img className={styles.bluetoothConnectedIcon} @@ -63,7 +63,7 @@ const ConnectedStep = props => ( ); ConnectedStep.propTypes = { - deviceImage: PropTypes.string.isRequired, + peripheralImage: PropTypes.string.isRequired, onCancel: PropTypes.func, onDisconnect: PropTypes.func }; diff --git a/src/components/connection-modal/connecting-step.jsx b/src/components/connection-modal/connecting-step.jsx index be378b3fd..71382340d 100644 --- a/src/components/connection-modal/connecting-step.jsx +++ b/src/components/connection-modal/connecting-step.jsx @@ -14,10 +14,10 @@ const ConnectingStep = props => ( <Box className={styles.body}> <Box className={styles.activityArea}> <Box className={styles.centeredRow}> - <div className={styles.deviceActivity}> + <div className={styles.peripheralActivity}> <img - className={styles.deviceActivityIcon} - src={props.deviceImage} + className={styles.peripheralActivityIcon} + src={props.peripheralImage} /> <img className={styles.bluetoothConnectingIcon} @@ -61,7 +61,7 @@ const ConnectingStep = props => ( ConnectingStep.propTypes = { connectingMessage: PropTypes.node.isRequired, - deviceImage: PropTypes.string.isRequired, + peripheralImage: PropTypes.string.isRequired, onDisconnect: PropTypes.func }; diff --git a/src/components/connection-modal/connection-modal.css b/src/components/connection-modal/connection-modal.css index 16f337ef4..f024489c5 100644 --- a/src/components/connection-modal/connection-modal.css +++ b/src/components/connection-modal/connection-modal.css @@ -25,14 +25,14 @@ align-items: center; } -.device-tile-pane { +.peripheral-tile-pane { overflow-y: auto; width: 100%; height: 100%; padding: 0.5rem; } -.device-tile { +.peripheral-tile { display: flex; flex-direction: row; justify-content: space-between; @@ -46,36 +46,36 @@ margin-bottom: 0.5rem; } -.device-tile-name { +.peripheral-tile-name { display: flex; align-items: center; } -[dir="ltr"] .device-tile-image { +[dir="ltr"] .peripheral-tile-image { margin-right: 0.5rem; } -[dir="rtl"] .device-tile-image { +[dir="rtl"] .peripheral-tile-image { margin-left: 0.5rem; } -.device-tile-name-wrapper { +.peripheral-tile-name-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } -.device-tile-name-label { +.peripheral-tile-name-label { font-weight: bold; font-size: 0.625rem; } -.device-tile-name-text { +.peripheral-tile-name-text { font-size: 0.875rem; } -.device-tile button { +.peripheral-tile button { padding: 0.6rem 0.75rem; border: none; border-radius: 0.25rem; @@ -154,16 +154,16 @@ } } -.device-activity { +.peripheral-activity { position: relative; } -.device-activity-icon { +.peripheral-activity-icon { /* width: 80px; height: 80px; */ } -.device-button-image { +.peripheral-button-image { position: absolute; } @@ -214,7 +214,7 @@ box-shadow: 0px 0px 0px 2px $motion-transparent; } -.device-tile-widgets { +.peripheral-tile-widgets { display: flex; align-items: center; } diff --git a/src/components/connection-modal/connection-modal.jsx b/src/components/connection-modal/connection-modal.jsx index 6fb9cd4ff..9e31577c6 100644 --- a/src/components/connection-modal/connection-modal.jsx +++ b/src/components/connection-modal/connection-modal.jsx @@ -27,7 +27,7 @@ const ConnectionModalComponent = props => ( className={styles.modalContent} contentLabel={props.name} headerClassName={styles.header} - headerImage={props.smallDeviceImage} + headerImage={props.smallPeripheralImage} onHelp={props.onHelp} onRequestClose={props.onCancel} > @@ -44,12 +44,12 @@ const ConnectionModalComponent = props => ( ConnectionModalComponent.propTypes = { connectingMessage: PropTypes.node, - deviceButtonImage: PropTypes.string, + peripheralButtonImage: PropTypes.string, name: PropTypes.node, onCancel: PropTypes.func.isRequired, onHelp: PropTypes.func.isRequired, phase: PropTypes.oneOf(Object.keys(PHASES)).isRequired, - smallDeviceImage: PropTypes.string, + smallPeripheralImage: PropTypes.string, title: PropTypes.string.isRequired, useAutoScan: PropTypes.bool.isRequired }; diff --git a/src/components/connection-modal/error-step.jsx b/src/components/connection-modal/error-step.jsx index a5a5ce1b7..384c23ac6 100644 --- a/src/components/connection-modal/error-step.jsx +++ b/src/components/connection-modal/error-step.jsx @@ -14,10 +14,10 @@ const ErrorStep = props => ( <Box className={styles.body}> <Box className={styles.activityArea}> <Box className={styles.centeredRow}> - <div className={styles.deviceActivity}> + <div className={styles.peripheralActivity}> <img - className={styles.deviceActivityIcon} - src={props.deviceImage} + className={styles.peripheralActivityIcon} + src={props.peripheralImage} /> </div> </Box> @@ -69,7 +69,7 @@ const ErrorStep = props => ( ); ErrorStep.propTypes = { - deviceImage: PropTypes.string.isRequired, + peripheralImage: PropTypes.string.isRequired, onHelp: PropTypes.func, onScanning: PropTypes.func }; diff --git a/src/components/connection-modal/device-tile.jsx b/src/components/connection-modal/peripheral-tile.jsx similarity index 77% rename from src/components/connection-modal/device-tile.jsx rename to src/components/connection-modal/peripheral-tile.jsx index c806453aa..cb32eaf79 100644 --- a/src/components/connection-modal/device-tile.jsx +++ b/src/components/connection-modal/peripheral-tile.jsx @@ -7,7 +7,7 @@ import Box from '../box/box.jsx'; import styles from './connection-modal.css'; -class DeviceTile extends React.Component { +class PeripheralTile extends React.Component { constructor (props) { super(props); bindAll(this, [ @@ -19,26 +19,26 @@ class DeviceTile extends React.Component { } render () { return ( - <Box className={styles.deviceTile}> - <Box className={styles.deviceTileName}> + <Box className={styles.peripheralTile}> + <Box className={styles.peripheralTileName}> <img - className={styles.deviceTileImage} - src={this.props.smallDeviceImage} + className={styles.peripheralTileImage} + src={this.props.smallperipheralImage} /> - <Box className={styles.deviceTileNameWrapper}> - <Box className={styles.deviceTileNameLabel}> + <Box className={styles.peripheralTileNameWrapper}> + <Box className={styles.peripheralTileNameLabel}> <FormattedMessage defaultMessage="Device name" description="Label for field showing the device name" - id="gui.connection.device-name-label" + id="gui.connection.peripheral-name-label" /> </Box> - <Box className={styles.deviceTileNameText}> + <Box className={styles.peripheralTileNameText}> {this.props.name} </Box> </Box> </Box> - <Box className={styles.deviceTileWidgets}> + <Box className={styles.peripheralTileWidgets}> <Box className={styles.signalStrengthMeter}> <div className={classNames(styles.signalBar, { @@ -76,12 +76,12 @@ class DeviceTile extends React.Component { } } -DeviceTile.propTypes = { +PeripheralTile.propTypes = { name: PropTypes.string, onConnecting: PropTypes.func, peripheralId: PropTypes.string, rssi: PropTypes.number, - smallDeviceImage: PropTypes.string + smallPeripheralImage: PropTypes.string }; -export default DeviceTile; +export default PeripheralTile; diff --git a/src/components/connection-modal/scanning-step.jsx b/src/components/connection-modal/scanning-step.jsx index cadee33c3..40bbe45a9 100644 --- a/src/components/connection-modal/scanning-step.jsx +++ b/src/components/connection-modal/scanning-step.jsx @@ -1,10 +1,10 @@ -import {FormattedMessage} from 'react-intl'; +peripheralimport {FormattedMessage} from 'react-intl'; import PropTypes from 'prop-types'; import React from 'react'; import classNames from 'classnames'; import Box from '../box/box.jsx'; -import DeviceTile from './device-tile.jsx'; +import PeripheralTile from './peripheral-tile.jsx'; import Dots from './dots.jsx'; import radarIcon from './icons/searching.png'; @@ -16,7 +16,7 @@ const ScanningStep = props => ( <Box className={styles.body}> <Box className={styles.activityArea}> {props.scanning ? ( - props.deviceList.length === 0 ? ( + props.peripheralList.length === 0 ? ( <div className={styles.activityAreaInfo}> <div className={styles.centeredRow}> <img @@ -26,19 +26,19 @@ const ScanningStep = props => ( <FormattedMessage defaultMessage="Looking for devices" description="Text shown while scanning for devices" - id="gui.connection.scanning.lookingfordevices" + id="gui.connection.scanning.lookingforperipherals" /> </div> </div> ) : ( - <div className={styles.deviceTilePane}> - {props.deviceList.map(device => - (<DeviceTile - key={device.peripheralId} - name={device.name} - peripheralId={device.peripheralId} - rssi={device.rssi} - smallDeviceImage={props.smallDeviceImage} + <div className={styles.peripheralTilePane}> + {props.peripheralList.map(peripheral => + (<PeripheralTile + key={peripheral.peripheralId} + name={peripheral.name} + peripheralId={peripheral.peripheralId} + rssi={peripheral.rssi} + smallPeripheralImage={props.smallPeripheralImage} onConnecting={props.onConnecting} />) )} @@ -49,7 +49,7 @@ const ScanningStep = props => ( <FormattedMessage defaultMessage="No devices found" description="Text shown when no devices could be found" - id="gui.connection.scanning.noDevicesFound" + id="gui.connection.scanning.noPeripheralsFound" /> </Box> )} @@ -85,7 +85,7 @@ const ScanningStep = props => ( ); ScanningStep.propTypes = { - deviceList: PropTypes.arrayOf(PropTypes.shape({ + peripheralList: PropTypes.arrayOf(PropTypes.shape({ name: PropTypes.string, rssi: PropTypes.number, peripheralId: PropTypes.string @@ -93,11 +93,11 @@ ScanningStep.propTypes = { onConnecting: PropTypes.func, onRefresh: PropTypes.func, scanning: PropTypes.bool.isRequired, - smallDeviceImage: PropTypes.string + smallPeripheralImage: PropTypes.string }; ScanningStep.defaultProps = { - deviceList: [], + peripheralList: [], scanning: true }; diff --git a/src/containers/auto-scanning-step.jsx b/src/containers/auto-scanning-step.jsx index 4987290b1..2b8112c7d 100644 --- a/src/containers/auto-scanning-step.jsx +++ b/src/containers/auto-scanning-step.jsx @@ -18,7 +18,7 @@ class AutoScanningStep extends React.Component { }; } componentWillUnmount () { - // @todo: stop the device scan here + // @todo: stop the peripheral scan here this.unbindPeripheralUpdates(); } handlePeripheralScanTimeout () { @@ -49,7 +49,7 @@ class AutoScanningStep extends React.Component { 'PERIPHERAL_SCAN_TIMEOUT', this.handlePeripheralScanTimeout); } handleRefresh () { - // @todo: stop the device scan here, it is more important for auto scan + // @todo: stop the peripheral scan here, it is more important for auto scan // due to timeout and cancellation this.setState({ phase: PHASES.prescan @@ -67,7 +67,7 @@ class AutoScanningStep extends React.Component { render () { return ( <ScanningStepComponent - deviceButtonImage={this.props.deviceButtonImage} + peripheralButtonImage={this.props.peripheralButtonImage} phase={this.state.phase} title={this.props.extensionId} onRefresh={this.handleRefresh} @@ -78,7 +78,7 @@ class AutoScanningStep extends React.Component { } AutoScanningStep.propTypes = { - deviceButtonImage: PropTypes.string, + peripheralButtonImage: PropTypes.string, extensionId: PropTypes.string.isRequired, onConnecting: PropTypes.func.isRequired, vm: PropTypes.instanceOf(VM).isRequired diff --git a/src/containers/blocks.jsx b/src/containers/blocks.jsx index 8a6bec5fd..499d77636 100644 --- a/src/containers/blocks.jsx +++ b/src/containers/blocks.jsx @@ -336,7 +336,7 @@ class Blocks extends React.Component { } handleCategorySelected (categoryId) { const extension = extensionData.find(ext => ext.extensionId === categoryId); - if (extension && extension.launchDeviceConnectionFlow) { + if (extension && extension.launchPeripheralConnectionFlow) { this.handleConnectionModalStart(categoryId); } @@ -365,9 +365,9 @@ class Blocks extends React.Component { this.setState({connectionModal: { extensionId: extensionId, useAutoScan: extension.useAutoScan, - deviceImage: extension.deviceImage, - smallDeviceImage: extension.smallDeviceImage, - deviceButtonImage: extension.deviceButtonImage, + peripheralImage: extension.peripheralImage, + smallPeripheralImage: extension.smallPeripheralImage, + peripheralButtonImage: extension.peripheralButtonImage, name: extension.name, connectingMessage: extension.connectingMessage, helpLink: extension.helpLink diff --git a/src/containers/connection-modal.jsx b/src/containers/connection-modal.jsx index b81c0d36f..c8fe7c0da 100644 --- a/src/containers/connection-modal.jsx +++ b/src/containers/connection-modal.jsx @@ -51,7 +51,7 @@ class ConnectionModal extends React.Component { this.props.onCancel(); } handleCancel () { - // If we're not connected to a device, close the websocket so we stop scanning. + // If we're not connected to a peripheral, close the websocket so we stop scanning. if (!this.props.vm.getPeripheralIsConnected(this.props.extensionId)) { this.props.vm.disconnectPeripheral(this.props.extensionId); } @@ -99,12 +99,12 @@ class ConnectionModal extends React.Component { return ( <ConnectionModalComponent connectingMessage={this.props.connectingMessage} - deviceButtonImage={this.props.deviceButtonImage} - deviceImage={this.props.deviceImage} + peripheralButtonImage={this.props.peripheralButtonImage} + peripheralImage={this.props.peripheralImage} extensionId={this.props.extensionId} name={this.props.name} phase={this.state.phase} - smallDeviceImage={this.props.smallDeviceImage} + smallPeripheralImage={this.props.smallPeripheralImage} title={this.props.extensionId} useAutoScan={this.props.useAutoScan} vm={this.props.vm} @@ -121,14 +121,14 @@ class ConnectionModal extends React.Component { ConnectionModal.propTypes = { connectingMessage: PropTypes.node.isRequired, - deviceButtonImage: PropTypes.string, - deviceImage: PropTypes.string.isRequired, + peripheralButtonImage: PropTypes.string, + peripheralImage: PropTypes.string.isRequired, extensionId: PropTypes.string.isRequired, helpLink: PropTypes.string.isRequired, name: PropTypes.node.isRequired, onCancel: PropTypes.func.isRequired, onStatusButtonUpdate: PropTypes.func.isRequired, - smallDeviceImage: PropTypes.string.isRequired, + smallPeripheralImage: PropTypes.string.isRequired, useAutoScan: PropTypes.bool.isRequired, vm: PropTypes.instanceOf(VM).isRequired }; diff --git a/src/containers/scanning-step.jsx b/src/containers/scanning-step.jsx index d01b5e60c..6e1daa8e6 100644 --- a/src/containers/scanning-step.jsx +++ b/src/containers/scanning-step.jsx @@ -14,7 +14,7 @@ class ScanningStep extends React.Component { ]); this.state = { scanning: true, - deviceList: [] + peripheralList: [] }; } componentDidMount () { @@ -25,7 +25,7 @@ class ScanningStep extends React.Component { 'PERIPHERAL_SCAN_TIMEOUT', this.handlePeripheralScanTimeout); } componentWillUnmount () { - // @todo: stop the device scan here + // @todo: stop the peripheral scan here this.props.vm.removeListener( 'PERIPHERAL_LIST_UPDATE', this.handlePeripheralListUpdate); this.props.vm.removeListener( @@ -34,7 +34,7 @@ class ScanningStep extends React.Component { handlePeripheralScanTimeout () { this.setState({ scanning: false, - deviceList: [] + peripheralList: [] }); } handlePeripheralListUpdate (newList) { @@ -42,22 +42,22 @@ class ScanningStep extends React.Component { const peripheralArray = Object.keys(newList).map(id => newList[id] ); - this.setState({deviceList: peripheralArray}); + this.setState({peripheralList: peripheralArray}); } handleRefresh () { this.props.vm.scanForPeripheral(this.props.extensionId); this.setState({ scanning: true, - deviceList: [] + peripheralList: [] }); } render () { return ( <ScanningStepComponent - deviceList={this.state.deviceList} + peripheralList={this.state.peripheralList} phase={this.state.phase} scanning={this.state.scanning} - smallDeviceImage={this.props.smallDeviceImage} + smallPeripheralImage={this.props.smallPeripheralImage} title={this.props.extensionId} onConnected={this.props.onConnected} onConnecting={this.props.onConnecting} @@ -71,7 +71,7 @@ ScanningStep.propTypes = { extensionId: PropTypes.string.isRequired, onConnected: PropTypes.func.isRequired, onConnecting: PropTypes.func.isRequired, - smallDeviceImage: PropTypes.string, + smallPeripheralImage: PropTypes.string, vm: PropTypes.instanceOf(VM).isRequired }; diff --git a/src/lib/libraries/extensions/index.jsx b/src/lib/libraries/extensions/index.jsx index edd4fa512..1be61b734 100644 --- a/src/lib/libraries/extensions/index.jsx +++ b/src/lib/libraries/extensions/index.jsx @@ -9,13 +9,13 @@ import microbitImage from './microbit.png'; import ev3Image from './ev3.png'; import wedoImage from './wedo.png'; -import microbitDeviceImage from './device-connection/microbit/microbit-illustration.svg'; -import microbitMenuImage from './device-connection/microbit/microbit-small.svg'; -import ev3DeviceImage from './device-connection/ev3/ev3-hub-illustration.svg'; -import ev3MenuImage from './device-connection/ev3/ev3-small.svg'; -import wedoDeviceImage from './device-connection/wedo/wedo-illustration.svg'; -import wedoMenuImage from './device-connection/wedo/wedo-small.svg'; -import wedoButtonImage from './device-connection/wedo/wedo-button-illustration.svg'; +import microbitPeripheralImage from './peripheral-connection/microbit/microbit-illustration.svg'; +import microbitMenuImage from './peripheral-connection/microbit/microbit-small.svg'; +import ev3PeripheralImage from './peripheral-connection/ev3/ev3-hub-illustration.svg'; +import ev3MenuImage from './peripheral-connection/ev3/ev3-small.svg'; +import wedoPeripheralImage from './peripheral-connection/wedo/wedo-illustration.svg'; +import wedoMenuImage from './peripheral-connection/wedo/wedo-small.svg'; +import wedoButtonImage from './peripheral-connection/wedo/wedo-button-illustration.svg'; export default [ { @@ -107,10 +107,10 @@ export default [ ), featured: true, disabled: false, - launchDeviceConnectionFlow: true, + launchPeripheralConnectionFlow: true, useAutoScan: false, - deviceImage: microbitDeviceImage, - smallDeviceImage: microbitMenuImage, + peripheralImage: microbitPeripheralImage, + smallPeripheralImage: microbitMenuImage, connectingMessage: ( <FormattedMessage defaultMessage="Connecting" @@ -133,10 +133,10 @@ export default [ ), featured: true, disabled: false, - launchDeviceConnectionFlow: true, + launchPeripheralConnectionFlow: true, useAutoScan: false, - deviceImage: ev3DeviceImage, - smallDeviceImage: ev3MenuImage, + peripheralImage: ev3PeripheralImage, + smallPeripheralImage: ev3MenuImage, connectingMessage: ( <FormattedMessage defaultMessage="Connecting. Make sure the pin on your EV3 is set to 1234." @@ -159,11 +159,11 @@ export default [ ), featured: true, disabled: false, - launchDeviceConnectionFlow: true, + launchPeripheralConnectionFlow: true, useAutoScan: true, - deviceImage: wedoDeviceImage, - smallDeviceImage: wedoMenuImage, - deviceButtonImage: wedoButtonImage, + peripheralImage: wedoPeripheralImage, + smallPeripheralImage: wedoMenuImage, + peripheralButtonImage: wedoButtonImage, connectingMessage: ( <FormattedMessage defaultMessage="Connecting" -- GitLab