Merge pull request #43 from parallaxinc/overlay-cleanup

Sure up the UI and add downloading to BS2

Author: jacobrosenthal

assets/logo.png

@@ -1,15 +1,13 @@
 'use strict';
 
-const path = require('path');
-
 const del = require('del');
 const gulp = require('gulp');
 const chalk = require('chalk');
 const zip = require('gulp-zip');
 const gutil = require('gulp-util');
 const webpack = require('webpack');
 
-const shouldWatch = (process.argv.indexOf('--watch') !== -1);
+const webpackConfig = require('./webpack.config');
 
 const files = {
   release: [
@@ -22,55 +20,6 @@ const files = {
   ]
 };
 
-const webpackConfig = {
-  entry: './client.js',
-  output: {
-    path: __dirname,
-    filename: 'bundle.js'
-  },
-  module: {
-    loaders: [
-      {
-        test: /\.css$/,
-        loader: 'style-loader!css-loader'
-      },
-      {
-        test: /\.html$/,
-        loader: 'html-loader'
-      },
-      {
-        test: /\.json$/,
-        loader: 'json-loader'
-      },
-      {
-        test: /\.js$/,
-        exclude: /node_modules/,
-        loaders: [
-          'babel-loader?optional=runtime'
-        ]
-      }
-    ]
-  },
-  resolveLoader: {
-    // this is a workaround for loaders being applied
-    // to linked modules
-    root: path.join(__dirname, 'node_modules')
-  },
-  resolve: {
-    // this is a workaround for aliasing a top level dependency
-    // inside a symlinked subdependency
-    root: path.join(__dirname, 'node_modules'),
-    alias: {
-      // replacing `fs` with a browser-compatible version
-      fs: 'browserify-fs',
-      memdown: 'level-js',
-      serialport: 'browser-serialport'
-    }
-  },
-  bail: true,
-  watch: shouldWatch
-};
-
 function js(cb){
   webpack(webpackConfig, function(err){
     gutil.log(chalk.green('Webpack - JS Rebuilt'));

gulpfile.babel.js

@@ -17,8 +17,9 @@
     "react-mfb-iceddev": "^0.1.0",
     "react-select": "^0.4.0",
     "react-style": "^0.4.0",
-    "skrim": "0.0.1",
-    "snacks": "^0.2.0"
+    "skrim": "0.0.2",
+    "snacks": "^0.2.0",
+    "when": "^3.7.2"
   },
   "devDependencies": {
     "babel": "^4.5.1",
@@ -42,14 +43,16 @@
     "phantomjs": "git://github.com/phated/phantomjs",
     "style-loader": "^0.8.3",
     "webpack": "^1.7.2",
+    "webpack-dev-server": "^1.7.0",
     "zuul": "^2.1.1"
   },
   "scripts": {
     "test": "zuul test/*.js --local --open",
     "ci": "zuul test/*.js --phantom",
     "build": "gulp",
     "release": "gulp gh-release",
-    "postinstall": "gulp postinstall"
+    "postinstall": "gulp postinstall",
+    "serve": "webpack-dev-server"
   },
   "repository": {
     "type": "git",

package.json

@@ -1,146 +1,19 @@
 'use strict';
 
 const React = require('react');
-const Card = require('react-material/components/Card');
-const List = require('react-material/components/List');
-const ListItem = require('react-material/components/ListItem');
 const AppBar = require('react-material/components/AppBar');
-const Overlay = require('react-material/components/Overlay');
-const SideNavigation = require('react-material/components/SideNavigation');
-const Button = require('react-material/components/Button');
-const TextField = require('react-material/components/TextField');
-const Icon = require('react-material/components/Icon');
 
-const IconButton = require('./icon-button');
 const styles = require('./styles');
 
-const TopBar = React.createClass({
-  getInitialState: function(){
-    return {
-      show: false,
-      chooserType: '',
-      projectName: ''
-    };
-  },
-  showSidebar: function(){
-    this.setState({
-      show: true
-    });
-  },
-  hideSidebar: function(){
-    this.setState({
-      show: false,
-      chooserType: ''
-    });
-  },
-  showNewChooser: function(){
-    this.setState({
-      chooserType: 'new'
-    });
-  },
-  showOpenChooser: function(){
-    this.setState({
-      chooserType: 'open'
-    });
-  },
-  hideChooser: function(){
-    this.setState({
-      chooserType: ''
-    });
-  },
-  updateName: function(evt){
-    evt.stopPropagation();
-    evt.preventDefault();
-
-    this.setState({
-      projectName: evt.target.value
-    });
-  },
-  openDir: function(name){
-    this.setState({
-      projectName: name
-    }, this.changeProject);
-  },
-  deleteDir: function(name, evt){
-    const space = this.props.app.workspace;
-
-    evt.stopPropagation();
-    evt.preventDefault();
-
-    space.deleteDir(name, function(){
-      console.log('dir deleted', name);
-    });
-  },
-  changeProject: function(){
-    const space = this.props.app.workspace;
-
-    space.changeDir(this.state.projectName, () => {
-      this.props.app.userConfig.set('cwd', this.state.projectName);
-      // TODO: handle error
-      this.setState({ projectName: '' }, this.hideSidebar)
-    });
-  },
-  renderChooser: function(){
-    const space = this.props.app.workspace;
-
-    if(!this.state.chooserType){
-      return null;
-    }
-
-    if(this.state.chooserType === 'new'){
-      return (
-        <Card styles={styles.chooser} title="New Project">
-          <TextField
-            placeHolder="Enter Project Name"
-            floatingLabel
-            styles={styles.textField}
-            value={this.state.projectName}
-            onChange={this.updateName} />
-          <div style={styles.buttonGroup}>
-            <Button raised onClick={this.hideChooser}>Cancel</Button>
-            <Button raised styles={styles.createButton} onClick={this.changeProject}>Create Project</Button>
-          </div>
-        </Card>
-      )
-    }
-
-    if(this.state.chooserType === 'open'){
-      return (
-        <Card styles={styles.chooser} title="Open Project">
-          <List>
-            {space.projects.map((dirname) => (
-              <ListItem icon="folder" key={dirname} onClick={() => this.openDir(dirname)}>
-                {dirname}
-                {
-                  dirname !== space.cwd.deref().substr(1)
-                  ? <IconButton icon="delete" onClick={(evt) => this.deleteDir(dirname, evt)} />
-                  : ''
-                }
-              </ListItem>
-            )).toJS()}
-          </List>
-        </Card>
-      );
-    }
-  },
-  render: function(){
-    const { title } = this.props;
-    const { show } = this.state;
+class TopBar extends React.Component {
 
+  render(){
     return (
-      <div>
-        <AppBar title={title} onNavButtonClick={this.showSidebar} />
-        <Overlay show={show} onClick={this.hideSidebar} />
-        <SideNavigation show={show} styles={styles.sideNav}>
-          <List>
-            <ListItem icon onClick={this.showNewChooser}><Icon icon="folder" /> New Project</ListItem>
-            <ListItem icon onClick={this.showOpenChooser}><Icon icon="folder-open" /> Open Project</ListItem>
-          </List>
-        </SideNavigation>
-        {this.renderChooser()}
-      </div>
+      <AppBar styles={styles.appbar}>
+        <img src="/assets/logo.png" style={styles.logo} />
+      </AppBar>
     );
   }
-});
+}
 
 module.exports = TopBar;

plugins/appbar/component.js

@@ -3,45 +3,18 @@
 const StyleSheet = require('react-style');
 
 const styles = {
-  sideNav: StyleSheet.create({
-    zIndex: 5,
-    width: '13rem'
-  }),
-  chooser: StyleSheet.create({
-    zIndex: 6,
-    width: '100%',
-    maxWidth: '30rem',
-    margin: 'auto',
-    display: 'flex',
-    flexDirection: 'column'
-  }),
-  textField: {
-    containerStyling: StyleSheet.create({
-      width: '100%'
+  appbar: {
+    normalAppBarStyle: StyleSheet.create({
+      backgroundColor: '#2c83d8'
     })
   },
-  createButton: StyleSheet.create({
-    marginLeft: '10px'
-  }),
-  buttonGroup: {
-    alignSelf: 'flex-end',
-    marginTop: 'auto'
-  },
-  deleteButton: {
-    border: 0,
-    background: 'none',
-    padding: 0,
-    float: 'right',
-    position: 'relative',
-    zIndex: 7
-  },
-  buttonIcon: StyleSheet.create({
-    display: 'inline-block',
-    padding: 0,
-    width: '30px',
-    verticalAlign: 'middle',
-    pointerEvents: 'none',
-  })
+  logo: {
+    boxSizing: 'border-box',
+    height: '100%',
+    position: 'absolute',
+    right: 0,
+    padding: 8
+  }
 };
 
 module.exports = styles;