diff --git a/client/constants.js b/client/constants.js
index 50ca8f8e..8e41ad91 100644
--- a/client/constants.js
+++ b/client/constants.js
@@ -42,5 +42,11 @@ export const CONSOLE_EVENT = 'CONSOLE_EVENT';
export const EXPAND_CONSOLE = 'EXPAND_CONSOLE';
export const COLLAPSE_CONSOLE = 'COLLAPSE_CONSOLE';
+export const SHOW_FILE_OPTIONS = 'SHOW_FILE_OPTIONS';
+export const HIDE_FILE_OPTIONS = 'HIDE_FILE_OPTIONS';
+
+export const UPDATE_FILE_NAME = 'UPDATE_FILE_NAME';
+export const DELETE_FILE = 'DELETE_FILE';
+
// eventually, handle errors more specifically and better
export const ERROR = 'ERROR';
diff --git a/client/modules/IDE/actions/files.js b/client/modules/IDE/actions/files.js
index a4db7961..e7bed3a2 100644
--- a/client/modules/IDE/actions/files.js
+++ b/client/modules/IDE/actions/files.js
@@ -112,3 +112,32 @@ export function createFile(formProps) {
}
};
}
+
+export function showFileOptions(fileId) {
+ return {
+ type: ActionTypes.SHOW_FILE_OPTIONS,
+ id: fileId
+ };
+}
+
+export function hideFileOptions(fileId) {
+ return {
+ type: ActionTypes.HIDE_FILE_OPTIONS,
+ id: fileId
+ };
+}
+
+export function updateFileName(id, name) {
+ return {
+ type: ActionTypes.UPDATE_FILE_NAME,
+ id,
+ name
+ };
+}
+
+export function deleteFile(id) {
+ return {
+ type: ActionTypes.DELETE_FILE,
+ id
+ };
+}
diff --git a/client/modules/IDE/components/Sidebar.js b/client/modules/IDE/components/Sidebar.js
index b680364a..54bcd246 100644
--- a/client/modules/IDE/components/Sidebar.js
+++ b/client/modules/IDE/components/Sidebar.js
@@ -1,71 +1,84 @@
import React, { PropTypes } from 'react';
import classNames from 'classnames';
import InlineSVG from 'react-inlinesvg';
+import SidebarItem from './SidebarItem';
const rightArrowUrl = require('../../../images/right-arrow.svg');
const leftArrowUrl = require('../../../images/left-arrow.svg');
-function Sidebar(props) {
- const sidebarClass = classNames({
- sidebar: true,
- 'sidebar--contracted': !props.isExpanded
- });
+class Sidebar extends React.Component {
+ constructor(props) {
+ super(props);
+ this.resetSelectedFile = this.resetSelectedFile.bind(this);
+ }
- return (
-
+ );
+ }
}
Sidebar.propTypes = {
files: PropTypes.array.isRequired,
- selectedFile: PropTypes.shape({
- id: PropTypes.string.isRequired
- }),
- setSelectedFile: PropTypes.func.isRequired
+ setSelectedFile: PropTypes.func.isRequired,
+ isExpanded: PropTypes.bool.isRequired,
+ newFile: PropTypes.func.isRequired,
+ collapseSidebar: PropTypes.func.isRequired,
+ expandSidebar: PropTypes.func.isRequired,
+ showFileOptions: PropTypes.func.isRequired,
+ hideFileOptions: PropTypes.func.isRequired,
+ deleteFile: PropTypes.func.isRequired
};
export default Sidebar;
diff --git a/client/modules/IDE/components/SidebarItem.js b/client/modules/IDE/components/SidebarItem.js
new file mode 100644
index 00000000..6b749307
--- /dev/null
+++ b/client/modules/IDE/components/SidebarItem.js
@@ -0,0 +1,73 @@
+import React, { PropTypes } from 'react';
+import InlineSVG from 'react-inlinesvg';
+import classNames from 'classnames';
+const downArrowUrl = require('../../../images/down-arrow.svg');
+
+class SidebarItem extends React.Component {
+ onFocus() {
+
+ }
+
+ render() {
+ let itemClass = classNames({
+ 'sidebar__file-item': true,
+ 'sidebar__file-item--selected': this.props.file.isSelected,
+ 'sidebar__file-item--open': this.props.file.isOptionsOpen
+ });
+ return (
+
this.props.hideFileOptions(this.props.file.id)}
+ tabIndex={this.props.fileIndex}
+ >
+ this.props.setSelectedFile(this.props.file.id)}
+ >{this.props.file.name}
+ this.props.showFileOptions(this.props.file.id)}
+ >
+
+
+
+
+ );
+ }
+}
+
+SidebarItem.propTypes = {
+ file: PropTypes.shape({
+ id: PropTypes.string.isRequired,
+ name: PropTypes.string.isRequired,
+ isSelected: PropTypes.bool,
+ isOptionsOpen: PropTypes.bool
+ }).isRequired,
+ setSelectedFile: PropTypes.func.isRequired,
+ fileIndex: PropTypes.number.isRequired,
+ showFileOptions: PropTypes.func.isRequired,
+ hideFileOptions: PropTypes.func.isRequired,
+ deleteFile: PropTypes.func.isRequired,
+ resetSelectedFile: PropTypes.func.isRequired
+};
+
+export default SidebarItem;
diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js
index c5dfd30f..db31bedb 100644
--- a/client/modules/IDE/pages/IDEView.js
+++ b/client/modules/IDE/pages/IDEView.js
@@ -12,7 +12,7 @@ import { connect } from 'react-redux';
import * as FileActions from '../actions/files';
import * as IDEActions from '../actions/ide';
import * as ProjectActions from '../actions/project';
-import { getFile, getHTMLFile, getJSFiles, getCSSFiles } from '../reducers/files';
+import { getFile, getHTMLFile, getJSFiles, getCSSFiles, setSelectedFile } from '../reducers/files';
class IDEView extends React.Component {
componentDidMount() {
@@ -50,12 +50,14 @@ class IDEView extends React.Component {
{
return [...action.files];
case ActionTypes.CREATE_FILE:
return [...state, { name: action.name, id: action.id, content: '', url: action.url }];
+ case ActionTypes.SHOW_FILE_OPTIONS:
+ return state.map(file => {
+ if (file.id !== action.id) {
+ return file;
+ }
+
+ return Object.assign({}, file, { isOptionsOpen: true });
+ });
+ case ActionTypes.HIDE_FILE_OPTIONS:
+ return state.map(file => {
+ if (file.id !== action.id) {
+ return file;
+ }
+
+ return Object.assign({}, file, { isOptionsOpen: false });
+ });
+ case ActionTypes.UPDATE_FILE_NAME:
+ return state.map(file => {
+ if (file.id !== action.id) {
+ return file;
+ }
+
+ return Object.assign({}, file, { name: action.name });
+ });
+ case ActionTypes.DELETE_FILE:
+ return state.filter(file => file.id !== action.id);
default:
return state;
}
};
+export const setSelectedFile = (state, id) =>
+ state.map(file => {
+ if (file.id === id) {
+ return Object.assign({}, file, { isSelected: true });
+ }
+ return file;
+ });
+
export const getFile = (state, id) => state.filter(file => file.id === id)[0];
export const getHTMLFile = (state) => state.filter(file => file.name.match(/.*\.html$/))[0];
export const getJSFiles = (state) => state.filter(file => file.name.match(/.*\.js$/));
diff --git a/client/styles/components/_sidebar.scss b/client/styles/components/_sidebar.scss
index 5dcd5725..b42dd303 100644
--- a/client/styles/components/_sidebar.scss
+++ b/client/styles/components/_sidebar.scss
@@ -38,11 +38,37 @@
padding: #{8 / $base-font-size}rem #{20 / $base-font-size}rem;
color: $light-inactive-text-color;
cursor: pointer;
+ display: flex;
+ justify-content: space-between;
+ position: relative;
&--selected {
background-color: $ide-border-color;
}
}
+.sidebar__file-item-show-options {
+ @extend %icon;
+ display: none;
+ .sidebar__file-item--selected & {
+ display: inline-block;
+ }
+}
+
+.sidebar__file-item-options {
+ @extend %modal;
+ position: absolute;
+ top: 95%;
+ left: 77%;
+ display: none;
+ z-index: 100;
+ padding: #{8 / $base-font-size}rem #{16 / $base-font-size}rem;
+ background-color: $light-modal-background-color;
+ z-index: 100;
+ .sidebar__file-item--open & {
+ display: block;
+ }
+}
+
.sidebar__contract {
@extend %icon;
height: #{14 / $base-font-size}rem;