upgrade to material-ui 0.15.1, fix alert, use chip

Author: ShMcK

lib/components/Config/index.js

@@ -29,8 +29,14 @@ var styles = {
     card: {
         margin: '10px',
         padding: '30px 20px',
+    },
+    title: {
         textAlign: 'center',
     },
+    form: {
+        margin: '0 auto',
+        width: '80%',
+    },
     button: {
         margin: '30px 10px 20px 10px',
     },
@@ -84,9 +90,9 @@ var TutorialConfig = (function (_super) {
         var _a = this.props, pristine = _a.pristine, submitting = _a.submitting, handleSubmit = _a.handleSubmit, invalid = _a.invalid;
         return (React.createElement("section", {className: 'cr-page'}, 
             React.createElement(Card_1.Card, {style: styles.card}, 
-                React.createElement(Card_1.CardTitle, {title: 'Tutorial Configuration'}), 
+                React.createElement(Card_1.CardTitle, {style: styles.title, title: 'Tutorial Configuration'}), 
                 React.createElement(Card_1.CardText, null, 
-                    React.createElement("form", {onSubmit: handleSubmit(this.onSubmit.bind(this))}, 
+                    React.createElement("form", {style: styles.form, onSubmit: handleSubmit(this.onSubmit.bind(this))}, 
                         React.createElement(redux_form_1.Field, {id: 'name', name: 'name', component: textField_1.default.bind(null, {
                             floatingLabelText: 'Tutorial Name',
                             hintText: 'coderoad-tutorial-name',

lib/components/Page/Tests/index.js

@@ -16,6 +16,9 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 var React = require('react');
 var react_redux_1 = require('react-redux');
 var actions_1 = require('../../../actions');
+var Chip_1 = require('material-ui/Chip');
+var Avatar_1 = require('material-ui/Avatar');
+var code_1 = require('material-ui/svg-icons/action/code');
 var core_coderoad_1 = require('core-coderoad');
 var styles = {
     test: {
@@ -34,7 +37,9 @@ var Tests = (function (_super) {
     Tests.prototype.render = function () {
         var _this = this;
         var _a = this.props, tests = _a.tests, style = _a.style;
-        return (React.createElement("div", {style: style}, tests.map(function (file, index) { return (React.createElement("button", {onClick: _this.selectTest.bind(_this, file)}, file)); })));
+        return (React.createElement("div", {style: style}, tests.map(function (file, index) { return (React.createElement(Chip_1.default, {key: index, style: styles.test, onTouchTap: _this.selectTest.bind(_this, file)}, 
+            React.createElement(Avatar_1.default, {icon: React.createElement(code_1.default, null)}), 
+            file)); })));
     };
     Tests = __decorate([
         react_redux_1.connect(function (state) { return ({

lib/modules/tutorial/reducer.js

@@ -46,7 +46,7 @@ function tutorial(t, action) {
             return taskUpdate_1.default(t, action.payload.pagePosition, action.payload.taskPosition, 'hints', action.payload.hint);
         case types_1.TUTORIAL_PUBLISH:
             var type = action.payload.type;
-            alert("Currently not implemented. Run '>apm publish " + type + "' from terminal");
+            alert("Currently not implemented.\nIn a terminal, run '>apm publish " + type + "'.");
             return t;
         default:
             return t;

package.json

@@ -25,7 +25,7 @@
     "coderoad-cli": "0.7.1",
     "core-coderoad": "0.4.0",
     "lodash.debounce": "4.0.6",
-    "material-ui": "0.15.0",
+    "material-ui": "0.15.1",
     "node-file-exists": "1.1.0",
     "react": "15.1.0",
     "react-dom": "15.1.0",

src/components/Config/index.tsx

@@ -16,8 +16,14 @@ const styles = {
   card: {
     margin: '10px',
     padding: '30px 20px',
+  },
+  title: {
     textAlign: 'center',
   },
+  form: {
+    margin: '0 auto',
+    width: '80%',
+  },
   button: {
     margin: '30px 10px 20px 10px',
   },
@@ -92,10 +98,14 @@ class TutorialConfig extends React.Component <{
     <section className='cr-page'>
       <Card style={styles.card}>
         <CardTitle
+          style={styles.title}
           title='Tutorial Configuration'
         />
         <CardText>
-          <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
+          <form
+            style={styles.form}
+            onSubmit={handleSubmit(this.onSubmit.bind(this))}
+          >
 
             <Field
               id='name'

src/components/Page/Tests/index.tsx

@@ -2,9 +2,9 @@ import * as React from 'react';
 import {connect} from 'react-redux';
 import {join} from 'path';
 import {editorTestOpen} from '../../../actions';
-// import Chip from 'material-ui/Chip';
-// import Avatar from 'material-ui/Avatar';
-// import CodeIcon from 'material-ui/svg-icons/action/code';
+import Chip from 'material-ui/Chip';
+import Avatar from 'material-ui/Avatar';
+import CodeIcon from 'material-ui/svg-icons/action/code';
 import {configSelector, tutorialConfigOptions, routeSet} from 'core-coderoad';
 
 const styles = {
@@ -31,21 +31,16 @@ export default class Tests extends React.Component<{
     return (
       <div style={style}>
         {tests.map((file, index) => (
-          <button
-            onClick={this.selectTest.bind(this, file)}>{file}</button>
+          <Chip
+           key={index}
+           style={styles.test}
+           onTouchTap={this.selectTest.bind(this, file)}
+           >
+            <Avatar icon={<CodeIcon />} />
+            {file}
+          </Chip>
         ))}
       </div>
     );
   }
 }
-
-/*
-  <Chip
-   key={index}
-   style={styles.test}
-   onClick={open.bind(this, file)}
-   >
-    <Avatar icon={<CodeIcon />} />
-    {file}
-  </Chip>
-  */

src/modules/tutorial/reducer.ts

@@ -67,7 +67,8 @@ export default function tutorial(t = _tutorial, action: Action): Tutorial.Output
 
     case TUTORIAL_PUBLISH:
       const {type} = action.payload;
-      alert(`Currently not implemented. Run '>apm publish ${type}' from terminal`);
+      alert(`Currently not implemented.
+In a terminal, run '>apm publish ${type}'.`);
       return t;
 
     default: