Multiple UI Improvements

1 files changed, 101 insertions, 7 deletions

diff --git a/web/react/components/user_settings/custom_theme_chooser.jsx b/web/react/components/user_settings/custom_theme_chooser.jsx
index 2d88a3650..242615bc0 100644
--- a/web/react/components/user_settings/custom_theme_chooser.jsx
+++ b/web/react/components/user_settings/custom_theme_chooser.jsx
@@ -102,6 +102,7 @@ class CustomThemeChooser extends React.Component {
         this.onPickerChange = this.onPickerChange.bind(this);
         this.onInputChange = this.onInputChange.bind(this);
         this.pasteBoxChange = this.pasteBoxChange.bind(this);
+        this.toggleContent = this.toggleContent.bind(this);
 
         this.state = {};
     }
@@ -153,11 +154,18 @@ class CustomThemeChooser extends React.Component {
 
         this.props.updateTheme(theme);
     }
+    toggleContent(e) {
+        e.stopPropagation();
+        $(e.target).next().slideToggle();
+        $(e.target).toggleClass('open');
+    }
     render() {
         const {formatMessage} = this.props.intl;
         const theme = this.props.theme;
 
-        const elements = [];
+        const sidebarElements = [];
+        const centerChannelElements = [];
+        const linkAndButtonElements = [];
         let colors = '';
         Constants.THEME_ELEMENTS.forEach((element, index) => {
             if (element.id === 'codeTheme') {
@@ -187,9 +195,9 @@ class CustomThemeChooser extends React.Component {
                     </Popover>
                 );
 
-                elements.push(
+                centerChannelElements.push(
                     <div
-                        className='col-sm-4 form-group'
+                        className='col-sm-6 form-group'
                         key={'custom-theme-key' + index}
                     >
                         <label className='custom-label'>{formatMessage(messages[element.id])}</label>
@@ -219,10 +227,54 @@ class CustomThemeChooser extends React.Component {
                         </div>
                     </div>
                 );
+            } else if (element.group === 'centerChannelElements') {
+                centerChannelElements.push(
+                    <div
+                        className='col-sm-6 form-group element'
+                        key={'custom-theme-key' + index}
+                    >
+                        <label className='custom-label'>{formatMessage(messages[element.id])}</label>
+                        <div
+                            className='input-group color-picker'
+                            id={element.id}
+                        >
+                            <input
+                                className='form-control'
+                                type='text'
+                                value={theme[element.id]}
+                                onChange={this.onInputChange}
+                            />
+                            <span className='input-group-addon'><i></i></span>
+                        </div>
+                    </div>
+                );
+            } else if (element.group === 'sidebarElements') {
+                sidebarElements.push(
+                    <div
+                        className='col-sm-6 form-group element'
+                        key={'custom-theme-key' + index}
+                    >
+                        <label className='custom-label'>{formatMessage(messages[element.id])}</label>
+                        <div
+                            className='input-group color-picker'
+                            id={element.id}
+                        >
+                            <input
+                                className='form-control'
+                                type='text'
+                                value={theme[element.id]}
+                                onChange={this.onInputChange}
+                            />
+                            <span className='input-group-addon'><i></i></span>
+                        </div>
+                    </div>
+                );
+
+                colors += theme[element.id] + ',';
             } else {
-                elements.push(
+                linkAndButtonElements.push(
                     <div
-                        className='col-sm-4 form-group element'
+                        className='col-sm-6 form-group element'
                         key={'custom-theme-key' + index}
                     >
                         <label className='custom-label'>{formatMessage(messages[element.id])}</label>
@@ -265,9 +317,51 @@ class CustomThemeChooser extends React.Component {
         );
 
         return (
-            <div className='appearance-section'>
+            <div className='appearance-section padding-top'>
+                <div className='theme-elements row'>
+                    <div
+                        className='theme-elements__header'
+                        onClick={this.toggleContent}
+                    >
+                        {'Sidebar Styles'}
+                        <div className='header__icon'>
+                            <i className='fa fa-plus'></i>
+                            <i className='fa fa-minus'></i>
+                        </div>
+                    </div>
+                    <div className='theme-elements__body'>
+                        {sidebarElements}
+                    </div>
+                </div>
+                <div className='theme-elements row'>
+                    <div
+                        className='theme-elements__header'
+                        onClick={this.toggleContent}
+                    >
+                        {'Center Channel Styles'}
+                        <div className='header__icon'>
+                            <i className='fa fa-plus'></i>
+                            <i className='fa fa-minus'></i>
+                        </div>
+                    </div>
+                    <div className='theme-elements__body'>
+                        {centerChannelElements}
+                    </div>
+                </div>
                 <div className='theme-elements row form-group'>
-                    {elements}
+                    <div
+                        className='theme-elements__header'
+                        onClick={this.toggleContent}
+                    >
+                        {'Link and Button Styles'}
+                        <div className='header__icon'>
+                            <i className='fa fa-plus'></i>
+                            <i className='fa fa-minus'></i>
+                        </div>
+                    </div>
+                    <div className='theme-elements__body'>
+                        {linkAndButtonElements}
+                    </div>
                 </div>
                 <div className='row'>
                     {pasteBox}