Merge pull request #435 from mmrtnz/css-cleanup

CSS Cleanup
mui · Mar 17, 2015 · 8fa2855 · 8fa2855
2 parents 2b67c9c + 32f5912
commit 8fa2855
Show file tree

Hide file tree

Showing 33 changed files with 405 additions and 276 deletions.
diff --git a/docs/src/app/components/component-doc.jsx b/docs/src/app/components/component-doc.jsx
@@ -10,7 +10,10 @@ var ComponentDoc = React.createClass({
 
   propTypes: {
     code: React.PropTypes.string.isRequired,
-    desc: React.PropTypes.string,
+    desc: React.PropTypes.oneOfType([
+        React.PropTypes.string,
+        React.PropTypes.element
+    ]),
     name: React.PropTypes.string.isRequired,
     componentInfo: React.PropTypes.array.isRequired
   },

diff --git a/docs/src/app/components/pages/components/date-picker.jsx b/docs/src/app/components/pages/components/date-picker.jsx
@@ -69,7 +69,7 @@ var DatePickerPage = React.createClass({
 
         <DatePicker
           hintText="Landscape Dialog"
-          mode="landscape"/>
+          mode="landscape" />
 
       </ComponentDoc>
     );

diff --git a/docs/src/app/components/pages/components/left-nav.jsx b/docs/src/app/components/pages/components/left-nav.jsx
@@ -20,7 +20,9 @@ var LeftNavPage = React.createClass({
       { route: 'css-framework', text: 'CSS Framework' },
       { route: 'components', text: 'Components' },
       { type: MenuItem.Types.SUBHEADER, text: 'Resources' },
-      { type: MenuItem.Types.LINK, payload: 'https://github.com/callemall/material-ui', text: 'GitHub' }
+      { type: MenuItem.Types.LINK, payload: 'https://github.com/callemall/material-ui', text: 'GitHub' },
+      { text: 'Disabled', disabled: true },
+      { type: MenuItem.Types.LINK, payload: 'https://www.google.com', text: 'Disabled Link', disabled: true }
     ];
 
     var code = 
@@ -34,6 +36,16 @@ var LeftNavPage = React.createClass({
       '     payload: \'https://github.com/callemall/material-ui\', \n' +
       '     text: \'GitHub\' \n' +
       '  },\n' +
+      '  { \n' +
+      '     text: \'Disabled\', \n' +
+      '     disabled: true \n' +
+      '  },\n' +
+      '  { \n' +
+      '     type: MenuItem.Types.LINK, \n' +
+      '     payload: \'https://www.google.com\', \n' +
+      '     text: \'Disabled Link\', \n' +
+      '     disabled: true \n' +
+      '  },\n' +
       '];\n\n' +
       '//Docked Left Nav\n' +
       '<LeftNav menuItems={menuItems} />\n\n' +

diff --git a/docs/src/app/components/pages/components/menus.jsx b/docs/src/app/components/pages/components/menus.jsx
@@ -31,27 +31,27 @@ var nestedMenuItems = [
   { type: mui.MenuItem.Types.NESTED, text: 'Reports', items: [
     { payload: '1', text: 'Nested Item 1' },
     { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 2', items: [
-      { payload: '1', text: 'Nested Item 3' },
-      { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 4', items: [
-        { payload: '1', text: 'Nested Item 5' },
-        { payload: '3', text: 'Nested Item 6' }
+      { payload: '1', text: 'Nested Item 2.1' },
+      { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 2.2', items: [
+        { payload: '1', text: 'Nested Item 2.2.1' },
+        { payload: '3', text: 'Nested Item 2.2.2' }
       ] },
-      { payload: '3', text: 'Nested Item 7' }
+      { payload: '3', text: 'Nested Item 2.3' }
     ] },
-    { payload: '3', text: 'Nested Item 9' },
-    { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 2', items: [
-      { payload: '1', text: 'Nested Item 3' },
-      { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 4', items: [
-        { payload: '1', text: 'Nested Item 5' },
-        { payload: '3', text: 'Nested Item 6' }
+    { payload: '3', text: 'Nested Item 3' },
+    { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 4', items: [
+      { payload: '1', text: 'Nested Item 4.1' },
+      { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 4.2', items: [
+        { payload: '1', text: 'Nested Item 4.2.1', disabled: true },
+        { payload: '3', text: 'Nested Item 4.2.2' }
       ] },
-      { payload: '3', text: 'Nested Item 7' }
+      { payload: '3', text: 'Nested Item 4.3' }
     ] },
-    { payload: '4', text: 'Nested Item 10' }
+    { payload: '4', text: 'Nested Item 5' }
   ] },
   { payload: '1', text: 'Audio Library'},
   { payload: '2', text: 'Settings'},
-  { payload: '3', text: 'Logout'}
+  { payload: '3', text: 'Logout', disabled: true}
 ];
 
 
@@ -160,27 +160,27 @@ var MenusPage = React.createClass({
       "    { type: mui.MenuItem.Types.NESTED, text: 'Reports', items: [\n" +
       "      { payload: '1', text: 'Nested Item 1' },\n" +
       "      { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 2', items: [\n" +
-      "        { payload: '1', text: 'Nested Item 3' },\n" +
-      "        { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 4', items: [\n" +
-      "          { payload: '1', text: 'Nested Item 5' },\n" +
-      "          { payload: '3', text: 'Nested Item 6' }\n" +
+      "        { payload: '1', text: 'Nested Item 2.1' },\n" +
+      "        { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 2.2', items: [\n" +
+      "          { payload: '1', text: 'Nested Item 2.2.1' },\n" +
+      "          { payload: '3', text: 'Nested Item 2.2.2' }\n" +
       "        ] },\n" +
-      "        { payload: '3', text: 'Nested Item 7' }\n" +
+      "        { payload: '3', text: 'Nested Item 2.3' }\n" +
       "      ] },\n" +
-      "      { payload: '3', text: 'Nested Item 9' },\n" +
-      "      { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 2', items: [\n" +
-      "        { payload: '1', text: 'Nested Item 3' },\n" +
-      "       { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 4', items: [\n" +
-      "          { payload: '1', text: 'Nested Item 5' },\n" +
-      "          { payload: '3', text: 'Nested Item 6' }\n" +
+      "      { payload: '3', text: 'Nested Item 3' },\n" +
+      "      { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 4', items: [\n" +
+      "        { payload: '1', text: 'Nested Item 4.1' },\n" +
+      "        { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 4.2', items: [\n" +
+      "          { payload: '1', text: 'Nested Item 4.2.1', disabled: true },\n" +
+      "          { payload: '3', text: 'Nested Item 4.2.2' }\n" +
       "        ] },\n" +
-      "        { payload: '3', text: 'Nested Item 7' }\n" +
+      "        { payload: '3', text: 'Nested Item 4.3' }\n" +
       "      ] },\n" +
-      "      { payload: '4', text: 'Nested Item 10' }\n" +
+      "      { payload: '4', text: 'Nested Item 5' }\n" +
       "    ] },\n" +
       "    { payload: '1', text: 'Audio Library'},\n" +
       "    { payload: '2', text: 'Settings'},\n" +
-      "    { payload: '3', text: 'Logout'}\n" +
+      "    { payload: '3', text: 'Logout', disabled: true}\n" +
       "  ];\n\n" +
       '<Menu menuItems={nestedMenuItems} />';
 

diff --git a/docs/src/app/components/pages/components/switches.jsx b/docs/src/app/components/pages/components/switches.jsx
@@ -22,7 +22,7 @@ var SwitchesPage = React.createClass({
       '  name="checkboxName2"\n' +
       '  value="checkboxValue2"\n' + 
       '  label="fed the dog"\n' +
-      '  defaultChecked={true} />\n' +
+      '  defaultSwitched={true} />\n' +
       '<Checkbox\n' +
       '  name="checkboxName3"\n' +
       '  value="checkboxValue3"\n' + 

diff --git a/docs/src/app/components/pages/components/tabs.jsx b/docs/src/app/components/pages/components/tabs.jsx
@@ -57,6 +57,12 @@ var TabsPage = React.createClass({
       {
         name: 'Tabs Props',
         infoArray: [
+          {
+            name: 'initialSelectedIndex',
+            type: 'number',
+            header: 'optional',
+            desc: 'Specify initial visible tab index. Initial selected index is set by default to 0. If initialSelectedIndex is set but larger than the total amount of specified tabs, initialSelectedIndex will revert back to default'
+          },
           {
             name: 'tabWidth',
             type: 'number',

diff --git a/docs/src/app/components/pages/get-started.jsx b/docs/src/app/components/pages/get-started.jsx
@@ -20,10 +20,10 @@ var GetStarted = React.createClass({
           'module.exports = MyAwesomeReactComponent;\n\n\n',
 
       customizationCode = 
-        '@import "node_modules/material-ui/dist/less/scaffolding.less";\n\n' +
+        '@import "node_modules/material-ui/src/less/scaffolding.less";\n\n' +
         '//Define a custom less file to override\n//any variables defined in scaffolding.less\n' +
         '@import "my-custom-overrides.less";\n\n' +
-        '@import "node_modules/material-ui/dist/less/components.less";',
+        '@import "node_modules/material-ui/src/less/components.less";',
 
       usageNotesCode =
         'var injectTapEventPlugin = require("react-tap-event-plugin");\n\n' +

diff --git a/docs/src/less/main.less b/docs/src/less/main.less
@@ -42,21 +42,6 @@ a {
 }
 
 /* App Specific Styles */
-// .mui-app-canvas {
-
-//   height: 100%;
-
-//   .mui-app-bar {
-//     .github-icon-button {
-//       float: right;
-//       margin-right: -16px;
-//       margin-top: (@app-bar-height - @icon-button-size) / 2;
-//       color: @app-bar-text-color;
-//       fill: @app-bar-text-color;
-//     }
-//   }
-// }
-
 
 .github-icon-button {
   float: right;

diff --git a/package.json b/package.json
@@ -30,7 +30,7 @@
   "homepage": "http://material-ui.com/",
   "dependencies": {
     "react-classset": "0.0.2",
-    "react-draggable2": "^0.4.2"
+    "react-draggable2": "^0.5.1"
   },
   "peerDependencies": {
     "react": "0.12.x",
@@ -39,7 +39,7 @@
   "devDependencies": {
     "react-tools": "^0.12.2",
     "browserify": "^7.0.3",
-    "reactify": "^0.17.1",   
+    "reactify": "^0.17.1",
     "react-router": "^0.11.6"
   }
 }
diff --git a/src/index.js b/src/index.js
@@ -13,8 +13,8 @@ module.exports = {
   FontIcon: require('./js/font-icon'),
   IconButton: require('./js/icon-button'),
   LeftNav: require('./js/left-nav'),
-  MenuItem: require('./js/menu-item'),
-  Menu: require('./js/menu'),
+  Menu: require('./js/menu/menu'),
+  MenuItem: require('./js/menu/menu-item'),
   Mixins: {
     Classable: require('./js/mixins/classable'),
     ClickAwayable: require('./js/mixins/click-awayable'),

diff --git a/src/js/before-after-wrapper.jsx b/src/js/before-after-wrapper.jsx
@@ -56,8 +56,6 @@ var BeforeAfterWrapper = React.createClass({
     }
   },
 
-  /** Styles */
-
   render: function() {
 
     var {
@@ -72,16 +70,14 @@ var BeforeAfterWrapper = React.createClass({
     var beforeElement, afterElement;
 
     if (this.props.beforeStyle) beforeElement = 
-      React.createElement(beforeElementType, 
-                          {style: AutoPrefix.all(beforeStyle), key: "::before"}, beforeStyle.content);
+      React.createElement(this.props.beforeElementType, 
+                          {style: AutoPrefix.all(this.props.beforeStyle), key: "::before"});
     if (this.props.afterStyle) afterElement = 
-      React.createElement(afterElementType, 
-                          {style: AutoPrefix.all(afterStyle), key: "::after"}, afterStyle.content);
+      React.createElement(this.props.afterElementType, 
+                          {style: AutoPrefix.all(this.props.afterStyle), key: "::after"});
 
     var children = [beforeElement, this.props.children, afterElement];
-
-    console.log("BAW props", this.props);
-
+
     var props = other;
     props.style = this.props.style;
 

diff --git a/src/js/date-picker/calendar-toolbar.jsx b/src/js/date-picker/calendar-toolbar.jsx
@@ -91,4 +91,4 @@ var CalendarToolbar = React.createClass({
 
 });
 
-module.exports = CalendarToolbar;
+module.exports = CalendarToolbar;
diff --git a/src/js/date-picker/date-picker-dialog.jsx b/src/js/date-picker/date-picker-dialog.jsx
@@ -13,7 +13,9 @@ var DatePickerDialog = React.createClass({
 
   propTypes: {
     initialDate: React.PropTypes.object,
-    onAccept: React.PropTypes.func
+    onAccept: React.PropTypes.func,
+    onShow: React.PropTypes.func,
+    onDismiss: React.PropTypes.func,
   },
 
   windowListeners: {
@@ -99,12 +101,20 @@ var DatePickerDialog = React.createClass({
     this.setState({
       isCalendarActive: true
     });
+
+    if(this.props.onShow) {
+      this.props.onShow();
+    }
   },
 
   _handleDialogDismiss: function() {
     this.setState({
       isCalendarActive: false
     });
+
+    if(this.props.onDismiss) {
+      this.props.onDismiss();
+    }
   },
 
   _handleWindowKeyUp: function(e) {

diff --git a/src/js/date-picker/date-picker.jsx b/src/js/date-picker/date-picker.jsx
@@ -16,7 +16,9 @@ var DatePicker = React.createClass({
     mode: React.PropTypes.oneOf(['portrait', 'landscape', 'inline']),
     onFocus: React.PropTypes.func,
     onTouchTap: React.PropTypes.func,
-    onChange: React.PropTypes.func
+    onChange: React.PropTypes.func,
+    onShow: React.PropTypes.func,
+    onDismiss: React.PropTypes.func,
   },
 
   windowListeners: {
@@ -42,6 +44,8 @@ var DatePicker = React.createClass({
       mode,
       onFocus,
       onTouchTap,
+      onShow,
+      onDismiss,
       ...other
     } = this.props;
     var classes = this.getClasses('mui-date-picker', {
@@ -65,8 +69,9 @@ var DatePicker = React.createClass({
         <DatePickerDialog
           ref="dialogWindow"
           initialDate={this.state.dialogDate}
-          mode={this.props.mode}
-          onAccept={this._handleDialogAccept} />
+          onAccept={this._handleDialogAccept}
+          onShow={onShow}
+          onDismiss={onDismiss} />
       </div>
 
     );

diff --git a/src/js/dialog-window.jsx b/src/js/dialog-window.jsx
@@ -43,6 +43,7 @@ var DialogWindow = React.createClass({
 
   componentDidMount: function() {
     this._positionDialog();
+    if (this.props.openImmediately) this.refs.dialogOverlay.preventScrolling();
   },
 
   componentDidUpdate: function(prevProps, prevState) {
@@ -107,7 +108,7 @@ var DialogWindow = React.createClass({
           {this.props.children}
           {actions}
         </Paper>
-        <Overlay show={this.state.open} onTouchTap={this._handleOverlayTouchTap} />
+        <Overlay ref="dialogOverlay" show={this.state.open} autoLockScrolling={false} onTouchTap={this._handleOverlayTouchTap} />
       </div>
     );
   },
@@ -117,22 +118,16 @@ var DialogWindow = React.createClass({
   },
 
   dismiss: function() {
-
     CssEvent.onTransitionEnd(this.getDOMNode(), function() {
-      //allow scrolling
-      var body = document.getElementsByTagName('body')[0];
-      body.style.overflow = '';
-    });
+      this.refs.dialogOverlay.allowScrolling();
+    }.bind(this));
 
     this.setState({ open: false });
     if (this.props.onDismiss) this.props.onDismiss();
   },
 
   show: function() {
-    //prevent scrolling
-    var body = document.getElementsByTagName('body')[0];
-    body.style.overflow = 'hidden';
-
+    this.refs.dialogOverlay.preventScrolling();
     this.setState({ open: true });
     if (this.props.onShow) this.props.onShow();
   },

diff --git a/src/js/drop-down-icon.jsx b/src/js/drop-down-icon.jsx
@@ -6,8 +6,7 @@ var ClickAwayable = require('./mixins/click-awayable');
 var KeyLine = require('./utils/key-line');
 var Paper = require('./paper');
 var FontIcon = require('./font-icon');
-var Menu = require('./menu');
-var MenuItem = require('./menu-item');
+var Menu = require('./menu/menu');
 
 var DropDownIcon = React.createClass({
 

diff --git a/src/js/drop-down-menu.jsx b/src/js/drop-down-menu.jsx
@@ -7,9 +7,8 @@ var ClickAwayable = require('./mixins/click-awayable');
 var DropDownArrow = require('./svg-icons/drop-down-arrow');
 var KeyLine = require('./utils/key-line');
 var Paper = require('./paper');
-var Menu = require('./menu');
+var Menu = require('./menu/menu');
 var ClearFix = require('./clearfix');
-
 var DropDownMenu = React.createClass({
 
   mixins: [Classable, StylePropable, ClickAwayable],
Original file line number	Diff line number	Diff line change
Expand Up		@@ -91,4 +91,4 @@ var CalendarToolbar = React.createClass({

		});

		module.exports = CalendarToolbar;
		module.exports = CalendarToolbar;