diff options
Diffstat (limited to 'webapp/components')
-rw-r--r-- | webapp/components/user_settings/custom_theme_chooser.jsx | 89 |
1 files changed, 54 insertions, 35 deletions
diff --git a/webapp/components/user_settings/custom_theme_chooser.jsx b/webapp/components/user_settings/custom_theme_chooser.jsx index 79edd230e..307310f64 100644 --- a/webapp/components/user_settings/custom_theme_chooser.jsx +++ b/webapp/components/user_settings/custom_theme_chooser.jsx @@ -1,14 +1,15 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See License.txt for license information. -import $ from 'jquery'; -import Constants from 'utils/constants.jsx'; -import * as Utils from 'utils/utils.jsx'; import 'bootstrap-colorpicker'; - +import $ from 'jquery'; +import React from 'react'; import {Popover, OverlayTrigger} from 'react-bootstrap'; +import {defineMessages, FormattedMessage, intlShape, injectIntl} from 'react-intl'; -import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'react-intl'; +import Constants from 'utils/constants.jsx'; +import * as UserAgent from 'utils/user_agent.jsx'; +import * as Utils from 'utils/utils.jsx'; const messages = defineMessages({ sidebarBg: { @@ -101,22 +102,9 @@ const messages = defineMessages({ } }); -import React from 'react'; - const HEX_CODE_LENGTH = 7; class CustomThemeChooser extends React.Component { - constructor(props) { - super(props); - - this.onPickerChange = this.onPickerChange.bind(this); - this.pasteBoxChange = this.pasteBoxChange.bind(this); - this.toggleContent = this.toggleContent.bind(this); - this.onCodeThemeChange = this.onCodeThemeChange.bind(this); - - this.state = {}; - } - componentDidMount() { $('.color-picker').colorpicker({ format: 'hex' @@ -148,7 +136,7 @@ class CustomThemeChooser extends React.Component { } } - onPickerChange(e) { + onPickerChange = (e) => { const inputBox = e.target.childNodes[0]; if (document.activeElement === inputBox && inputBox.value.length !== HEX_CODE_LENGTH) { return; @@ -160,7 +148,7 @@ class CustomThemeChooser extends React.Component { this.props.updateTheme(theme); } - pasteBoxChange(e) { + pasteBoxChange = (e) => { let text = ''; if (window.clipboardData && window.clipboardData.getData) { // IE @@ -184,22 +172,41 @@ class CustomThemeChooser extends React.Component { this.props.updateTheme(theme); } - onChangeHandle(e) { + onChangeHandle = (e) => { e.stopPropagation(); } - toggleContent(e) { - e.stopPropagation(); - if ($(e.target).hasClass('theme-elements__header')) { - $(e.target).next().slideToggle(); - $(e.target).toggleClass('open'); + toggleSidebarStyles = (e) => { + e.preventDefault(); + + $(this.refs.sidebarStylesHeader).toggleClass('open'); + this.toggleSection(this.refs.sidebarStyles); + } + + toggleCenterChannelStyles = (e) => { + e.preventDefault(); + + $(this.refs.centerChannelStylesHeader).toggleClass('open'); + this.toggleSection(this.refs.centerChannelStyles); + } + + toggleLinkAndButtonStyles = (e) => { + e.preventDefault(); + + $(this.refs.linkAndButtonStylesHeader).toggleClass('open'); + this.toggleSection(this.refs.linkAndButtonStyles); + } + + toggleSection(node) { + if (UserAgent.isIos()) { + // iOS doesn't support jQuery animations + $(node).toggleClass('open'); } else { - $(e.target).closest('.theme-elements__header').next().slideToggle(); - $(e.target).closest('.theme-elements__header').toggleClass('open'); + $(node).slideToggle(); } } - onCodeThemeChange(e) { + onCodeThemeChange = (e) => { const theme = this.props.theme; theme.codeTheme = e.target.value; this.props.updateTheme(theme); @@ -363,8 +370,9 @@ class CustomThemeChooser extends React.Component { <div className='appearance-section padding-top'> <div className='theme-elements row'> <div + ref='sidebarStylesHeader' className='theme-elements__header' - onClick={this.toggleContent} + onClick={this.toggleSidebarStyles} > <FormattedMessage id='user.settings.custom_theme.sidebarTitle' @@ -375,14 +383,18 @@ class CustomThemeChooser extends React.Component { <i className='fa fa-minus'/> </div> </div> - <div className='theme-elements__body'> + <div + ref='sidebarStyles' + className='theme-elements__body' + > {sidebarElements} </div> </div> <div className='theme-elements row'> <div + ref='centerChannelStylesHeader' className='theme-elements__header' - onClick={this.toggleContent} + onClick={this.toggleCenterChannelStyles} > <FormattedMessage id='user.settings.custom_theme.centerChannelTitle' @@ -393,14 +405,18 @@ class CustomThemeChooser extends React.Component { <i className='fa fa-minus'/> </div> </div> - <div className='theme-elements__body'> + <div + ref='centerChannelStyles' + className='theme-elements__body' + > {centerChannelElements} </div> </div> <div className='theme-elements row form-group'> <div + ref='linkAndButtonStylesHeader' className='theme-elements__header' - onClick={this.toggleContent} + onClick={this.toggleLinkAndButtonStyles} > <FormattedMessage id='user.settings.custom_theme.linkButtonTitle' @@ -411,7 +427,10 @@ class CustomThemeChooser extends React.Component { <i className='fa fa-minus'/> </div> </div> - <div className='theme-elements__body'> + <div + ref='linkAndButtonStyles' + className='theme-elements__body' + > {linkAndButtonElements} </div> </div> |