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

Description UI change to Callout #261

Merged
merged 17 commits into from
Mar 18, 2020
Merged

Description UI change to Callout #261

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
8f7f33c
first commit
Mar 11, 2020
f1ab593
Played around with toolbar
Mar 12, 2020
14605d1
Minor CSS Changes
Mar 12, 2020
f4f2ab4
changed boldness and color; still need to change color background for…
vandyliu Mar 15, 2020
832e5af
Done for dark mode
vandyliu Mar 15, 2020
5aae68e
Updated for high contrast mode
vandyliu Mar 16, 2020
151cb3b
removed unused api
vandyliu Mar 16, 2020
2e9150a
Merge branch 'dev' into users/t-vali/description-ui-change
vandyliu Mar 16, 2020
f5a6b72
Ran formatter
vandyliu Mar 16, 2020
b233146
Update import statement with office ui
xnkevinnguyen Mar 16, 2020
22882eb
Merge branch 'users/t-vali/description-ui-change' of https://github.c…
xnkevinnguyen Mar 16, 2020
bd7b2c3
Add initial tests for toolbar
xnkevinnguyen Mar 16, 2020
2c0f57d
Merge branch 'dev' into users/t-vali/description-ui-change
vandyliu Mar 16, 2020
6a3fcc1
Merge branch 'dev' into users/t-vali/description-ui-change
vandyliu Mar 17, 2020
619e448
Merge branch 'dev' into users/t-vali/description-ui-change
vandyliu Mar 18, 2020
2cc5969
Added back icons
vandyliu Mar 18, 2020
4f69d07
Change opacity
vandyliu Mar 18, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

