Merge pull request #2171 from asaadmahmoodspin/ui-fixes

Multiple UI Improvements

9 files changed, 212 insertions, 17 deletions

diff --git a/web/react/components/post_info.jsx b/web/react/components/post_info.jsx
index c44223b1f..d1d516816 100644
--- a/web/react/components/post_info.jsx
+++ b/web/react/components/post_info.jsx
@@ -14,9 +14,17 @@ export default class PostInfo extends React.Component {
     constructor(props) {
         super(props);
 
+        this.dropdownPosition = this.dropdownPosition.bind(this);
         this.handlePermalink = this.handlePermalink.bind(this);
         this.removePost = this.removePost.bind(this);
     }
+    dropdownPosition(e) {
+        var position = $('#post-list').height() - $(e.target).offset().top;
+        var dropdown = $(e.target).next('.dropdown-menu');
+        if (position < dropdown.height()) {
+            dropdown.addClass('bottom');
+        }
+    }
     createDropdown() {
         var post = this.props.post;
         var isOwner = UserStore.getCurrentId() === post.user_id;
@@ -133,6 +141,7 @@ export default class PostInfo extends React.Component {
                     type='button'
                     data-toggle='dropdown'
                     aria-expanded='false'
+                    onClick={this.dropdownPosition}
                 />
                 <ul
                     className='dropdown-menu'
diff --git a/web/react/components/user_settings/custom_theme_chooser.jsx b/web/react/components/user_settings/custom_theme_chooser.jsx
index 2d88a3650..1e724bb6e 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,23 @@ class CustomThemeChooser extends React.Component {
 
         this.props.updateTheme(theme);
     }
+    toggleContent(e) {
+        e.stopPropagation();
+        if ($(e.target).hasClass('theme-elements__header')) {
+            $(e.target).next().slideToggle();
+            $(e.target).toggleClass('open');
+        } else {
+            $(e.target).closest('.theme-elements__header').next().slideToggle();
+            $(e.target).closest('.theme-elements__header').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 +200,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 +232,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 +322,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}
diff --git a/web/react/components/user_settings/user_settings_theme.jsx b/web/react/components/user_settings/user_settings_theme.jsx
index 34c688db1..74975d115 100644
--- a/web/react/components/user_settings/user_settings_theme.jsx
+++ b/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>
             );
 
diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx
index 428549d57..766a86686 100644
--- a/web/react/utils/constants.jsx
+++ b/web/react/utils/constants.jsx
@@ -189,8 +189,8 @@ export default {
             sidebarHeaderTextColor: '#FFFFFF',
             onlineIndicator: '#7DBE00',
             awayIndicator: '#DCBD4E',
-            mentionBj: '#136197',
-            mentionColor: '#bfcde8',
+            mentionBj: '#FBFBFB',
+            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: [
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx
index 7f124149d..bdf68fc03 100644
--- a/web/react/utils/utils.jsx
+++ b/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);
     }
 
diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss
index 323691d89..5d0985fc0 100644
--- a/web/sass-files/sass/partials/_post.scss
+++ b/web/sass-files/sass/partials/_post.scss
@@ -396,8 +396,8 @@ body.ios {
 	.post-list__content {
 		display: table-cell;
 		vertical-align: bottom;
-		> div:last-child {
-			.dropdown-menu {
+		.dropdown-menu {
+			&.bottom {
 				top: auto;
 				bottom: 25px;
 			}
diff --git a/web/sass-files/sass/partials/_post_right.scss b/web/sass-files/sass/partials/_post_right.scss
index bd3d60622..01be9e288 100644
--- a/web/sass-files/sass/partials/_post_right.scss
+++ b/web/sass-files/sass/partials/_post_right.scss
@@ -11,7 +11,15 @@
 
 	.post-right-comments-container {
 		position: relative;
-		padding: 0.7em 0 0;
+
+		.post {
+
+			&:first-child {
+				padding-top: 15px;
+			}
+
+		}
+
 	}
 
 	.post {
@@ -19,6 +27,11 @@
 		&.post--root {
 			padding-bottom: 1.2em;
 			border-bottom: 1px solid #ddd;
+
+			.post__body {
+				background: transparent !important;
+			}
+
 		}
 
 		.post__header {
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index 2374a9dbb..1a8e3f374 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/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 {
diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss
index de7df403f..c79b54922 100644
--- a/web/sass-files/sass/partials/_settings.scss
+++ b/web/sass-files/sass/partials/_settings.scss
@@ -144,7 +144,11 @@
                     select {
                         padding-right: 25px;
                     }
+                    select::-ms-expand {
+                        display: none;
+                    }
                     &:before {
+                        pointer-events: none;
                         position: absolute;
                         top: 11px;
                         right: 50px;
@@ -181,12 +185,57 @@
 
             .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;
+
+                .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%;