Skip to content
This repository has been archived by the owner on Dec 23, 2021. It is now read-only.

Commit

Permalink
Merge pull request #329 from microsoft/users/t-xunguy/slider-refactor
Browse files Browse the repository at this point in the history 
Toolbar Refactor
  • Loading branch information
@xnkevinnguyen
xnkevinnguyen committed Apr 15, 2020
2 parents 5eca6b4 + 19738cd commit 3b5fced
Show file tree
Hide file tree
Showing 19 changed files with 485 additions and 816 deletions.
8 changes: 4 additions & 4 deletions src/view/components/microbit/__snapshots__/Microbit.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2781,9 +2781,9 @@ Array [
onMouseLeave={[Function]}
>
<button
aria-label="toolbar temperature-sensor"
aria-label="toolbar microbit-temperature-sensor"
className="toolbar-button button"
id="toolbar-temperature-sensor-button"
id="toolbar-microbit-temperature-sensor-button"
onClick={[Function]}
role="button"
style={
Expand Down Expand Up @@ -2848,9 +2848,9 @@ Array [
onMouseLeave={[Function]}
>
<button
aria-label="toolbar light-sensor"
aria-label="toolbar microbit-light-sensor"
className="toolbar-button button"
id="toolbar-light-sensor-button"
id="toolbar-microbit-light-sensor-button"
onClick={[Function]}
role="button"
style={
Expand Down
2 changes: 1 addition & 1 deletion src/view/components/toolbar/GenericSliderComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ interface IProps {
}
export const GenericSliderComponent: React.FC<IProps> = props => {
return (
<div className="GenericSliderComponent">
<div className="generic-slider-component">
{props.axisProperties.sliderProps.map(
(sliderProperties: ISliderProps, index: number) => {
return (
Expand Down
6 changes: 3 additions & 3 deletions ...iew/components/toolbar/motion/Gesture.tsx → src/view/components/toolbar/Gesture.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from "react";
import { CONSTANTS } from "../../../constants";
import { Dropdown } from "../../Dropdown";
import SensorButton from "../SensorButton";
import { CONSTANTS } from "../../constants";
import { Dropdown } from "../Dropdown";
import SensorButton from "./SensorButton";

const GESTURE_BUTTON_MESSAGE = "Send Gesture";
interface IProps {
Expand Down
2 changes: 1 addition & 1 deletion src/view/components/toolbar/InputSlider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ class InputSlider extends React.Component<ISliderProps, any, any> {
render() {
const isInputDisabled = this.context === VIEW_STATE.PAUSE;
return (
<div className="inputSlider">
<div className="input-slider">
<span>{this.props.axisLabel}</span>
<input
type="text"
Expand Down
69 changes: 0 additions & 69 deletions src/view/components/toolbar/LightSensorBar.tsx
View file

This file was deleted.

212 changes: 16 additions & 196 deletions src/view/components/toolbar/SensorModalUtils.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,9 @@
import * as React from "react";
import { SENSOR_LIST } from "../../constants";
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 * as CLUE_MODAL from "./clue/ClueModalContent";
import LightSensorBar from "./LightSensorBar";
import * as CPX_MODAL from "./cpx/CpxModalContent";
import * as MICROBIT_MODAL from "./microbit/MicrobitModalContent";
import MotionSensorBar from "./motion/MotionSensorBar";
import TemperatureSensorBar from "./TemperatureSensorBar";

export const TRY_IT_MAKE_CODE = (
<div className="link-parent">
Expand Down Expand Up @@ -65,8 +61,8 @@ export const CPX_TOOLBAR_ICON_ID = {
};

export const MICROBIT_TOOLBAR_ICON_ID = {
TEMPERATURE: "toolbar-temperature-sensor",
LIGHT: "toolbar-light-sensor",
TEMPERATURE: "toolbar-microbit-temperature-sensor",
LIGHT: "toolbar-microbit-light-sensor",
ACCELEROMETER: "toolbar-accelerometer-sensor",
LEDS: "toolbar-microbit-led",
PUSH_BUTTON: "toolbar-microbit-a-b-push",
Expand Down Expand Up @@ -115,200 +111,24 @@ export const DEFAULT_MODAL_CONTENT: IModalContent = {
id: "none",
};

export const GPIO_MODAL_CONTENT = (
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
sensorValues: { [key: string]: number }
): IModalContent => {
return {
descriptionTitle: "toolbar-gpio.title",
tagInput: TAG_INPUT_SVG,
tagOutput: TAG_OUTPUT_SVG,
descriptionText: "toolbar-gpio.description",
tryItDescription: "toolbar-gpio.tryItDescription",
components: undefined,
id: "GPIO",
};
};

export const IR_MODAL_CONTENT = (
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
sensorValues: { [key: string]: number }
): IModalContent => {
return {
descriptionTitle: "toolbar-ir-sensor.title",
tagInput: TAG_INPUT_SVG,
tagOutput: TAG_OUTPUT_SVG,
descriptionText: "toolbar-ir-sensor.description",
tryItDescription: "toolbar-ir-sensor.tryItDescription",
components: [TRY_IT_MAKE_CODE, FEATURE_REQUEST_ON_GITHUB],
id: "IR",
};
};
export const LIGHT_MODAL_CONTENT = (
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
sensorValues: { [key: string]: number }
): IModalContent => {
return {
descriptionTitle: "toolbar-light-sensor.title",
tagInput: TAG_INPUT_SVG,
tagOutput: undefined,
descriptionText: "toolbar-light-sensor.description",
tryItDescription: "toolbar-light-sensor.tryItDescription",
components: [
<LightSensorBar
onUpdateValue={onUpdateValue}
value={sensorValues[SENSOR_LIST.LIGHT]}
/>,
],
id: "light_sensor",
};
};
export const MOTION_MODAL_CONTENT = (
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
sensorValues: { [key: string]: number }
): IModalContent => {
const motionSensorValues = {
X: sensorValues[SENSOR_LIST.MOTION_X],
Y: sensorValues[SENSOR_LIST.MOTION_Y],
Z: sensorValues[SENSOR_LIST.MOTION_Z],
};
return {
descriptionTitle: "toolbar-motion-sensor.title",
tagInput: TAG_INPUT_SVG,
tagOutput: undefined,
descriptionText: "toolbar-motion-sensor.description",
tryItDescription: "toolbar-motion-sensor.tryItDescription",
components: [
<MotionSensorBar
onUpdateValue={onUpdateValue}
axisValues={motionSensorValues}
/>,
TRY_IT_MAKE_CODE,
FEATURE_REQUEST_ON_GITHUB,
],
id: "motion_sensor",
};
};
export const NEOP_MODAL_CONTENT = (
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
sensorValues: { [key: string]: number }
): IModalContent => {
return {
descriptionTitle: "toolbar-neo-pixels.title",
tagInput: undefined,
tagOutput: TAG_OUTPUT_SVG,
descriptionText: "toolbar-neo-pixels.description",
tryItDescription: "toolbar-neo-pixels.tryItDescription",
components: undefined,
id: "neon_pixel",
};
};
export const PUSHB_MODAL_CONTENT = (
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
sensorValues: { [key: string]: number }
): IModalContent => {
return {
descriptionTitle: "toolbar-a-b-push.title",
tagInput: TAG_INPUT_SVG,
tagOutput: undefined,
descriptionText: "toolbar-a-b-push.description",
tryItDescription: "toolbar-a-b-push.tryItDescription",
components: undefined,
id: "push_btn",
};
};
export const RED_LED_MODAL_CONTENT = (
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
sensorValues: { [key: string]: number }
): IModalContent => {
return {
descriptionTitle: "toolbar-red-led.title",
tagInput: undefined,
tagOutput: TAG_OUTPUT_SVG,
descriptionText: "toolbar-red-led.description",
tryItDescription: "toolbar-red-led.tryItDescription",
components: undefined,
id: "red_LED",
};
};
export const SOUND_MODAL_CONTENT = (
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
sensorValues: { [key: string]: number }
): IModalContent => {
return {
descriptionTitle: "toolbar-sound-sensor.title",
tagInput: TAG_INPUT_SVG,
tagOutput: undefined,
descriptionText: "toolbar-sound-sensor.description",
tryItDescription: "toolbar-sound-sensor.tryItDescription",
components: [TRY_IT_MAKE_CODE, FEATURE_REQUEST_ON_GITHUB],
id: "sound_sensor",
};
};
export const SWITCH_MODAL_CONTENT = (
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
sensorValues: { [key: string]: number }
): IModalContent => {
return {
descriptionTitle: "toolbar-slider-switch.title",
tagInput: TAG_INPUT_SVG,
tagOutput: undefined,
descriptionText: "toolbar-slider-switch.description",
tryItDescription: "toolbar-slider-switch.tryItDescription",
components: undefined,
id: "slider_switch",
};
};
export const SPEAKER_MODAL_CONTENT = (
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
sensorValues: { [key: string]: number }
): IModalContent => {
return {
descriptionTitle: "toolbar-speaker.title",
tagInput: undefined,
tagOutput: TAG_OUTPUT_SVG,
descriptionText: "toolbar-speaker.description",
tryItDescription: "toolbar-speaker.tryItDescription",
components: [FEATURE_REQUEST_ON_GITHUB],
id: "speaker",
};
};
export const TEMPERATURE_MODAL_CONTENT = (
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
sensorValues: { [key: string]: number }
): IModalContent => {
return {
components: [
<TemperatureSensorBar
onUpdateSensor={onUpdateValue}
value={sensorValues[SENSOR_LIST.TEMPERATURE]}
/>,
],
descriptionText: "toolbar-temperature-sensor.description",
descriptionTitle: "toolbar-temperature-sensor.title",
id: "temperature",
tagInput: TAG_INPUT_SVG,
tagOutput: undefined,
tryItDescription: "toolbar-temperature-sensor.tryItDescription",
};
};

export const LABEL_TO_MODAL_CONTENT_CONSTRUCTOR = new Map([
[CPX_TOOLBAR_ICON_ID.GPIO, GPIO_MODAL_CONTENT],
[CPX_TOOLBAR_ICON_ID.IR, IR_MODAL_CONTENT],
[CPX_TOOLBAR_ICON_ID.LIGHT, LIGHT_MODAL_CONTENT],
[CPX_TOOLBAR_ICON_ID.MOTION, MOTION_MODAL_CONTENT],
[CPX_TOOLBAR_ICON_ID.NEO_PIXEL, NEOP_MODAL_CONTENT],
[CPX_TOOLBAR_ICON_ID.PUSH_BUTTON, PUSHB_MODAL_CONTENT],
[CPX_TOOLBAR_ICON_ID.RED_LED, RED_LED_MODAL_CONTENT],
[CPX_TOOLBAR_ICON_ID.SOUND, SOUND_MODAL_CONTENT],
[CPX_TOOLBAR_ICON_ID.SPEAKER, SPEAKER_MODAL_CONTENT],
[CPX_TOOLBAR_ICON_ID.SWITCH, SWITCH_MODAL_CONTENT],
[CPX_TOOLBAR_ICON_ID.TEMPERATURE, TEMPERATURE_MODAL_CONTENT],
[CPX_TOOLBAR_ICON_ID.GPIO, CPX_MODAL.GPIO_CONTENT],
[CPX_TOOLBAR_ICON_ID.IR, CPX_MODAL.IR_CONTENT],
[CPX_TOOLBAR_ICON_ID.LIGHT, CPX_MODAL.LIGHT_CONTENT],
[CPX_TOOLBAR_ICON_ID.MOTION, CPX_MODAL.MOTION_CONTENT],
[CPX_TOOLBAR_ICON_ID.NEO_PIXEL, CPX_MODAL.NEOP_CONTENT],
[CPX_TOOLBAR_ICON_ID.PUSH_BUTTON, CPX_MODAL.PUSHB_CONTENT],
[CPX_TOOLBAR_ICON_ID.RED_LED, CPX_MODAL.RED_LED_CONTENT],
[CPX_TOOLBAR_ICON_ID.SOUND, CPX_MODAL.SOUND_CONTENT],
[CPX_TOOLBAR_ICON_ID.SPEAKER, CPX_MODAL.SPEAKER_CONTENT],
[CPX_TOOLBAR_ICON_ID.SWITCH, CPX_MODAL.SWITCH_CONTENT],
[CPX_TOOLBAR_ICON_ID.TEMPERATURE, CPX_MODAL.TEMPERATURE_CONTENT],
[
MICROBIT_TOOLBAR_ICON_ID.ACCELEROMETER,
MICROBIT_MODAL.ACCELEROMETER_CONTENT,
],
[MICROBIT_TOOLBAR_ICON_ID.TEMPERATURE, MICROBIT_MODAL.TEMPERATURE_CONTENT],
[MICROBIT_TOOLBAR_ICON_ID.LIGHT, MICROBIT_MODAL.LIGHT_CONTENT],
[MICROBIT_TOOLBAR_ICON_ID.COMPASS, MICROBIT_MODAL.COMPASS_CONTENT],
[MICROBIT_TOOLBAR_ICON_ID.LEDS, MICROBIT_MODAL.LED_CONTENT],
[MICROBIT_TOOLBAR_ICON_ID.PUSH_BUTTON, MICROBIT_MODAL.BUTTON_CONTENT],
Expand Down
Loading

0 comments on commit 3b5fced

Please sign in to comment.