Multiple UI Improvements

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 {
+            } else if (element.group === 'centerChannelElements') {
-                elements.push(
+                centerChannelElements.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>
+                        <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 {
+                linkAndButtonElements.push(
+                    <div
+                        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}

web/react/components/user_settings/user_settings_theme.jsx

@@ -182,7 +182,6 @@ export default class ThemeSetting extends React.Component {
         if (displayCustom) {
             custom = (
                 <div key='customThemeChooser'>
-                    <br/>
                     <CustomThemeChooser
                         theme={this.state.theme}
                         updateTheme={this.updateTheme}
@@ -241,7 +240,6 @@ export default class ThemeSetting extends React.Component {
                             defaultMessage='Custom Theme'
                         />
                     </label>
-                    <br/>
                 </div>
             );
 

web/react/utils/constants.jsx

@@ -189,8 +189,8 @@ export default {
             sidebarHeaderTextColor: '#FFFFFF',
             onlineIndicator: '#7DBE00',
             awayIndicator: '#DCBD4E',
-            mentionBj: '#136197',
+            mentionBj: '#FBFBFB',
-            mentionColor: '#bfcde8',
+            mentionColor: '#2071A7',
             centerChannelBg: '#f2f4f8',
             centerChannelColor: '#333333',
             newMessageSeparator: '#FF8800',
@@ -276,86 +276,107 @@ export default {
     },
     THEME_ELEMENTS: [
         {
+            group: 'sidebarElements',
             id: 'sidebarBg',
             uiName: 'Sidebar BG'
         },
         {
+            group: 'sidebarElements',
             id: 'sidebarText',
             uiName: 'Sidebar Text'
         },
         {
+            group: 'sidebarElements',
             id: 'sidebarHeaderBg',
             uiName: 'Sidebar Header BG'
         },
         {
+            group: 'sidebarElements',
             id: 'sidebarHeaderTextColor',
             uiName: 'Sidebar Header Text'
         },
         {
+            group: 'sidebarElements',
             id: 'sidebarUnreadText',
             uiName: 'Sidebar Unread Text'
         },
         {
+            group: 'sidebarElements',
             id: 'sidebarTextHoverBg',
             uiName: 'Sidebar Text Hover BG'
         },
         {
+            group: 'sidebarElements',
             id: 'sidebarTextActiveBorder',
             uiName: 'Sidebar Text Active Border'
         },
         {
+            group: 'sidebarElements',
             id: 'sidebarTextActiveColor',
             uiName: 'Sidebar Text Active Color'
         },
         {
+            group: 'sidebarElements',
             id: 'onlineIndicator',
             uiName: 'Online Indicator'
         },
         {
+            group: 'sidebarElements',
             id: 'awayIndicator',
             uiName: 'Away Indicator'
         },
         {
+            group: 'sidebarElements',
             id: 'mentionBj',
             uiName: 'Mention Jewel BG'
         },
         {
+            group: 'sidebarElements',
             id: 'mentionColor',
             uiName: 'Mention Jewel Text'
         },
         {
+            group: 'centerChannelElements',
             id: 'centerChannelBg',
             uiName: 'Center Channel BG'
         },
         {
+            group: 'centerChannelElements',
             id: 'centerChannelColor',
             uiName: 'Center Channel Text'
         },
         {
+            group: 'centerChannelElements',
             id: 'newMessageSeparator',
             uiName: 'New Message Separator'
         },
         {
+            group: 'linkAndButtonElements',
             id: 'linkColor',
             uiName: 'Link Color'
         },
         {
+            group: 'linkAndButtonElements',
             id: 'buttonBg',
             uiName: 'Button BG'
         },
         {
+            group: 'linkAndButtonElements',
             id: 'buttonColor',
             uiName: 'Button Text'
         },
         {
+            group: 'centerChannelElements',
             id: 'mentionHighlightBg',
             uiName: 'Mention Highlight BG'
         },
         {
+            group: 'centerChannelElements',
             id: 'mentionHighlightLink',
             uiName: 'Mention Highlight Link'
         },
         {
+            group: 'centerChannelElements',
             id: 'codeTheme',
             uiName: 'Code Theme',
             themes: [

web/react/utils/utils.jsx

@@ -743,7 +743,7 @@ export function applyTheme(theme) {
         changeCss('.date-separator .separator__hr, .modal-footer, .modal .custom-textarea', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
         changeCss('.search-item-container, .post-right__container .post.post--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1), 1);
         changeCss('.modal .custom-textarea:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1);
-        changeCss('.channel-intro, .settings-modal .settings-table .settings-content .divider-dark, hr, .settings-modal .settings-table .settings-links', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
+        changeCss('.channel-intro, .settings-modal .settings-table .settings-content .divider-dark, hr, .settings-modal .settings-table .settings-links, .settings-modal .settings-table .settings-content .appearance-section .theme-elements__header', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
         changeCss('.post.current--user .post__body, .post.post--comment.other--root.current--user .post-comment, pre, .post-right__container .post.post--root', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
         changeCss('.post.current--user .post__body, .post.post--comment.other--root.current--user .post-comment, .post.same--root.post--comment .post__body, .modal .more-table tbody>tr td, .member-div:first-child, .member-div, .access-history__table .access__report, .activity-log__table', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1), 2);
         changeCss('@media(max-width: 1800px){.inner__wrap.move--left .post.post--comment.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2);
@@ -753,7 +753,7 @@ export function applyTheme(theme) {
         changeCss('code', 'background:' + changeOpacity(theme.centerChannelColor, 0.1), 1);
         changeCss('@media(min-width: 960px){.post.current--user:hover .post__body ', 'background: none;', 1);
         changeCss('.sidebar--right', 'color:' + theme.centerChannelColor, 2);
-        changeCss('.search-help-popover .search-autocomplete__item:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.05), 1);
+        changeCss('.search-help-popover .search-autocomplete__item:hover, .settings-modal .settings-table .settings-content .appearance-section .theme-elements__body', 'background:' + changeOpacity(theme.centerChannelColor, 0.05), 1);
         changeCss('.search-help-popover .search-autocomplete__item.selected', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1);
     }
 

web/sass-files/sass/partials/_responsive.scss

@@ -92,12 +92,14 @@
         font-size: 1em;
     }
 
-    .date-separator.hovered--after:before, .new-separator.hovered--after:before {
+    .date-separator.hovered--before:after, .date-separator.hovered--after:before, .new-separator.hovered--after:before, .new-separator.hovered--before:after {
         background: none !important;
     }
 
     .post {
 
+        background: none !important;
+
         .post__dropdown {
             line-height: 9px;
             text-decoration: none;
@@ -114,6 +116,10 @@
 
         }
 
+        .comment-icon__container {
+            visibility: visible;
+        }
+
         .post-list__content & {
 
             &:hover {

web/sass-files/sass/partials/_settings.scss

@@ -145,6 +145,7 @@
                         padding-right: 25px;
                     }
                     &:before {
+                        pointer-events: none;
                         position: absolute;
                         top: 11px;
                         right: 50px;
@@ -181,12 +182,61 @@
 
             .theme-elements {
                 padding-left:15px;
+
                 .element {
                     margin-right:10px;
+
+                    &:nth-child(2n) {
+                        margin-right: 0;
+                    }
+
                 }
             }
 
+            .theme-elements__header {
+                margin: 10px 20px 0px 0;
+                border-bottom: 1px solid #ccc;
+                padding: 5px 0 10px;
+                font-size: em(13.5px);
+                font-weight: 600;
+                cursor: pointer;
+
+                div, span {
+                    pointer-events: none;
+                }
+
+                .fa-minus {
+                    display: none;
+                }
+
+                &.open {
+                    .fa-minus {
+                        display: inline-block;
+                    }
+                    .fa-plus {
+                        display: none;
+                    }
+                }
+
+                .header__icon {
+                    float: right;
+                    @include opacity(0.5);
+                }
+
+            }
+
+            .theme-elements__body {
+                padding-top: 5px;
+                display: none;
+                @include legacy-pie-clearfix;
+                background: rgba(255, 255, 255, 0.05);
+                padding: 20px 0 0 20px;
+                margin: 0 20px 0 0;
+                @include border-radius(0 0 3px 3px);
+            }
+
             .custom-label {
+                white-space: nowrap;
                 font-weight: normal;
                 font-size: 12px;
                 width: 100%;