diff --git a/images/minus.svg b/images/minus.svg
new file mode 100644
index 00000000..8cdc54cc
--- /dev/null
+++ b/images/minus.svg
@@ -0,0 +1,12 @@
+
+
diff --git a/images/plus.svg b/images/plus.svg
new file mode 100644
index 00000000..93b3c44b
--- /dev/null
+++ b/images/plus.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/shared/components/Editor/Editor.jsx b/shared/components/Editor/Editor.jsx
index 10b3cb91..87195feb 100644
--- a/shared/components/Editor/Editor.jsx
+++ b/shared/components/Editor/Editor.jsx
@@ -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() {
diff --git a/shared/components/Preferences/Preferences.jsx b/shared/components/Preferences/Preferences.jsx
index 62c39fc4..89b849bd 100644
--- a/shared/components/Preferences/Preferences.jsx
+++ b/shared/components/Preferences/Preferences.jsx
@@ -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 (
-
Preferences
-
+
+
Preferences
+
+
+
+
Font Size
+
+
{this.props.fontSize}
+
+
);
}
diff --git a/shared/containers/App/App.jsx b/shared/containers/App/App.jsx
index cca0dba6..7305d584 100644
--- a/shared/containers/App/App.jsx
+++ b/shared/containers/App/App.jsx
@@ -22,10 +22,14 @@ class App extends React.Component {
/>
+ closePreferences={this.props.closePreferences}
+ increaseFont={this.props.increaseFont}
+ decreaseFont={this.props.decreaseFont}
+ fontSize={this.props.preferences.fontSize}/>
+ updateFile={this.props.updateFile}
+ fontSize={this.props.preferences.fontSize} />
{
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
diff --git a/styles/components/_editor.scss b/styles/components/_editor.scss
index e6d3fa0a..65b8b2e8 100644
--- a/styles/components/_editor.scss
+++ b/styles/components/_editor.scss
@@ -17,5 +17,5 @@
}
.CodeMirror-line {
- padding-left: #{5 / $base-font-size}rem;
-}
\ No newline at end of file
+ padding-left: #{5 / $base-font-size}rem;
+}
diff --git a/styles/components/_preferences.scss b/styles/components/_preferences.scss
index 0ef68369..0c415c99 100644
--- a/styles/components/_preferences.scss
+++ b/styles/components/_preferences.scss
@@ -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;
+}
diff --git a/styles/layout/_ide.scss b/styles/layout/_ide.scss
index a0f93033..2be7c528 100644
--- a/styles/layout/_ide.scss
+++ b/styles/layout/_ide.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;