refactor stop and stop sketch actions, add start and stop sketch to nav

This commit is contained in:
Cassie Tarakajian 2017-09-14 17:57:09 -04:00
parent 34cf86326b
commit a92f4f5b3c
4 changed files with 59 additions and 33 deletions

View file

@ -241,7 +241,6 @@ class Nav extends React.PureComponent {
</li> </li>
</ul> </ul>
</li> </li>
{/*
<li className={navDropdownState.sketch}> <li className={navDropdownState.sketch}>
<button <button
onClick={this.toggleDropdown.bind(this, 'sketch')} onClick={this.toggleDropdown.bind(this, 'sketch')}
@ -257,14 +256,27 @@ class Nav extends React.PureComponent {
<InlineSVG src={triangleUrl} /> <InlineSVG src={triangleUrl} />
</li> </li>
<li className="nav__dropdown-item"> <li className="nav__dropdown-item">
Run <button
onClick={this.props.startSketch}
onFocus={this.handleFocus.bind(this, 'sketch')}
onBlur={this.handleBlur}
>
Run
<span className="nav__keyboard-shortcut">{metaKeyName}+Enter</span>
</button>
</li> </li>
<li className="nav__dropdown-item"> <li className="nav__dropdown-item">
Stop <button
onClick={this.props.stopSketch}
onFocus={this.handleFocus.bind(this, 'sketch')}
onBlur={this.handleBlur}
>
Stop
<span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+Enter</span>
</button>
</li> </li>
</ul> </ul>
</li> </li>
*/}
<li className={navDropdownState.help}> <li className={navDropdownState.help}>
<button <button
onClick={this.toggleDropdown.bind(this, 'help')} onClick={this.toggleDropdown.bind(this, 'help')}
@ -418,7 +430,9 @@ Nav.propTypes = {
showFind: PropTypes.func, showFind: PropTypes.func,
findNext: PropTypes.func, findNext: PropTypes.func,
findPrev: PropTypes.func findPrev: PropTypes.func
}) }),
startSketch: PropTypes.func.isRequired,
stopSketch: PropTypes.func.isRequired
}; };
Nav.defaultProps = { Nav.defaultProps = {

View file

@ -1,12 +1,13 @@
import * as ActionTypes from '../../../constants'; import * as ActionTypes from '../../../constants';
import { clearConsole } from './console';
export function startSketch() { export function startVisualSketch() {
return { return {
type: ActionTypes.START_SKETCH type: ActionTypes.START_SKETCH
}; };
} }
export function stopSketch() { export function stopVisualSketch() {
return { return {
type: ActionTypes.STOP_SKETCH type: ActionTypes.STOP_SKETCH
}; };
@ -20,7 +21,7 @@ export function startRefreshSketch() {
export function startSketchAndRefresh() { export function startSketchAndRefresh() {
return (dispatch) => { return (dispatch) => {
dispatch(startSketch()); dispatch(startVisualSketch());
dispatch(startRefreshSketch()); dispatch(startRefreshSketch());
}; };
} }
@ -233,3 +234,26 @@ export function hideHelpModal() {
type: ActionTypes.HIDE_HELP_MODAL type: ActionTypes.HIDE_HELP_MODAL
}; };
} }
export function startSketch() {
return (dispatch) => {
dispatch(clearConsole());
dispatch(startSketchAndRefresh());
};
}
export function startAccessibleSketch() {
return (dispatch) => {
dispatch(clearConsole());
dispatch(startAccessibleOutput());
dispatch(startSketchAndRefresh());
};
}
export function stopSketch() {
return (dispatch) => {
dispatch(stopAccessibleOutput());
dispatch(stopVisualSketch());
};
}

View file

@ -60,11 +60,7 @@ class Toolbar extends React.Component {
<div className="toolbar"> <div className="toolbar">
<button <button
className="toolbar__play-sketch-button" className="toolbar__play-sketch-button"
onClick={() => { onClick={this.props.startAccessibleSketch}
this.props.clearConsole();
this.props.startAccessibleOutput();
this.props.startSketchAndRefresh();
}}
aria-label="play sketch" aria-label="play sketch"
disabled={this.props.infiniteLoop} disabled={this.props.infiniteLoop}
> >
@ -72,10 +68,7 @@ class Toolbar extends React.Component {
</button> </button>
<button <button
className={playButtonClass} className={playButtonClass}
onClick={() => { onClick={this.props.startSketch}
this.props.clearConsole();
this.props.startSketchAndRefresh();
}}
aria-label="play only visual sketch" aria-label="play only visual sketch"
disabled={this.props.infiniteLoop} disabled={this.props.infiniteLoop}
> >
@ -83,7 +76,7 @@ class Toolbar extends React.Component {
</button> </button>
<button <button
className={stopButtonClass} className={stopButtonClass}
onClick={() => { this.props.stopAccessibleOutput(); this.props.stopSketch(); }} onClick={this.props.stopSketch}
aria-label="stop sketch" aria-label="stop sketch"
> >
<InlineSVG src={stopUrl} alt="Stop Sketch" /> <InlineSVG src={stopUrl} alt="Stop Sketch" />
@ -185,8 +178,6 @@ Toolbar.propTypes = {
isPlaying: PropTypes.bool.isRequired, isPlaying: PropTypes.bool.isRequired,
preferencesIsVisible: PropTypes.bool.isRequired, preferencesIsVisible: PropTypes.bool.isRequired,
stopSketch: PropTypes.func.isRequired, stopSketch: PropTypes.func.isRequired,
startAccessibleOutput: PropTypes.func.isRequired,
stopAccessibleOutput: PropTypes.func.isRequired,
setProjectName: PropTypes.func.isRequired, setProjectName: PropTypes.func.isRequired,
openPreferences: PropTypes.func.isRequired, openPreferences: PropTypes.func.isRequired,
owner: PropTypes.shape({ owner: PropTypes.shape({
@ -205,10 +196,10 @@ Toolbar.propTypes = {
autorefresh: PropTypes.bool.isRequired, autorefresh: PropTypes.bool.isRequired,
setAutorefresh: PropTypes.func.isRequired, setAutorefresh: PropTypes.func.isRequired,
setServeSecure: PropTypes.func.isRequired, setServeSecure: PropTypes.func.isRequired,
startSketchAndRefresh: PropTypes.func.isRequired, startSketch: PropTypes.func.isRequired,
startAccessibleSketch: PropTypes.func.isRequired,
saveProject: PropTypes.func.isRequired, saveProject: PropTypes.func.isRequired,
currentUser: PropTypes.string, currentUser: PropTypes.string
clearConsole: PropTypes.func.isRequired
}; };
Toolbar.defaultProps = { Toolbar.defaultProps = {

View file

@ -165,8 +165,7 @@ class IDEView extends React.Component {
} else if (e.keyCode === 13 && ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac))) { } else if (e.keyCode === 13 && ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac))) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
this.props.clearConsole(); this.props.startSketch();
this.props.startSketchAndRefresh();
} else if (e.keyCode === 50 && ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac)) && e.shiftKey) { } else if (e.keyCode === 50 && ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac)) && e.shiftKey) {
e.preventDefault(); e.preventDefault();
this.props.setTextOutput(false); this.props.setTextOutput(false);
@ -213,6 +212,7 @@ class IDEView extends React.Component {
cloneProject={this.props.cloneProject} cloneProject={this.props.cloneProject}
project={this.props.project} project={this.props.project}
logoutUser={this.props.logoutUser} logoutUser={this.props.logoutUser}
startSketch={this.props.startSketch}
stopSketch={this.props.stopSketch} stopSketch={this.props.stopSketch}
showShareModal={this.props.showShareModal} showShareModal={this.props.showShareModal}
showErrorModal={this.props.showErrorModal} showErrorModal={this.props.showErrorModal}
@ -225,8 +225,6 @@ class IDEView extends React.Component {
className="Toolbar" className="Toolbar"
isPlaying={this.props.ide.isPlaying} isPlaying={this.props.ide.isPlaying}
stopSketch={this.props.stopSketch} stopSketch={this.props.stopSketch}
startAccessibleOutput={this.props.startAccessibleOutput}
stopAccessibleOutput={this.props.stopAccessibleOutput}
projectName={this.props.project.name} projectName={this.props.project.name}
setProjectName={this.props.setProjectName} setProjectName={this.props.setProjectName}
showEditProjectName={this.props.showEditProjectName} showEditProjectName={this.props.showEditProjectName}
@ -243,10 +241,10 @@ class IDEView extends React.Component {
infiniteLoop={this.props.ide.infiniteLoop} infiniteLoop={this.props.ide.infiniteLoop}
autorefresh={this.props.preferences.autorefresh} autorefresh={this.props.preferences.autorefresh}
setAutorefresh={this.props.setAutorefresh} setAutorefresh={this.props.setAutorefresh}
startSketchAndRefresh={this.props.startSketchAndRefresh} startSketch={this.props.startSketch}
startAccessibleSketch={this.props.startAccessibleSketch}
saveProject={this.props.saveProject} saveProject={this.props.saveProject}
currentUser={this.props.user.username} currentUser={this.props.user.username}
clearConsole={this.props.clearConsole}
showHelpModal={this.props.showHelpModal} showHelpModal={this.props.showHelpModal}
/> />
<Preferences <Preferences
@ -574,8 +572,6 @@ IDEView.propTypes = {
helpType: PropTypes.string helpType: PropTypes.string
}).isRequired, }).isRequired,
stopSketch: PropTypes.func.isRequired, stopSketch: PropTypes.func.isRequired,
startAccessibleOutput: PropTypes.func.isRequired,
stopAccessibleOutput: PropTypes.func.isRequired,
project: PropTypes.shape({ project: PropTypes.shape({
id: PropTypes.string, id: PropTypes.string,
name: PropTypes.string.isRequired, name: PropTypes.string.isRequired,
@ -674,7 +670,6 @@ IDEView.propTypes = {
setUnsavedChanges: PropTypes.func.isRequired, setUnsavedChanges: PropTypes.func.isRequired,
setTheme: PropTypes.func.isRequired, setTheme: PropTypes.func.isRequired,
setAutorefresh: PropTypes.func.isRequired, setAutorefresh: PropTypes.func.isRequired,
startSketchAndRefresh: PropTypes.func.isRequired,
endSketchRefresh: PropTypes.func.isRequired, endSketchRefresh: PropTypes.func.isRequired,
startRefreshSketch: PropTypes.func.isRequired, startRefreshSketch: PropTypes.func.isRequired,
setBlobUrl: PropTypes.func.isRequired, setBlobUrl: PropTypes.func.isRequired,
@ -689,7 +684,9 @@ IDEView.propTypes = {
clearPersistedState: PropTypes.func.isRequired, clearPersistedState: PropTypes.func.isRequired,
persistState: PropTypes.func.isRequired, persistState: PropTypes.func.isRequired,
showHelpModal: PropTypes.func.isRequired, showHelpModal: PropTypes.func.isRequired,
hideHelpModal: PropTypes.func.isRequired hideHelpModal: PropTypes.func.isRequired,
startSketch: PropTypes.func.isRequired,
startAccessibleSketch: PropTypes.func.isRequired
}; };
function mapStateToProps(state) { function mapStateToProps(state) {