45 changes: 40 additions & 5 deletions src/view/components/toolbar/ToolBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -19,6 +21,7 @@ import {
interface IToolbarState {
currentOpenedId: string;
showModal: boolean;
isDescriptionVisible: boolean;
}

interface IProps extends WrappedComponentProps {
Expand All @@ -35,8 +38,10 @@ class ToolBar extends React.Component<IProps, IToolbarState, any> {

constructor(props: IProps) {
super(props);
initializeIcons();
this.state = {
currentOpenedId: "",
isDescriptionVisible: false,
showModal: false,
};
}
Expand Down Expand Up @@ -129,6 +134,18 @@ class ToolBar extends React.Component<IProps, IToolbarState, any> {
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 ||
Expand All @@ -150,22 +167,40 @@ class ToolBar extends React.Component<IProps, IToolbarState, any> {
const component = content
? content.component
: DEFAULT_MODAL_CONTENT.component;

return (
<div className="sensor_modal">
<div className="title_group">
<span className="title">
<FormattedMessage id={content.descriptionTitle} />
{content.tagInput}
{content.tagOutput}
<IconButton
onClick={this.onShowDescriptionClicked}
iconProps={{ iconName: "Info" }}
title="Info"
ariaLabel="More Information Button"
className="info-icon"
/>
</span>
</div>
<br />
<div className="description">
<FormattedMessage id={content.descriptionText} />
</div>
{this.state.isDescriptionVisible && (
<Callout
className="description-callout"
role="textbox"
target=".info-icon"
setInitialFocus={true}
onDismiss={this.onDescriptionDismiss}
>
<div className="description">
<FormattedMessage id={content.descriptionText} />
</div>
</Callout>
)}
<div className="try_area">
<br />
<span className="description">
<span className="try-it-description">
<FormattedMessage id={content.tryItDescription} />
</span>
<br />
Expand Down
57 changes: 57 additions & 0 deletions src/view/components/toolbar/Toolbar.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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(
<IntlProvider locale="en">
<Toolbar
buttonList={MOCK_TOOLBAR_BUTTONS}
onUpdateSensor={mockUpdateSensors}
sensorValues={mockInitialValues}
/>
</IntlProvider>
)
.toJSON();
expect(component).toMatchSnapshot();
});

it("should render without crashing", () => {
const div = document.createElement("div");
ReactDOM.render(
<IntlProvider locale="en">
<Toolbar
buttonList={MOCK_TOOLBAR_BUTTONS}
onUpdateSensor={mockUpdateSensors}
sensorValues={mockInitialValues}
/>
</IntlProvider>,
div
);
ReactDOM.unmountComponentAtNode(div);
});
});
146 changes: 146 additions & 0 deletions src/view/components/toolbar/__snapshots__/Toolbar.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Toolbar component should render correctly 1`] = `
<div
className="toolbar-parent"
id="toolbar-parent"
>
<div
className="toolbar"
>
<div
className="toolbar-icon"
>
<div
className="ms-TooltipHost root-49"
onBlurCapture={[Function]}
onFocusCapture={[Function]}
onKeyDown={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
<button
aria-label="toolbar light-sensor"
className="toolbar-button button"
id="toolbar-light-sensor-button"
onClick={[Function]}
role="button"
style={
Object {
"width": 32,
}
}
tabIndex={0}
>
<svg
fill="none"
height="16px"
version="1.1"
viewBox="0 0 16 16"
width="16px"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<title>
Light sensor
</title>
<g
fill="none"
fill-rule="evenodd"
id="light_sensor"
stroke="none"
stroke-width="1"
>
<g
className="button-icon"
fill-rule="nonzero"
id="Group-10"
transform="translate(4.000000, 0.000000)"
>
<g
id="light-bulb"
>
<path
d="M8.30374549,6.20872934 L7.44295783,8.17745143 C7.23654761,8.7386575 7.20852246,8.7656952 6.99231195,9.20813126 L6.45540049,10.4361106 C6.46864532,10.5933327 6.46346172,11 6.05537849,11 L2.94465012,11 C2.68129241,11 2.58708458,10.8227848 2.55655729,10.6570975 L2.54351121,10.6570975 L0,4.83978978 L0.0886634694,4.84519734 C0.0290289823,4.57964193 -0.00106181819,4.307929 2.86084252e-05,4.03423261 C0.00757892,1.8945771 1.94423384,0.0877568873 4.31880683,0.00284992256 C5.55705792,-0.0379054205 6.72735622,0.359459175 7.61829298,1.13041441 C8.50922975,1.89797338 9,2.93723463 9,4.04781772 C9,4.82474009 8.75968094,5.56322682 8.30374549,6.20872934 Z"
id="Shape"
/>
<path
d="M6.5,12.4 C6.82926694,12.4 7.1,12.6707331 7.1,13 C7.1,13.3307854 6.83256829,13.6 6.5,13.6 L2.5,13.6 C2.16921459,13.6 1.9,13.3325683 1.9,13 C1.9,12.6692146 2.16743171,12.4 2.5,12.4 L6.5,12.4 Z"
id="Shape"
/>
<path
d="M5.66965517,14.8 C5.96435528,14.8 6.2,15.0737859 6.2,15.4 C6.2,15.7277609 5.9672384,16 5.66965517,16 L3.53034483,16 C3.23437963,16 3,15.7294873 3,15.4 C3,15.0722391 3.2327616,14.8 3.53034483,14.8 L5.66965517,14.8 Z"
id="Shape"
/>
</g>
</g>
</g>
</svg>
</button>
</div>
<div
className="ms-TooltipHost root-49"
onBlurCapture={[Function]}
onFocusCapture={[Function]}
onKeyDown={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
<button
aria-label="toolbar accelerometer-sensor"
className="toolbar-button button"
id="toolbar-accelerometer-sensor-button"
onClick={[Function]}
role="button"
style={
Object {
"width": 32,
}
}
tabIndex={0}
>
<svg
fill="none"
height="16px"
version="1.1"
viewBox="0 0 17 16"
width="17px"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
fill="none"
fill-rule="evenodd"
id="motion_sensor"
stroke="none"
stroke-width="1"
>
<g
className="button-icon"
id="Group-10"
>
<g
id="Group-12"
>
<path
d="M8,8.8203 L5.88,11.9103 L8,11.9103 L8,12.5493 L5,12.5493 L5,12.0303 L7.12,8.9403 L5.12,8.9403 L5.12,8.2993 L8,8.2993 L8,8.8203 Z M17,10.5903 L13.87,8.7903 L13.87,9.9903 L11.76,9.9903 C11.63,8.7803 11.1,7.6503 10.25,6.7693 C9.39,5.9103 8.25,5.3703 7.04,5.2403 L7.04,3.1203 L8.23,3.1203 L6.38,0.0003 L4.63,3.1203 L5.83,3.1203 L5.83,5.2403 C4.5,5.3803 3.27,6.0003 2.38,6.9803 C1.48,7.9693 0.99,9.2503 1,10.5703 C0.99,11.2803 1.12,11.9903 1.38,12.6393 C1.65,13.2993 2.04,13.9003 2.54,14.4103 C3.04,14.9103 3.64,15.3093 4.3,15.5903 C4.96,15.8603 5.66,16.0003 6.38,16.0003 C7.72,16.0093 9.01,15.5193 10.01,14.6303 C11,13.7403 11.63,12.5093 11.76,11.1903 L13.87,11.1903 L13.87,12.3893 L17,10.5903 Z"
id="Fill-1"
/>
<polygon
id="Fill-3"
points="2.3398 4 2.9998 4 2.9998 2.42 4.3398 0 3.6108 0 2.6698 1.75 1.7598 0 0.9998 0 2.3398 2.4"
/>
<polygon
id="Fill-10"
points="14.54 4.0098 13.69 5.5198 12.84 4.0098 12.05 4.0098 13.269 6.0098 12 8.1398 12.769 8.1398 13.67 6.5498 14.58 8.1398 15.37 8.1398 14.08 5.9998 15.31 3.9998"
/>
</g>
</g>
</g>
</svg>
</button>
</div>
</div>
</div>
</div>
`;
Loading