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

add focus and labels

Browse source
This commit is contained in:
MathuraMG 2016-09-28 12:09:42 -04:00
parent f017dd8a76
commit 46d58014ff
3 changed files with 49 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
client/modules/IDE/components/About.js
View file

@ -4,13 +4,17 @@ const exitUrl = require('../../../images/exit.svg');
import { browserHistory } from 'react-router';
class About extends React.Component {
componentDidMount() {
this.refs.about.focus();
}
closeAboutModal() {
browserHistory.goBack();
}
render() {
return (
<div className="about">
<section className="about" ref="about" tabIndex="0">
<header className="about__header">
<h2>About</h2>
<button className="about__exit-button" onClick={this.closeAboutModal}>
@ -33,7 +37,7 @@ class About extends React.Component {
> report a bug.</a>
</p>
</div>
</div>
</section>
);
}
}

3
client/modules/IDE/components/Editor.js
View file

@ -148,6 +148,7 @@ class Editor extends React.Component {
>
<button
className="editor__options-button"
aria-label="editor options"
tabIndex="0"
onClick={(e) => {
e.target.focus();
@ -157,7 +158,7 @@ class Editor extends React.Component {
>
<InlineSVG src={downArrowUrl} />
</button>
<ul className="editor__options">
<ul className="editor__options" title="editor options">
<li>
<a onClick={this.tidyCode}>Tidy</a>
</li>

77
client/modules/IDE/components/ShareModal.js
View file

@ -2,42 +2,47 @@ import React, { PropTypes } from 'react';
import InlineSVG from 'react-inlinesvg';
const exitUrl = require('../../../images/exit.svg');
function ShareModal(props) {
const hostname = window.location.origin;
return (
<section className="share-modal">
<header className="share-modal__header">
<h2>Share Sketch</h2>
<button className="about__exit-button" onClick={props.closeShareModal}>
<InlineSVG src={exitUrl} alt="Close Share Overlay" />
</button>
</header>
<div className="share-modal__section">
<label className="share-modal__label">Embed</label>
<input
type="text"
className="share-modal__input"
value={`<iframe src="${hostname}/embed/${props.projectId}"></iframe>`}
/>
</div>
<div className="share-modal__section">
<label className="share-modal__label">Fullscreen</label>
<input
type="text"
className="share-modal__input"
value={`${hostname}/full/${props.projectId}`}
/>
</div>
<div className="share-modal__section">
<label className="share-modal__label">Edit</label>
<input
type="text"
className="share-modal__input"
value={`${hostname}/projects/${props.projectId}`}
/>
</div>
</section>
);
class ShareModal extends React.Component {
componentDidMount() {
this.refs.shareModal.focus();
}
render() {
const hostname = window.location.origin;
return (
<section className="share-modal" ref="shareModal" tabIndex="0">
<header className="share-modal__header">
<h2>Share Sketch</h2>
<button className="about__exit-button" onClick={this.props.closeShareModal}>
<InlineSVG src={exitUrl} alt="Close Share Overlay" />
</button>
</header>
<div className="share-modal__section">
<label className="share-modal__label">Embed</label>
<input
type="text"
className="share-modal__input"
value={`<iframe src="${hostname}/embed/${this.props.projectId}"></iframe>`}
/>
</div>
<div className="share-modal__section">
<label className="share-modal__label">Fullscreen</label>
<input
type="text"
className="share-modal__input"
value={`${hostname}/full/${this.props.projectId}`}
/>
</div>
<div className="share-modal__section">
<label className="share-modal__label">Edit</label>
<input
type="text"
className="share-modal__input"
value={`${hostname}/projects/${this.props.projectId}`}
/>
</div>
</section>
);
}
}
ShareModal.propTypes = {