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

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

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

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

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