diff options
Diffstat (limited to 'web')
-rw-r--r-- | web/react/components/activity_log_modal.jsx | 2 | ||||
-rw-r--r-- | web/react/components/user_settings/code_theme_chooser.jsx | 55 | ||||
-rw-r--r-- | web/react/components/user_settings/custom_theme_chooser.jsx | 79 | ||||
-rw-r--r-- | web/react/components/user_settings/user_settings_appearance.jsx | 17 | ||||
-rw-r--r-- | web/react/utils/constants.jsx | 40 | ||||
-rw-r--r-- | web/react/utils/utils.jsx | 10 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_access-history.scss | 4 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_activity-log.scss | 4 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_settings.scss | 9 | ||||
-rw-r--r-- | web/static/images/themes/code_themes/github.png | bin | 9648 -> 18321 bytes | |||
-rw-r--r-- | web/static/images/themes/code_themes/monokai.png | bin | 9303 -> 18119 bytes | |||
-rw-r--r-- | web/static/images/themes/code_themes/solarized_dark.png | bin | 8172 -> 17856 bytes | |||
-rw-r--r-- | web/static/images/themes/code_themes/solarized_light.png | bin | 8860 -> 17934 bytes |
13 files changed, 108 insertions, 112 deletions
diff --git a/web/react/components/activity_log_modal.jsx b/web/react/components/activity_log_modal.jsx index 6a24870f6..ef3077470 100644 --- a/web/react/components/activity_log_modal.jsx +++ b/web/react/components/activity_log_modal.jsx @@ -167,8 +167,8 @@ export default class ActivityLogModal extends React.Component { <Modal.Header closeButton={true}> <Modal.Title>{'Active Sessions'}</Modal.Title> </Modal.Header> - <p className='session-help-text'>{'Sessions are created when you log in with your email and password to a new browser on a device. Sessions let you use Mattermost for up to 30 days without having to log in again. If you want to log out sooner, use the \'Logout\' button below to end a session.'}</p> <Modal.Body ref='modalBody'> + <p className='session-help-text'>{'Sessions are created when you log in with your email and password to a new browser on a device. Sessions let you use Mattermost for up to 30 days without having to log in again. If you want to log out sooner, use the \'Logout\' button below to end a session.'}</p> {content} </Modal.Body> </Modal> diff --git a/web/react/components/user_settings/code_theme_chooser.jsx b/web/react/components/user_settings/code_theme_chooser.jsx deleted file mode 100644 index eef4b24ba..000000000 --- a/web/react/components/user_settings/code_theme_chooser.jsx +++ /dev/null @@ -1,55 +0,0 @@ -// 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( - <div - className='col-xs-6 col-sm-3 premade-themes' - key={'premade-theme-key' + k} - > - <div - className={activeClass} - onClick={() => this.props.updateTheme(k)} - > - <label> - <img - className='img-responsive' - src={'/static/images/themes/code_themes/' + k + '.png'} - /> - <div className='theme-label'>{Constants.CODE_THEMES[k]}</div> - </label> - </div> - </div> - ); - } - } - - return ( - <div className='row'> - {premadeThemes} - </div> - ); - } -} - -CodeThemeChooser.propTypes = { - theme: React.PropTypes.object.isRequired, - updateTheme: React.PropTypes.func.isRequired -}; diff --git a/web/react/components/user_settings/custom_theme_chooser.jsx b/web/react/components/user_settings/custom_theme_chooser.jsx index 095e5b622..895d0c500 100644 --- a/web/react/components/user_settings/custom_theme_chooser.jsx +++ b/web/react/components/user_settings/custom_theme_chooser.jsx @@ -55,28 +55,70 @@ export default class CustomThemeChooser extends React.Component { const elements = []; let colors = ''; Constants.THEME_ELEMENTS.forEach((element, index) => { - elements.push( - <div - className='col-sm-4 form-group' - key={'custom-theme-key' + index} - > - <label className='custom-label'>{element.uiName}</label> + if (element.id === 'codeTheme') { + const codeThemeOptions = []; + + element.themes.forEach((codeTheme, codeThemeIndex) => { + codeThemeOptions.push( + <option + key={'code-theme-key' + codeThemeIndex} + value={codeTheme.id} + > + {codeTheme.uiName} + </option> + ); + }); + + elements.push( <div - className='input-group color-picker' - id={element.id} + className='col-sm-4 form-group' + key={'custom-theme-key' + index} > - <input - className='form-control' - type='text' - defaultValue={theme[element.id]} - onChange={this.onInputChange} - /> - <span className='input-group-addon'><i></i></span> + <label className='custom-label'>{element.uiName}</label> + <div + className='input-group theme-group dropdown' + id={element.id} + > + <select + className='form-control' + type='text' + defaultValue={theme[element.id]} + onChange={this.onInputChange} + > + {codeThemeOptions} + </select> + <span className='input-group-addon'> + <img + src={'/static/images/themes/code_themes/' + theme[element.id] + '.png'} + /> + </span> + </div> </div> - </div> - ); + ); + } else { + elements.push( + <div + className='col-sm-4 form-group' + key={'custom-theme-key' + index} + > + <label className='custom-label'>{element.uiName}</label> + <div + className='input-group color-picker' + id={element.id} + > + <input + className='form-control' + type='text' + defaultValue={theme[element.id]} + onChange={this.onInputChange} + /> + <span className='input-group-addon'><i></i></span> + </div> + </div> + ); - colors += theme[element.id] + ','; + colors += theme[element.id] + ','; + } }); colors += theme.codeTheme; @@ -87,6 +129,7 @@ export default class CustomThemeChooser extends React.Component { {'Copy and paste to share theme colors:'} </label> <input + readOnly='true' type='text' className='form-control' value={colors} diff --git a/web/react/components/user_settings/user_settings_appearance.jsx b/web/react/components/user_settings/user_settings_appearance.jsx index 425645c1f..d73b5f476 100644 --- a/web/react/components/user_settings/user_settings_appearance.jsx +++ b/web/react/components/user_settings/user_settings_appearance.jsx @@ -7,7 +7,6 @@ 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; @@ -19,7 +18,6 @@ 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.deactivate = this.deactivate.bind(this); this.resetFields = this.resetFields.bind(this); this.handleImportModal = this.handleImportModal.bind(this); @@ -100,10 +98,6 @@ export default class UserSettingsAppearance extends React.Component { ); } updateTheme(theme) { - if (!theme.codeTheme) { - theme.codeTheme = this.state.theme.codeTheme; - } - let themeChanged = this.state.theme.length === theme.length; if (!themeChanged) { for (const field in theme) { @@ -121,11 +115,6 @@ export default class UserSettingsAppearance extends React.Component { this.setState({theme}); Utils.applyTheme(theme); } - updateCodeTheme(codeTheme) { - var theme = this.state.theme; - theme.codeTheme = codeTheme; - this.updateTheme(theme); - } updateType(type) { this.setState({type}); } @@ -203,12 +192,6 @@ export default class UserSettingsAppearance extends React.Component { </div> {custom} <hr /> - <strong className='radio'>{'Code Theme'}</strong> - <CodeThemeChooser - theme={this.state.theme} - updateTheme={this.updateCodeTheme} - /> - <hr /> {serverError} <a className='btn btn-sm btn-primary' diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx index b8d346ba7..7d885681a 100644 --- a/web/react/utils/constants.jsx +++ b/web/react/utils/constants.jsx @@ -159,7 +159,8 @@ module.exports = { buttonBg: '#2389d7', buttonColor: '#FFFFFF', mentionHighlightBg: '#fff2bb', - mentionHighlightLink: '#2f81b7' + mentionHighlightLink: '#2f81b7', + codeTheme: 'github' }, organization: { type: 'Organization', @@ -181,7 +182,8 @@ module.exports = { buttonBg: '#1dacfc', buttonColor: '#FFFFFF', mentionHighlightBg: '#fff2bb', - mentionHighlightLink: '#2f81b7' + mentionHighlightLink: '#2f81b7', + codeTheme: 'github' }, mattermostDark: { type: 'Mattermost Dark', @@ -203,7 +205,8 @@ module.exports = { buttonBg: '#4CBBA4', buttonColor: '#FFFFFF', mentionHighlightBg: '#984063', - mentionHighlightLink: '#A4FFEB' + mentionHighlightLink: '#A4FFEB', + codeTheme: 'solarized_dark' }, windows10: { type: 'Windows Dark', @@ -225,7 +228,8 @@ module.exports = { buttonBg: '#0177e7', buttonColor: '#FFFFFF', mentionHighlightBg: '#784098', - mentionHighlightLink: '#A4FFEB' + mentionHighlightLink: '#A4FFEB', + codeTheme: 'monokai' } }, THEME_ELEMENTS: [ @@ -304,14 +308,30 @@ module.exports = { { id: 'mentionHighlightLink', uiName: 'Mention Highlight Link' + }, + { + id: 'codeTheme', + uiName: 'Code Theme', + themes: [ + { + id: 'solarized_dark', + uiName: 'Solarized Dark' + }, + { + id: 'solarized_light', + uiName: 'Solarized Light' + }, + { + id: 'github', + uiName: 'GitHub' + }, + { + id: 'monokai', + uiName: 'Monokai' + } + ] } ], - CODE_THEMES: { - github: 'GitHub', - solarized_light: 'Solarized light', - monokai: 'Monokai', - solarized_dark: 'Solarized Dark' - }, DEFAULT_CODE_THEME: 'github', Preferences: { CATEGORY_DIRECT_CHANNEL_SHOW: 'direct_channel_show', diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index 3eec1dd81..575b6d011 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -438,11 +438,6 @@ export function toTitleCase(str) { } export function applyTheme(theme) { - if (!theme.codeTheme) { - theme.codeTheme = Constants.DEFAULT_CODE_THEME; - } - updateCodeTheme(theme.codeTheme); - if (theme.sidebarBg) { changeCss('.sidebar--left, .settings-modal .settings-table .settings-links, .sidebar--menu', 'background:' + theme.sidebarBg, 1); } @@ -598,6 +593,11 @@ export function applyTheme(theme) { if (theme.mentionHighlightLink) { changeCss('.mention-highlight .mention-link', 'color:' + theme.mentionHighlightLink, 1); } + + if (!theme.codeTheme) { + theme.codeTheme = Constants.DEFAULT_CODE_THEME; + } + updateCodeTheme(theme.codeTheme); } export function changeCss(className, classValue, classRepeat) { // we need invisible container to store additional css definitions diff --git a/web/sass-files/sass/partials/_access-history.scss b/web/sass-files/sass/partials/_access-history.scss index a3289ecc0..c8a0b28bd 100644 --- a/web/sass-files/sass/partials/_access-history.scss +++ b/web/sass-files/sass/partials/_access-history.scss @@ -19,10 +19,6 @@ border-bottom: 1px solid #ddd; padding-bottom: 15px; } - .report__time { - font-weight: 600; - font-size: 15px; - } .report__info { @include opacity(0.8); } diff --git a/web/sass-files/sass/partials/_activity-log.scss b/web/sass-files/sass/partials/_activity-log.scss index 2fb37a3bb..f61c35a28 100644 --- a/web/sass-files/sass/partials/_activity-log.scss +++ b/web/sass-files/sass/partials/_activity-log.scss @@ -36,7 +36,7 @@ text-align: right; } .report__platform { - font-size: 16px; + font-size: 15px; font-weight: 600; .fa { margin-right: 6px; @@ -47,5 +47,5 @@ } } .session-help-text { - padding: 20px 20px 5px 20px; + padding: 0 0 20px; }
\ No newline at end of file diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss index 3be83ed2f..b304450bc 100644 --- a/web/sass-files/sass/partials/_settings.scss +++ b/web/sass-files/sass/partials/_settings.scss @@ -125,6 +125,15 @@ } .appearance-section { + .theme-group { + .input-group-addon { + padding: 4px 5px; + width: 40px; + img { + border: 1px solid rgba(black, 0.15); + } + } + } .premade-themes { margin-bottom: 10px; .theme-label { diff --git a/web/static/images/themes/code_themes/github.png b/web/static/images/themes/code_themes/github.png Binary files differindex d0538d6c0..a49b877b1 100644 --- a/web/static/images/themes/code_themes/github.png +++ b/web/static/images/themes/code_themes/github.png diff --git a/web/static/images/themes/code_themes/monokai.png b/web/static/images/themes/code_themes/monokai.png Binary files differindex 8f92d2a18..a71225b68 100644 --- a/web/static/images/themes/code_themes/monokai.png +++ b/web/static/images/themes/code_themes/monokai.png diff --git a/web/static/images/themes/code_themes/solarized_dark.png b/web/static/images/themes/code_themes/solarized_dark.png Binary files differindex 76055c678..07774ff20 100644 --- a/web/static/images/themes/code_themes/solarized_dark.png +++ b/web/static/images/themes/code_themes/solarized_dark.png diff --git a/web/static/images/themes/code_themes/solarized_light.png b/web/static/images/themes/code_themes/solarized_light.png Binary files differindex b9595c22d..fc71dbb87 100644 --- a/web/static/images/themes/code_themes/solarized_light.png +++ b/web/static/images/themes/code_themes/solarized_light.png |