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

start to add preferences styling

This commit is contained in:
Cassie Tarakajian 2017-11-13 19:09:08 -05:00
parent 9f9b09b99d
commit 9587d01908
3 changed files with 50 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
client/modules/IDE/components/Preferences.jsx
View File

@ -1,16 +1,13 @@
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';
const exitUrl = require('../../../images/exit.svg');
const plusUrl = require('../../../images/plus.svg');
const minusUrl = require('../../../images/minus.svg');
const beepUrl = require('../../../sounds/audioAlert.mp3');
// import { debounce } from 'lodash';
class Preferences extends React.Component {
constructor(props) {
@ -54,24 +51,9 @@ class Preferences extends React.Component {
render() {
const beep = new Audio(beepUrl);
const preferencesContainerClass = classNames({
'preferences': true,
'preferences--selected': this.props.isVisible
});
return (
<section className={preferencesContainerClass} tabIndex="0" title="preference-menu">
<div className="preferences__heading">
<h2 className="preferences__title">Settings</h2>
<button
className="preferences__exit-button"
onClick={this.props.closePreferences}
title="exit"
aria-label="exit preferences"
>
<InlineSVG src={exitUrl} alt="Exit Preferences" />
</button>
</div>
<section className="preferences" tabIndex="0" title="preference-menu">
<Tabs>
<TabList>
<div className="preference__subheadings">
@ -320,8 +302,6 @@ class Preferences extends React.Component {
}
Preferences.propTypes = {
isVisible: PropTypes.bool.isRequired,
closePreferences: PropTypes.func.isRequired,
fontSize: PropTypes.number.isRequired,
indentationAmount: PropTypes.number.isRequired,
setIndentation: PropTypes.func.isRequired,

84
client/modules/IDE/pages/IDEView.jsx
View File

@ -246,29 +246,35 @@ class IDEView extends React.Component {
currentUser={this.props.user.username}
showHelpModal={this.props.showHelpModal}
/>
<Preferences
isVisible={this.props.ide.preferencesIsVisible}
closePreferences={this.props.closePreferences}
fontSize={this.props.preferences.fontSize}
indentationAmount={this.props.preferences.indentationAmount}
setIndentation={this.props.setIndentation}
indentWithSpace={this.props.indentWithSpace}
indentWithTab={this.props.indentWithTab}
isTabIndent={this.props.preferences.isTabIndent}
setFontSize={this.props.setFontSize}
autosave={this.props.preferences.autosave}
setAutosave={this.props.setAutosave}
lintWarning={this.props.preferences.lintWarning}
setLintWarning={this.props.setLintWarning}
textOutput={this.props.preferences.textOutput}
gridOutput={this.props.preferences.gridOutput}
soundOutput={this.props.preferences.soundOutput}
setTextOutput={this.props.setTextOutput}
setGridOutput={this.props.setGridOutput}
setSoundOutput={this.props.setSoundOutput}
theme={this.props.preferences.theme}
setTheme={this.props.setTheme}
/>
{this.props.ide.preferencesIsVisible &&
<Overlay
title="Settings"
ariaLabel="settings"
closeOverlay={this.props.closePreferences}
>
<Preferences
fontSize={this.props.preferences.fontSize}
indentationAmount={this.props.preferences.indentationAmount}
setIndentation={this.props.setIndentation}
indentWithSpace={this.props.indentWithSpace}
indentWithTab={this.props.indentWithTab}
isTabIndent={this.props.preferences.isTabIndent}
setFontSize={this.props.setFontSize}
autosave={this.props.preferences.autosave}
setAutosave={this.props.setAutosave}
lintWarning={this.props.preferences.lintWarning}
setLintWarning={this.props.setLintWarning}
textOutput={this.props.preferences.textOutput}
gridOutput={this.props.preferences.gridOutput}
soundOutput={this.props.preferences.soundOutput}
setTextOutput={this.props.setTextOutput}
setGridOutput={this.props.setGridOutput}
setSoundOutput={this.props.setSoundOutput}
theme={this.props.preferences.theme}
setTheme={this.props.setTheme}
/>
</Overlay>
}
<div className="editor-preview-container">
<SplitPane
split="vertical"
@ -361,25 +367,23 @@ class IDEView extends React.Component {
<div className="preview-frame-overlay" ref={(element) => { this.overlay = element; }}>
</div>
<div>
{(() => {
if (
{(
(
(this.props.preferences.textOutput ||
this.props.preferences.gridOutput ||
this.props.preferences.soundOutput
) && this.props.ide.isPlaying
) || this.props.ide.isAccessibleOutputPlaying) {
return (
<AccessibleOutput
isPlaying={this.props.ide.isPlaying}
previewIsRefreshing={this.props.ide.previewIsRefreshing}
textOutput={this.props.preferences.textOutput}
gridOutput={this.props.preferences.gridOutput}
/>
);
}
return '';
})()}
this.props.preferences.gridOutput ||
this.props.preferences.soundOutput
) &&
this.props.ide.isPlaying
) ||
this.props.ide.isAccessibleOutputPlaying
) &&
<AccessibleOutput
isPlaying={this.props.ide.isPlaying}
previewIsRefreshing={this.props.ide.previewIsRefreshing}
textOutput={this.props.preferences.textOutput}
gridOutput={this.props.preferences.gridOutput}
/>
}
</div>
<PreviewFrame
htmlFile={this.props.htmlFile}

21
client/styles/components/_preferences.scss
View File

@ -1,20 +1,10 @@
.preferences {
@extend %modal;
position: absolute;
top: #{113 / $base-font-size}rem;
right: #{192 / $base-font-size}rem;
width: #{640 / $base-font-size}rem;
height: #{540 / $base-font-size}rem;
bottom: #{371 / $base-font-size}rem;
margin-bottom: #{100 / $base-font-size}rem;
margin-right: #{100 / $base-font-size}rem;
display: none;
width: 100%;
max-width: #{640 / $base-font-size}rem;
z-index: 9999;
padding: #{14 / $base-font-size}rem #{20 / $base-font-size}rem #{2 / $base-font-size}rem #{20 / $base-font-size}rem ;
&--selected {
display: flex;
flex-direction: column;
}
display: flex;
flex-direction: column;
@include themify() {
background-color: getThemifyVariable('editor-gutter-color');
}
@ -173,13 +163,12 @@
}
font-size: #{12 / $base-font-size}rem;
height: #{25 / $base-font-size}rem;
margin-top: #{30 / $base-font-size}rem;
margin-left: #{5 / $base-font-size}rem;
margin-bottom: #{0.1 / $base-font-size}rem;
margin-right: #{60 / $base-font-size}rem;
padding-right: #{10 / $base-font-size}rem;
font-family: Montserrat;
width: #{110 / $base-font-size}rem;
width: 100%;
}
.preference__vertical-list {