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+
}

‎shared/redux/constants/constants.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,9 @@ export const CHANGE_SELECTED_FILE = 'CHANGE_SELECTED_FILE';
22
export const TOGGLE_SKETCH = 'TOGGLE_SKETCH';
33

44
export const START_SKETCH = 'START_SKETCH';
5-
export const STOP_SKETCH = 'STOP_SKETCH';
5+
export const STOP_SKETCH = 'STOP_SKETCH';
6+
7+
export const OPEN_PREFERENCES = 'OPEN_PREFERENCES';
8+
export const CLOSE_PREFERENCES = 'CLOSE_PREFERENCES';
9+
export const INCREASE_FONTSIZE = 'INCREASE_FONTSIZE';
10+
export const DECREASE_FONTSIZE = 'DECREASE_FONTSIZE';

‎shared/redux/reducers/index.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import { combineReducers } from 'redux'
22
import file from './files'
33
import ide from './ide'
4+
import preferences from './preferences'
45

56
const rootReducer = combineReducers({
67
file,
7-
ide
8+
ide,
9+
preferences
810
})
911

10-
export default rootReducer
12+
export default rootReducer

‎shared/redux/reducers/preferences.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import * as ActionTypes from '../constants/constants';
2+
3+
const initialState = {
4+
isPreferencesShowing: false,
5+
fontSize: 18
6+
}
7+
8+
const preferences = (state = initialState, action) => {
9+
switch (action.type) {
10+
case ActionTypes.OPEN_PREFERENCES:
11+
return {
12+
isPreferencesShowing: true,
13+
fontSize: state.fontSize
14+
}
15+
case ActionTypes.CLOSE_PREFERENCES:
16+
return {
17+
isPreferencesShowing: false,
18+
fontSize: state.fontSize
19+
}
20+
case ActionTypes.INCREASE_FONTSIZE:
21+
return {
22+
isPreferencesShowing: state.isPreferencesShowing,
23+
fontSize: state.fontSize+2
24+
}
25+
case ActionTypes.DECREASE_FONTSIZE:
26+
return {
27+
isPreferencesShowing: state.isPreferencesShowing,
28+
fontSize: state.fontSize-2
29+
}
30+
default:
31+
return state
32+
}
33+
}
34+
35+
export default preferences;

‎styles/abstracts/_placeholders.scss

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
%toolbar-button {
2-
background-color: $light-button-background-color;
3-
color: $light-button-color;
1+
%button {
42
display: inline-block;
53
height: #{44 / $base-font-size}rem;
64
width: #{44 / $base-font-size}rem;
@@ -10,11 +8,15 @@
108
cursor: pointer;
119
border: none;
1210
outline: none;
11+
}
1312

13+
%toolbar-button {
14+
@extend %button;
15+
background-color: $light-button-background-color;
16+
color: $light-button-color;
1417
& g {
1518
fill: $light-toolbar-button-color;
1619
}
17-
1820
&:hover {
1921
background-color: $light-button-background-hover-color;
2022
color: $light-button-hover-color;
@@ -30,3 +32,19 @@
3032
}
3133
}
3234
}
35+
36+
%preferences-button {
37+
@extend %button;
38+
background-color: $light-preferences-button-background-color;
39+
color: $light-preferences-button-color;
40+
& g {
41+
fill: $light-preferences-button-color;
42+
}
43+
&:hover {
44+
background-color: $light-preferences-button-background-color;
45+
color: $light-preferences-button-hover-color;
46+
& g {
47+
fill: $light-preferences-button-hover-color;
48+
}
49+
}
50+
}

‎styles/abstracts/_variables.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
$base-font-size: 16;
2+
$menu-font-size: 21;
23

34
//colors
45
$p5js-pink: #ed225d;
@@ -35,3 +36,9 @@ $dark-button-active-color: $white;
3536
$editor-border-color: #f4f4f4;
3637
$editor-selected-line-color: #f3f3f3;
3738

39+
$light-preferences-background-color: #f4f4f4;
40+
41+
$light-preferences-button-color: #8e8e8f;
42+
$light-preferences-button-hover-color: #333333;
43+
44+
$light-preferences-button-background-color: #e6e6e6;

‎styles/components/_editor.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,5 +17,5 @@
1717
}
1818

1919
.CodeMirror-line {
20-
padding-left: #{5 / $base-font-size}rem;
21-
}
20+
padding-left: #{5 / $base-font-size}rem;
21+
}

0 commit comments

Comments
 (0)