PLT-6278 Fixed not being able to open custom theme sections on iOS (#6259)

2 files changed, 58 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>
diff --git a/webapp/sass/routes/_settings.scss b/webapp/sass/routes/_settings.scss
index 5b1fcdf9e..d2531339e 100644
--- a/webapp/sass/routes/_settings.scss
+++ b/webapp/sass/routes/_settings.scss
@@ -273,6 +273,10 @@
                         display: none;
                         margin: 0 20px 0 0;
                         padding: 20px 0 0 20px;
+
+                        &.open {
+                            display: block;
+                        }
                     }
 
                     .custom-label {