diff --git a/src/constants.ts b/src/constants.ts index 6935b1e44..9618d5c02 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -1,9 +1,9 @@ // Copyright (c) Microsoft Corporation. // Licensed under the MIT license. -import * as nls from "vscode-nls"; import * as path from "path"; import { MessageItem } from "vscode"; +import * as nls from "vscode-nls"; // Debugger Server export const SERVER_INFO = { @@ -288,7 +288,7 @@ export enum TelemetryEventName { SIMULATOR_BUTTON_AB = "SIMULATOR.BUTTON.AB", SIMULATOR_SWITCH = "SIMULATOR.SWITCH", - //Sensors + // Sensors SIMULATOR_TEMPERATURE_SENSOR = "SIMULATOR.TEMPERATURE", SIMULATOR_LIGHT_SENSOR = " SIMULATOR.LIGHT", SIMULATOR_MOTION_SENSOR = "SIMULATOR.MOTION", diff --git a/src/deviceContext.ts b/src/deviceContext.ts index ebcb25814..35374cb83 100644 --- a/src/deviceContext.ts +++ b/src/deviceContext.ts @@ -5,10 +5,10 @@ import * as fs from "fs"; import * as path from "path"; -import * as utils from "./extension_utils/utils"; import * as vscode from "vscode"; -import { CPXWorkspace } from "./cpxWorkspace"; import CONSTANTS, { CPX_CONFIG_FILE } from "./constants"; +import { CPXWorkspace } from "./cpxWorkspace"; +import * as utils from "./extension_utils/utils"; export class DeviceContext implements vscode.Disposable { public static getInstance(): DeviceContext { diff --git a/src/extension.ts b/src/extension.ts index e80101854..93c5fbfc0 100644 --- a/src/extension.ts +++ b/src/extension.ts @@ -5,23 +5,23 @@ import * as cp from "child_process"; import * as fs from "fs"; import * as open from "open"; import * as path from "path"; -import * as utils from "./extension_utils/utils"; import * as vscode from "vscode"; import { CONFIG, CONSTANTS, CPX_CONFIG_FILE, DialogResponses, + SERVER_INFO, TelemetryEventName, - WebviewMessages, - SERVER_INFO + WebviewMessages } from "./constants"; import { CPXWorkspace } from "./cpxWorkspace"; -import { SimulatorDebugConfigurationProvider } from "./simulatorDebugConfigurationProvider"; +import { DebuggerCommunicationServer } from "./debuggerCommunicationServer"; +import * as utils from "./extension_utils/utils"; import { SerialMonitor } from "./serialMonitor"; +import { SimulatorDebugConfigurationProvider } from "./simulatorDebugConfigurationProvider"; import TelemetryAI from "./telemetry/telemetryAI"; import { UsbDetector } from "./usbDetector"; -import { DebuggerCommunicationServer } from "./debuggerCommunicationServer"; let currentFileAbsPath: string = ""; let currentTextDocument: vscode.TextDocument; @@ -830,13 +830,13 @@ const updateCurrentFileIfPython = async ( }; const handleButtonPressTelemetry = (buttonState: any) => { - if (buttonState["button_a"] && buttonState["button_b"]) { + if (buttonState.button_a && buttonState.button_b) { telemetryAI.trackFeatureUsage(TelemetryEventName.SIMULATOR_BUTTON_AB); - } else if (buttonState["button_a"]) { + } else if (buttonState.button_a) { telemetryAI.trackFeatureUsage(TelemetryEventName.SIMULATOR_BUTTON_A); - } else if (buttonState["button_b"]) { + } else if (buttonState.button_b) { telemetryAI.trackFeatureUsage(TelemetryEventName.SIMULATOR_BUTTON_B); - } else if (buttonState["switch"]) { + } else if (buttonState.switch) { telemetryAI.trackFeatureUsage(TelemetryEventName.SIMULATOR_SWITCH); } }; @@ -872,9 +872,9 @@ const handleSensorTelemetry = (sensor: string) => { }; const checkForTelemetry = (sensorState: any) => { - if (sensorState["shake"]) { + if (sensorState.shake) { handleSensorTelemetry("shake"); - } else if (sensorState["touch"]) { + } else if (sensorState.touch) { handleSensorTelemetry("touch"); } }; diff --git a/src/extension_utils/dependencyChecker.ts b/src/extension_utils/dependencyChecker.ts index 4881dc8e8..0dfe59667 100644 --- a/src/extension_utils/dependencyChecker.ts +++ b/src/extension_utils/dependencyChecker.ts @@ -1,8 +1,8 @@ -import { CONSTANTS } from "../constants"; import * as cp from "child_process"; -import * as os from "os"; import * as compareVersions from 'compare-versions'; +import * as os from "os"; import * as util from "util"; +import { CONSTANTS } from "../constants"; const exec = util.promisify(cp.exec); interface IPayloadResponse { diff --git a/src/extension_utils/utils.ts b/src/extension_utils/utils.ts index 9638d8e88..98b8473b9 100644 --- a/src/extension_utils/utils.ts +++ b/src/extension_utils/utils.ts @@ -1,24 +1,25 @@ // Copyright (c) Microsoft Corporation. // Licensed under the MIT license. +import * as cp from "child_process"; import * as fs from "fs"; -import * as path from "path"; +import * as open from "open"; import * as os from "os"; -import { DependencyChecker } from "./dependencyChecker"; -import { DeviceContext } from "../deviceContext"; +import * as path from "path"; +import * as util from "util"; import * as vscode from "vscode"; import { CONFIG, CONSTANTS, CPX_CONFIG_FILE, DialogResponses, - USER_CODE_NAMES, - SERVER_INFO + SERVER_INFO, + USER_CODE_NAMES } from "../constants"; import { CPXWorkspace } from "../cpxWorkspace"; -import * as cp from "child_process"; -import * as util from "util"; -import * as open from "open"; +import { DeviceContext } from "../deviceContext"; +import { DependencyChecker } from "./dependencyChecker"; + const exec = util.promisify(cp.exec); // tslint:disable-next-line: export-name @@ -76,7 +77,7 @@ export function tryParseJSON(jsonString: string): any | boolean { if (jsonObj && typeof jsonObj === "object") { return jsonObj; } - } catch (exception) {} + } catch (exception) { } return false; } @@ -305,14 +306,14 @@ export const installPythonDependencies = async (context: vscode.ExtensionContext let installed: boolean = false; try { vscode.window.showInformationMessage(CONSTANTS.INFO.INSTALLING_PYTHON_DEPENDENCIES); - + const requirementsPath: string = getPathToScript(context, CONSTANTS.FILESYSTEM.OUTPUT_DIRECTORY, "requirements.txt"); // run command to download dependencies to out/python_libs const { stdout } = await exec(`${pythonExecutable} -m pip install -r ${requirementsPath} -t ${pathToLibs}`); console.info(stdout); installed = true; - + vscode.window.showInformationMessage(CONSTANTS.INFO.SUCCESSFUL_INSTALL); } catch (err) { diff --git a/src/serialMonitor.ts b/src/serialMonitor.ts index a022ddb1b..6cb687d39 100644 --- a/src/serialMonitor.ts +++ b/src/serialMonitor.ts @@ -4,10 +4,10 @@ // Credit: A majority of this code was taken from the Visual Studio Code Arduino extension with some modifications to suit our purposes. import * as vscode from "vscode"; +import CONSTANTS, { DialogResponses, STATUS_BAR_PRIORITY } from "./constants"; +import { DeviceContext } from "./deviceContext"; import { outChannel } from "./extension"; import { logToOutputChannel } from "./extension_utils/utils"; -import { DeviceContext } from "./deviceContext"; -import CONSTANTS, { STATUS_BAR_PRIORITY, DialogResponses } from "./constants"; import { SerialPortControl } from "./serialPortControl"; export interface ISerialPortDetail { diff --git a/src/serialPortControl.ts b/src/serialPortControl.ts index 0b3eb3912..dc76bd0b0 100644 --- a/src/serialPortControl.ts +++ b/src/serialPortControl.ts @@ -3,9 +3,9 @@ // Credit: A majority of this code was taken from the Visual Studio Code Arduino extension with some modifications to suit our purposes. -import { CONSTANTS } from "./constants"; import * as os from "os"; import { OutputChannel } from "vscode"; +import { CONSTANTS } from "./constants"; import { logToOutputChannel } from "./extension_utils/utils"; interface ISerialPortDetail { diff --git a/src/simulatorDebugConfigurationProvider.ts b/src/simulatorDebugConfigurationProvider.ts index 50c7f02c4..e1f028a8f 100644 --- a/src/simulatorDebugConfigurationProvider.ts +++ b/src/simulatorDebugConfigurationProvider.ts @@ -2,11 +2,11 @@ // Licensed under the MIT license. import * as vscode from "vscode"; +import { CONSTANTS, DialogResponses } from "./constants"; import { - validCodeFileName, - getServerPortConfig + getServerPortConfig, + validCodeFileName } from "./extension_utils/utils"; -import { CONSTANTS, DialogResponses } from "./constants"; let shouldShowInvalidFileNamePopup: boolean = true; diff --git a/src/telemetry/getPackageInfo.ts b/src/telemetry/getPackageInfo.ts index cb9b52dea..e38d5c2ca 100644 --- a/src/telemetry/getPackageInfo.ts +++ b/src/telemetry/getPackageInfo.ts @@ -1,6 +1,6 @@ -import * as vscode from 'vscode'; import * as fs from 'fs' import * as path from 'path'; +import * as vscode from 'vscode'; export interface IPackageJson { name?: string; diff --git a/src/test/suite/index.ts b/src/test/suite/index.ts index 6d50df1c3..61aac7d28 100644 --- a/src/test/suite/index.ts +++ b/src/test/suite/index.ts @@ -10,9 +10,9 @@ // to report the results back to the caller. When the tests are finished, return // a possible error to the callback or null if none. -import * as path from 'path'; -import * as Mocha from 'mocha'; import * as glob from 'glob'; +import * as Mocha from 'mocha'; +import * as path from 'path'; // tslint:disable-next-line: export-name export function run(): Promise { diff --git a/src/usbDetector.ts b/src/usbDetector.ts index 44989781e..e4df1200f 100644 --- a/src/usbDetector.ts +++ b/src/usbDetector.ts @@ -3,13 +3,13 @@ // Credit: A majority of this code was taken from the Visual Studio Code Arduino extension with some modifications to suit our purposes. -import * as os from "os"; import * as fs from "fs"; +import * as os from "os"; import * as path from "path"; -import * as utils from "./extension_utils/utils"; import * as vscode from "vscode"; -import { SerialMonitor } from "./serialMonitor"; import { CONFIG_KEYS } from "./constants"; +import * as utils from "./extension_utils/utils"; +import { SerialMonitor } from "./serialMonitor"; export class UsbDetector { public static getInstance(): UsbDetector { diff --git a/src/view/App.tsx b/src/view/App.tsx index b3d3737cb..e59eb8ed5 100644 --- a/src/view/App.tsx +++ b/src/view/App.tsx @@ -3,17 +3,15 @@ "use strict"; import * as React from "react"; -import Simulator from "./components/Simulator"; -import ToolBar from "./components/toolbar/ToolBar"; import "./App.css"; +import Device from "./container/device/Device" class App extends React.Component { render() { return (
- - +
); diff --git a/src/view/components/Dropdown.tsx b/src/view/components/Dropdown.tsx index d84c09cf3..44832c137 100644 --- a/src/view/components/Dropdown.tsx +++ b/src/view/components/Dropdown.tsx @@ -2,6 +2,7 @@ // Licensed under the MIT license. import * as React from "react"; + import { CONSTANTS } from "../constants"; import "../styles/Dropdown.css"; diff --git a/src/view/components/Simulator.tsx b/src/view/components/Simulator.tsx index 29e25e5e5..ca3f11aa1 100644 --- a/src/view/components/Simulator.tsx +++ b/src/view/components/Simulator.tsx @@ -2,16 +2,14 @@ // Licensed under the MIT license. import * as React from "react"; -import { BUTTON_NEUTRAL, BUTTON_PRESSED } from "./cpx/Cpx_svg_style"; -import Cpx, { updateSwitch, updatePinTouch } from "./cpx/Cpx"; -import Button from "./Button"; -import Dropdown from "./Dropdown"; import { CONSTANTS } from "../constants"; +import "../styles/Simulator.css"; import PlayLogo from "../svgs/play_svg"; import StopLogo from "../svgs/stop_svg"; -import RefreshLogo from "../svgs/refresh_svg"; - -import "../styles/Simulator.css"; +import { BUTTON_NEUTRAL, BUTTON_PRESSED } from "./cpx/Cpx_svg_style"; +import CpxImage, { updatePinTouch, updateSwitch } from "./cpx/CpxImage"; +import Dropdown from "./Dropdown"; +import ActionBar from "./simulator/ActionBar" interface ICpxState { pixels: number[][]; @@ -141,7 +139,7 @@ class Simulator extends React.Component { } render() { - const image = this.state.play_button ? StopLogo : PlayLogo; + const playStopImage = this.state.play_button ? StopLogo : PlayLogo; return (
@@ -155,7 +153,7 @@ class Simulator extends React.Component { />
- { onMouseLeave={this.onMouseLeave} />
-
-
+
); } @@ -368,7 +352,7 @@ class Simulator extends React.Component { private handleTouchPinClick(pin: HTMLElement, active: boolean): any { let cpxState = this.state.cpx; const pinIndex = parseInt(pin.id.charAt(pin.id.length - 1)) - 1; - let pinState = cpxState.touch; + const pinState = cpxState.touch; pinState[pinIndex] = active; cpxState = { ...cpxState, touch: pinState }; this.setState({ ...this.state, ...cpxState }); diff --git a/src/view/components/cpx/Cpx.tsx b/src/view/components/cpx/CpxImage.tsx similarity index 99% rename from src/view/components/cpx/Cpx.tsx rename to src/view/components/cpx/CpxImage.tsx index 845ab3654..7f7a1137c 100644 --- a/src/view/components/cpx/Cpx.tsx +++ b/src/view/components/cpx/CpxImage.tsx @@ -2,11 +2,11 @@ // Licensed under the MIT license. import * as React from "react"; +import CONSTANTS from "../../constants"; +import accessibility from "./Accessibility_utils"; import CPX_SVG from "./Cpx_svg"; import * as SvgStyle from "./Cpx_svg_style"; -import CONSTANTS from "../../constants"; import svg from "./Svg_utils"; -import accessibility from "./Accessibility_utils"; interface IProps { pixels: number[][]; @@ -23,7 +23,7 @@ interface IProps { let firstTime = true; // Functional Component render -const Cpx: React.FC = props => { +const CpxImage: React.FC = props => { const svgElement = window.document.getElementById("cpx_svg"); if (svgElement) { @@ -79,7 +79,7 @@ const makeButton = ( }; const initSvgStyle = (svgElement: HTMLElement, brightness: number): void => { - let style: SVGStyleElement = svg.child( + const style: SVGStyleElement = svg.child( svgElement, "style", {} @@ -386,4 +386,4 @@ export const updatePinTouch = (pinState: boolean, id: string): void => { } }; -export default Cpx; +export default CpxImage; diff --git a/src/view/components/cpx/Cpx_svg_style.tsx b/src/view/components/cpx/Cpx_svg_style.tsx index f0fb41f9d..4be0439c7 100644 --- a/src/view/components/cpx/Cpx_svg_style.tsx +++ b/src/view/components/cpx/Cpx_svg_style.tsx @@ -24,44 +24,43 @@ export const POWER_LED_OFF: string = "#FFFFFF"; // Adapted from : https://github.com/microsoft/pxt/blob/master/pxtsim/simlib.ts export function rgbToHsl( - rgb: [number, number, number] + rgb: [number, number, number] ): [number, number, number] { - let [r, g, b] = rgb; - let [r$, g$, b$] = [r / 255, g / 255, b / 255]; - let cMin = Math.min(r$, g$, b$); - let cMax = Math.max(r$, g$, b$); - let cDelta = cMax - cMin; - let h: number = 0, - s: number, - l: number; - let maxAndMin = cMax + cMin; + const [r, g, b] = rgb; + const [r$, g$, b$] = [r / 255, g / 255, b / 255]; + const cMin = Math.min(r$, g$, b$); + const cMax = Math.max(r$, g$, b$); + const cDelta = cMax - cMin; + let h: number = 0, + s: number, + l: number; + const maxAndMin = cMax + cMin; - // Luminosity - l = (maxAndMin / 2) * 100; + // Luminosity + l = (maxAndMin / 2) * 100; - if (cDelta === 0) { - s = 0; - h = 0; - } else { - // Hue - switch (cMax) { - case r$: - h = 60 * (((g$ - b$) / cDelta) % 6); - break; - case g$: - h = 60 * ((b$ - r$) / cDelta + 2); - break; - case b$: - h = 60 * ((r$ - g$) / cDelta + 4); - break; - } + if (cDelta === 0) { + s = 0; + h = 0; + } else { + // Hue + switch (cMax) { + case r$: + h = 60 * (((g$ - b$) / cDelta) % 6); + break; + case g$: + h = 60 * ((b$ - r$) / cDelta + 2); + break; + case b$: + h = 60 * ((r$ - g$) / cDelta + 4); + break; + } - // Saturation - if (l > 50) s = 100 * (cDelta / (2 - maxAndMin)); - else s = 100 * (cDelta / maxAndMin); - } + // Saturation + l > 50 ? s = 100 * (cDelta / (2 - maxAndMin)) : s = 100 * (cDelta / maxAndMin); + } - return [Math.floor(h), Math.floor(s), Math.floor(l)]; + return [Math.floor(h), Math.floor(s), Math.floor(l)]; } export const SVG_STYLE = ` diff --git a/src/view/components/simulator/ActionBar.tsx b/src/view/components/simulator/ActionBar.tsx new file mode 100644 index 000000000..35b181277 --- /dev/null +++ b/src/view/components/simulator/ActionBar.tsx @@ -0,0 +1,42 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT license. + +import * as React from "react"; +import {CONSTANTS} from "../../constants" +import RefreshLogo from "../../svgs/refresh_svg"; +import Button from "../Button"; + +interface IProps{ + onTogglePlay: (event: React.MouseEvent) => void, + onToggleRefresh: (event: React.MouseEvent) => void, + playStopImage: JSX.Element +} + +// Component including the actions done on the Simulator (play/stop, refresh) + +class ActionBar extends React.Component{ + public render(){ + const {onTogglePlay,onToggleRefresh,playStopImage}=this.props; + return( +
+
+ ) + } +} +export default ActionBar \ No newline at end of file diff --git a/src/view/components/toolbar/LightSensorBar.tsx b/src/view/components/toolbar/LightSensorBar.tsx index 5ff52c64a..2b0e8cdb8 100644 --- a/src/view/components/toolbar/LightSensorBar.tsx +++ b/src/view/components/toolbar/LightSensorBar.tsx @@ -2,9 +2,9 @@ // Licensed under the MIT license. import * as React from "react"; -import InputSlider from "./InputSlider"; import "../../styles/LightSensorBar.css"; import { ISensorProps, ISliderProps, X_SLIDER_INDEX } from "../../viewUtils"; +import InputSlider from "./InputSlider"; const LIGHT_SLIDER_PROPS: ISliderProps = { maxValue: 255, diff --git a/src/view/components/toolbar/MotionSensorBar.tsx b/src/view/components/toolbar/MotionSensorBar.tsx index 3dcdba145..d103a0450 100644 --- a/src/view/components/toolbar/MotionSensorBar.tsx +++ b/src/view/components/toolbar/MotionSensorBar.tsx @@ -5,15 +5,15 @@ import * as React from "react"; import InputSlider from "./InputSlider"; import SensorButton from "./SensorButton"; +import { CONSTANTS } from "../../constants"; +import "../../styles/MotionSensorBar.css"; import { ISensorProps, ISliderProps, X_SLIDER_INDEX, - Z_SLIDER_INDEX, - Y_SLIDER_INDEX + Y_SLIDER_INDEX, + Z_SLIDER_INDEX } from "../../viewUtils"; -import "../../styles/MotionSensorBar.css"; -import { CONSTANTS } from "../../constants"; interface vscode { postMessage(message: any): void; diff --git a/src/view/components/toolbar/SensorButton.tsx b/src/view/components/toolbar/SensorButton.tsx index 8726cf1a4..6b79cd1be 100644 --- a/src/view/components/toolbar/SensorButton.tsx +++ b/src/view/components/toolbar/SensorButton.tsx @@ -2,8 +2,8 @@ // Licensed under the MIT license. import * as React from "react"; -import { ISensorButtonProps } from "../../viewUtils"; import "../../styles/SensorButton.css"; +import { ISensorButtonProps } from "../../viewUtils"; const SensorButton: React.FC = props => { return ( diff --git a/src/view/components/toolbar/sensorModalUtils.tsx b/src/view/components/toolbar/SensorModalUtils.tsx similarity index 100% rename from src/view/components/toolbar/sensorModalUtils.tsx rename to src/view/components/toolbar/SensorModalUtils.tsx index cb4c60665..c10d6b8c0 100644 --- a/src/view/components/toolbar/sensorModalUtils.tsx +++ b/src/view/components/toolbar/SensorModalUtils.tsx @@ -1,12 +1,12 @@ // Copyright (c) Microsoft Corporation. // Licensed under the MIT license. -import LightSensorBar from "./LightSensorBar"; -import TemperatureSensorBar from "./TemperatureSensorBar"; -import MotionSensorBar from "./MotionSensorBar"; import * as React from "react"; +import { ARROW_RIGHT_SVG } from "../../svgs/arrow_right_svg"; import { TAG_INPUT_SVG } from "../../svgs/tag_input_svg"; import { TAG_OUTPUT_SVG } from "../../svgs/tag_output_svg"; -import { ARROW_RIGHT_SVG } from "../../svgs/arrow_right_svg"; +import LightSensorBar from "./LightSensorBar"; +import MotionSensorBar from "./MotionSensorBar"; +import TemperatureSensorBar from "./TemperatureSensorBar"; export const TRY_IT_MAKE_CODE = (
diff --git a/src/view/components/toolbar/TemperatureSensorBar.tsx b/src/view/components/toolbar/TemperatureSensorBar.tsx index d5ca66a1f..db4687ee4 100644 --- a/src/view/components/toolbar/TemperatureSensorBar.tsx +++ b/src/view/components/toolbar/TemperatureSensorBar.tsx @@ -2,9 +2,9 @@ // Licensed under the MIT license. import * as React from "react"; -import InputSlider from "./InputSlider"; -import { ISensorProps, ISliderProps, X_SLIDER_INDEX } from "../../viewUtils"; import "../../styles/TemperatureSensorBar.css"; +import { ISensorProps, ISliderProps, X_SLIDER_INDEX } from "../../viewUtils"; +import InputSlider from "./InputSlider"; const TEMPERATURE_SLIDER_PROPS: ISliderProps = { axisLabel: " ", diff --git a/src/view/components/toolbar/ToolBar.tsx b/src/view/components/toolbar/ToolBar.tsx index 860d2f75c..0e755506c 100644 --- a/src/view/components/toolbar/ToolBar.tsx +++ b/src/view/components/toolbar/ToolBar.tsx @@ -1,27 +1,31 @@ // Copyright (c) Microsoft Corporation. // Licensed under the MIT license. import * as React from "react"; -import Button from "../Button"; -import * as TOOLBAR_SVG from "../../svgs/toolbar_svg"; +import { FormattedMessage, injectIntl, WrappedComponentProps } from "react-intl"; import "../../styles/ToolBar.css"; +import Button from "../Button"; import { - LABEL_TO_MODAL_CONTENT, DEFAULT_MODAL_CONTENT, IModalContent, - TOOLBAR_ICON_ID -} from "./sensorModalUtils"; -import { FormattedMessage, injectIntl } from "react-intl"; + LABEL_TO_MODAL_CONTENT, +} from "./SensorModalUtils"; interface IToolbarState { currentOpenedId: string; showModal: boolean; } -class ToolBar extends React.Component { +interface IProps extends WrappedComponentProps { + buttonList: Array<{ + label: any, + image: any + }> +} + +class ToolBar extends React.Component { private readonly TOOLBAR_BUTTON_WIDTH: number = 32; - private readonly TOOLBAR_EDGE_WIDTH: number = 8; - constructor(props: any) { + constructor(props: IProps) { super(props); this.state = { currentOpenedId: "", @@ -29,148 +33,26 @@ class ToolBar extends React.Component { }; } - render() { + public render() { + const { buttonList } = this.props return (
-
{this.getIconModal()}
@@ -233,25 +115,25 @@ class ToolBar extends React.Component { ) as IModalContent; const component = content - ? content["component"] + ? content.component : DEFAULT_MODAL_CONTENT.component; return (
- - {content["tagInput"]} - {content["tagOutput"]} + + {content.tagInput} + {content.tagOutput}

- +

- +
diff --git a/src/view/container/device/Device.tsx b/src/view/container/device/Device.tsx new file mode 100644 index 000000000..7b88550b1 --- /dev/null +++ b/src/view/container/device/Device.tsx @@ -0,0 +1,59 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT license. + +import * as React from "react"; +import Simulator from "../../components/Simulator"; +import { + TOOLBAR_ICON_ID +} from "../../components/toolbar/SensorModalUtils"; +import ToolBar from "../../components/toolbar/ToolBar"; +import * as TOOLBAR_SVG from "../../svgs/toolbar_svg"; + +const CPX_TOOLBAR_BUTTONS: Array<{ label: any, image: any }> = [{ + image: TOOLBAR_SVG.SLIDER_SWITCH_SVG, + label: TOOLBAR_ICON_ID.SWITCH, +},{ + image: TOOLBAR_SVG.PUSH_BUTTON_SVG, + label: TOOLBAR_ICON_ID.PUSH_BUTTON, +},{ + image: TOOLBAR_SVG.RED_LED_SVG, + label: TOOLBAR_ICON_ID.RED_LED, +},{ + image: TOOLBAR_SVG.SOUND_SVG, + label: TOOLBAR_ICON_ID.SOUND, +},{ + image: TOOLBAR_SVG.TEMPERATURE_SVG, + label: TOOLBAR_ICON_ID.TEMPERATURE, +},{ + image: TOOLBAR_SVG.LIGHT_SVG, + label: TOOLBAR_ICON_ID.LIGHT, +},{ + image: TOOLBAR_SVG.NEO_PIXEL_SVG, + label: TOOLBAR_ICON_ID.NEO_PIXEL, +},{ + image: TOOLBAR_SVG.SPEAKER_SVG, + label: TOOLBAR_ICON_ID.SPEAKER, +},{ + image: TOOLBAR_SVG.MOTION_SVG, + label: TOOLBAR_ICON_ID.MOTION, +},{ + image: TOOLBAR_SVG.IR_SVG, + label: TOOLBAR_ICON_ID.IR, +},{ + image: TOOLBAR_SVG.GPIO_SVG, + label: TOOLBAR_ICON_ID.GPIO, +}] + +// Container to switch between multiple devices + +class Device extends React.Component { + render() { + return ( +
+ + +
+ ) + } +} +export default Device; \ No newline at end of file diff --git a/src/view/index.tsx b/src/view/index.tsx index d5a969aa8..7bac57e1e 100644 --- a/src/view/index.tsx +++ b/src/view/index.tsx @@ -3,8 +3,8 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; -import App from "./App"; import { IntlProvider } from "react-intl"; +import App from "./App"; import "./index.css"; diff --git a/src/view/styles/ToolBar.css b/src/view/styles/ToolBar.css index 89e6c1d9f..c9087130e 100644 --- a/src/view/styles/ToolBar.css +++ b/src/view/styles/ToolBar.css @@ -9,12 +9,19 @@ margin-bottom: 50px; } -.toolbar, +.toolbar{ + box-shadow: 0px 0px 20px rgba(0, 0, 0, 30%); + border-color: var(--vscode-highContrastButtonBorderOverride-color); + border-width: 1px; + border-style: solid; +} + .toolbar-icon { box-shadow: 0px 0px 20px rgba(0, 0, 0, 30%); border-color: var(--vscode-highContrastButtonBorderOverride-color); border-width: 1px; border-style: solid; + padding: 0px 8px 0px 8px; } .tag, diff --git a/src/view/svgs/toolbar_svg.tsx b/src/view/svgs/toolbar_svg.tsx index d763724ad..482260990 100644 --- a/src/view/svgs/toolbar_svg.tsx +++ b/src/view/svgs/toolbar_svg.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { TOOLBAR_ICON_LABEL } from "../components/toolbar/sensorModalUtils"; +import { TOOLBAR_ICON_LABEL } from "../components/toolbar/SensorModalUtils"; import "../styles/Button.css"; export const LEFT_EDGE_SVG = ( diff --git a/tslint.json b/tslint.json index 3529d6acb..5d5a3f741 100644 --- a/tslint.json +++ b/tslint.json @@ -20,7 +20,11 @@ "triple-equals": true, "object-literal-sort-keys": true, "react-hooks-nesting": "error", - "ordered-imports": false + "ordered-imports": true, + "import-name":false, + "member-access":false, + "no-console":false, + "jsx-boolean-value":false }, "defaultSeverity": "warning" }