Merge pull request #206 from muffinresearch/add-modal
Add modal component (fixes #188)
This commit is contained in:
Stuart Colville
Коммит
de357b5858
|
|
@ -6,6 +6,8 @@ var {
|
|||
AccordionContent,
|
||||
AccordionSection} = require('components/accordion');
|
||||
|
||||
var Modal = require('components/modal');
|
||||
|
||||
var gettext = require('utils').gettext;
|
||||
|
||||
|
||||
|
|
@ -81,6 +83,7 @@ var Management = React.createClass({
|
|||
module.exports = {
|
||||
component: Management,
|
||||
init: function() {
|
||||
React.render(<Modal />, document.getElementById('modal'));
|
||||
React.render(<Management />, document.getElementById('view'));
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
'use strict';
|
||||
|
||||
var React = require('react');
|
||||
var gettext = require('utils').gettext;
|
||||
var cx = require('classnames');
|
||||
|
||||
|
||||
module.exports = React.createClass({
|
||||
|
||||
displayName: 'Modal',
|
||||
|
||||
propTypes: {
|
||||
children: React.PropTypes.array.required,
|
||||
close: React.PropTypes.func,
|
||||
showModal: React.PropTypes.bool,
|
||||
title: React.PropTypes.string,
|
||||
},
|
||||
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
showModal: true,
|
||||
};
|
||||
},
|
||||
|
||||
render: function() {
|
||||
|
||||
var classes = cx(['modal', {'active': this.props.showModal}]);
|
||||
|
||||
return (
|
||||
<div className={classes} onClick={this.props.close}>
|
||||
<div className="inner">
|
||||
<header>
|
||||
{this.props.title ? <h2>{this.props.title}</h2> : null}
|
||||
<a href="#" onClick={this.props.close} className="close">
|
||||
<span className="vh">{gettext('Close')}</span>
|
||||
</a>
|
||||
</header>
|
||||
<div className="content">
|
||||
{this.props.children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -9,6 +9,7 @@
|
|||
</head>
|
||||
<body class="management">
|
||||
<main>
|
||||
<div id="modal"></div>
|
||||
<div id="view">
|
||||
<div class="spinner-cont">
|
||||
<div class="spinner"/>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,57 @@
|
|||
.modal {
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
// Ensure transform on .inner doesn't
|
||||
// render on half a pixel thus causing fuzziness.
|
||||
transform-style: preserve-3d;
|
||||
z-index: 20;
|
||||
|
||||
.inner {
|
||||
background: #fff;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #C3CFD8;
|
||||
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
|
||||
height: 468px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 318px;
|
||||
}
|
||||
|
||||
.close {
|
||||
color: #666;
|
||||
font-size: $large-font;
|
||||
line-height: 1ex;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
right: -5px;
|
||||
text-decoration: none;
|
||||
top: -5px;
|
||||
z-index: 30;
|
||||
|
||||
&:before {
|
||||
content: '×';
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
|
||||
h2 {
|
||||
margin: 1.5em;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -16,6 +16,7 @@
|
|||
@import '_tooltip';
|
||||
@import '_app-error';
|
||||
@import '_management';
|
||||
@import '_modal';
|
||||
|
||||
@import '_card-listing';
|
||||
@import '_complete-payment';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
'use strict';
|
||||
|
||||
var React = require('react');
|
||||
var Modal = require('components/modal');
|
||||
var CardForm = require('components/card-form');
|
||||
React.render(<Modal showModal={true} tite="New Card Details" >
|
||||
<CardForm />
|
||||
</Modal>, document.getElementById('modal'));
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
# Modal Dialogue
|
||||
|
||||
This is the modal dialogue component.
|
||||
|
||||
```iframe
|
||||
sourcecodeSelector: '#modal'
|
||||
dynamicSource: true
|
||||
title: Modal Dialogue
|
||||
renderer: nunjucks
|
||||
template: jsx.html
|
||||
bundle: modal
|
||||
```
|
||||
|
|
@ -9,6 +9,8 @@
|
|||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div id="modal">
|
||||
</div>
|
||||
<div id="error">
|
||||
</div>
|
||||
<div id="view">
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ module.exports = {
|
|||
styleguide: {
|
||||
entry: {
|
||||
// Explicit entries for the styleguide.
|
||||
'modal': './styleguide/jsx/modal',
|
||||
'app-error': './styleguide/jsx/app-error',
|
||||
'card-form': './styleguide/jsx/card-form',
|
||||
'spinner': './styleguide/jsx/spinner',
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче