From 3e7ffafa97c61ddd2f479022e4d63bdf745fcac3 Mon Sep 17 00:00:00 2001 From: Florian Orben Date: Sat, 24 Oct 2015 15:50:20 +0200 Subject: code style theme chooser --- .../user_settings/code_theme_chooser.jsx | 55 +++++++++++++++++++++ .../user_settings/user_settings_appearance.jsx | 23 ++++++++- web/react/utils/constants.jsx | 7 +++ web/react/utils/utils.jsx | 26 ++++++++++ web/static/images/themes/code_themes/github.png | Bin 0 -> 9648 bytes web/static/images/themes/code_themes/monokai.png | Bin 0 -> 9303 bytes .../images/themes/code_themes/solarized_dark.png | Bin 0 -> 8172 bytes .../images/themes/code_themes/solarized_light.png | Bin 0 -> 8860 bytes web/templates/head.html | 2 +- 9 files changed, 111 insertions(+), 2 deletions(-) create mode 100644 web/react/components/user_settings/code_theme_chooser.jsx create mode 100644 web/static/images/themes/code_themes/github.png create mode 100644 web/static/images/themes/code_themes/monokai.png create mode 100644 web/static/images/themes/code_themes/solarized_dark.png create mode 100644 web/static/images/themes/code_themes/solarized_light.png (limited to 'web') diff --git a/web/react/components/user_settings/code_theme_chooser.jsx b/web/react/components/user_settings/code_theme_chooser.jsx new file mode 100644 index 000000000..eef4b24ba --- /dev/null +++ b/web/react/components/user_settings/code_theme_chooser.jsx @@ -0,0 +1,55 @@ +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +var Constants = require('../../utils/constants.jsx'); + +export default class CodeThemeChooser extends React.Component { + constructor(props) { + super(props); + this.state = {}; + } + render() { + const theme = this.props.theme; + + const premadeThemes = []; + for (const k in Constants.CODE_THEMES) { + if (Constants.CODE_THEMES.hasOwnProperty(k)) { + let activeClass = ''; + if (k === theme.codeTheme) { + activeClass = 'active'; + } + + premadeThemes.push( +
+
this.props.updateTheme(k)} + > + +
+
+ ); + } + } + + return ( +
+ {premadeThemes} +
+ ); + } +} + +CodeThemeChooser.propTypes = { + theme: React.PropTypes.object.isRequired, + updateTheme: React.PropTypes.func.isRequired +}; diff --git a/web/react/components/user_settings/user_settings_appearance.jsx b/web/react/components/user_settings/user_settings_appearance.jsx index 8c62a189d..e94894a1d 100644 --- a/web/react/components/user_settings/user_settings_appearance.jsx +++ b/web/react/components/user_settings/user_settings_appearance.jsx @@ -7,6 +7,7 @@ var Utils = require('../../utils/utils.jsx'); const CustomThemeChooser = require('./custom_theme_chooser.jsx'); const PremadeThemeChooser = require('./premade_theme_chooser.jsx'); +const CodeThemeChooser = require('./code_theme_chooser.jsx'); const AppDispatcher = require('../../dispatcher/app_dispatcher.jsx'); const Constants = require('../../utils/constants.jsx'); const ActionTypes = Constants.ActionTypes; @@ -18,12 +19,14 @@ export default class UserSettingsAppearance extends React.Component { this.onChange = this.onChange.bind(this); this.submitTheme = this.submitTheme.bind(this); this.updateTheme = this.updateTheme.bind(this); + this.updateCodeTheme = this.updateCodeTheme.bind(this); this.handleClose = this.handleClose.bind(this); this.handleImportModal = this.handleImportModal.bind(this); this.state = this.getStateFromStores(); this.originalTheme = this.state.theme; + this.originalCodeTheme = this.state.theme.codeTheme; } componentDidMount() { UserStore.addChangeListener(this.onChange); @@ -58,6 +61,10 @@ export default class UserSettingsAppearance extends React.Component { type = 'custom'; } + if (!theme.codeTheme) { + theme.codeTheme = Constants.DEFAULT_CODE_THEME; + } + return {theme, type}; } onChange() { @@ -93,6 +100,13 @@ export default class UserSettingsAppearance extends React.Component { ); } updateTheme(theme) { + theme.codeTheme = this.state.theme.codeTheme; + this.setState({theme}); + Utils.applyTheme(theme); + } + updateCodeTheme(codeTheme) { + var theme = this.state.theme; + theme.codeTheme = codeTheme; this.setState({theme}); Utils.applyTheme(theme); } @@ -102,6 +116,7 @@ export default class UserSettingsAppearance extends React.Component { handleClose() { const state = this.getStateFromStores(); state.serverError = null; + state.theme.codeTheme = this.originalCodeTheme; Utils.applyTheme(state.theme); @@ -170,7 +185,13 @@ export default class UserSettingsAppearance extends React.Component { {custom}
- {serverError} + {'Code Theme'} + +
+ {serverError} { + changeCss('code.hljs', 'visibility: visible'); + }); + } else { + changeCss('code.hljs', 'visibility: visible'); + } + }; + xmlHTTP.send(); + } +} + export function placeCaretAtEnd(el) { el.focus(); if (typeof window.getSelection != 'undefined' && typeof document.createRange != 'undefined') { diff --git a/web/static/images/themes/code_themes/github.png b/web/static/images/themes/code_themes/github.png new file mode 100644 index 000000000..d0538d6c0 Binary files /dev/null and b/web/static/images/themes/code_themes/github.png differ diff --git a/web/static/images/themes/code_themes/monokai.png b/web/static/images/themes/code_themes/monokai.png new file mode 100644 index 000000000..8f92d2a18 Binary files /dev/null and b/web/static/images/themes/code_themes/monokai.png differ diff --git a/web/static/images/themes/code_themes/solarized_dark.png b/web/static/images/themes/code_themes/solarized_dark.png new file mode 100644 index 000000000..76055c678 Binary files /dev/null and b/web/static/images/themes/code_themes/solarized_dark.png differ diff --git a/web/static/images/themes/code_themes/solarized_light.png b/web/static/images/themes/code_themes/solarized_light.png new file mode 100644 index 000000000..b9595c22d Binary files /dev/null and b/web/static/images/themes/code_themes/solarized_light.png differ diff --git a/web/templates/head.html b/web/templates/head.html index 837cfb133..fdc371af4 100644 --- a/web/templates/head.html +++ b/web/templates/head.html @@ -24,7 +24,7 @@ - + -- cgit v1.2.3-1-g7c22