From 103ebd2014975495a2b6acd87d891259f4305abf Mon Sep 17 00:00:00 2001 From: catarak Date: Tue, 13 Sep 2016 14:15:46 -0400 Subject: [PATCH 01/18] add theme to preferences, add backbone of themes to scss --- client/constants.js | 1 + client/modules/IDE/actions/preferences.js | 8 ++ client/modules/IDE/components/Preferences.js | 31 +++++- client/modules/IDE/pages/IDEView.js | 16 ++- client/modules/IDE/reducers/preferences.js | 5 +- client/styles/abstracts/_functions.scss | 26 +++++ client/styles/abstracts/_mixins.scss | 20 ++++ client/styles/abstracts/_variables.scss | 102 ++++++++++++++++--- client/styles/main.scss | 2 + server/models/user.js | 3 +- 10 files changed, 195 insertions(+), 19 deletions(-) create mode 100644 client/styles/abstracts/_functions.scss create mode 100644 client/styles/abstracts/_mixins.scss diff --git a/client/constants.js b/client/constants.js index a4235717..72f8948c 100644 --- a/client/constants.js +++ b/client/constants.js @@ -81,6 +81,7 @@ export const CLOSE_KEYBOARD_SHORTCUT_MODAL = 'CLOSE_KEYBOARD_SHORTCUT_MODAL'; export const SHOW_TOAST = 'SHOW_TOAST'; export const HIDE_TOAST = 'HIDE_TOAST'; export const SET_TOAST_TEXT = 'SET_TOAST_TEXT'; +export const SET_THEME = 'SET_THEME'; export const SET_UNSAVED_CHANGES = 'SET_UNSAVED_CHANGES'; diff --git a/client/modules/IDE/actions/preferences.js b/client/modules/IDE/actions/preferences.js index f2270905..6b3964ef 100644 --- a/client/modules/IDE/actions/preferences.js +++ b/client/modules/IDE/actions/preferences.js @@ -136,3 +136,11 @@ export function setTextOutput(value) { } }; } + +export function setTheme(value) { + return { + type: ActionTypes.SET_THEME, + value + }; +} + diff --git a/client/modules/IDE/components/Preferences.js b/client/modules/IDE/components/Preferences.js index e9ba2fe3..b0baf885 100644 --- a/client/modules/IDE/components/Preferences.js +++ b/client/modules/IDE/components/Preferences.js @@ -165,6 +165,33 @@ class Preferences extends React.Component { +
+

Theme

+
+ this.props.setTheme('light')} + aria-label="light theme on" + name="light theme" + id="light-theme-on" + className="preference__radio-button" + value="light" + checked={this.props.theme === 'light'} + /> + + this.props.setTheme('dark')} + aria-label="dark theme on" + name="dark theme" + id="dark-theme-on" + className="preference__radio-button" + value="dark" + checked={this.props.theme === 'dark'} + /> + +
+

Lint Warning Sound

@@ -249,7 +276,9 @@ Preferences.propTypes = { textOutput: PropTypes.bool.isRequired, setTextOutput: PropTypes.func.isRequired, lintWarning: PropTypes.bool.isRequired, - setLintWarning: PropTypes.func.isRequired + setLintWarning: PropTypes.func.isRequired, + theme: PropTypes.string.isRequired, + setTheme: PropTypes.func.isRequired }; export default Preferences; diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js index a95249fd..347ae957 100644 --- a/client/modules/IDE/pages/IDEView.js +++ b/client/modules/IDE/pages/IDEView.js @@ -27,6 +27,7 @@ import SplitPane from 'react-split-pane'; import Overlay from '../../App/components/Overlay'; import SketchList from '../components/SketchList'; import About from '../components/About'; +import classNames from 'classnames'; class IDEView extends React.Component { constructor(props) { @@ -156,8 +157,13 @@ class IDEView extends React.Component { } render() { + let ideClass = classNames({ + ide: true, + light: this.props.preferences.theme === 'light', + dark: this.props.preferences.theme === 'dark', + }); return ( -
+
{this.props.toast.isVisible && }