Merge pull request #183 from kenwheeler/master

Cell Toolbar

index.html

@@ -6,6 +6,7 @@
     <link rel="stylesheet" href="./node_modules/codemirror/lib/codemirror.css"/>
     <link rel="stylesheet" href="./node_modules/source-sans-pro/source-sans-pro.css"/>
     <link rel="stylesheet" href="./node_modules/source-code-pro/source-code-pro.css"/>
+    <link rel="stylesheet" href="./node_modules/material-design-icons/iconfont/material-icons.css"/>
     <link rel="stylesheet" href="./styles/cm-composition.css"/>
     <link rel="stylesheet" href="./styles/main.css"/>
   </head>

package.json

@@ -36,6 +36,7 @@
     "history": "^1.17.0",
     "immutable": "^3.7.6",
     "kernelspecs": "^1.0.1",
+    "material-design-icons": "^2.2.0",
     "normalize.css": "^3.0.3",
     "react": "^0.14.7",
     "react-code-mirror": "^3.0.6",

src/actions/constants.js

@@ -15,6 +15,8 @@ export const SET_SELECTED = Symbol('SET_SELECTED');
 export const READ_NOTEBOOK = Symbol('READ_NOTEBOOK');
 
 export const MOVE_CELL = Symbol('MOVE_CELL');
+export const REMOVE_CELL = Symbol('REMOVE_CELL');
+
 export const NEW_CELL_AFTER = Symbol('NEW_CELL_AFTER');
 export const UPDATE_CELL_EXECUTION_COUNT = Symbol('UPDATE_CELL_EXECUTION_COUNT');
 export const UPDATE_CELL_OUTPUTS = Symbol('UPDATE_CELL_OUTPUTS');

src/actions/index.js

@@ -18,6 +18,7 @@ import {
   UPDATE_CELL_OUTPUTS,
   MOVE_CELL,
   NEW_CELL_AFTER,
+  REMOVE_CELL,
   UPDATE_CELL_EXECUTION_COUNT,
   READ_NOTEBOOK,
   ERROR_KERNEL_NOT_CONNECTED,
@@ -133,6 +134,13 @@ export function moveCell(id, destinationId, above) {
   };
 }
 
+export function removeCell(id) {
+  return {
+    type: REMOVE_CELL,
+    id,
+  };
+}
+
 export function createCellAfter(cellType, id) {
   return {
     type: NEW_CELL_AFTER,

src/components/cell/cell.js

@@ -2,6 +2,7 @@ import React from 'react';
 
 import CodeCell from './code-cell';
 import MarkdownCell from './markdown-cell';
+import Toolbar from './toolbar';
 
 import { setSelected } from '../../actions';
 
@@ -36,6 +37,9 @@ class Cell extends React.Component {
       <div
         onClick={this.setSelected}
         className={'cell ' + selected}>
+        {
+          this.props.isSelected && <Toolbar {...this.props}/>
+        }
         {
         type === 'markdown' ?
           <MarkdownCell {...this.props}/> :

src/components/cell/toolbar.js

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import { executeCell, removeCell } from '../../actions';
+
+class Toolbar extends React.Component {
+  static displayName = 'Toolbar';
+
+  static propTypes = {
+    cell: React.PropTypes.any,
+    id: React.PropTypes.string,
+    isSelected: React.PropTypes.bool,
+  };
+
+  static contextTypes = {
+    dispatch: React.PropTypes.func,
+  };
+
+  constructor(props) {
+    super(props);
+    this.removeCell = this.removeCell.bind(this);
+    this.executeCell = this.executeCell.bind(this);
+  }
+
+  removeCell() {
+    this.context.dispatch(removeCell(this.props.id));
+  }
+
+  executeCell() {
+    this.context.dispatch(executeCell(this.props.id,
+                                      this.props.cell.get('source')));
+  }
+
+  render() {
+    return (
+      <div className='cell_toolbar-mask'>
+        <div className='cell_toolbar'>
+          <button onClick={this.executeCell}>
+            <i className='material-icons'>play_arrow</i>
+          </button>
+          <button onClick={this.removeCell}>
+            <i className='material-icons'>delete</i>
+          </button>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Toolbar;

src/reducers/document.js

@@ -33,6 +33,17 @@ export function moveCell(state, action) {
   });
 }
 
+export function removeCell(state, action) {
+  const { notebook } = state;
+  const { id: cellId } = action;
+  const updatedNotebook = notebook
+    .removeIn(['cellMap', cellId])
+    .update('cellOrder', cellOrder => cellOrder.filterNot(id => id === cellId));
+  return Object.assign({}, state, {
+    notebook: updatedNotebook,
+  });
+}
+
 export function newCellAfter(state, action) {
   // Draft API
   const { cellType, id } = action;

src/reducers/index.js

@@ -9,6 +9,7 @@ import {
   NEW_CELL_AFTER,
   NEW_KERNEL,
   READ_NOTEBOOK,
+  REMOVE_CELL,
   SET_SELECTED,
   START_SAVING,
   UPDATE_CELL_EXECUTION_COUNT,
@@ -22,6 +23,7 @@ import {
   updateExecutionCount,
   moveCell,
   newCellAfter,
+  removeCell,
   updateSource,
   updateOutputs,
 } from './document';
@@ -34,6 +36,7 @@ reducers[NEW_CELL_AFTER] = newCellAfter;
 reducers[UPDATE_CELL_SOURCE] = updateSource;
 reducers[UPDATE_CELL_OUTPUTS] = updateOutputs;
 reducers[MOVE_CELL] = moveCell;
+reducers[REMOVE_CELL] = removeCell;
 
 reducers[SET_SELECTED] = function setSelected(state, action) {
   const selected = action.additive ?

styles/main.css

@@ -1,6 +1,7 @@
 /*
   Globals
  */
+
 pre
 {
     font-size: 14px;
@@ -83,22 +84,71 @@ img
 
 .cell
 {
-   transition: all .1s ease-in-out;
+    position: relative;
+
+    transition: all .1s ease-in-out;
 }
 
 .cell:hover
 {
     box-shadow: 1px 1px 3px rgba(0,0,0,.12), -1px -1px 3px rgba(0,0,0,.12);
 }
 
-.cell.selected {
+.cell.selected
+{
     box-shadow: 3px 3px 9px rgba(0,0,0,.12), -3px -3px 9px rgba(0,0,0,.12);
 }
 
 .cell:hover .input_area .cell_inputs,
 .cell:active .input_area .cell_inputs,
-.cell:focus .input_area .cell_inputs {
-  background-color: #e2dfe3;
+.cell:focus .input_area .cell_inputs
+{
+    background-color: #e2dfe3;
+}
+
+.cell_toolbar-mask
+{
+    position: absolute;
+    top: -29px;
+    right: -5px;
+
+    overflow: hidden;
+
+    padding: 5px 5px 0;
+}
+
+.cell_toolbar
+{
+    background: white;
+    box-shadow: 0 1px 2px 0 rgba(0,0,0,.50);
+}
+
+.cell_toolbar button
+{
+    display: inline-block;
+
+    width: 22px;
+    height: 20px;
+    padding: 2px 4px;
+
+    text-align: center;
+
+    border: none;
+    outline: none;
+    background: none;
+}
+
+.cell_toolbar button i
+{
+    font-size: 16px;
+    line-height: 1;
+
+    color: #aaa;
+}
+
+.cell_toolbar button i:hover
+{
+    color: #555;
 }
 
 .cell_markdown