diff --git a/src/view/components/toolbar/SensorModalUtils.tsx b/src/view/components/toolbar/SensorModalUtils.tsx index 3806b44b6..bed745313 100644 --- a/src/view/components/toolbar/SensorModalUtils.tsx +++ b/src/view/components/toolbar/SensorModalUtils.tsx @@ -18,6 +18,17 @@ export const TRY_IT_MAKE_CODE = ( ); +export const FEATURE_REQUEST_ON_GITHUB = ( +
+ + Upvote feature requests on GitHub {ARROW_RIGHT_SVG} + +
+); + 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: [ - ), + />, + ], 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: [ - ), + />, + 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: [ - ), + />, + ], 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: ( { this.props.sensorValues ) as IModalContent; - const component = content - ? content.component - : DEFAULT_MODAL_CONTENT.component; + const components = content + ? content.components + : DEFAULT_MODAL_CONTENT.components; return (
@@ -205,7 +205,7 @@ class ToolBar extends React.Component {
-
{component}
+
{components}
); diff --git a/src/view/styles/ToolBar.css b/src/view/styles/ToolBar.css index 0dc843349..2b349c4fa 100644 --- a/src/view/styles/ToolBar.css +++ b/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; } diff --git a/src/view/svgs/arrow_right_svg.tsx b/src/view/svgs/arrow_right_svg.tsx index 3d7e2f1ab..7eead7979 100644 --- a/src/view/svgs/arrow_right_svg.tsx +++ b/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)" >