Merge pull request #40 from parallaxinc/fancy-buttons

monteslu · monteslu · commit aa7935989246 · 2015-03-19T10:17:52.000-07:00
Fancy buttons - ref #27
diff --git a/client.js b/client.js
@@ -17,6 +17,9 @@ var plugins = [
   {
     register: require('holovisor')
   },
+  {
+    register: require('skrim')
+  },
   {
     register: require('./plugins/appbar'),
     options: {
diff --git a/fonts/ionicons.css b/fonts/ionicons.css
diff --git a/fonts/ionicons.eot b/fonts/ionicons.eot
diff --git a/fonts/ionicons.svg b/fonts/ionicons.svg
diff --git a/fonts/ionicons.ttf b/fonts/ionicons.ttf
diff --git a/fonts/ionicons.woff b/fonts/ionicons.woff
diff --git a/gulpfile.babel.js b/gulpfile.babel.js
@@ -35,11 +35,11 @@ const webpackConfig = {
         loader: 'style-loader!css-loader'
       },
       {
-        test:/\.html$/,
+        test: /\.html$/,
         loader: 'html-loader'
       },
       {
-        test:/\.json$/,
+        test: /\.json$/,
         loader: 'json-loader'
       },
       {
diff --git a/index.html b/index.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <title>Parallax Chrome IDE</title>
     <link href="fonts/roboto.css" rel="stylesheet" type="text/css">
+    <link href="fonts/ionicons.css" rel="stylesheet" type="text/css">
 
     <style type="text/css">
       html, body {
diff --git a/package.json b/package.json
@@ -10,20 +10,23 @@
     "bs2-serial": "jacobrosenthal/bs2-serial",
     "codemirror": "^4.13.0",
     "frylord": "^0.4.0",
-    "holovisor": "^0.1.1",
+    "holovisor": "^0.2.0",
     "irken": "^0.4.1",
-    "react": "^0.13.0",
+    "react": "^0.13.1",
     "react-material": "git://github.com/iceddev/react-material#fake-release-13",
+    "react-mfb-iceddev": "^0.1.0",
     "react-style": "^0.4.0",
+    "skrim": "0.0.1",
     "snacks": "^0.2.0"
   },
   "devDependencies": {
     "babel": "^4.5.1",
     "babel-core": "^4.5.1",
     "babel-loader": "^4.0.0",
+    "babel-runtime": "^4.7.16",
     "babelify": "^5.0.4",
-    "browserify-fs": "^1.0.0",
     "browser-serialport": "git://github.com/garrows/browser-serialport#update",
+    "browserify-fs": "^1.0.0",
     "chalk": "^1.0.0",
     "css-loader": "^0.9.1",
     "del": "^1.1.1",
diff --git a/plugins/appbar/index.js b/plugins/appbar/index.js
@@ -1,10 +1,10 @@
-'use strict'
+'use strict';
 
 const React = require('react');
 
 const TopBar = require('./component');
 
-function appbar(app, opts, cb){
+function appbar(app, opts, done){
   app.view('appbar', function(el, cb){
     console.log('appbar render');
 
@@ -15,7 +15,7 @@ function appbar(app, opts, cb){
     React.render(Component, el, cb);
   });
 
-  cb();
+  done();
 }
 
 module.exports = appbar;
diff --git a/plugins/editor/index.js b/plugins/editor/index.js
@@ -6,7 +6,7 @@ require('codemirror/theme/neo.css');
 
 var CodeMirror = require('codemirror');
 
-function editor(app, opts, cb){
+function editor(app, opts, done){
 
   var codeEditor;
 
@@ -48,7 +48,7 @@ function editor(app, opts, cb){
     return opts.initial;
   });
 
-  cb();
+  done();
 }
 
 module.exports = editor;
diff --git a/plugins/sidebar/file-operations.js b/plugins/sidebar/file-operations.js
@@ -1,32 +1,54 @@
 'use strict';
 
 const React = require('react');
-const Button = require('react-material/components/Button');
-const TextField = require('react-material/components/TextField');
+const { Menu, MainButton, ChildButton } = require('react-mfb-iceddev');
 
-const styles = require('./styles');
+require('react-mfb-iceddev/mfb.css');
+
+const NewFileOverlay = require('./new-file-overlay');
 
 const FileOperations = React.createClass({
-  getInitialState: function(){
-    // workaround to async updating that causes the cursor in the textfile to jump
-    return {
-      dontJump: true
-    }
-  },
-  saveFile: function(){
+  saveFile: function(evt){
+    evt.preventDefault();
+
     const space = this.props.workspace;
+
     // TODO: these should transparently accept cursors for all non-function params
     space.saveFile(space.filename.deref(), space.current, function(err){
       console.log('saved', err);
     });
   },
-  newFile: function(){
+  createFile: function(name){
     const space = this.props.workspace;
-    space.filename.update(() => '');
+    const overlay = this.props.overlay;
+
+    if(!name){
+      return;
+    }
+
+    space.filename.update(() => name);
     space.current.update(() => '');
+    // TODO: these should transparently accept cursors for all non-function params
+    space.saveFile(space.filename.deref(), space.current, overlay.hide);
   },
-  deleteFile: function(){
+  newFile: function(evt){
+    evt.preventDefault();
+
+    const overlay = this.props.overlay;
+
+    overlay.content(
+      <NewFileOverlay
+        onAccept={this.createFile}
+        onCancel={overlay.hide} />
+    );
+
+    overlay.show({ backdrop: true });
+  },
+  deleteFile: function(evt){
+    evt.preventDefault();
+
     const space = this.props.workspace;
+
     space.deleteFile(space.filename, function(err){
       console.log('deleted', err);
     });
@@ -38,24 +60,24 @@ const FileOperations = React.createClass({
     space.filename.update(function(){
       return evt.target.value;
     });
-    // set the state to cause a render causing cursor to not jump
-    this.setState({ dontJump: !this.state.dontJump });
   },
   render: function(){
-    const space = this.props.workspace;
-
     return (
-      <div style={styles.fileOperations}>
-        <Button raised onClick={this.newFile}>New File</Button>
-        <TextField
-          value={space.filename.deref()}
-          placeHolder="filename"
-          styles={styles.textField}
-          floatingLabel
-          onChange={this.updateName} />
-        <Button raised onClick={this.saveFile}>Save File</Button>
-        <Button raised onClick={this.deleteFile} styles={styles.button}>Delete File</Button>
-      </div>
+      <Menu effect="zoomin" method="click" position="bl">
+        <MainButton iconResting="ion-plus-round" iconActive="ion-close-round" />
+        <ChildButton
+          onClick={this.deleteFile}
+          icon="ion-backspace-outline"
+          label="Delete File" />
+        <ChildButton
+          onClick={this.saveFile}
+          icon="ion-compose"
+          label="Save File" />
+        <ChildButton
+          onClick={this.newFile}
+          icon="ion-document"
+          label="New File" />
+      </Menu>
     );
   }
 });
diff --git a/plugins/sidebar/index.js b/plugins/sidebar/index.js
@@ -8,9 +8,10 @@ const FileList = require('./file-list');
 const File = require('./file');
 const FileOperations = require('./file-operations');
 
-function sidebar(app, opts, cb){
+function sidebar(app, opts, done){
 
   const space = app.workspace;
+  const overlay = app.overlay;
 
   app.view('sidebar', function(el, cb){
     console.log('sidebar render');
@@ -21,7 +22,7 @@ function sidebar(app, opts, cb){
           <ListItem icon="folder" disableRipple>{space.cwd.deref()}</ListItem>
           {space.directory.map((filename) => <File key={filename} workspace={space} filename={filename} />).toJS()}
         </FileList>
-        <FileOperations workspace={space} />
+        <FileOperations workspace={space} overlay={overlay} />
       </Sidebar>
     );
 
@@ -30,7 +31,7 @@ function sidebar(app, opts, cb){
 
   const cwd = app.userConfig.get('cwd') || opts.defaultProject;
 
-  space.changeDir(cwd, cb);
+  space.changeDir(cwd, done);
 }
 
 module.exports = sidebar;
diff --git a/plugins/sidebar/new-file-overlay.js b/plugins/sidebar/new-file-overlay.js
@@ -0,0 +1,66 @@
+'use strict';
+
+const React = require('react');
+const Card = require('react-material/components/Card');
+const Button = require('react-material/components/Button');
+const TextField = require('react-material/components/TextField');
+
+const styles = require('./styles');
+
+class NewFileOverlay extends React.Component {
+  constructor(){
+    this.state = {
+      value: ''
+    };
+
+    this.onAccept = this.onAccept.bind(this);
+    this.onCancel = this.onCancel.bind(this);
+    this.updateName = this.updateName.bind(this);
+  }
+
+  updateName(evt){
+    this.setState({
+      value: evt.target.value
+    });
+  }
+
+  clearName(){
+    this.setState({
+      value: ''
+    });
+  }
+
+  onAccept(evt){
+    this.clearName();
+    if(typeof this.props.onAccept === 'function'){
+      this.props.onAccept(this.state.value, evt);
+    }
+  }
+
+  onCancel(evt){
+    this.clearName();
+    if(typeof this.props.onCancel === 'function'){
+      this.props.onCancel(evt);
+    }
+  }
+
+  render(){
+    return (
+      <Card styles={styles.overlay}>
+        <h3 style={styles.overlayTitle}>Please name your file.</h3>
+        <TextField
+          value={this.state.value}
+          placeHolder="filename"
+          styles={styles.textField}
+          floatingLabel
+          onChange={this.updateName} />
+        <div style={styles.overlayButtonContainer}>
+          <Button onClick={this.onAccept}>Create</Button>
+          <Button onClick={this.onCancel}>Cancel</Button>
+        </div>
+      </Card>
+    );
+  }
+}
+
+module.exports = NewFileOverlay;
diff --git a/plugins/sidebar/styles.js b/plugins/sidebar/styles.js
@@ -15,14 +15,19 @@ const styles = {
       width: '100%'
     })
   },
-  fileOperations: {
+  overlay: StyleSheet.create({
+    width: 400,
+    height: 200,
+    margin: '100px auto 0',
     display: 'flex',
-    flexDirection: 'column',
-    marginTop: 'auto'
+    flexDirection: 'column'
+  }),
+  overlayTitle: {
+    margin: 0
   },
-  button: StyleSheet.create({
-    marginTop: '10px'
-  })
+  overlayButtonContainer: {
+    margin: 'auto 0 0 auto'
+  }
 };
 
 module.exports = styles;

Original file line number	Diff line number	Diff line change
`@@ -17,6 +17,9 @@ var plugins = [`
`17`	`17`	`{`
`18`	`18`	`register: require('holovisor')`
`19`	`19`	`},`
	`20`	`+ {`
	`21`	`+ register: require('skrim')`
	`22`	`+ },`
`20`	`23`	`{`
`21`	`24`	`register: require('./plugins/appbar'),`
`22`	`25`	`options: {`
Original file line number	Diff line number	Diff line change
`@@ -35,11 +35,11 @@ const webpackConfig = {`
`35`	`35`	`loader: 'style-loader!css-loader'`
`36`	`36`	`},`
`37`	`37`	`{`
`38`		`- test:/\.html$/,`
	`38`	`+ test: /\.html$/,`
`39`	`39`	`loader: 'html-loader'`
`40`	`40`	`},`
`41`	`41`	`{`
`42`		`- test:/\.json$/,`
	`42`	`+ test: /\.json$/,`
`43`	`43`	`loader: 'json-loader'`
`44`	`44`	`},`
`45`	`45`	`{`