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

Merge pull request #8 from MathuraMG/add-pref

Browse source 
Add preference in toolbar
This commit is contained in:
Cassie Tarakajian 2016-06-20 17:44:07 -04:00 committed by GitHub
commit 7cc1efcd94
20 changed files with 311 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
images/exit.svg Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
<title>Exit</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="exit" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard-1" fill="#D8D8D8">
<path d="M8,5.87867966 L2.69669914,0.575378798 L0.575378798,2.69669914 L5.87867966,8 L0.575378798,13.3033009 L2.69669914,15.4246212 L8,10.1213203 L13.3033009,15.4246212 L15.4246212,13.3033009 L10.1213203,8 L15.4246212,2.69669914 L13.3033009,0.575378798 L8,5.87867966 Z" id="exit"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 817 B

12
images/minus.svg Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
<title>Decrease Value</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Decrease value" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="16" transform="translate(0.000000, -6.000000)" fill="#D8D8D8">
<rect id="Decrease value" x="0" y="12" width="16" height="4"></rect>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 653 B

12
images/plus.svg Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
<title>Increase Value</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Increase Value" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="16" fill="#D8D8D8">
<path d="M10,6 L10,0 L6,0 L6,6 L0,6 L0,10 L6,10 L6,16 L10,16 L10,10 L16,10 L16,6 L10,6 Z" id="Increase Value"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 659 B

19
images/preferences.svg Normal file
View file

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
<title>preferences</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M14.6822397,16.2117311 L15.1198278,19.0213068 C14.3844186,19.4395702 13.5928664,19.770504 12.7592794,20 L11.0818617,17.703677 C10.7282919,17.7528772 10.367116,17.7783101 10,17.7783101 C9.63288395,17.7783101 9.2717081,17.7528772 8.91813825,17.703677 L7.24072063,20 C6.40713364,19.770504 5.6155814,19.4395702 4.88017224,19.0213068 L5.31776031,16.2117311 C4.73977887,15.7753775 4.22462249,15.2602211 3.78826886,14.6822397 L0.978693166,15.1198278 C0.560429839,14.3844186 0.22949601,13.5928664 -2.84217094e-14,12.7592794 L2.29632299,11.0818617 C2.24712285,10.7282919 2.22168987,10.367116 2.22168987,10 C2.22168987,9.63288395 2.24712285,9.2717081 2.29632299,8.91813825 L-8.12791077e-15,7.24072063 C0.22949601,6.40713364 0.560429839,5.6155814 0.978693166,4.88017224 L3.78826886,5.31776031 C4.22462249,4.73977887 4.73977887,4.22462249 5.31776031,3.78826886 L4.88017224,0.978693166 C5.6155814,0.560429839 6.40713364,0.22949601 7.24072063,0 L8.91813825,2.29632299 C9.2717081,2.24712285 9.63288395,2.22168987 10,2.22168987 C10.367116,2.22168987 10.7282919,2.24712285 11.0818617,2.29632299 L12.7592794,1.98620157e-14 C13.5928664,0.22949601 14.3844186,0.560429839 15.1198278,0.978693166 L14.6822397,3.78826886 C15.2602211,4.22462249 15.7753775,4.73977887 16.2117311,5.31776031 L19.0213068,4.88017224 C19.4395702,5.6155814 19.770504,6.40713364 20,7.24072063 L17.703677,8.91813825 C17.7528772,9.2717081 17.7783101,9.63288395 17.7783101,10 C17.7783101,10.367116 17.7528772,10.7282919 17.703677,11.0818617 L20,12.7592794 C19.770504,13.5928664 19.4395702,14.3844186 19.0213068,15.1198278 L16.2117311,14.6822397 C15.7753775,15.2602211 15.2602211,15.7753775 14.6822397,16.2117311 L14.6822397,16.2117311 Z M10,13.8891551 C12.147921,13.8891551 13.8891551,12.147921 13.8891551,10 C13.8891551,7.85207897 12.147921,6.11084493 10,6.11084493 C7.85207897,6.11084493 6.11084493,7.85207897 6.11084493,10 C6.11084493,12.147921 7.85207897,13.8891551 10,13.8891551 Z" id="path-1"></path>
</defs>
<g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Desktop-IDE-light" fill="#ED225D">
<g id="preferences">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Combined-Shape" fill="#white" xlink:href="#path-1"></use>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.7 KiB

