diff --git a/client/constants.js b/client/constants.js
index 0a817cd6..00480bcd 100644
--- a/client/constants.js
+++ b/client/constants.js
@@ -12,6 +12,8 @@ export const UPDATE_FONTSIZE = 'UPDATE_FONTSIZE';
export const INCREASE_INDENTATION = 'INCREASE_INDENTATION';
export const DECREASE_INDENTATION = 'DECREASE_INDENTATION';
export const UPDATE_INDENTATION = 'UPDATE_INDENTATION';
+export const INDENT_WITH_SPACE = 'INDENT_WITH_SPACE';
+export const INDENT_WITH_TAB = 'INDENT_WITH_TAB';
export const AUTH_USER = 'AUTH_USER';
export const UNAUTH_USER = 'UNAUTH_USER';
diff --git a/client/modules/IDE/actions/preferences.js b/client/modules/IDE/actions/preferences.js
index 331e33b6..4a3d0c9c 100644
--- a/client/modules/IDE/actions/preferences.js
+++ b/client/modules/IDE/actions/preferences.js
@@ -51,3 +51,15 @@ export function updateIndentation() {
value
};
}
+
+export function indentWithTab() {
+ return {
+ type: ActionTypes.INDENT_WITH_TAB
+ };
+}
+
+export function indentWithSpace() {
+ return {
+ type: ActionTypes.INDENT_WITH_SPACE
+ };
+}
diff --git a/client/modules/IDE/components/Editor.js b/client/modules/IDE/components/Editor.js
index e1b2be63..d750180a 100644
--- a/client/modules/IDE/components/Editor.js
+++ b/client/modules/IDE/components/Editor.js
@@ -17,7 +17,10 @@ class Editor extends React.Component {
this.props.updateFile('sketch.js', this._cm.getValue());
});
this._cm.getWrapperElement().style['font-size'] = `${this.props.fontSize}px`;
+
+ this._cm.setOption('indentWithTabs', this.props.indentWithTab);
this._cm.setOption('tabSize', this.props.indentationAmount);
+ this._cm.setOption('indentUnit', this.props.indentationAmount);
}
componentDidUpdate(prevProps) {
@@ -48,7 +51,8 @@ Editor.propTypes = {
content: PropTypes.string.isRequired,
updateFile: PropTypes.func.isRequired,
fontSize: PropTypes.number.isRequired,
- indentationAmount: PropTypes.number.isRequired
+ indentationAmount: PropTypes.number.isRequired,
+ isTabIndent: PropTypes.bool.isRequired
};
export default Editor;
diff --git a/client/modules/IDE/components/Preferences.js b/client/modules/IDE/components/Preferences.js
index 17137554..e0fd2d2b 100644
--- a/client/modules/IDE/components/Preferences.js
+++ b/client/modules/IDE/components/Preferences.js
@@ -11,6 +11,14 @@ function Preferences(props) {
preferences: true,
'preferences--selected': props.isVisible
});
+ let preferencesTabOptionClass = classNames({
+ preference__option: true,
+ 'preference__option--selected': props.isTabIndent
+ });
+ let preferencesSpaceOptionClass = classNames({
+ preference__option: true,
+ 'preference__option--selected': !props.isTabIndent
+ });
return (
@@ -56,7 +75,10 @@ Preferences.propTypes = {
indentationAmount: PropTypes.number.isRequired,
decreaseIndentation: PropTypes.func.isRequired,
increaseIndentation: PropTypes.func.isRequired,
- updateIndentation: PropTypes.func.isRequired
+ updateIndentation: PropTypes.func.isRequired,
+ indentWithSpace: PropTypes.func.isRequired,
+ indentWithTab: PropTypes.func.isRequired,
+ isTabIndent: PropTypes.bool.isRequired
};
export default Preferences;
diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js
index bc98f378..2eead4f9 100644
--- a/client/modules/IDE/pages/IDEView.js
+++ b/client/modules/IDE/pages/IDEView.js
@@ -48,12 +48,16 @@ class IDEView extends React.Component {
decreaseIndentation={this.props.decreaseIndentation}
updateIndentation={this.props.updateIndentation}
indentationAmount={this.props.preferences.indentationAmount}
+ isTabIndent={this.props.preferences.isTabIndent}
+ indentWithSpace={this.props.indentWithSpace}
+ indentWithTab={this.props.indentWithTab}
/>
{
@@ -40,6 +41,14 @@ const preferences = (state = initialState, action) => {
return Object.assign({}, state, {
indentationAmount: action.value
});
+ case ActionTypes.INDENT_WITH_TAB:
+ return Object.assign({}, state, {
+ isTabIndent: true
+ });
+ case ActionTypes.INDENT_WITH_SPACE:
+ return Object.assign({}, state, {
+ isTabIndent: false
+ });
default:
return state;
}
diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss
index 021d3a3f..c622a0db 100644
--- a/client/styles/abstracts/_placeholders.scss
+++ b/client/styles/abstracts/_placeholders.scss
@@ -69,6 +69,7 @@
@extend %toolbar-button;
color: $light-primary-text-color;
background-color: $light-modal-button-background-color;
+ padding: 0;
& g {
fill: $light-primary-text-color;
}
@@ -88,3 +89,17 @@
color: $light-primary-text-color;
}
}
+
+%preference-option {
+ color: $light-secondary-text-color;
+ font-size: #{14 / $base-font-size}rem;
+ cursor: pointer;
+ text-align: left;
+ margin-bottom: #{5 / $base-font-size}rem;
+ &:hover {
+ color: $light-primary-text-color;
+ }
+ &--selected {
+ color: $light-primary-text-color;
+ }
+}
diff --git a/client/styles/base/_base.scss b/client/styles/base/_base.scss
index 61030f10..5f451ca7 100644
--- a/client/styles/base/_base.scss
+++ b/client/styles/base/_base.scss
@@ -50,3 +50,7 @@ h3 {
h4 {
font-weight: normal;
}
+
+h6 {
+ font-weight: normal;
+}
diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss
index e8aeca3a..1e9c84ae 100644
--- a/client/styles/components/_preferences.scss
+++ b/client/styles/components/_preferences.scss
@@ -2,7 +2,7 @@
position: absolute;
top: #{66 / $base-font-size}rem;
right: #{40 / $base-font-size}rem;
- width: #{276 / $base-font-size}rem;
+ width: #{300 / $base-font-size}rem;
background-color: $light-button-background-color;
display: none;
padding: #{16 / $base-font-size}rem #{26 / $base-font-size}rem;
@@ -35,8 +35,7 @@
.preference {
display: flex;
flex-wrap: wrap;
- justify-content: space-between;
- padding-bottom: #{20 / $base-font-size}rem;
+ padding-bottom: #{40 / $base-font-size}rem;
border-bottom: 2px dashed $light-button-border-color;
}
@@ -49,5 +48,25 @@
border: 1px solid $light-button-border-color;
text-align: center;
width: #{48 / $base-font-size}rem;
+ height: #{48 / $base-font-size}rem;
+ margin: 0 #{20 / $base-font-size}rem;
background-color: $light-button-background-color;
}
+
+.preference__label {
+ margin: 0;
+ line-height: #{20 / $base-font-size}rem;
+ color: $light-button-border-color;
+ &:hover {
+ color: $light-button-border-color;
+ }
+}
+
+.preference__option {
+ @extend %preference-option;
+ list-style-type: none;
+ padding-left: #{12 / $base-font-size}rem;
+ &--selected {
+ @extend %preference-option--selected;
+ }
+}