Changed "Try it Description" by removing "we are currently working on...", adding "+1 on github for feature implementation" and other CSS changes (#269)

Author: vandyliu

src/view/components/toolbar/SensorModalUtils.tsx

@@ -18,6 +18,17 @@ export const TRY_IT_MAKE_CODE = (
     </div>
 );
 
+export const FEATURE_REQUEST_ON_GITHUB = (
+    <div className="link-parent">
+        <a
+            href="https://github.com/microsoft/vscode-python-devicesimulator/issues/268"
+            className="link"
+        >
+            Upvote feature requests on GitHub {ARROW_RIGHT_SVG}
+        </a>
+    </div>
+);
+
 export const TOOLBAR_ICON_LABEL = {
     GPIO: "GPIO",
     IR: "IR",
@@ -60,7 +71,7 @@ export const MICROBIT_TOOLBAR_ID = {
 };
 
 export interface IModalContent {
-    component: any;
+    components: any;
     descriptionText: string;
     descriptionTitle: string;
     id: string;
@@ -75,7 +86,7 @@ export const DEFAULT_MODAL_CONTENT: IModalContent = {
     tagOutput: undefined,
     descriptionText: "none",
     tryItDescription: "none",
-    component: undefined,
+    components: undefined,
     id: "none",
 };
 
@@ -89,7 +100,7 @@ export const GPIO_MODAL_CONTENT = (
         tagOutput: TAG_OUTPUT_SVG,
         descriptionText: "toolbar-gpio.description",
         tryItDescription: "toolbar-gpio.tryItDescription",
-        component: undefined,
+        components: undefined,
         id: "GPIO",
     };
 };
@@ -104,7 +115,7 @@ export const IR_MODAL_CONTENT = (
         tagOutput: TAG_OUTPUT_SVG,
         descriptionText: "toolbar-ir-sensor.description",
         tryItDescription: "toolbar-ir-sensor.tryItDescription",
-        component: TRY_IT_MAKE_CODE,
+        components: [TRY_IT_MAKE_CODE, FEATURE_REQUEST_ON_GITHUB],
         id: "IR",
     };
 };
@@ -118,12 +129,12 @@ export const LIGHT_MODAL_CONTENT = (
         tagOutput: undefined,
         descriptionText: "toolbar-light-sensor.description",
         tryItDescription: "toolbar-light-sensor.tryItDescription",
-        component: (
+        components: [
             <LightSensorBar
                 onUpdateValue={onUpdateValue}
                 value={sensorValues[SENSOR_LIST.LIGHT]}
-            />
-        ),
+            />,
+        ],
         id: "light_sensor",
     };
 };
@@ -142,12 +153,14 @@ export const MOTION_MODAL_CONTENT = (
         tagOutput: undefined,
         descriptionText: "toolbar-motion-sensor.description",
         tryItDescription: "toolbar-motion-sensor.tryItDescription",
-        component: (
+        components: [
             <MotionSensorBar
                 onUpdateValue={onUpdateValue}
                 axisValues={motionSensorValues}
-            />
-        ),
+            />,
+            TRY_IT_MAKE_CODE,
+            FEATURE_REQUEST_ON_GITHUB,
+        ],
         id: "motion_sensor",
     };
 };
@@ -161,7 +174,7 @@ export const NEOP_MODAL_CONTENT = (
         tagOutput: TAG_OUTPUT_SVG,
         descriptionText: "toolbar-neo-pixels.description",
         tryItDescription: "toolbar-neo-pixels.tryItDescription",
-        component: undefined,
+        components: undefined,
         id: "neon_pixel",
     };
 };
@@ -175,7 +188,7 @@ export const PUSHB_MODAL_CONTENT = (
         tagOutput: undefined,
         descriptionText: "toolbar-push-button.description",
         tryItDescription: "toolbar-push-button.tryItDescription",
-        component: undefined,
+        components: undefined,
         id: "push_btn",
     };
 };
@@ -189,7 +202,7 @@ export const RED_LED_MODAL_CONTENT = (
         tagOutput: TAG_OUTPUT_SVG,
         descriptionText: "toolbar-red-led.description",
         tryItDescription: "toolbar-red-led.tryItDescription",
-        component: undefined,
+        components: undefined,
         id: "red_LED",
     };
 };
@@ -203,7 +216,7 @@ export const SOUND_MODAL_CONTENT = (
         tagOutput: undefined,
         descriptionText: "toolbar-sound-sensor.description",
         tryItDescription: "toolbar-sound-sensor.tryItDescription",
-        component: TRY_IT_MAKE_CODE,
+        components: [TRY_IT_MAKE_CODE, FEATURE_REQUEST_ON_GITHUB],
         id: "sound_sensor",
     };
 };
@@ -217,7 +230,7 @@ export const SWITCH_MODAL_CONTENT = (
         tagOutput: undefined,
         descriptionText: "toolbar-slider-switch.description",
         tryItDescription: "toolbar-slider-switch.tryItDescription",
-        component: undefined,
+        components: undefined,
         id: "slider_switch",
     };
 };
@@ -231,7 +244,7 @@ export const SPEAKER_MODAL_CONTENT = (
         tagOutput: TAG_OUTPUT_SVG,
         descriptionText: "toolbar-speaker.description",
         tryItDescription: "toolbar-speaker.tryItDescription",
-        component: undefined,
+        components: [FEATURE_REQUEST_ON_GITHUB],
         id: "speaker",
     };
 };
