Merge pull request #2 from callemall/master

Sync with remote master
mui · Dec 15, 2014 · b11636c · b11636c
2 parents 56924c2 + b144c87
commit b11636c
Show file tree

Hide file tree

Showing 100 changed files with 1,516 additions and 824 deletions.
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1,2 @@
+# Set the default behavior, in case people don't have core.autocrlf set.
+* text=auto
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,23 @@
+## 0.3.3
+###### _Dec. 7, 2014_
+
+##### General
+- Added a basic example project in /example
+
+##### Components
+- Dialog
+  - Actions are now real buttons
+  - Added transitions
+  - Prefixed classNames with mui
+  - Cleaned up styles
+- Input
+  - Fixed a bug that caused placeholder to not show on focus (#112)
+  - Placeholders can now be displayed in-line by setting inlinePlaceholder to true.
+  - The initial number of rows can now be set with the rows prop. 
+- Toggle
+  - Fixed alignment issue (#118)
+  - The inital state of the toggle can now be set with the toggled prop.
+
 ## 0.3.2
 ###### _Nov. 30, 2014_
 

diff --git a/README.md b/README.md
@@ -1,5 +1,7 @@
 # [Material-UI](http://callemall.github.io/material-ui/)
 
+[![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/callemall/material-ui?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+
 Material-UI is a CSS framework and a set of [React](http://facebook.github.io/react/) components that implement [Google's Material Design](https://www.google.com/design/spec/material-design/introduction.html) specification.
 
 Check out our [documentation site](http://www.material-ui.com/) for live examples. It's still a work in progress, but hopefully you can see where we're headed.
@@ -35,6 +37,20 @@ var SomeAwesomeComponent = React.createClass({
 module.exports = SomeAwesomeComponent;
 ```
 
+### Usage Notes
+Some components uses [react-tap-event-plugin](https://github.com/zilverline/react-tap-event-plugin) to
+listen for touch events. This dependency is temporary and will go away once react v1.0 is released. Until then, be
+sure to inject this plugin at the start of your app.
+```js
+var injectTapEventPlugin = require("react-tap-event-plugin");
+
+//Needed for onTouchTap
+//Can go away when react 1.0 release
+//Check this repo:
+//https://github.com/zilverline/react-tap-event-plugin
+injectTapEventPlugin();
+```
+
 ## Customization
 
 The styles are separated into 2 less files:
@@ -51,20 +67,14 @@ This allows you to override any variables defined in [custom-variables.less](htt
 @import "node_modules/material-ui/src/less/components.less";
 ```
 
-## Building the Documentation Site
-After cloning the repository, install dependencies:
-```
-cd <project folder>/material-ui
-npm install
-cd <project folder>/material-ui/docs
-npm install
-npm install -g gulp
-```
+### Use with Sass
 
-Now you can run your local server:
-```
-gulp
-```
+For [Sass](http://www.sass-lang.com) users, [material-ui-sass](https://github.com/gpbl/material-ui-sass) contains the .scss version of the Less framework.
+
+## Examples
+There are 2 projects that you can look at to help you get started. The first project can be found in the [example folder](https://github.com/callemall/material-ui/tree/master/example). This is a basic project that shows how you can consume material-ui components in your own project.
+
+The second project is the actual documentation site. This is a more complex project but will give examples of every component. Check out the [docs folder](https://github.com/callemall/material-ui/tree/master/docs) for build instructions.
 
 ## Contribute
 

diff --git a/docs/README.md b/docs/README.md
@@ -2,7 +2,7 @@
 
 This is the documentation site for [Material-UI](http://callemall.github.io/material-ui/).
 
-## Development Installation Notes
+## Installation
 After cloning the repository, install dependencies:
 ```
 cd <project folder>/material-ui

diff --git a/docs/gulp/config.js b/docs/gulp/config.js
@@ -1,5 +1,5 @@
 var dest = './build',
-  src = './src'
+  src = './src',
   mui = '../src';
 
 module.exports = {
@@ -26,7 +26,7 @@ module.exports = {
     dest: dest
   },
   fonts: {
-    src: mui + 'less/material-design-fonticons/fonts/**',
+    src: mui + '/less/material-design-fonticons/fonts/**',
     dest: dest + '/fonts/mdfonticon'
   },
   muiFonts: {

diff --git a/docs/gulp/tasks/browserify.js b/docs/gulp/tasks/browserify.js
@@ -57,7 +57,7 @@ gulp.task('browserify', function(callback) {
 
     var reportFinished = function() {
       // Log when bundling completes
-      bundleLogger.end(bundleConfig.outputName)
+      bundleLogger.end(bundleConfig.outputName);
 
       if(bundleQueue) {
         bundleQueue--;

diff --git a/docs/gulp/tasks/fonts.js b/docs/gulp/tasks/fonts.js
@@ -1,5 +1,5 @@
 var gulp = require('gulp');
-var config = require('../config').fonts
+var config = require('../config').fonts;
 
 gulp.task('fonts', function() {
   return gulp.src(config.src)

diff --git a/docs/gulp/tasks/less.js b/docs/gulp/tasks/less.js
@@ -2,7 +2,7 @@ var gulp = require('gulp'),
   less = require('gulp-less'),
   sourcemaps = require('gulp-sourcemaps'),
   handleErrors = require('../util/handleErrors'),
-  config=require('../config').less;
+  config = require('../config').less;
 
 gulp.task('less', function() {
   return gulp.src(config.src)

diff --git a/docs/gulp/tasks/markup.js b/docs/gulp/tasks/markup.js
@@ -1,5 +1,5 @@
 var gulp = require('gulp');
-var config = require('../config').markup
+var config = require('../config').markup;
 
 gulp.task('markup', function() {
   return gulp.src(config.src)

diff --git a/docs/gulp/tasks/mui-fonts.js b/docs/gulp/tasks/mui-fonts.js
@@ -1,5 +1,5 @@
 var gulp = require('gulp');
-var config = require('../config').muiFonts
+var config = require('../config').muiFonts;
 
 gulp.task('muiFonts', function() {
   return gulp.src(config.src)

diff --git a/docs/gulp/tasks/svgs.js b/docs/gulp/tasks/svgs.js
@@ -1,5 +1,5 @@
 var gulp = require('gulp');
-var config = require('../config').svgs
+var config = require('../config').svgs;
 
 gulp.task('svgs', function() {
   return gulp.src(config.src)

diff --git a/docs/gulp/tasks/watch.js b/docs/gulp/tasks/watch.js
@@ -4,10 +4,10 @@
    - gulp/tasks/browserSync.js watches and reloads compiled files
 */
 
-var gulp  = require('gulp');
-var config= require('../config');
+var gulp   = require('gulp');
+var config = require('../config');
 
 gulp.task('watch', ['setWatch', 'browserSync'], function() {
-  gulp.watch(config.less.watch,   ['less']);
+  gulp.watch(config.less.watch, ['less']);
   gulp.watch(config.markup.src, ['markup']);
 });
diff --git a/docs/package.json b/docs/package.json
@@ -2,7 +2,6 @@
   "name": "material-ui-docs",
   "version": "0.0.1",
   "description": "Documentation site for material-ui",
-  "private": true,
   "browser": {
     "mui": "../src/index.js"
   },
@@ -35,6 +34,7 @@
     "highlight.js": "^8.4.0",
     "react": "^0.12.1",
     "react-router": "^0.11.4",
+    "react-draggable2": "^0.4.1",
     "react-tap-event-plugin": "^0.1.3"
   }
 }
diff --git a/docs/src/app/app-routes.jsx b/docs/src/app/app-routes.jsx
@@ -1,8 +1,8 @@
 /**
  * @jsx React.DOM
  */
- 
-var React = require('react'), 
+
+var React = require('react'),
   Router = require('react-router'),
   Route = Router.Route,
   Redirect = Router.Redirect,
@@ -26,36 +26,38 @@ var React = require('react'),
   LeftNav = require('./components/pages/components/left-nav.jsx'),
   Menus = require('./components/pages/components/menus.jsx'),
   Paper = require('./components/pages/components/paper.jsx'),
+  Sliders = require('./components/pages/components/sliders.jsx'),
   Switches = require('./components/pages/components/switches.jsx'),
   Toolbars = require('./components/pages/components/toolbars.jsx');
 
 var AppRoutes = (
-      <Route name="root" path="/" handler={Master}>
-        <Route name="home" handler={Home} />
-        <Route name="get-started" handler={GetStarted} />
-        <Route name="css-framework" handler={CssFramework}>
-          <Route name="colors" handler={Colors} />
-          <Route name="typography" handler={Typography} />
-          <Redirect from="/css-framework" to="colors" />
-        </Route>
-
-        <Route name="components" handler={Components}>
-          <Route name="buttons" handler={Buttons} />
-          <Route name="dialog" handler={Dialog} />
-          <Route name="dropdown-menu" handler={DropDownMenu} />
-          <Route name="icon-buttons" handler={IconButtons} />
-          <Route name="icons" handler={Icons} />
-          <Route name="inputs" handler={Inputs} />
-          <Route name="left-nav" handler={LeftNav} />
-          <Route name="menus" handler={Menus} />
-          <Route name="paper" handler={Paper} />
-          <Route name="switches" handler={Switches} />
-          <Route name="toolbars" handler={Toolbars} />
-          <Redirect from="/components" to="buttons" />
-        </Route>
-
-        <DefaultRoute handler={Home}/>
-      </Route>
-    );
-
-module.exports = AppRoutes;
+  <Route name="root" path="/" handler={Master}>
+    <Route name="home" handler={Home} />
+    <Route name="get-started" handler={GetStarted} />
+    <Route name="css-framework" handler={CssFramework}>
+      <Route name="colors" handler={Colors} />
+      <Route name="typography" handler={Typography} />
+      <Redirect from="/css-framework" to="colors" />
+    </Route>
+
+    <Route name="components" handler={Components}>
+      <Route name="buttons" handler={Buttons} />
+      <Route name="dialog" handler={Dialog} />
+      <Route name="dropdown-menu" handler={DropDownMenu} />
+      <Route name="icon-buttons" handler={IconButtons} />
+      <Route name="icons" handler={Icons} />
+      <Route name="inputs" handler={Inputs} />
+      <Route name="left-nav" handler={LeftNav} />
+      <Route name="menus" handler={Menus} />
+      <Route name="paper" handler={Paper} />
+      <Route name="sliders" handler={Sliders} />
+      <Route name="switches" handler={Switches} />
+      <Route name="toolbars" handler={Toolbars} />
+      <Redirect from="/components" to="buttons" />
+    </Route>
+
+    <DefaultRoute handler={Home}/>
+  </Route>
+);
+
+module.exports = AppRoutes;
diff --git a/docs/src/app/components/app-left-nav.jsx b/docs/src/app/components/app-left-nav.jsx
@@ -1,7 +1,3 @@
-/**
- * @jsx React.DOM
- */
-
 var React = require('react'),
   Router = require('react-router'),
   mui = require('mui'),

diff --git a/docs/src/app/components/code-example/code-block.jsx b/docs/src/app/components/code-example/code-block.jsx
@@ -1,7 +1,3 @@
-/**
- * @jsx React.DOM
- */
-
 var React = require('react'),
 	hljs = require('highlight.js');
 

diff --git a/docs/src/app/components/code-example/code-example.jsx b/docs/src/app/components/code-example/code-example.jsx
@@ -1,7 +1,3 @@
-/**
- * @jsx React.DOM
- */
-
 var React = require('react'),
 	mui = require('mui'),
 	CodeBlock = require('./code-block.jsx');

diff --git a/docs/src/app/components/component-info.jsx b/docs/src/app/components/component-info.jsx
@@ -1,7 +1,3 @@
-/**
- * @jsx React.DOM
- */
-
 var React = require('react');
 
 var ComponentInfo = React.createClass({

diff --git a/docs/src/app/components/master.jsx b/docs/src/app/components/master.jsx
@@ -1,16 +1,12 @@
-/**
- * @jsx React.DOM
- */
-
-var React = require('react'),
-  Router = require('react-router'),
-  RouteHandler = Router.RouteHandler,
-  mui = require('mui'),
-  AppBar = mui.AppBar,
-  AppCanvas = mui.AppCanvas,
-  Menu = mui.Menu,
-  IconButton = mui.IconButton,
-  AppLeftNav = require('./app-left-nav.jsx');
+var React = require('react');
+var Router = require('react-router');
+var RouteHandler = Router.RouteHandler;
+var mui = require('mui');
+var AppBar = mui.AppBar;
+var AppCanvas = mui.AppCanvas;
+var Menu = mui.Menu;
+var IconButton = mui.IconButton;
+var AppLeftNav = require('./app-left-nav.jsx');
 
 var Master = React.createClass({
 
@@ -22,6 +18,13 @@ var Master = React.createClass({
       this.isActive('get-started') ? 'Get Started' :
       this.isActive('css-framework') ? 'Css Framework' :
       this.isActive('components') ? 'Components' : '';
+    var githubButton = (
+      <IconButton
+        className="github-icon-button"
+        icon="mui-icon-github"
+        href="https://github.com/callemall/material-ui"
+        linkButton={true} />
+    );
 
     return (
       <AppCanvas predefinedLayout={1}>
@@ -31,7 +34,7 @@ var Master = React.createClass({
           onMenuIconButtonTouchTap={this._onMenuIconButtonTouchTap}
           title={title}
           zDepth={0}>
-          <IconButton className="github-icon-button" icon="mui-icon-github" onTouchTap={this._onGithubTouchTap} />
+          {githubButton}
         </AppBar>
 
         <AppLeftNav ref="leftNav" />
@@ -43,17 +46,13 @@ var Master = React.createClass({
             Hand crafted with love by the engineers at <a href="http://call-em-all.com">Call-Em-All</a> and our 
             awesome <a href="https://github.com/callemall/material-ui/graphs/contributors">contributors</a>.
           </p>
-          <IconButton className="github-icon-button" icon="mui-icon-github" onTouchTap={this._onGithubTouchTap} />
+          {githubButton}
         </div>
 
       </AppCanvas>
     );
   },
 
-  _onGithubTouchTap: function() {
-    document.location.href='https://github.com/callemall/material-ui';
-  },
-
   _onMenuIconButtonTouchTap: function() {
     this.refs.leftNav.toggle();
   }

diff --git a/docs/src/app/components/pages/components.jsx b/docs/src/app/components/pages/components.jsx
@@ -14,6 +14,7 @@ var CssFramework = React.createClass({
       { route: 'menus', text: 'Menus'},
       { route: 'left-nav', text: 'Left Nav'},
       { route: 'paper', text: 'Paper'},
+      { route: 'sliders', text: 'Sliders'},
       { route: 'switches', text: 'Switches'},
       //{ route: 'toasts', text: 'Toasts'},
       { route: 'toolbars', text: 'Toolbars'},
@@ -26,4 +27,4 @@ var CssFramework = React.createClass({
 
 });
 
-module.exports = CssFramework;
+module.exports = CssFramework;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Set the default behavior, in case people don't have core.autocrlf set.
		* text=auto