1
index.html
View file

@ -3,6 +3,7 @@
<head>
<title>p5.js Web Editor</title>
<link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="root" class="root-app">

6
shared/components/Editor/Editor.jsx
View file

@ -4,7 +4,7 @@ import 'codemirror/mode/javascript/javascript';
import 'codemirror/addon/selection/active-line'
class Editor extends React.Component {
_cm: CodeMirror.Editor
_cm: CodeMirror.Editor
componentDidMount() {
this._cm = CodeMirror(this.refs.container, {
@ -17,6 +17,7 @@ class Editor extends React.Component {
this._cm.on('change', () => {
this.props.updateFile("sketch.js", this._cm.getValue());
});
this._cm.getWrapperElement().style['font-size'] = this.props.fontSize+'px';
}
componentDidUpdate(prevProps) {
@ -24,6 +25,9 @@ class Editor extends React.Component {
this.props.content !== this._cm.getValue()) {
this._cm.setValue(this.props.content);
}
if (this.props.fontSize !== prevProps.fontSize) {
this._cm.getWrapperElement().style['font-size'] = this.props.fontSize+'px';
}
}
componentWillUnmount() {

38
shared/components/Preferences/Preferences.jsx Normal file
View file

@ -0,0 +1,38 @@
import React from 'react';
var Isvg = require('react-inlinesvg');
var exitUrl = require('../../../images/exit.svg');
var plusUrl = require('../../../images/plus.svg');
var minusUrl = require('../../../images/minus.svg');
var classNames = require('classnames');
class Preferences extends React.Component {
render() {
let preferencesContainerClass = classNames({
"preferences": true,
"preferences--selected": this.props.isPreferencesShowing
});
return (
<div className={preferencesContainerClass} tabindex="0">
<div className="preferences__heading">
<h2 className="preferences__title">Preferences</h2>
<button className="preferences__exit-button" onClick={this.props.closePreferences}>
<Isvg src={exitUrl} alt="Exit Preferences" />
</button>
</div>
<div className="preference">
<h3 className="preference__title">Font Size</h3>
<button className="preference__plus-button" onClick={this.props.decreaseFont}>
<Isvg src={minusUrl} alt="Decrease Font Size" />
</button>
<p className="preference__value">{this.props.fontSize}</p>
<button className="preference__minus-button" onClick={this.props.increaseFont}>
<Isvg src={plusUrl} alt="Increase Font Size" />
</button>
</div>
</div>
);
}
}
export default Preferences;

8
shared/components/Toolbar/Toolbar.jsx
View file

@ -4,6 +4,7 @@ var Isvg = require('react-inlinesvg');
var playUrl = require('../../../images/play.svg');
var logoUrl = require('../../../images/p5js-logo.svg');
var stopUrl = require('../../../images/stop.svg');
var preferencesUrl = require('../../../images/preferences.svg');
var classNames = require('classnames');
class Toolbar extends React.Component {
@ -16,6 +17,10 @@ class Toolbar extends React.Component {
"toolbar__stop-button": true,
"toolbar__stop-button--selected": !this.props.isPlaying
});
let preferencesButtonClass = classNames({
"toolbar__preferences-button": true,
"toolbar__preferences-button--selected": this.props.isPreferencesShowing
});
return (
<div className="toolbar">
@ -26,6 +31,9 @@ class Toolbar extends React.Component {
<button className={stopButtonClass} onClick={this.props.stopSketch}>
<Isvg src={stopUrl} alt="Stop Sketch" />
</button>
<button className={preferencesButtonClass} onClick={this.props.openPreferences}>
<Isvg src={preferencesUrl} alt="Show Preferences" />
</button>
</div>
);
}

18
shared/containers/App/App.jsx
View file

@ -3,6 +3,7 @@ import Editor from '../../components/Editor/Editor'
import PreviewFrame from '../../components/Preview/PreviewFrame'
import Preview from '../../components/Preview/Preview'
import Toolbar from '../../components/Toolbar/Toolbar'
import Preferences from '../../components/Preferences/Preferences'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as FileActions from '../../redux/actions'
@ -15,10 +16,20 @@ class App extends React.Component {
className="toolbar"
isPlaying={this.props.ide.isPlaying}
startSketch={this.props.startSketch}
stopSketch={this.props.stopSketch}/>
stopSketch={this.props.stopSketch}
openPreferences={this.props.openPreferences}
isPreferencesShowing = {this.props.preferences.isPreferencesShowing}
/>
<Preferences
isPreferencesShowing = {this.props.preferences.isPreferencesShowing}
closePreferences={this.props.closePreferences}
increaseFont={this.props.increaseFont}
decreaseFont={this.props.decreaseFont}
fontSize={this.props.preferences.fontSize}/>
<Editor
content={this.props.file.content}
updateFile={this.props.updateFile} />
updateFile={this.props.updateFile}
fontSize={this.props.preferences.fontSize} />
<PreviewFrame
content={this.props.file.content}
head={
@ -33,7 +44,8 @@ class App extends React.Component {
function mapStateToProps(state) {
return {
file: state.file,
ide: state.ide
ide: state.ide,
preferences: state.preferences
}
}

24
shared/redux/actions/index.js
View file

@ -25,3 +25,27 @@ export function stopSketch() {
type: ActionTypes.STOP_SKETCH
}
}
export function openPreferences() {
return {
type: ActionTypes.OPEN_PREFERENCES
}
}
export function closePreferences() {
return {
type: ActionTypes.CLOSE_PREFERENCES
}
}
export function increaseFont() {
return {
type: ActionTypes.INCREASE_FONTSIZE
}
}
export function decreaseFont() {
return {
type: ActionTypes.DECREASE_FONTSIZE
}
}

5
shared/redux/constants/constants.js
View file

@ -3,3 +3,8 @@ export const TOGGLE_SKETCH = 'TOGGLE_SKETCH';
export const START_SKETCH = 'START_SKETCH';
export const STOP_SKETCH = 'STOP_SKETCH';
export const OPEN_PREFERENCES = 'OPEN_PREFERENCES';
export const CLOSE_PREFERENCES = 'CLOSE_PREFERENCES';
export const INCREASE_FONTSIZE = 'INCREASE_FONTSIZE';
export const DECREASE_FONTSIZE = 'DECREASE_FONTSIZE';

4
shared/redux/reducers/index.js
View file

@ -1,10 +1,12 @@
import { combineReducers } from 'redux'
import file from './files'
import ide from './ide'
import preferences from './preferences'
const rootReducer = combineReducers({
file,
ide
ide,
preferences
})
export default rootReducer

35
shared/redux/reducers/preferences.js Normal file
View file

@ -0,0 +1,35 @@
import * as ActionTypes from '../constants/constants';
const initialState = {
isPreferencesShowing: false,
fontSize: 18
}
const preferences = (state = initialState, action) => {
switch (action.type) {
case ActionTypes.OPEN_PREFERENCES:
return {
isPreferencesShowing: true,
fontSize: state.fontSize
}
case ActionTypes.CLOSE_PREFERENCES:
return {
isPreferencesShowing: false,
fontSize: state.fontSize
}
case ActionTypes.INCREASE_FONTSIZE:
return {
isPreferencesShowing: state.isPreferencesShowing,
fontSize: state.fontSize+2
}
case ActionTypes.DECREASE_FONTSIZE:
return {
isPreferencesShowing: state.isPreferencesShowing,
fontSize: state.fontSize-2
}
default:
return state
}
}
export default preferences;

26
styles/abstracts/_placeholders.scss
View file

@ -1,6 +1,4 @@
%toolbar-button {
background-color: $light-button-background-color;
color: $light-button-color;
%button {
display: inline-block;
height: #{44 / $base-font-size}rem;
width: #{44 / $base-font-size}rem;
@ -10,11 +8,15 @@
cursor: pointer;
border: none;
outline: none;
}
%toolbar-button {
@extend %button;
background-color: $light-button-background-color;
color: $light-button-color;
& g {
fill: $light-toolbar-button-color;
}
&:hover {
background-color: $light-button-background-hover-color;
color: $light-button-hover-color;
@ -30,3 +32,19 @@
}
}
}
%preferences-button {
@extend %button;
background-color: $light-preferences-button-background-color;
color: $light-preferences-button-color;
& g {
fill: $light-preferences-button-color;
}
&:hover {
background-color: $light-preferences-button-background-color;
color: $light-preferences-button-hover-color;
& g {
fill: $light-preferences-button-hover-color;
}
}
}

7
styles/abstracts/_variables.scss
View file

@ -1,4 +1,5 @@
$base-font-size: 16;
$menu-font-size: 21;
//colors
$p5js-pink: #ed225d;
@ -35,3 +36,9 @@ $dark-button-active-color: $white;
$editor-border-color: #f4f4f4;
$editor-selected-line-color: #f3f3f3;
$light-preferences-background-color: #f4f4f4;
$light-preferences-button-color: #8e8e8f;
$light-preferences-button-hover-color: #333333;
$light-preferences-button-background-color: #e6e6e6;

62
styles/components/_preferences.scss Normal file
View file

@ -0,0 +1,62 @@
.preferences {
background-color: $light-preferences-background-color;
display: none;
font-family: 'Montserrat', sans-serif;
padding-bottom: #{20 / $base-font-size}rem;
&--selected {
display: flex;
flex-direction: column;
}
}
.preferences__exit-button {
@extend %preferences-button;
margin-left: auto;
background-color: $light-preferences-background-color;
&:hover {
background-color: $light-preferences-background-color;
}
}
.preference__plus-button {
@extend %preferences-button;
margin-right: auto;
}
.preference__minus-button {
@extend %preferences-button;
}
.preferences__heading {
display: flex;
flex-direction: rows;
margin-left: #{20 / $base-font-size}rem;
}
.preferences__title {
margin: 0 0;
font-size: #{$menu-font-size}px;
font-weight: 700;
height: #{44 / $base-font-size}rem;
line-height: #{44 / $base-font-size}rem;
}
.preference {
margin: 0 #{20 / $base-font-size}rem;
}
.preference__title {
margin: 0 0;
font-size: #{$base-font-size}px;
font-weight: 400;
height: #{44 / $base-font-size}rem;
line-height: #{44 / $base-font-size}rem;
}
.preference__value {
@extend %button;
border-radius: 0%;
border: 2px solid $light-preferences-button-color;
line-height: #{44 / $base-font-size}rem;
margin: 0 #{20 / $base-font-size}rem;
}

8
styles/components/_toolbar.scss
View file

@ -13,6 +13,14 @@
}
}
.toolbar__preferences-button {
@extend %toolbar-button;
margin-left: auto;
&--selected {
@extend %toolbar-button--selected;
}
}
.toolbar__logo {
margin-right: #{30 / $base-font-size}rem;
}

7
styles/layout/_ide.scss
View file

@ -17,3 +17,10 @@
.toolbar {
width: 100%;
}
.preferences {
width: 22.5%;
position: absolute;
top: #{20 / $base-font-size}rem;
right:#{60 / $base-font-size}rem;
}

1
styles/main.scss
View file

@ -9,5 +9,6 @@
@import 'components/p5-widget-codemirror-theme';
@import 'components/editor';
@import 'components/toolbar';
@import 'components/preferences';
@import 'layout/ide';