add font-size in preferences

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

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>

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>

After

Width:  |  Height:  |  Size: 650 B

View file

@ -17,7 +17,7 @@ class Editor extends React.Component {
this._cm.on('change', () => { this._cm.on('change', () => {
this.props.updateFile("sketch.js", this._cm.getValue()); this.props.updateFile("sketch.js", this._cm.getValue());
}); });
console.log('test here'); this._cm.getWrapperElement().style['font-size'] = this.props.fontSize+'px';
} }
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
@ -25,6 +25,9 @@ class Editor extends React.Component {
this.props.content !== this._cm.getValue()) { this.props.content !== this._cm.getValue()) {
this._cm.setValue(this.props.content); this._cm.setValue(this.props.content);
} }
if (this.props.fontSize !== prevProps.fontSize) {
this._cm.getWrapperElement().style['font-size'] = this.props.fontSize+'px';
}
} }
componentWillUnmount() { componentWillUnmount() {

View file

@ -2,6 +2,8 @@ import React from 'react';
var Isvg = require('react-inlinesvg'); var Isvg = require('react-inlinesvg');
var exitUrl = require('../../../images/exit.svg'); var exitUrl = require('../../../images/exit.svg');
var plusUrl = require('../../../images/plus.svg');
var minusUrl = require('../../../images/minus.svg');
var classNames = require('classnames'); var classNames = require('classnames');
class Preferences extends React.Component { class Preferences extends React.Component {
@ -12,10 +14,22 @@ class Preferences extends React.Component {
}); });
return ( return (
<div className={preferencesContainerClass} tabindex="0"> <div className={preferencesContainerClass} tabindex="0">
<div className="preferences__title-text">Preferences</div> <div className="preferences__heading">
<button className="preferences__exit-button" onClick={this.props.closePreferences}> <h2 className="preferences__title-text">Preferences</h2>
<Isvg src={exitUrl} alt="Exit Preferences" /> <button className="preferences__exit-button" onClick={this.props.closePreferences}>
</button> <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> </div>
); );
} }

View file

@ -22,10 +22,14 @@ class App extends React.Component {
/> />
<Preferences <Preferences
isPreferencesShowing = {this.props.preferences.isPreferencesShowing} 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 <Editor
content={this.props.file.content} content={this.props.file.content}
updateFile={this.props.updateFile} /> updateFile={this.props.updateFile}
fontSize={this.props.preferences.fontSize} />
<PreviewFrame <PreviewFrame
content={this.props.file.content} content={this.props.file.content}
head={ head={

View file

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

View file

@ -6,3 +6,5 @@ export const STOP_SKETCH = 'STOP_SKETCH';
export const OPEN_PREFERENCES = 'OPEN_PREFERENCES'; export const OPEN_PREFERENCES = 'OPEN_PREFERENCES';
export const CLOSE_PREFERENCES = 'CLOSE_PREFERENCES'; export const CLOSE_PREFERENCES = 'CLOSE_PREFERENCES';
export const INCREASE_FONTSIZE = 'INCREASE_FONTSIZE';
export const DECREASE_FONTSIZE = 'DECREASE_FONTSIZE';

View file

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

View file

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

View file

@ -2,8 +2,10 @@
background-color: $light-preferences-background-color; background-color: $light-preferences-background-color;
display: none; display: none;
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
padding-bottom: #{20 / $base-font-size}rem;
&--selected { &--selected {
display: flex; 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; 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-weight: 700;
font-color: white;
height: #{44 / $base-font-size}rem; height: #{44 / $base-font-size}rem;
line-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;
}

View file

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