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

Issue 266: Tabs added

Browse source
This commit is contained in:
saumya1906 2017-08-09 23:04:59 +05:30 committed by Cassie Tarakajian
parent 6f068b5503
commit 6b6ff7ca22
3 changed files with 245 additions and 235 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
client/modules/IDE/components/Preferences.jsx
View file

@ -1,6 +1,7 @@
import React, { PropTypes } from 'react';
import InlineSVG from 'react-inlinesvg';
import classNames from 'classnames';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
// import { bindActionCreators } from 'redux';
// import { connect } from 'react-redux';
// import * as PreferencesActions from '../actions/preferences';
@ -71,11 +72,15 @@ class Preferences extends React.Component {
<InlineSVG src={exitUrl} alt="Exit Preferences" />
</button>
</div>
<Tabs>
<TabList>
<div className="preference__subheadings">
<h4 className="preference__subheading1">General Settings</h4>
<Tab><h4 className="preference__subheading1">General Settings</h4></Tab>
<h4 className="preference__subheading2">Sketch Settings</h4>
<h4 className="preference__subheading2">Accessibility</h4>
<Tab><h4 className="preference__subheading2">Accessibility</h4></Tab>
</div>
</TabList>
<TabPanel>
<div className="preference">
<h4 className="preference__title">Theme</h4>
<div className="preference__options">
@ -229,6 +234,8 @@ class Preferences extends React.Component {
<label htmlFor="autosave-off" className="preference__option">Off</label>
</div>
</div>
</TabPanel>
<TabPanel>
<div className="preference">
<h4 className="preference__title">Accessible text-based canvas</h4>
<h6 className="preference__subtitle">Used with screen reader</h6>
@ -305,6 +312,8 @@ class Preferences extends React.Component {
</button>
</div>
</div>
</TabPanel>
</Tabs>
</section>
);
}

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

@ -3,6 +3,7 @@ import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { withRouter } from 'react-router';
import { Helmet } from 'react-helmet';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import SplitPane from 'react-split-pane';
import Editor from '../components/Editor';
import Sidebar from '../components/Sidebar';

2
client/styles/components/_preferences.scss
View file

@ -63,7 +63,7 @@
.preference__subheadings {
display: flex;
flex-wrap: wrap;
padding-bottom: #{7 / $base-font-size}rem;
padding-bottom: #{0.1 / $base-font-size}rem;
@include themify() {
border-bottom: 1px solid getThemifyVariable('button-border-color');
}