diff --git a/package-lock.json b/package-lock.json index cf520fcf8..9cf9feee9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8095,7 +8095,8 @@ }, "kind-of": { "version": "6.0.2", - "resolved": "" + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", + "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==" } } }, @@ -12110,7 +12111,8 @@ }, "kind-of": { "version": "6.0.2", - "resolved": "" + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", + "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==" } } }, @@ -28840,7 +28842,8 @@ }, "kind-of": { "version": "6.0.2", - "resolved": "" + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", + "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==" } } }, diff --git a/src/view/components/toolbar/ToolBar.tsx b/src/view/components/toolbar/ToolBar.tsx index c604cbc3b..6063d8d9e 100644 --- a/src/view/components/toolbar/ToolBar.tsx +++ b/src/view/components/toolbar/ToolBar.tsx @@ -1,6 +1,8 @@ // Copyright (c) Microsoft Corporation. // Licensed under the MIT license. -import { TooltipHost } from "office-ui-fabric-react"; +import { Callout, TooltipHost } from "office-ui-fabric-react"; +import { IconButton } from "office-ui-fabric-react"; +import { initializeIcons } from "@uifabric/icons"; import * as React from "react"; import { FormattedMessage, @@ -19,6 +21,7 @@ import { interface IToolbarState { currentOpenedId: string; showModal: boolean; + isDescriptionVisible: boolean; } interface IProps extends WrappedComponentProps { @@ -35,8 +38,10 @@ class ToolBar extends React.Component { constructor(props: IProps) { super(props); + initializeIcons(); this.state = { currentOpenedId: "", + isDescriptionVisible: false, showModal: false, }; } @@ -129,6 +134,18 @@ class ToolBar extends React.Component { this.changePressedState(label, true); }; + private onShowDescriptionClicked = (): void => { + this.setState({ + isDescriptionVisible: !this.state.isDescriptionVisible, + }); + }; + + private onDescriptionDismiss = (): void => { + this.setState({ + isDescriptionVisible: false, + }); + }; + private getIconModal() { if ( !this.state.showModal || @@ -150,6 +167,7 @@ class ToolBar extends React.Component { const component = content ? content.component : DEFAULT_MODAL_CONTENT.component; + return (
@@ -157,15 +175,32 @@ class ToolBar extends React.Component { {content.tagInput} {content.tagOutput} +

-
- -
+ {this.state.isDescriptionVisible && ( + +
+ +
+ + )}

- +
diff --git a/src/view/components/toolbar/Toolbar.spec.tsx b/src/view/components/toolbar/Toolbar.spec.tsx new file mode 100644 index 000000000..ad81f1ddc --- /dev/null +++ b/src/view/components/toolbar/Toolbar.spec.tsx @@ -0,0 +1,57 @@ +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import { IntlProvider } from "react-intl"; +import * as testRenderer from "react-test-renderer"; +import Toolbar from "./ToolBar"; +import * as TOOLBAR_SVG from "../../svgs/toolbar_svg"; +import { MICROBIT_TOOLBAR_ID } from "./SensorModalUtils"; +import { SENSOR_LIST } from "../../constants"; + +const MOCK_TOOLBAR_BUTTONS: Array<{ label: string; image: JSX.Element }> = [ + { + image: TOOLBAR_SVG.LIGHT_SVG, + label: MICROBIT_TOOLBAR_ID.LIGHT, + }, + { + image: TOOLBAR_SVG.MOTION_SVG, + label: MICROBIT_TOOLBAR_ID.ACCELEROMETER, + }, +]; +const mockUpdateSensors = () => { + return; +}; +const mockInitialValues = { + [SENSOR_LIST.TEMPERATURE]: 0, + [SENSOR_LIST.LIGHT]: 0, +}; +describe("Toolbar component ", () => { + it("should render correctly", () => { + const component = testRenderer + .create( + + + + ) + .toJSON(); + expect(component).toMatchSnapshot(); + }); + + it("should render without crashing", () => { + const div = document.createElement("div"); + ReactDOM.render( + + + , + div + ); + ReactDOM.unmountComponentAtNode(div); + }); +}); diff --git a/src/view/components/toolbar/__snapshots__/Toolbar.spec.tsx.snap b/src/view/components/toolbar/__snapshots__/Toolbar.spec.tsx.snap new file mode 100644 index 000000000..7da991a70 --- /dev/null +++ b/src/view/components/toolbar/__snapshots__/Toolbar.spec.tsx.snap @@ -0,0 +1,146 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Toolbar component should render correctly 1`] = ` +
+
+
+
+ +
+
+ +
+
+
+
+`; diff --git a/src/view/styles/ToolBar.css b/src/view/styles/ToolBar.css index b2cb2bc34..0dc843349 100644 --- a/src/view/styles/ToolBar.css +++ b/src/view/styles/ToolBar.css @@ -32,8 +32,8 @@ .sensor_modal { vertical-align: middle; width: 360px; - max-height: 240px; - overflow-y: scroll; + max-height: 300px; + overflow-y: visible; overflow-x: hidden; position: relative; height: fit-content; @@ -56,22 +56,75 @@ width: 320px; } +.info-icon { + background: var(--vscode-debugToolBar-background); + border-color: var(--vscode-highContrastButtonBorderOverride-color); + color: var(--vscode-badgeForegroundOverride); + border-width: 1px; + border-style: solid; + padding: 0px 4px; + float: right; + left: 25px; + margin-top: -10px; +} + +.info-icon:hover { + background-color: var(--vscode-terminal-selectionBackground); + color: var(--vscode-badgeForegroundOverride); +} + +.info-icon:active { + background-color: var(--vscode-editor-selectionHighlightBackground); + color: var(--vscode-badgeForegroundOverride); +} + .tag { position: absolute; left: 200px; } -.description { +.description-callout { + box-shadow: 0px 0px 20px rgba(0, 0, 0, 30%); + padding: "210px 214px 214px 210px"; + border: 2px solid var(--vscode-highContrastButtonBorderOverride-color); +} + +.description-callout .ms-Callout-beak { + background-color: var(--vscode-debugToolBar-background); +} + +.description-callout .ms-Callout-main { + background-color: var(--vscode-debugToolBar-background); + overflow-x: hidden; + overflow-y: auto; + margin: -1px; +} + +.try-it-description { -webkit-appearance: none; font-size: 14px; - color: var(--vscode-foreground); + background: var(--vscode-debugToolBar-background); word-wrap: break-word; width: 320px; + height: "100%"; margin-top: 15px; text-align: left; line-height: 17px; font-weight: 100; - opacity: 50%; +} + +.description { + -webkit-appearance: none; + color: var(--vscode-badgeForegroundOverride); + font-size: 14px; + word-wrap: break-word; + width: 320px; + height: "100%"; + text-align: left; + font-weight: 400; + padding: 10px 0px 10px 10px; + margin: 10px; + overflow-y: hidden; } .title_group { @@ -86,7 +139,7 @@ text-align: left; line-height: 17px; font-weight: 100; - opacity: 50%; + opacity: 90%; font-size: 14px; word-wrap: break-word; }