From 17efc4277808b50703abf48926fa07ba08f4fa91 Mon Sep 17 00:00:00 2001 From: catarak Date: Mon, 15 Aug 2016 12:42:13 -0400 Subject: [PATCH] switch project name edit to html5 input --- client/constants.js | 2 + client/modules/IDE/actions/project.js | 15 +- client/modules/IDE/components/SidebarItem.js | 1 - client/modules/IDE/components/Toolbar.js | 142 ++++++++++++------- client/modules/IDE/pages/IDEView.js | 8 +- client/modules/IDE/reducers/project.js | 4 + client/styles/components/_toolbar.scss | 12 ++ 7 files changed, 130 insertions(+), 54 deletions(-) diff --git a/client/constants.js b/client/constants.js index f71c2317..cabaa570 100644 --- a/client/constants.js +++ b/client/constants.js @@ -27,6 +27,8 @@ export const PROJECT_SAVE_SUCCESS = 'PROJECT_SAVE_SUCCESS'; export const PROJECT_SAVE_FAIL = 'PROJECT_SAVE_FAIL'; export const NEW_PROJECT = 'NEW_PROJECT'; export const RESET_PROJECT = 'RESET_PROJECT'; +export const SHOW_EDIT_PROJECT_NAME = 'SHOW_EDIT_PROJECT_NAME'; +export const HIDE_EDIT_PROJECT_NAME = 'HIDE_EDIT_PROJECT_NAME'; export const SET_PROJECT = 'SET_PROJECT'; export const SET_PROJECTS = 'SET_PROJECTS'; diff --git a/client/modules/IDE/actions/project.js b/client/modules/IDE/actions/project.js index d541a49f..926b88b9 100644 --- a/client/modules/IDE/actions/project.js +++ b/client/modules/IDE/actions/project.js @@ -41,8 +41,7 @@ export function getProject(id) { }; } -export function setProjectName(event) { - const name = event.target.textContent; +export function setProjectName(name) { return { type: ActionTypes.SET_PROJECT_NAME, name @@ -171,3 +170,15 @@ export function cloneProject() { }; } +export function showEditProjectName() { + return { + type: ActionTypes.SHOW_EDIT_PROJECT_NAME + }; +} + +export function hideEditProjectName() { + return { + type: ActionTypes.HIDE_EDIT_PROJECT_NAME + }; +} + diff --git a/client/modules/IDE/components/SidebarItem.js b/client/modules/IDE/components/SidebarItem.js index 4d58377a..f68e0706 100644 --- a/client/modules/IDE/components/SidebarItem.js +++ b/client/modules/IDE/components/SidebarItem.js @@ -16,7 +16,6 @@ class SidebarItem extends React.Component { } handleKeyPress(event) { - console.log(event.key); if (event.key === 'Enter') { this.props.hideEditFileName(this.props.file.id); } diff --git a/client/modules/IDE/components/Toolbar.js b/client/modules/IDE/components/Toolbar.js index c69f04c5..463c2045 100644 --- a/client/modules/IDE/components/Toolbar.js +++ b/client/modules/IDE/components/Toolbar.js @@ -6,57 +6,96 @@ const stopUrl = require('../../../images/stop.svg'); const preferencesUrl = require('../../../images/preferences.svg'); import classNames from 'classnames'; -function Toolbar(props) { - let playButtonClass = classNames({ - 'toolbar__play-button': true, - 'toolbar__play-button--selected': props.isPlaying - }); - let stopButtonClass = classNames({ - 'toolbar__stop-button': true, - 'toolbar__stop-button--selected': !props.isPlaying - }); - let preferencesButtonClass = classNames({ - 'toolbar__preferences-button': true, - 'toolbar__preferences-button--selected': props.preferencesIsVisible - }); +class Toolbar extends React.Component { + constructor(props) { + super(props); + this.handleKeyPress = this.handleKeyPress.bind(this); + this.handleProjectNameChange = this.handleProjectNameChange.bind(this); + } - return ( -
- p5js Logo - + handleKeyPress(event) { + if (event.key === 'Enter') { + this.props.hideEditProjectName(); + } + } - -
- + p5js Logo + + + +
+ { + this.originalProjectName = this.props.project.name; + this.props.showEditProjectName(); + setTimeout(() => this.refs.projectNameInput.focus(), 0); + }} + >{this.props.project.name} + { + this.validateProjectName(); + this.props.hideEditProjectName(); + }} + onKeyPress={this.handleKeyPress} + /> + {(() => { // eslint-disable-line + if (this.props.owner) { + return ( +

by {this.props.owner.username}

+ ); + } + })()} +
+
- -
- ); + ); + } } Toolbar.propTypes = { @@ -65,11 +104,16 @@ Toolbar.propTypes = { startSketch: PropTypes.func.isRequired, stopSketch: PropTypes.func.isRequired, setProjectName: PropTypes.func.isRequired, - projectName: PropTypes.string.isRequired, openPreferences: PropTypes.func.isRequired, owner: PropTypes.shape({ username: PropTypes.string - }) + }), + project: PropTypes.shape({ + name: PropTypes.string.isRequired, + isEditingName: PropTypes.bool + }).isRequired, + showEditProjectName: PropTypes.func.isRequired, + hideEditProjectName: PropTypes.func.isRequired }; export default Toolbar; diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js index ae73357b..4da5c9b1 100644 --- a/client/modules/IDE/pages/IDEView.js +++ b/client/modules/IDE/pages/IDEView.js @@ -113,11 +113,13 @@ class IDEView extends React.Component { isPlaying={this.props.ide.isPlaying} startSketch={this.props.startSketch} stopSketch={this.props.stopSketch} - projectName={this.props.project.name} setProjectName={this.props.setProjectName} + showEditProjectName={this.props.showEditProjectName} + hideEditProjectName={this.props.hideEditProjectName} openPreferences={this.props.openPreferences} preferencesIsVisible={this.props.ide.preferencesIsVisible} owner={this.props.project.owner} + project={this.props.project} /> { }; case ActionTypes.RESET_PROJECT: return initialState; + case ActionTypes.SHOW_EDIT_PROJECT_NAME: + return Object.assign({}, state, { isEditingName: true }); + case ActionTypes.HIDE_EDIT_PROJECT_NAME: + return Object.assign({}, state, { isEditingName: false }); default: return state; } diff --git a/client/styles/components/_toolbar.scss b/client/styles/components/_toolbar.scss index 3716c907..77ba6109 100644 --- a/client/styles/components/_toolbar.scss +++ b/client/styles/components/_toolbar.scss @@ -53,6 +53,18 @@ &:focus { color: $light-inactive-text-color; } + + .toolbar__project-name-container--editing & { + display: none; + } +} + +.toolbar__project-name-input { + display: none; + border: 0px; + .toolbar__project-name-container--editing & { + display: block; + } } .toolbar__project-owner {