diff --git a/client/constants.js b/client/constants.js index 1a4f1741..967df39b 100644 --- a/client/constants.js +++ b/client/constants.js @@ -8,6 +8,12 @@ export const OPEN_PREFERENCES = 'OPEN_PREFERENCES'; export const CLOSE_PREFERENCES = 'CLOSE_PREFERENCES'; export const INCREASE_FONTSIZE = 'INCREASE_FONTSIZE'; export const DECREASE_FONTSIZE = 'DECREASE_FONTSIZE'; +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 2cfafcf4..4a3d0c9c 100644 --- a/client/modules/IDE/actions/preferences.js +++ b/client/modules/IDE/actions/preferences.js @@ -23,3 +23,43 @@ export function decreaseFont() { type: ActionTypes.DECREASE_FONTSIZE }; } + +export function updateFont(event) { + const value = event.target.value; + return { + type: ActionTypes.UPDATE_FONTSIZE, + value + }; +} + +export function increaseIndentation() { + return { + type: ActionTypes.INCREASE_INDENTATION + }; +} + +export function decreaseIndentation() { + return { + type: ActionTypes.DECREASE_INDENTATION + }; +} + +export function updateIndentation() { + const value = event.target.value; + return { + type: ActionTypes.UPDATE_INDENTATION, + 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 21956a58..fa4fe305 100644 --- a/client/modules/IDE/components/Editor.js +++ b/client/modules/IDE/components/Editor.js @@ -18,6 +18,8 @@ class Editor extends React.Component { this.props.updateFileContent(this.props.file.name, this._cm.getValue()); }); this._cm.getWrapperElement().style['font-size'] = `${this.props.fontSize}px`; + this._cm.setOption('indentWithTabs', this.props.isTabIndent); + this._cm.setOption('tabSize', this.props.indentationAmount); } componentDidUpdate(prevProps) { @@ -28,6 +30,12 @@ class Editor extends React.Component { if (this.props.fontSize !== prevProps.fontSize) { this._cm.getWrapperElement().style['font-size'] = `${this.props.fontSize}px`; } + if (this.props.indentationAmount !== prevProps.indentationAmount) { + this._cm.setOption('tabSize', this.props.indentationAmount); + } + if (this.props.isTabIndent !== prevProps.isTabIndent) { + this._cm.setOption('indentWithTabs', this.props.isTabIndent); + } } componentWillUnmount() { @@ -42,12 +50,14 @@ class Editor extends React.Component { } Editor.propTypes = { + indentationAmount: PropTypes.number.isRequired, + isTabIndent: PropTypes.bool.isRequired, + updateFileContent: PropTypes.func.isRequired, + fontSize: PropTypes.number.isRequired, file: PropTypes.shape({ name: PropTypes.string.isRequired, content: PropTypes.string.isRequired - }), - updateFileContent: PropTypes.func.isRequired, - fontSize: PropTypes.number.isRequired + }) }; export default Editor; diff --git a/client/modules/IDE/components/Preferences.js b/client/modules/IDE/components/Preferences.js index fb4bdffd..961f4101 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 (
@@ -19,16 +27,37 @@ function Preferences(props) {
+
-

Text Size

+

Text Size

-

{props.fontSize}

+ +
+ +
+

Indentation Amount

+ + + +
+ + +
+
); } @@ -37,8 +66,16 @@ Preferences.propTypes = { isVisible: PropTypes.bool.isRequired, closePreferences: PropTypes.func.isRequired, decreaseFont: PropTypes.func.isRequired, + updateFont: PropTypes.func.isRequired, fontSize: PropTypes.number.isRequired, - increaseFont: PropTypes.func.isRequired + increaseFont: PropTypes.func.isRequired, + indentationAmount: PropTypes.number.isRequired, + decreaseIndentation: PropTypes.func.isRequired, + increaseIndentation: 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 a3d71421..c7308fa9 100644 --- a/client/modules/IDE/pages/IDEView.js +++ b/client/modules/IDE/pages/IDEView.js @@ -44,7 +44,15 @@ class IDEView extends React.Component { closePreferences={this.props.closePreferences} increaseFont={this.props.increaseFont} decreaseFont={this.props.decreaseFont} + updateFont={this.props.updateFont} fontSize={this.props.preferences.fontSize} + increaseIndentation={this.props.increaseIndentation} + 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} /> { switch (action.type) { case ActionTypes.OPEN_PREFERENCES: - return { - isVisible: true, - fontSize: state.fontSize - }; + return Object.assign({}, state, { + isVisible: true + }); case ActionTypes.CLOSE_PREFERENCES: - return { - isVisible: false, - fontSize: state.fontSize - }; + return Object.assign({}, state, { + isVisible: false + }); case ActionTypes.INCREASE_FONTSIZE: - return { - isVisible: state.isVisible, + return Object.assign({}, state, { fontSize: state.fontSize + 2 - }; + }); case ActionTypes.DECREASE_FONTSIZE: - return { - isVisible: state.isVisible, + return Object.assign({}, state, { fontSize: state.fontSize - 2 - }; + }); + case ActionTypes.UPDATE_FONTSIZE: + return Object.assign({}, state, { + fontSize: action.value + }); + case ActionTypes.INCREASE_INDENTATION: + return Object.assign({}, state, { + indentationAmount: state.indentationAmount + 2 + }); + case ActionTypes.DECREASE_INDENTATION: + return Object.assign({}, state, { + indentationAmount: state.indentationAmount - 2 + }); + case ActionTypes.UPDATE_INDENTATION: + 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 c1738132..007b0433 100644 --- a/client/styles/abstracts/_placeholders.scss +++ b/client/styles/abstracts/_placeholders.scss @@ -69,6 +69,8 @@ @extend %toolbar-button; color: $light-primary-text-color; background-color: $light-modal-button-background-color; + padding: 0; + line-height: #{48 / $base-font-size}rem; & g { fill: $light-primary-text-color; } @@ -88,3 +90,19 @@ color: $light-primary-text-color; } } + +%preference-option { + background-color: $light-button-background-color; + color: $light-inactive-text-color; + font-size: #{14 / $base-font-size}rem; + cursor: pointer; + text-align: left; + margin-bottom: #{5 / $base-font-size}rem; + border: 0px; + &:hover { + color: $light-primary-text-color; + } + &--selected { + color: $light-primary-text-color; + } +} diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index e07d9e55..805bd0fc 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -13,12 +13,13 @@ $light-background-color: #fdfdfd; $light-button-background-color: #f4f4f4; $light-button-color: $black; $light-button-border-color: #979797; +$light-value-border-color: #e6e6e6; $light-toolbar-button-color: $p5js-pink; $light-button-background-hover-color: $p5js-pink; $light-button-background-active-color: #f10046; $light-button-hover-color: $white; $light-button-active-color: $white; -$light-modal-button-background-color: #e6e6e6; +$light-modal-button-background-color: #e6e6e6; $light-icon-color: #8b8b8b; $light-icon-hover-color: $light-primary-text-color; diff --git a/client/styles/base/_base.scss b/client/styles/base/_base.scss index 9e929959..fda0b662 100644 --- a/client/styles/base/_base.scss +++ b/client/styles/base/_base.scss @@ -46,7 +46,12 @@ h2 { h3 { font-weight: normal; } - +h4 { + font-weight: normal; +} +h6 { + font-weight: normal; +} thead { text-align: left; -} \ No newline at end of file +} diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss index 96224827..8cd0e0ad 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: #{332 / $base-font-size}rem; background-color: $light-button-background-color; display: none; padding: #{16 / $base-font-size}rem #{26 / $base-font-size}rem; @@ -35,7 +35,10 @@ .preference { display: flex; flex-wrap: wrap; - justify-content: space-between; + padding-bottom: #{40 / $base-font-size}rem; + & + & { + border-top: 2px dashed $light-button-border-color; + } } .preference__title { @@ -44,8 +47,35 @@ } .preference__value { - border: 1px solid $light-button-border-color; + border: 2px solid $light-value-border-color; text-align: center; - line-height: #{48 / $base-font-size}rem; + border-radius: 0%; width: #{48 / $base-font-size}rem; + height: #{44 / $base-font-size}rem; + margin: 0 #{28 / $base-font-size}rem; + padding: 0; + background-color: $light-button-background-color; +} + +.preference__label { + margin: 0; + line-height: #{20 / $base-font-size}rem; + color: $light-inactive-text-color; + &:hover { + color: $light-inactive-text-color; + } +} + +.preference__vertical-list { + display: flex; + flex-direction: column; +} + +.preference__option { + @extend %preference-option; + list-style-type: none; + padding-left: #{28 / $base-font-size}rem; + &--selected { + @extend %preference-option--selected; + } } diff --git a/server/server.js b/server/server.js index e0e97fe2..99879244 100644 --- a/server/server.js +++ b/server/server.js @@ -83,4 +83,3 @@ app.listen(serverConfig.port, (error) => { }); export default app; -