r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

fix #429

Browse source
This commit is contained in:
Cassie Tarakajian 2017-09-14 14:51:36 -04:00
parent 4ea9f96d3f
commit 9eede0f728
4 changed files with 33 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
client/modules/App/components/Overlay.jsx
View file

@ -57,14 +57,15 @@ Overlay.propTypes = {
closeOverlay: PropTypes.func,
title: PropTypes.string,
ariaLabel: PropTypes.string,
previousPath: PropTypes.string.isRequired
previousPath: PropTypes.string
};
Overlay.defaultProps = {
children: null,
title: 'Modal',
closeOverlay: null,
ariaLabel: 'modal'
ariaLabel: 'modal',
previousPath: '/'
};
export default Overlay;

24
client/modules/IDE/components/HTTPSModal.jsx Normal file
View file

@ -0,0 +1,24 @@
import React from 'react';
function HTTPSModal() {
return (
<section className="help-modal">
<div className="help-modal__section">
<div>
<p>Use the checkbox to choose whether this sketch should be loaded using HTTPS or HTTP.</p>
<p>You should choose HTTPS if you need to:</p>
<ul>
<li>access a webcam or microphone</li>
<li>access an API served over HTTPS</li>
</ul>
<p>Choose HTTP if you need to:</p>
<ul>
<li>access an API served over HTTP</li>
</ul>
</div>
</div>
</section>
);
}
export default HTTPSModal;

61
client/modules/IDE/components/HelpModal.jsx
View file

@ -1,61 +0,0 @@
import React, { PropTypes } from 'react';
import InlineSVG from 'react-inlinesvg';
const exitUrl = require('../../../images/exit.svg');
const helpContent = {
serveSecure: {
title: 'Serve over HTTPS',
body: (
<div>
<p>Use the checkbox to choose whether this sketch should be loaded using HTTPS or HTTP.</p>
<p>You should choose HTTPS if you need to:</p>
<ul>
<li>access a webcam or microphone</li>
<li>access an API served over HTTPS</li>
</ul>
<p>Choose HTTP if you need to:</p>
<ul>
<li>access an API served over HTTP</li>
</ul>
</div>
)
}
};
const fallbackContent = {
title: 'No content for this topic',
body: null,
};
class HelpModal extends React.Component {
componentDidMount() {
this.shareModal.focus();
}
render() {
const content = helpContent[this.props.type] == null ?
fallbackContent :
helpContent[this.props.type];
return (
<section className="help-modal" ref={(element) => { this.shareModal = element; }} tabIndex="0">
<header className="help-modal__header">
<h2>{content.title}</h2>
<button className="about__exit-button" onClick={this.props.closeModal}>
<InlineSVG src={exitUrl} alt="Close Help Overlay" />
</button>
</header>
<div className="help-modal__section">
{content.body}
</div>
</section>
);
}
}
HelpModal.propTypes = {
type: PropTypes.string.isRequired,
closeModal: PropTypes.func.isRequired,
};
export default HelpModal;

12
client/modules/IDE/pages/IDEView.jsx
View file

@ -15,7 +15,7 @@ import NewFolderModal from '../components/NewFolderModal';
import ShareModal from '../components/ShareModal';
import KeyboardShortcutModal from '../components/KeyboardShortcutModal';
import ErrorModal from '../components/ErrorModal';
import HelpModal from '../components/HelpModal';
import HTTPSModal from '../components/HTTPSModal';
import Nav from '../../../components/Nav';
import Console from '../components/Console';
import Toast from '../components/Toast';
@ -516,11 +516,11 @@ class IDEView extends React.Component {
{(() => { // eslint-disable-line
if (this.props.ide.helpType) {
return (
<Overlay>
<HelpModal
type={this.props.ide.helpType}
closeModal={this.props.hideHelpModal}
/>
<Overlay
title="Serve over HTTPS"
closeOverlay={this.props.hideHelpModal}
>
<HTTPSModal />
</Overlay>
);
}