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,
|
AccordionContent,
|
||||||
AccordionSection} = require('components/accordion');
|
AccordionSection} = require('components/accordion');
|
||||||
|
|
||||||
|
var Modal = require('components/modal');
|
||||||
|
|
||||||
var gettext = require('utils').gettext;
|
var gettext = require('utils').gettext;
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -81,6 +83,7 @@ var Management = React.createClass({
|
||||||
module.exports = {
|
module.exports = {
|
||||||
component: Management,
|
component: Management,
|
||||||
init: function() {
|
init: function() {
|
||||||
|
React.render(<Modal />, document.getElementById('modal'));
|
||||||
React.render(<Management />, document.getElementById('view'));
|
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>
|
</head>
|
||||||
<body class="management">
|
<body class="management">
|
||||||
<main>
|
<main>
|
||||||
|
<div id="modal"></div>
|
||||||
<div id="view">
|
<div id="view">
|
||||||
<div class="spinner-cont">
|
<div class="spinner-cont">
|
||||||
<div class="spinner"/>
|
<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 '_tooltip';
|
||||||
@import '_app-error';
|
@import '_app-error';
|
||||||
@import '_management';
|
@import '_management';
|
||||||
|
@import '_modal';
|
||||||
|
|
||||||
@import '_card-listing';
|
@import '_card-listing';
|
||||||
@import '_complete-payment';
|
@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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main>
|
<main>
|
||||||
|
<div id="modal">
|
||||||
|
</div>
|
||||||
<div id="error">
|
<div id="error">
|
||||||
</div>
|
</div>
|
||||||
<div id="view">
|
<div id="view">
|
||||||
|
|
|
||||||
|
|
@ -21,6 +21,7 @@ module.exports = {
|
||||||
styleguide: {
|
styleguide: {
|
||||||
entry: {
|
entry: {
|
||||||
// Explicit entries for the styleguide.
|
// Explicit entries for the styleguide.
|
||||||
|
'modal': './styleguide/jsx/modal',
|
||||||
'app-error': './styleguide/jsx/app-error',
|
'app-error': './styleguide/jsx/app-error',
|
||||||
'card-form': './styleguide/jsx/card-form',
|
'card-form': './styleguide/jsx/card-form',
|
||||||
'spinner': './styleguide/jsx/spinner',
|
'spinner': './styleguide/jsx/spinner',
|
||||||
|
|
|
||||||
Загрузка…
Ссылка в новой задаче