@@ -240,12 +253,12 @@ export const TEMPERATURE_MODAL_CONTENT = (
     sensorValues: { [key: string]: number }
 ): IModalContent => {
     return {
-        component: (
+        components: [
             <TemperatureSensorBar
                 onUpdateSensor={onUpdateValue}
                 value={sensorValues[SENSOR_LIST.TEMPERATURE]}
-            />
-        ),
+            />,
+        ],
         descriptionText: "toolbar-temperature-sensor.description",
         descriptionTitle: "toolbar-temperature-sensor.title",
         id: "temperature",
@@ -265,7 +278,7 @@ export const ACCELEROMETER_MODAL_CONTENT = (
         Z_AXIS: sensorValues[SENSOR_LIST.MOTION_Z],
     };
     return {
-        component: (
+        components: (
             <Accelerometer
                 onUpdateValue={onUpdateValue}
                 axisValues={accelerometerSensorValues}
@@ -289,7 +302,7 @@ export const MICROBIT_LED_CONTENT = (
         tagOutput: TAG_OUTPUT_SVG,
         descriptionText: "toolbar-microbit-led.description",
         tryItDescription: "toolbar-microbit-led.tryItDescription",
-        component: undefined,
+        components: undefined,
         id: "microbit_LED",
     };
 };
@@ -304,7 +317,7 @@ export const MICROBIT_BUTTON_CONTENT = (
         tagOutput: TAG_INPUT_SVG,
         descriptionText: "toolbar-microbit-button.description",
         tryItDescription: "toolbar-microbit-button.tryItDescription",
-        component: undefined,
+        components: undefined,
         id: "microbit_button",
     };
 };

src/view/components/toolbar/ToolBar.tsx

@@ -164,9 +164,9 @@ class ToolBar extends React.Component<IProps, IToolbarState, any> {
             this.props.sensorValues
         ) as IModalContent;
 
-        const component = content
-            ? content.component
-            : DEFAULT_MODAL_CONTENT.component;
+        const components = content
+            ? content.components
+            : DEFAULT_MODAL_CONTENT.components;
 
         return (
             <div className="sensor_modal">
@@ -205,7 +205,7 @@ class ToolBar extends React.Component<IProps, IToolbarState, any> {
                     </span>
                     <br />
 
-                    <div>{component}</div>
+                    <div>{components}</div>
                 </div>
             </div>
         );

src/view/styles/ToolBar.css

@@ -32,7 +32,6 @@
 .sensor_modal {
     vertical-align: middle;
     width: 360px;
-    max-height: 300px;
     overflow-y: visible;
     overflow-x: hidden;
     position: relative;
@@ -142,20 +141,19 @@
     opacity: 90%;
     font-size: 14px;
     word-wrap: break-word;
+    padding-right: 10px;
 }
 
 .link-parent {
     padding-top: 12px;
     -webkit-appearance: none;
-    padding-left: 150px;
-    color: var(--vscode-textLink-activeForeground);
+    color: var(--vscode-textLink-foreground);
     text-align: right;
     text-decoration: none;
     font-weight: bold;
 }
 .link-parent:hover {
     -webkit-appearance: none;
-    padding-left: 150px;
     color: var(--vscode-textLink-activeForeground);
     text-decoration: none;
 }

src/view/svgs/arrow_right_svg.tsx

@@ -7,6 +7,7 @@ export const ARROW_RIGHT_SVG = (
         viewBox="0 0 14 14"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
+        transform="translate(-2,2.5)"
     >
         <path
             fill-rule="evenodd"

src/view/translations/en.json

@@ -1,35 +1,34 @@
 {
     "toolbar-gpio.description": "8 GPIOs on the device! 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-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 device with a remote control, or even send messages between multiple devices! 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 Device Simulator Express. You can try it on MakeCode!",
-    "toolbar-ir-sensor.tryItTitle": "We’re working hard to support this sensor on the simulator in the Device Simulator Express. You can try it on MakeCode!",
+    "toolbar-ir-sensor.tryItDescription": "If you would like to see this sensor supported, please +1 the feature addition issue on GitHub! For now, 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.description": "Detects acceleration in X, Y and Z orientations. It 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 the Device Simulator Express. You can try it on MakeCode!",
+    "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 the Device Simulator Express. If you would like to see the 'tap' feature implemented, please +1 the feature addition issue on GitHub! For now, 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-push-button.tryItDescription": "Click them with your mouse or by pressing “A” and/or “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 Device Simulator Express. You can try it on MakeCode!",
+    "toolbar-sound-sensor.tryItDescription": "If you would like to see the sound sensor implemented, please +1 the feature addition issue on GitHub! For now, 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.description": "This speaker can play a .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 device!",
+    "toolbar-speaker.tryItDescription": "Right now the tones are not supported on the simulator. If you would like to see tones implemented, please +1 the feature addition issue on GitHub! Regardless, you can play it on your device!",
     "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!",
@@ -41,5 +40,5 @@
     "toolbar-microbit-led.tryItDescription": "Run your code and see the LEDs light up!",
     "toolbar-microbit-button.title": "Buttons",
     "toolbar-microbit-button.description": "There are two buttons on the front of the micro:bit (labelled A and B). The third button is to trigger both A and B buttons. You can detect when these buttons are pressed, allowing you to trigger code on the device.",
-    "toolbar-microbit-button.tryItDescription": "Click them with your mouse. Pressing “A” “B” on your keyboard will be implemented soon!"
-}
+    "toolbar-microbit-button.tryItDescription": "Click them with your mouse or by pressing “A” and/or “B” on your keyboard!"
+}