add font-size in preferences

Author: MathuraMG

images/minus.svg

@@ -17,14 +17,17 @@ 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) {
 		if (this.props.content !== prevProps.content &&
         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() {

images/plus.svg

@@ -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>
 		);
 	}

shared/components/Editor/Editor.jsx

@@ -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={

shared/components/Preferences/Preferences.jsx

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

shared/containers/App/App.jsx

@@ -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';

shared/redux/actions/index.js

@@ -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

shared/redux/constants/constants.js

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

shared/redux/reducers/preferences.js

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

styles/components/_editor.scss

@@ -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;