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

add font-size in preferences

Browse source
This commit is contained in:
mathuramg 2016-06-20 14:58:15 -04:00
parent b956d01bde
commit 147f1999e4
11 changed files with 123 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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>Rectangle 2</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="16" transform="translate(0.000000, -6.000000)" fill="#D8D8D8">
<rect id="Rectangle-2" x="0" y="12" width="16" height="4"></rect>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 639 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>Combined Shape</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" 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="Combined-Shape"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 650 B

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

@ -17,7 +17,7 @@ class Editor extends React.Component {
this._cm.on('change', () => {
this.props.updateFile("sketch.js", this._cm.getValue());
});
console.log('test here');
this._cm.getWrapperElement().style['font-size'] = this.props.fontSize+'px';
}
componentDidUpdate(prevProps) {
@ -25,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() {

22
shared/components/Preferences/Preferences.jsx
View file

@ -2,6 +2,8 @@ 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 {
@ -12,10 +14,22 @@ class Preferences extends React.Component {
});
return (
<div className={preferencesContainerClass} tabindex="0">
<div className="preferences__title-text">Preferences</div>
<button className="preferences__exit-button" onClick={this.props.closePreferences}>
<Isvg src={exitUrl} alt="Exit Preferences" />
</button>
<div className="preferences__heading">
<h2 className="preferences__title-text">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-text">Font Size</h3>
<button className="preferences__plus-button" onClick={this.props.decreaseFont}>
<Isvg src={minusUrl} alt="Decrease Font Size" />
</button>
<p className="preference__value">{this.props.fontSize}</p>
<button className="preferences__minus-button" onClick={this.props.increaseFont}>
<Isvg src={plusUrl} alt="Increase Font Size" />
</button>
</div>
</div>
);
}

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

@ -22,10 +22,14 @@ class App extends React.Component {
/>
<Preferences
isPreferencesShowing = {this.props.preferences.isPreferencesShowing}
closePreferences={this.props.closePreferences}/>
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={

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

@ -37,3 +37,15 @@ export function closePreferences() {
type: ActionTypes.CLOSE_PREFERENCES
}
}
export function increaseFont() {
return {
type: ActionTypes.INCREASE_FONTSIZE
}
}
export function decreaseFont() {
return {
type: ActionTypes.DECREASE_FONTSIZE
}
}

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

@ -6,3 +6,5 @@ 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';

19
shared/redux/reducers/preferences.js
View file

@ -1,18 +1,31 @@
import * as ActionTypes from '../constants/constants';
const initialState = {
isPreferencesShowing: false
isPreferencesShowing: false,
fontSize: 18
}
const preferences = (state = initialState, action) => {
switch (action.type) {
case ActionTypes.OPEN_PREFERENCES:
return {
isPreferencesShowing: true
isPreferencesShowing: true,
fontSize: state.fontSize
}
case ActionTypes.CLOSE_PREFERENCES:
return {
isPreferencesShowing: false
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

4
styles/components/_editor.scss
View file

@ -17,5 +17,5 @@
}
.CodeMirror-line {
padding-left: #{5 / $base-font-size}rem;
}
padding-left: #{5 / $base-font-size}rem;
}

41
styles/components/_preferences.scss
View file

@ -2,8 +2,10 @@
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;
}
}
@ -17,11 +19,44 @@
}
}
.preferences__title-text {
.preferences__plus-button {
@extend %preferences-button;
margin-right: auto;
}
.preferences__minus-button {
@extend %preferences-button;
}
.preferences__heading {
display: flex;
flex-direction: rows;
margin-left: #{20 / $base-font-size}rem;
font-size: $menu-font-size;
}
.preferences__title-text {
margin: 0 0;
font-size: #{$menu-font-size}px;
font-weight: 700;
font-color: white;
height: #{44 / $base-font-size}rem;
line-height: #{44 / $base-font-size}rem;
}
.preference {
margin: 0 #{20 / $base-font-size}rem;
}
.preference__title-text {
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;
}

3
styles/layout/_ide.scss
View file

@ -19,8 +19,7 @@
}
.preferences {
width: 30%;
height: 50%;
width: 22.5%;
position: absolute;
top: #{20 / $base-font-size}rem;
right:#{60 / $base-font-size}rem;