Added transition to dialog overlay

mui · Dec 6, 2014 · 0477ac3 · 0477ac3
1 parent 767499f
commit 0477ac3
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 21 deletions.
diff --git a/src/js/dialog.jsx b/src/js/dialog.jsx
@@ -3,6 +3,7 @@ var React = require('react'),
   Events = require('./utils/events.js'),
   KeyCode = require('./utils/key-code.js'),
   Classable = require('./mixins/classable'),
+  Overlay = require('./overlay.jsx'),
   Paper = require('./paper.jsx');
 
 var Dialog = React.createClass({
@@ -50,7 +51,7 @@ var Dialog = React.createClass({
 
     return (
       <div className={mainClasses}>
-        <Paper zDepth={4}>
+        <Paper className="dialog-window" zDepth={4}>
           <h3 className="dialog-title">
             {this.props.title}
           </h3>
@@ -63,7 +64,7 @@ var Dialog = React.createClass({
             </div>
           </div>
         </Paper>
-        <div className="dialog-overlay" onClick={this._handleClickAway}></div>
+        <Overlay show={this.state.open} onTouchTap={this._handleOverlayTouchTap} />
       </div>
     );
   },
@@ -86,7 +87,7 @@ var Dialog = React.createClass({
     el.style.marginTop = -1 * height / 2 + 'px';
   },
 
-  _handleClickAway: function() {
+  _handleOverlayTouchTap: function() {
     this.dismiss();
   },
 

diff --git a/src/less/components/dialog.less b/src/less/components/dialog.less
@@ -4,24 +4,31 @@
   top: 50%;
   left: 50%;
   font-size: medium;
-  visibility: hidden;
+
 
-  .mui-paper {
+  .dialog-window {
     position: relative;
     left: -50%;
     z-index: 2000;
     background: white;
+    visibility: hidden;
   }
+
   &.show {
-    visibility: visible;
+    .dialog-window {
+      visibility: visible;
+    }
   }
+
   .dialog-title {
     padding: 24px 24px 0 24px;
     margin-bottom: 0;
   }
+
   .dialog-content {
     padding: 24px;
   }
+
   .dialog-actions {
     width: 100%;
     padding: 8px 24px 16px 24px;
@@ -41,18 +48,4 @@
       cursor: pointer;
     }
   }
-}
-
-.dialog-overlay {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  visibility: hidden;
-  top: 0;
-  left: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-}
-
-.dialog.show .dialog-overlay {
-   visibility: visible;
-}
+}