diff --git a/package-lock.json b/package-lock.json index d6b87fe17..b0c2c98d8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1137,6 +1137,11 @@ "integrity": "sha512-6It2EVfGskxZCQhuykrfnALg7oVeiI6KclWSmGDqB0AiInVrTGB9Jp9i4/Ad21u9Jde/voVQz6eFX/eSg/UsPA==", "dev": true }, + "@formatjs/intl-relativetimeformat": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@formatjs/intl-relativetimeformat/-/intl-relativetimeformat-2.8.0.tgz", + "integrity": "sha512-5T3m5hJSxXrbwtnFHyYBSbTjOXPXu+4NJ0MUu1LAf4fPEdd+pJZfWKuMJSWgFQPVMbLYq9NLvDWQda3hVe99sg==" + }, "@gulp-sourcemaps/identity-map": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/@gulp-sourcemaps/identity-map/-/identity-map-1.0.2.tgz", @@ -1303,6 +1308,15 @@ "supports-color": "^5.3.0" } }, + "rimraf": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz", + "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==", + "dev": true, + "requires": { + "glob": "^7.1.3" + } + }, "strip-ansi": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", @@ -1725,6 +1739,20 @@ "@types/node": "*" } }, + "@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "requires": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, + "@types/invariant": { + "version": "2.2.30", + "resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.30.tgz", + "integrity": "sha512-98fB+yo7imSD2F7PF7GIpELNgtLNgo5wjivu0W5V4jx+KVVJxo6p/qN4zdzSTBWy4/sN3pPyXwnhRSD28QX+ag==" + }, "@types/istanbul-lib-coverage": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz", @@ -1778,8 +1806,7 @@ "@types/prop-types": { "version": "15.7.1", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.1.tgz", - "integrity": "sha512-CFzn9idOEpHrgdw8JsoTkaDDyRWk1jrzIV8djzcgpq0y9tG4B4lFT+Nxh52DVpDXV+n4+NPNv7M1Dj5uMp6XFg==", - "dev": true + "integrity": "sha512-CFzn9idOEpHrgdw8JsoTkaDDyRWk1jrzIV8djzcgpq0y9tG4B4lFT+Nxh52DVpDXV+n4+NPNv7M1Dj5uMp6XFg==" }, "@types/q": { "version": "1.5.2", @@ -1791,7 +1818,6 @@ "version": "16.8.18", "resolved": "https://registry.npmjs.org/@types/react/-/react-16.8.18.tgz", "integrity": "sha512-lUXdKzRqWR4FebR5tGHkLCqnvQJS4fdXKCBrNGGbglqZg2gpU+J82pMONevQODUotATs9fc9k66bx3/St8vReg==", - "dev": true, "requires": { "@types/prop-types": "*", "csstype": "^2.2.0" @@ -3528,6 +3554,17 @@ "ssri": "^6.0.1", "unique-filename": "^1.1.1", "y18n": "^4.0.0" + }, + "dependencies": { + "rimraf": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz", + "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==", + "dev": true, + "requires": { + "glob": "^7.1.3" + } + } } }, "cache-base": { @@ -4205,6 +4242,17 @@ "mkdirp": "^0.5.1", "rimraf": "^2.5.4", "run-queue": "^1.0.0" + }, + "dependencies": { + "rimraf": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz", + "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==", + "dev": true, + "requires": { + "glob": "^7.1.3" + } + } } }, "copy-descriptor": { @@ -5004,8 +5052,7 @@ "csstype": { "version": "2.6.5", "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.5.tgz", - "integrity": "sha512-JsTaiksRsel5n7XwqPAfB0l3TFKdpjW/kgAELf9vrb5adGA7UCPLajKK5s3nFrcFm3Rkyp/Qkgl73ENc1UY3cA==", - "dev": true + "integrity": "sha512-JsTaiksRsel5n7XwqPAfB0l3TFKdpjW/kgAELf9vrb5adGA7UCPLajKK5s3nFrcFm3Rkyp/Qkgl73ENc1UY3cA==" }, "cyclist": { "version": "0.2.2", @@ -5251,6 +5298,15 @@ "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz", "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==", "dev": true + }, + "rimraf": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz", + "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==", + "dev": true, + "requires": { + "glob": "^7.1.3" + } } } }, @@ -5987,6 +6043,17 @@ "object-assign": "^4.0.1", "object-hash": "^1.1.4", "rimraf": "^2.6.1" + }, + "dependencies": { + "rimraf": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz", + "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==", + "dev": true, + "requires": { + "glob": "^7.1.3" + } + } } }, "eslint-module-utils": { @@ -6951,6 +7018,17 @@ "flatted": "^2.0.0", "rimraf": "2.6.3", "write": "1.0.3" + }, + "dependencies": { + "rimraf": { + "version": "2.6.3", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz", + "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==", + "dev": true, + "requires": { + "glob": "^7.1.3" + } + } } }, "flatted": { @@ -8463,6 +8541,14 @@ "minimalistic-crypto-utils": "^1.0.1" } }, + "hoist-non-react-statics": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz", + "integrity": "sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==", + "requires": { + "react-is": "^16.7.0" + } + }, "homedir-polyfill": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz", @@ -8922,11 +9008,34 @@ "integrity": "sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==", "dev": true }, + "intl-format-cache": { + "version": "4.1.13", + "resolved": "https://registry.npmjs.org/intl-format-cache/-/intl-format-cache-4.1.13.tgz", + "integrity": "sha512-d/1NI8ctPZsPJU3G6k0pIuydnebeck7hG+wIHJOJUJm3eZ2+3bcZCD34o/Mc18M5ZiEZei02xsMtp8g1IQc23A==" + }, + "intl-locales-supported": { + "version": "1.4.5", + "resolved": "https://registry.npmjs.org/intl-locales-supported/-/intl-locales-supported-1.4.5.tgz", + "integrity": "sha512-D7oriM5x46rd7kNlSW0f9noIBegFr3ReIM6xlMpwH4lfIPD/zvBelPlCjR10IK16boGJG9lKccOvRAM8wzpbrA==" + }, + "intl-messageformat": { + "version": "6.1.9", + "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-6.1.9.tgz", + "integrity": "sha512-vnPujdP+gpWK/+GxWUo3nWRfrUj67/NAZoBNAyCvZ0fnfWh5jvIkKNr5ZZYewdZ7J3cEFLU6hYYgWztiCEFZGg==", + "requires": { + "intl-format-cache": "^4.1.13", + "intl-messageformat-parser": "^3.0.7" + } + }, + "intl-messageformat-parser": { + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/intl-messageformat-parser/-/intl-messageformat-parser-3.0.7.tgz", + "integrity": "sha512-L16VbbV3NFaiZV65XwOIH9fBe52TS2EkOR0k8Y4ratsgTE7KPEbcUCUrz/iEQwJo7BcWY4ohkZbeYZRgAiPR1Q==" + }, "invariant": { "version": "2.2.4", "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", - "dev": true, "requires": { "loose-envify": "^1.0.0" } @@ -9365,6 +9474,17 @@ "make-dir": "^2.1.0", "rimraf": "^2.6.3", "source-map": "^0.6.1" + }, + "dependencies": { + "rimraf": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz", + "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==", + "dev": true, + "requires": { + "glob": "^7.1.3" + } + } } }, "istanbul-reports": { @@ -11544,6 +11664,17 @@ "mkdirp": "^0.5.1", "rimraf": "^2.5.4", "run-queue": "^1.0.3" + }, + "dependencies": { + "rimraf": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz", + "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==", + "dev": true, + "requires": { + "glob": "^7.1.3" + } + } } }, "ms": { @@ -17417,6 +17548,23 @@ "integrity": "sha512-X1Y+0jR47ImDVr54Ab6V9eGk0Hnu7fVWGeHQSOXHf/C2pF9c6uy3gef8QUeuUiWlNb0i08InPSE5a/KJzNzw1Q==", "dev": true }, + "react-intl": { + "version": "3.1.9", + "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-3.1.9.tgz", + "integrity": "sha512-mQxhcFsYsj7O+k2Gsf1p+QaGhEdr+g7v5hYaa88dqar1m1xdWldEJjZ4JK/waHTp4zhVPoco4NQ1JdPkhs8HkA==", + "requires": { + "@formatjs/intl-relativetimeformat": "^2.6.3", + "@types/hoist-non-react-statics": "^3.3.1", + "@types/invariant": "^2.2.30", + "hoist-non-react-statics": "^3.3.0", + "intl-format-cache": "^4.1.10", + "intl-locales-supported": "^1.4.5", + "intl-messageformat": "^6.1.6", + "intl-messageformat-parser": "^3.0.7", + "invariant": "^2.1.1", + "shallow-equal": "^1.1.0" + } + }, "react-is": { "version": "16.8.6", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz", @@ -18134,15 +18282,6 @@ "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=", "dev": true }, - "rimraf": { - "version": "2.6.3", - "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz", - "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==", - "dev": true, - "requires": { - "glob": "^7.1.3" - } - }, "ripemd160": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.2.tgz", @@ -18543,6 +18682,11 @@ } } }, + "shallow-equal": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.0.tgz", + "integrity": "sha512-Z21pVxR4cXsfwpMKMhCEIO1PCi5sp7KEp+CmOpBQ+E8GpHwKOw2sEzk7sgblM3d/j4z4gakoWEoPcjK0VJQogA==" + }, "shebang-command": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz", @@ -20053,6 +20197,23 @@ "integrity": "sha512-YycBxUb49UUhdNMU5aJ7z5Ej2XGmaIBL0x34vZ82fn3hGvD+bgrMrVDpatgz2f7YxUMJxMkbWxJZeAvDxVe7Vw==", "dev": true }, + "typescript-react-intl": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/typescript-react-intl/-/typescript-react-intl-0.4.0.tgz", + "integrity": "sha512-sCQN2YdWSaWNAK9bBezmqZStswfh0MMWQnIlBOn+iFBN4fE1m36fv1zqUaw33jTbQUjIaZ4N+NFbMfS/cnyIew==", + "dev": true, + "requires": { + "typescript": "^2.6.2" + }, + "dependencies": { + "typescript": { + "version": "2.9.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.9.2.tgz", + "integrity": "sha512-Gr4p6nFNaoufRIY4NMdpQRNmgxVIGMs4Fcu/ujdYk3nAZqk7supzBE9idmvfZIlH/Cuj//dvi+019qEue9lV0w==", + "dev": true + } + } + }, "uc.micro": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz", @@ -21189,6 +21350,17 @@ "p-map": "^1.1.1", "pify": "^3.0.0", "rimraf": "^2.2.8" + }, + "dependencies": { + "rimraf": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz", + "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==", + "dev": true, + "requires": { + "glob": "^7.1.3" + } + } } }, "globby": { diff --git a/package.json b/package.json index f5de1a2e4..61e7b0136 100644 --- a/package.json +++ b/package.json @@ -299,6 +299,7 @@ "tslint-react": "^3.6.0", "tslint-react-hooks": "^2.0.0", "typescript": "^3.3.1", + "typescript-react-intl": "^0.4.0", "version-from-git": "^1.1.1", "vsce": "^1.47.0", "vscode-nls-dev": "^3.2.6", @@ -316,6 +317,7 @@ "os": "^0.1.1", "react": "^16.8.6", "react-dom": "^16.8.6", + "react-intl": "^3.1.9", "socket.io": "^2.2.0", "svg-inline-react": "^3.1.0", "util": "^0.12.1", diff --git a/src/view/components/toolbar/MotionSensorBar.tsx b/src/view/components/toolbar/MotionSensorBar.tsx index 12a84fac4..3dcdba145 100644 --- a/src/view/components/toolbar/MotionSensorBar.tsx +++ b/src/view/components/toolbar/MotionSensorBar.tsx @@ -28,22 +28,22 @@ const sendMessage = (state: any) => { const MOTION_SLIDER_PROPS_X: ISliderProps = { axisLabel: "X", maxLabel: "Right", - maxValue: 125, + maxValue: 78, minLabel: "Left", - minValue: -55, + minValue: -78, type: "motion_x" }; const MOTION_SLIDER_PROPS_Y: ISliderProps = { axisLabel: "Y", maxLabel: "Front", - maxValue: 125, + maxValue: 78, minLabel: "Back", - minValue: -55, + minValue: -78, type: "motion_y" }; const MOTION_SLIDER_PROPS_Z: ISliderProps = { - maxValue: 125, - minValue: -55, + maxValue: 78, + minValue: -78, minLabel: "Up", maxLabel: "Down", type: "motion_z", diff --git a/src/view/components/toolbar/ToolBar.tsx b/src/view/components/toolbar/ToolBar.tsx index b06027f42..860d2f75c 100644 --- a/src/view/components/toolbar/ToolBar.tsx +++ b/src/view/components/toolbar/ToolBar.tsx @@ -10,9 +10,10 @@ import { IModalContent, TOOLBAR_ICON_ID } from "./sensorModalUtils"; +import { FormattedMessage, injectIntl } from "react-intl"; interface IToolbarState { - currentOpenedLabel: string; + currentOpenedId: string; showModal: boolean; } @@ -23,7 +24,7 @@ class ToolBar extends React.Component { constructor(props: any) { super(props); this.state = { - currentOpenedLabel: "", + currentOpenedId: "", showModal: false }; } @@ -171,7 +172,6 @@ class ToolBar extends React.Component { focusable={false} /> - {this.getIconModal()} @@ -184,13 +184,13 @@ class ToolBar extends React.Component { ) => { if ( !this.state.showModal && - this.state.currentOpenedLabel === "" && - this.state.currentOpenedLabel !== label + this.state.currentOpenedId === "" && + this.state.currentOpenedId !== label ) { this.openModal(label); } else { this.closeCurrentModal(); - if (this.state.currentOpenedLabel !== label) { + if (this.state.currentOpenedId !== label) { this.openModal(label); } } @@ -205,16 +205,16 @@ class ToolBar extends React.Component { } } private closeCurrentModal = () => { - this.changePressedState(this.state.currentOpenedLabel, false); + this.changePressedState(this.state.currentOpenedId, false); this.setState({ - currentOpenedLabel: "", + currentOpenedId: "", showModal: false }); }; private openModal = (label: string) => { this.setState({ - currentOpenedLabel: label, + currentOpenedId: label, showModal: true }); this.changePressedState(label, true); @@ -223,13 +223,13 @@ class ToolBar extends React.Component { private getIconModal() { if ( !this.state.showModal || - !LABEL_TO_MODAL_CONTENT.get(this.state.currentOpenedLabel) + !LABEL_TO_MODAL_CONTENT.get(this.state.currentOpenedId) ) { return null; } const content = LABEL_TO_MODAL_CONTENT.get( - this.state.currentOpenedLabel + this.state.currentOpenedId ) as IModalContent; const component = content @@ -239,15 +239,22 @@ class ToolBar extends React.Component {
- {content["descriptionTitle"]} + {content["tagInput"]} {content["tagOutput"]}

-
{content["descriptionText"]}
+
+ +
-
{content["tryItDescriptrion"]}
+
+ + + +
+
{component}
@@ -255,4 +262,4 @@ class ToolBar extends React.Component { } } -export default ToolBar; +export default injectIntl(ToolBar); diff --git a/src/view/components/toolbar/sensorModalUtils.tsx b/src/view/components/toolbar/sensorModalUtils.tsx index 1569c03a9..cb4c60665 100644 --- a/src/view/components/toolbar/sensorModalUtils.tsx +++ b/src/view/components/toolbar/sensorModalUtils.tsx @@ -46,7 +46,7 @@ export const TOOLBAR_ICON_ID = { SOUND: "toolbar-sound-sensor", SPEAKER: "toolbar-speaker", SWITCH: "toolbar-slider-switch", - TEMPERATURE: "toolbar-temperatur-sensor" + TEMPERATURE: "toolbar-temperature-sensor" }; export interface IModalContent { @@ -56,7 +56,7 @@ export interface IModalContent { id: string; tagInput: any; tagOutput: any; - tryItDescriptrion: string; + tryItDescription: string; tryItTitle: string; } @@ -66,135 +66,119 @@ export const DEFAULT_MODAL_CONTENT: IModalContent = { tagOutput: undefined, descriptionText: "none", tryItTitle: "none", - tryItDescriptrion: "none", + tryItDescription: "none", component: undefined, id: "none" }; export const GPIO_MODAL_CONTENT: IModalContent = { - descriptionTitle: "GPIO", + descriptionTitle: "toolbar-gpio.title", tagInput: TAG_INPUT_SVG, tagOutput: TAG_OUTPUT_SVG, - descriptionText: - "8 GPIOs on CPX! Pin A1 - A7 can also be used as capacitive touch sensors, and A0 is a true analog output pin.", + descriptionText: "toolbar-gpio.description", tryItTitle: "Simulation Coming Soon!", - tryItDescriptrion: - "We’re working hard to support this sensor on the simulator in the Pacifica. You can try it on MakeCode!", - component: TRY_IT_MAKE_CODE, + tryItDescription: "toolbar-gpio.tryItDescription", + component: undefined, id: "GPIO" }; export const IR_MODAL_CONTENT: IModalContent = { - descriptionTitle: "IR Transmit & Receiver", + descriptionTitle: "toolbar-ir-sensor.title", tagInput: TAG_INPUT_SVG, tagOutput: TAG_OUTPUT_SVG, - descriptionText: - "Allows you to send commands to the CPX with a remote control, or even send messages between multiple CPXs! You can also do very simple proximity sensing since it reads the reflected light.", + descriptionText: "toolbar-ir-sensor.description", tryItTitle: "Simulation Coming Soon!", - tryItDescriptrion: - "We’re working hard to support this sensor on the simulator in the Pacifica. You can try it on MakeCode!", + tryItDescription: "toolbar-ir-sensor.tryItDescription", component: TRY_IT_MAKE_CODE, id: "IR" }; export const LIGHT_MODAL_CONTENT: IModalContent = { - descriptionTitle: "Light Sensor", + descriptionTitle: "toolbar-light-sensor.title", tagInput: TAG_INPUT_SVG, tagOutput: undefined, - descriptionText: - "An analog light sensor can be used to detect ambient light, with similar spectral response to the human eye.", + descriptionText: "toolbar-light-sensor.description", tryItTitle: "Try it on the Simulator!", - tryItDescriptrion: "Change the brightness from 0 - 255 here!", + tryItDescription: "toolbar-light-sensor.tryItDescription", component: , id: "light_sensor" }; export const MOTION_MODAL_CONTENT: IModalContent = { - descriptionTitle: "Motion Sensor", + descriptionTitle: "toolbar-motion-sensor.title", tagInput: TAG_INPUT_SVG, tagOutput: undefined, - descriptionText: - "Detects acceleration in XYZ orientations. And can also detect 'tap' and 'double tap' strikes on the board and when the board is shaken.", + descriptionText: "toolbar-motion-sensor.description", tryItTitle: "Try it on the Simulator!", - tryItDescriptrion: - "Change the acceleration here and click on the sensor on the board to simulate the “tap”!", + tryItDescription: "toolbar-motion-sensor.tryItDescription", component: , id: "motion_sensor" }; export const NEOP_MODAL_CONTENT: IModalContent = { - descriptionTitle: "NeoPixels", + descriptionTitle: "toolbar-neo-pixels.title", tagInput: undefined, tagOutput: TAG_OUTPUT_SVG, - descriptionText: - "The 10 full color RGB LEDs surrounding the outer edge of the boards can be set to any color. Great for beautiful lighting effects!", + descriptionText: "toolbar-neo-pixels.description", tryItTitle: "Try it on the Simulator!", - tryItDescriptrion: "Run your code and see the cool effects on the simulator!", + tryItDescription: "toolbar-neo-pixels.tryItDescription", component: undefined, id: "neon_pixel" }; export const PUSHB_MODAL_CONTENT: IModalContent = { - descriptionTitle: "Push Buttons", + descriptionTitle: "toolbar-push-button.title", tagInput: TAG_INPUT_SVG, tagOutput: undefined, - descriptionText: - "Two push buttons A and B are connected to digital pin #4 (Left) and #5 (Right) each.", + descriptionText: "toolbar-push-button.description", tryItTitle: "Try it on the Simulator!", - tryItDescriptrion: - "Click them with your mouse or pressing “A” “B” on your keyboard!", + tryItDescription: "toolbar-push-button.tryItDescription", component: undefined, id: "push_btn" }; export const RED_LED_MODAL_CONTENT: IModalContent = { - descriptionTitle: "Red LED", + descriptionTitle: "toolbar-red-led.title", tagInput: undefined, tagOutput: TAG_OUTPUT_SVG, - descriptionText: - "This Red LED is connected to the digital #13 GPIO pin. It can be very handy when you want an indicator LED.", + descriptionText: "toolbar-red-led.description", tryItTitle: "Try it on the Simulator!", - tryItDescriptrion: "Run your code and see the cool effects on the simulator!", + tryItDescription: "toolbar-red-led.tryItDescription", component: undefined, id: "red_LED" }; export const SOUND_MODAL_CONTENT: IModalContent = { - descriptionTitle: "Sound Sensor", + descriptionTitle: "toolbar-sound-sensor.title", tagInput: TAG_INPUT_SVG, tagOutput: undefined, - descriptionText: - "A digital microphone can detect audio volume and even perform basic FFT functions but cannot read it like an analog voltage.", + descriptionText: "toolbar-sound-sensor.description", tryItTitle: "Simulation Coming Soon!", - tryItDescriptrion: - "We’re working hard to support this sensor on the simulator in the Pacifica. You can try it on MakeCode!", + tryItDescription: "toolbar-sound-sensor.tryItDescription", component: TRY_IT_MAKE_CODE, id: "sound_sensor" }; export const SWITCH_MODAL_CONTENT: IModalContent = { - descriptionTitle: "Slide Switch ", + descriptionTitle: "toolbar-slider-switch.title", tagInput: TAG_INPUT_SVG, tagOutput: undefined, - descriptionText: - "This slide switch returns True or False depending on whether it's ON or OFF and can be used as a toggle switch in your code!", + descriptionText: "toolbar-slider-switch.description", tryItTitle: "Try it on the Simulator!", - tryItDescriptrion: "Click it with your mouse to switch it ON and OFF!", + tryItDescription: "toolbar-slider-switch.tryItDescription", component: undefined, id: "slider_switch" }; export const SPEAKER_MODAL_CONTENT: IModalContent = { - descriptionTitle: "Speaker ", + descriptionTitle: "toolbar-speaker.title", tagInput: undefined, tagOutput: TAG_OUTPUT_SVG, - descriptionText: - "This speaker can play .wav file and different tones and also has a class D amplifier that is connected to an output A0 pin built in! You can turn it off using the shutdown control on pin #11 on the physical device.", + descriptionText: "toolbar-speaker.description", tryItTitle: "Try it on the Simulator!", - tryItDescriptrion: "Run your code and you’ll hear music!", + tryItDescription: "toolbar-speaker.tryItDescription", component: undefined, id: "speaker" }; export const TEMPERATURE_MODAL_CONTENT: IModalContent = { component: , - descriptionText: - "This sensor uses an NTC thermistor to sense temperature an calculate it with the analog voltage on analog pin #A9.", - descriptionTitle: "Temperature Sensor", + descriptionText: "toolbar-temperature-sensor.description", + descriptionTitle: "toolbar-temperature-sensor.title", id: "temperature", tagInput: TAG_INPUT_SVG, tagOutput: undefined, - tryItDescriptrion: "You can set the temperature range from your code!", + tryItDescription: "toolbar-temperature-sensor.tryItDescription", tryItTitle: "Try it on the Simulator!" }; diff --git a/src/view/index.tsx b/src/view/index.tsx index 78a8cc933..d5a969aa8 100644 --- a/src/view/index.tsx +++ b/src/view/index.tsx @@ -1,13 +1,23 @@ // Copyright (c) Microsoft Corporation. // Licensed under the MIT license. -import * as React from 'react'; -import * as ReactDOM from 'react-dom'; -import App from './App'; +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import App from "./App"; +import { IntlProvider } from "react-intl"; -import './index.css'; +import "./index.css"; + +const messageEn = require("./translations/en.json"); +const locale = "en"; + +const message = { + en: messageEn +}; ReactDOM.render( - , - document.getElementById('root') -); \ No newline at end of file + + + , + document.getElementById("root") +); diff --git a/src/view/styles/ToolBar.css b/src/view/styles/ToolBar.css index 3e4b07d4c..89e6c1d9f 100644 --- a/src/view/styles/ToolBar.css +++ b/src/view/styles/ToolBar.css @@ -76,13 +76,20 @@ .try_area { position: relative; padding-bottom: 30px; + text-align: left; + line-height: 17px; + font-weight: 100; + opacity: 50%; + font-size: 14px; + word-wrap: break-word; } .link-parent { + padding-top: 12px; -webkit-appearance: none; padding-left: 150px; color: var(--vscode-textLink-activeForeground); - text-align: left; + text-align: right; text-decoration: none; font-weight: bold; } diff --git a/src/view/translations/en.json b/src/view/translations/en.json new file mode 100644 index 000000000..2c98af38d --- /dev/null +++ b/src/view/translations/en.json @@ -0,0 +1,36 @@ +{ + "toolbar-gpio.description": "8 GPIOs on CPX! Pin A1 - A7 can also be used as capacitive touch sensors, and A0 is a true analog output pin.", + "toolbar-gpio.title": "GPIO", + "toolbar-gpio.tryItDescription": "Use your mouse to interact with the pin A1 - A7 or use your keyboard SHIFT+”1” - “7”", + "toolbar-ir-sensor.description": "Allows you to send commands to the CPX with a remote control, or even send messages between multiple CPXs! You can also do very simple proximity sensing since it reads the reflected light.", + "toolbar-ir-sensor.title": "IR Transmit & Receiver", + "toolbar-ir-sensor.tryItDescription": "We’re working hard to support this sensor on the simulator in the Pacifica. You can try it on MakeCode!", + "toolbar-ir-sensor.tryItTitle": "We’re working hard to support this sensor on the simulator in the Pacifica. You can try it on MakeCode!", + "toolbar-light-sensor.description": "An analog light sensor can be used to detect ambient light, with similar spectral response to the human eye.", + "toolbar-light-sensor.title": "Light Sensor", + "toolbar-light-sensor.tryItDescription": "Change the brightness from 0 - 255 here!", + "toolbar-motion-sensor.description": "Detects acceleration in XYZ orientations. And can also detect 'tap' and 'double tap' strikes on the board and when the board is shaken.", + "toolbar-motion-sensor.title": "Motion Sensor", + "toolbar-motion-sensor.tryItDescription": "Change the acceleration here and click or click on the button to simulate a shake.The tap feature is not supported by pacifica. You can try it on MakeCode!", + "toolbar-neo-pixels.description": "The 10 full color RGB LEDs surrounding the outer edge of the boards can be set to any color. Great for beautiful lighting effects!", + "toolbar-neo-pixels.title": "NeoPixels", + "toolbar-neo-pixels.tryItDescription": "Run your code and see the cool effects on the simulator!", + "toolbar-push-button.description": "Two push buttons A and B are connected to digital pin #4 (Left) and #5 (Right) each.", + "toolbar-push-button.title": "Push Buttons", + "toolbar-push-button.tryItDescription": "Click them with your mouse or by pressing “A” “B” on your keyboard!", + "toolbar-red-led.description": "This Red LED is connected to the digital #13 GPIO pin. It can be very handy when you want an indicator LED.", + "toolbar-red-led.title": "Red LED", + "toolbar-red-led.tryItDescription": "Run your code and see the cool effects on the simulator!", + "toolbar-sound-sensor.description": "A digital microphone can detect audio volume and even perform basic FFT functions but cannot read it like an analog voltage.", + "toolbar-sound-sensor.title": "Sound Sensor", + "toolbar-sound-sensor.tryItDescription": "We’re working hard to support this sensor on the simulator in the Pacifica. You can try it on MakeCode!", + "toolbar-slider-switch.description": "This slide switch returns True or False depending on whether it's ON or OFF and can be used as a toggle switch in your code!", + "toolbar-slider-switch.title": "Slider Switch", + "toolbar-slider-switch.tryItDescription": "Click it with your mouse or press 'S' on your keyboard to switch it ON and OFF!", + "toolbar-speaker.description": "This speaker can play .wav file and different tones and also has a class D amplifier that is connected to an output A0 pin built in! You can turn it off using the shutdown control on pin #11 on the physical device.", + "toolbar-speaker.title": "Speaker", + "toolbar-speaker.tryItDescription": "Right now the tones are not supported yet on the simulator, but you can play it on your CPX!", + "toolbar-temperature-sensor.description": "This sensor uses an NTC thermistor to sense temperature an calculate it with the analog voltage on analog pin #A9.", + "toolbar-temperature-sensor.title": "Temperature Sensor", + "toolbar-temperature-sensor.tryItDescription": "You can set the temperature range from your code!" +}