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

Remove broken drop down features #263

Merged
merged 14 commits into from
Mar 19, 2020
Merged

Remove broken drop down features #263

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
ccef460
Remove dropdown and replace it with currently running file
xnkevinnguyen Mar 17, 2020
9ded03e
Change initial save message
xnkevinnguyen Mar 17, 2020
3d07906
Only show accurate information, the message will only appear for curr…
xnkevinnguyen Mar 17, 2020
4b26c08
Modify css to avoid shifting
xnkevinnguyen Mar 17, 2020
8db36bd
Apply dropdown removal for cpx
xnkevinnguyen Mar 17, 2020
9ab039c
Update tests
xnkevinnguyen Mar 17, 2020
9fba43a
Merge branch 'dev' into users/t-xunguy/currently-running
xnkevinnguyen Mar 17, 2020
841566e
Update tests
xnkevinnguyen Mar 17, 2020
ba2b92f
Merge branch 'dev' into users/t-xunguy/currently-running
vandyliu Mar 19, 2020
bcfb3d2
Merge branch 'dev' into users/t-xunguy/currently-running
xnkevinnguyen Mar 19, 2020
5839b92
Modify experience for displaying file
xnkevinnguyen Mar 19, 2020
6bf170b
Slightly adjust css for cpx
xnkevinnguyen Mar 19, 2020
ecc9f8a
Update test according to ui change
xnkevinnguyen Mar 19, 2020
65c5f26
Change constant for dropdown
xnkevinnguyen Mar 19, 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
16 changes: 1 addition & 15 deletions src/view/__snapshots__/App.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,21 +16,7 @@ exports[`App component should render correctly 1`] = `
<div
className="file-selector"
>
<div>
<select
className="dropdown"
id="file-dropdown"
onBlur={[Function]}
>
<option
disabled={true}
selected={true}
value=""
>
Choose a .py file to run on the Simulator
</option>
</select>
</div>
The simulator will run the .py file you have focused on.
</div>
<div
className="cpx-container"
Expand Down
2 changes: 1 addition & 1 deletion src/view/components/Dropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const Dropdown: React.FC<IDropdownProps> = props => {
const defaultText =
props.lastChosen !== ""
? CONSTANTS.CURRENTLY_RUNNING(parsedPath[1])
: CONSTANTS.NO_FILES_AVAILABLE;
: CONSTANTS.FILES_PLACEHOLDER;
return (
<div>
<select
Expand Down
36 changes: 18 additions & 18 deletions src/view/components/cpx/CpxSimulator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import { sendMessage } from "../../utils/MessageUtils";
import "../../styles/Simulator.css";
import PlayLogo from "../../svgs/play_svg";
import StopLogo from "../../svgs/stop_svg";
import Dropdown from "../Dropdown";
import ActionBar from "../simulator/ActionBar";
import { BUTTON_NEUTRAL, BUTTON_PRESSED } from "./Cpx_svg_style";
import { CpxImage, updatePinTouch, updateSwitch } from "./CpxImage";
Expand All @@ -30,6 +29,7 @@ interface IState {
selected_file: string;
cpx: ICpxState;
play_button: boolean;
currently_selected_file: string;
}

const DEFAULT_CPX_STATE: ICpxState = {
Expand Down Expand Up @@ -63,6 +63,7 @@ class Simulator extends React.Component<{}, IState> {
play_button: false,
running_file: "",
selected_file: "",
currently_selected_file: "",
};

this.handleClick = this.handleClick.bind(this);
Expand All @@ -72,7 +73,6 @@ class Simulator extends React.Component<{}, IState> {
this.onMouseLeave = this.onMouseLeave.bind(this);
this.togglePlayClick = this.togglePlayClick.bind(this);
this.refreshSimulatorClick = this.refreshSimulatorClick.bind(this);
this.onSelectBlur = this.onSelectBlur.bind(this);
}

handleMessage = (event: any): void => {
Expand All @@ -98,8 +98,11 @@ class Simulator extends React.Component<{}, IState> {
});
break;
case "activate-play":
const newRunningFile = this.state.currently_selected_file;

this.setState({
play_button: !this.state.play_button,
running_file: newRunningFile,
});
break;
case "visible-editors":
Expand All @@ -113,9 +116,16 @@ class Simulator extends React.Component<{}, IState> {
break;
case "current-file":
console.log("Setting current file", message.state.running_file);
this.setState({
running_file: message.state.running_file,
});
if (this.state.play_button) {
this.setState({
currently_selected_file: message.state.running_file,
});
} else {
this.setState({
running_file: message.state.running_file,
currently_selected_file: message.state.running_file,
});
}
break;
}
};
Expand All @@ -136,14 +146,9 @@ class Simulator extends React.Component<{}, IState> {
return (
<div className="simulator">
<div className="file-selector">
<Dropdown
label={"file-dropdown"}
styleLabel={"dropdown"}
lastChosen={this.state.running_file}
width={300}
textOptions={this.state.active_editors}
onBlur={this.onSelectBlur}
/>
{this.state.running_file && this.state.play_button
? CONSTANTS.CURRENTLY_RUNNING(this.state.running_file)
: CONSTANTS.FILES_PLACEHOLDER}
</div>
<div className="cpx-container">
<CpxImage
Expand Down Expand Up @@ -191,11 +196,6 @@ class Simulator extends React.Component<{}, IState> {
sendMessage(WEBVIEW_MESSAGES.REFRESH_SIMULATOR, true);
}

protected onSelectBlur(event: React.FocusEvent<HTMLSelectElement>) {
this.setState({
selected_file: event.currentTarget.value,
});
}
protected onKeyEvent(event: KeyboardEvent, active: boolean) {
let element;
const target = event.target as SVGElement;
Expand Down
16 changes: 1 addition & 15 deletions src/view/components/cpx/__snapshots__/Cpx.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,21 +8,7 @@ Array [
<div
className="file-selector"
>
<div>
<select
className="dropdown"
id="file-dropdown"
onBlur={[Function]}
>
<option
disabled={true}
selected={true}
value=""
>
Choose a .py file to run on the Simulator
</option>
</select>
</div>
The simulator will run the .py file you have focused on.
</div>
<div
className="cpx-container"
Expand Down
41 changes: 22 additions & 19 deletions src/view/components/microbit/MicrobitSimulator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import {
import PlayLogo from "../../svgs/play_svg";
import StopLogo from "../../svgs/stop_svg";
import { sendMessage } from "../../utils/MessageUtils";
import Dropdown from "../Dropdown";
import ActionBar from "../simulator/ActionBar";
import { BUTTONS_KEYS, MicrobitImage } from "./MicrobitImage";

Expand All @@ -25,7 +24,8 @@ const DEFAULT_MICROBIT_STATE: IMicrobitState = {

interface IState {
active_editors: string[];
running_file: string;
running_file?: string;
currently_selected_file: string;
play_button: boolean;
selected_file: string;
microbit: IMicrobitState;
Expand All @@ -44,7 +44,8 @@ export class MicrobitSimulator extends React.Component<any, IState> {
play_button: false,
selected_file: "",
active_editors: [],
running_file: "",
running_file: undefined,
currently_selected_file: "",
};
this.onKeyEvent = this.onKeyEvent.bind(this);
}
Expand All @@ -71,8 +72,10 @@ export class MicrobitSimulator extends React.Component<any, IState> {
});
break;
case "activate-play":
const newRunningFile = this.state.currently_selected_file;
this.setState({
play_button: !this.state.play_button,
running_file: newRunningFile,
});
break;
case "visible-editors":
Expand All @@ -81,9 +84,17 @@ export class MicrobitSimulator extends React.Component<any, IState> {
});
break;
case "current-file":
this.setState({
running_file: message.state.running_file,
});
if (this.state.play_button) {
this.setState({
currently_selected_file: message.state.running_file,
});
} else {
this.setState({
running_file: message.state.running_file,
currently_selected_file: message.state.running_file,
});
}

break;
}
};
Expand All @@ -100,14 +111,9 @@ export class MicrobitSimulator extends React.Component<any, IState> {
return (
<div className="simulator">
<div className="file-selector">
<Dropdown
label={"file-dropdown"}
styleLabel={"dropdown"}
lastChosen={this.state.running_file}
width={300}
textOptions={this.state.active_editors}
onBlur={this.onSelectFile}
/>
{this.state.running_file && this.state.play_button
? CONSTANTS.CURRENTLY_RUNNING(this.state.running_file)
: CONSTANTS.FILES_PLACEHOLDER}
</div>
<div className="microbit-container">
<MicrobitImage
Expand All @@ -130,6 +136,7 @@ export class MicrobitSimulator extends React.Component<any, IState> {
</div>
);
}

protected togglePlayClick = () => {
const button =
window.document.getElementById(CONSTANTS.ID_NAME.PLAY_BUTTON) ||
Expand All @@ -142,11 +149,7 @@ export class MicrobitSimulator extends React.Component<any, IState> {
state: !this.state.play_button,
});
};
protected onSelectFile(event: React.FocusEvent<HTMLSelectElement>) {
this.setState({
selected_file: event.currentTarget.value,
});
}

protected refreshSimulatorClick = () => {
const button = window.document.getElementById(
CONSTANTS.ID_NAME.REFRESH_BUTTON
Expand Down
3 changes: 2 additions & 1 deletion src/view/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,8 @@ export const CONSTANTS = {
NUMERIC_SIX: "Digit6",
NUMERIC_SEVEN: "Digit7",
},
NO_FILES_AVAILABLE: "Choose a .py file to run on the Simulator",
FILES_PLACEHOLDER:
"The simulator will run the .py file you have focused on.",
SIMULATOR_BUTTON_WIDTH: 60,
TOOLBAR_INFO: `Explore what's on the board:`,
};
Expand Down
16 changes: 1 addition & 15 deletions src/view/container/device/__snapshots__/Device.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,21 +10,7 @@ exports[`Device component should render correctly 1`] = `
<div
className="file-selector"
>
<div>
<select
className="dropdown"
id="file-dropdown"
onBlur={[Function]}
>
<option
disabled={true}
selected={true}
value=""
>
Choose a .py file to run on the Simulator
</option>
</select>
</div>
The simulator will run the .py file you have focused on.
</div>
<div
className="microbit-container"
Expand Down
5 changes: 5 additions & 0 deletions src/view/styles/Simulator.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,10 @@

.file-selector {
padding: 20px;
width: 80%;
height: 30px;
border: 1px solid var(--vscode-debugToolBar-background);
border-radius: 3px;
}

.shake-pressed {
Expand Down Expand Up @@ -70,4 +74,5 @@
}
.cpx-container {
width: 100%;
padding-top: 10px;
}