Skip to content

Commit 7cc1efc

Browse files
catarakcatarak
authored
Merge pull request #8 from MathuraMG/add-pref
Add preference in toolbar
2 parents 4539946 + 02fa5e6 commit 7cc1efc

File tree

20 files changed

+311
-24
lines changed

20 files changed

+311
-24
lines changed

‎images/exit.svg‎

Lines changed: 12 additions & 0 deletions
Loading

‎images/minus.svg‎

Lines changed: 12 additions & 0 deletions
Loading

‎images/plus.svg‎

Lines changed: 12 additions & 0 deletions
Loading

‎images/preferences.svg‎

Lines changed: 19 additions & 0 deletions
Loading

‎index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,11 @@
33
<head>
44
<title>p5.js Web Editor</title>
55
<link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
6+
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
67
</head>
78
<body>
89
<div id="root" class="root-app">
910
</div>
1011
<script src="/dist/bundle.js"></script>
1112
</body>
12-
</html>
13+
</html>

‎shared/components/Editor/Editor.jsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import 'codemirror/mode/javascript/javascript';
44
import 'codemirror/addon/selection/active-line'
55

66
class Editor extends React.Component {
7-
_cm: CodeMirror.Editor
7+
_cm: CodeMirror.Editor
88

99
componentDidMount() {
1010
this._cm = CodeMirror(this.refs.container, {
@@ -17,13 +17,17 @@ class Editor extends React.Component {
1717
this._cm.on('change', () => {
1818
this.props.updateFile("sketch.js", this._cm.getValue());
1919
});
20+
this._cm.getWrapperElement().style['font-size'] = this.props.fontSize+'px';
2021
}
2122

2223
componentDidUpdate(prevProps) {
2324
if (this.props.content !== prevProps.content &&
2425
this.props.content !== this._cm.getValue()) {
2526
this._cm.setValue(this.props.content);
2627
}
28+
if (this.props.fontSize !== prevProps.fontSize) {
29+
this._cm.getWrapperElement().style['font-size'] = this.props.fontSize+'px';
30+
}
2731
}
2832

2933
componentWillUnmount() {
@@ -35,4 +39,4 @@ class Editor extends React.Component {
3539
}
3640
}
3741

38-
export default Editor;
42+
export default Editor;

‎shared/components/Preferences/Preferences.jsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from 'react';
2+
3+
var Isvg = require('react-inlinesvg');
4+
var exitUrl = require('../../../images/exit.svg');
5+
var plusUrl = require('../../../images/plus.svg');
6+
var minusUrl = require('../../../images/minus.svg');
7+
var classNames = require('classnames');
8+
9+
class Preferences extends React.Component {
10+
render() {
11+
let preferencesContainerClass = classNames({
12+
"preferences": true,
13+
"preferences--selected": this.props.isPreferencesShowing
14+
});
15+
return (
16+
<div className={preferencesContainerClass} tabindex="0">
17+
<div className="preferences__heading">
18+
<h2 className="preferences__title">Preferences</h2>
19+
<button className="preferences__exit-button" onClick={this.props.closePreferences}>
20+
<Isvg src={exitUrl} alt="Exit Preferences" />
21+
</button>
22+
</div>
23+
<div className="preference">
24+
<h3 className="preference__title">Font Size</h3>
25+
<button className="preference__plus-button" onClick={this.props.decreaseFont}>
26+
<Isvg src={minusUrl} alt="Decrease Font Size" />
27+
</button>
28+
<p className="preference__value">{this.props.fontSize}</p>
29+
<button className="preference__minus-button" onClick={this.props.increaseFont}>
30+
<Isvg src={plusUrl} alt="Increase Font Size" />
31+
</button>
32+
</div>
33+
</div>
34+
);
35+
}
36+
}
37+
38+
export default Preferences;

‎shared/components/Toolbar/Toolbar.jsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ var Isvg = require('react-inlinesvg');
44
var playUrl = require('../../../images/play.svg');
55
var logoUrl = require('../../../images/p5js-logo.svg');
66
var stopUrl = require('../../../images/stop.svg');
7+
var preferencesUrl = require('../../../images/preferences.svg');
78
var classNames = require('classnames');
89

910
class Toolbar extends React.Component {
@@ -16,6 +17,10 @@ class Toolbar extends React.Component {
1617
"toolbar__stop-button": true,
1718
"toolbar__stop-button--selected": !this.props.isPlaying
1819
});
20+
let preferencesButtonClass = classNames({
21+
"toolbar__preferences-button": true,
22+
"toolbar__preferences-button--selected": this.props.isPreferencesShowing
23+
});
1924

2025
return (
2126
<div className="toolbar">
@@ -26,6 +31,9 @@ class Toolbar extends React.Component {
2631
<button className={stopButtonClass} onClick={this.props.stopSketch}>
2732
<Isvg src={stopUrl} alt="Stop Sketch" />
2833
</button>
34+
<button className={preferencesButtonClass} onClick={this.props.openPreferences}>
35+
<Isvg src={preferencesUrl} alt="Show Preferences" />
36+
</button>
2937
</div>
3038
);
3139
}

‎shared/containers/App/App.jsx‎

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import Editor from '../../components/Editor/Editor'
33
import PreviewFrame from '../../components/Preview/PreviewFrame'
44
import Preview from '../../components/Preview/Preview'
55
import Toolbar from '../../components/Toolbar/Toolbar'
6+
import Preferences from '../../components/Preferences/Preferences'
67
import { bindActionCreators } from 'redux'
78
import { connect } from 'react-redux'
89
import * as FileActions from '../../redux/actions'
@@ -11,16 +12,26 @@ class App extends React.Component {
1112
render() {
1213
return (
1314
<div className="app">
14-
<Toolbar
15+
<Toolbar
1516
className="toolbar"
1617
isPlaying={this.props.ide.isPlaying}
17-
startSketch={this.props.startSketch}
18-
stopSketch={this.props.stopSketch}/>
19-
<Editor
18+
startSketch={this.props.startSketch}
19+
stopSketch={this.props.stopSketch}
20+
openPreferences={this.props.openPreferences}
21+
isPreferencesShowing = {this.props.preferences.isPreferencesShowing}
22+
/>
23+
<Preferences
24+
isPreferencesShowing = {this.props.preferences.isPreferencesShowing}
25+
closePreferences={this.props.closePreferences}
26+
increaseFont={this.props.increaseFont}
27+
decreaseFont={this.props.decreaseFont}
28+
fontSize={this.props.preferences.fontSize}/>
29+
<Editor
30+
content={this.props.file.content}
31+
updateFile={this.props.updateFile}
32+
fontSize={this.props.preferences.fontSize} />
33+
<PreviewFrame
2034
content={this.props.file.content}
21-
updateFile={this.props.updateFile} />
22-
<PreviewFrame
23-
content={this.props.file.content}
2435
head={
2536
<link type='text/css' rel='stylesheet' href='preview-styles.css' />
2637
}
@@ -33,12 +44,13 @@ class App extends React.Component {
3344
function mapStateToProps(state) {
3445
return {
3546
file: state.file,
36-
ide: state.ide
47+
ide: state.ide,
48+
preferences: state.preferences
3749
}
3850
}
3951

4052
function mapDispatchToProps(dispatch) {
4153
return bindActionCreators(FileActions, dispatch);
4254
}
4355

44-
export default connect(mapStateToProps, mapDispatchToProps)(App);
56+
export default connect(mapStateToProps, mapDispatchToProps)(App);

‎shared/redux/actions/index.js‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,28 @@ export function stopSketch() {
2424
return {
2525
type: ActionTypes.STOP_SKETCH
2626
}
27-
}
27+
}
28+
29+
export function openPreferences() {
30+
return {
31+
type: ActionTypes.OPEN_PREFERENCES
32+
}
33+
}
34+
35+
export function closePreferences() {
36+
return {
37+
type: ActionTypes.CLOSE_PREFERENCES
38+
}
39+
}
40+
41+
export function increaseFont() {
42+
return {
43+
type: ActionTypes.INCREASE_FONTSIZE
44+
}
45+
}
46+
47+
export function decreaseFont() {
48+
return {
49+
type: ActionTypes.DECREASE_FONTSIZE
50+
}
51+
}

0 commit comments

Comments
 (0)