Merge pull request #1282 from asaadmahmoodspin/ui-improvements

Multiple UI changes

web/react/components/search_results.jsx

@@ -83,7 +83,16 @@ export default class SearchResults extends React.Component {
         var ctls = null;
 
         if (noResults) {
-            ctls = <div className='sidebar--right__subheader'>No results</div>;
+            ctls =
+            (
+                <div className='sidebar--right__subheader'>
+                    <h4>{'NO RESULTS'}</h4>
+                    <ul>
+                        <li>If you're searching a partial phrase (ex. searching "rea", looking for "reach" or "reaction"), append a * to your search term</li>
+                        <li>Due to the volume of results, two letter searches and common words like "this", "a" and "is" won't appear in search results</li>
+                    </ul>
+                </div>
+            );
         } else {
             ctls = results.order.map(function mymap(id) {
                 var post = results.posts[id];

web/react/components/settings_sidebar.jsx

@@ -1,10 +1,14 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
+var utils = require('../utils/utils.jsx');
 
 export default class SettingsSidebar extends React.Component {
     componentDidUpdate() {
         $('.settings-modal').find('.modal-body').scrollTop(0);
         $('.settings-modal').find('.modal-body').perfectScrollbar('update');
+        if (utils.isSafari()) {
+            $('.settings-modal .settings-links .nav').addClass('absolute');
+        }
     }
     constructor(props) {
         super(props);

web/react/components/team_general_tab.jsx

@@ -372,29 +372,28 @@ export default class GeneralTab extends React.Component {
             const inputs = [];
 
             inputs.push(
-                <div
-                    key='teamInviteSetting'
-                    className='form-group'
-                >
-                    <label className='col-sm-5 control-label'>{'Invite Code'}</label>
-                    <div className='col-sm-7'>
-                        <input
-                            className='form-control'
-                            type='text'
-                            onChange={this.updateInviteId}
-                            value={this.state.invite_id}
-                            maxLength='32'
-                        />
-                    </div>
-                    <div><br/>{'Your Invite Code is used in the URL sent to people to join your team. Regenerating your Invite Code will invalidate the URLs in previous invitations, unless "Allow anyone to sign-up from login page" is enabled.'}</div>
-                    <div className='help-text'>
-                        <button
-                            className='btn btn-default'
-                            onClick={this.handleGenerateInviteId}
-                        >
-                            {'Re-Generate'}
-                        </button>
+                <div key='teamInviteSetting'>
+                    <div className='row'>
+                        <label className='col-sm-5 control-label'>{'Invite Code'}</label>
+                        <div className='col-sm-7'>
+                            <input
+                                className='form-control'
+                                type='text'
+                                onChange={this.updateInviteId}
+                                value={this.state.invite_id}
+                                maxLength='32'
+                            />
+                            <div className='padding-top x2'>
+                                <a
+                                    href='#'
+                                    onClick={this.handleGenerateInviteId}
+                                >
+                                    {'Re-Generate'}
+                                </a>
+                            </div>
+                        </div>
                     </div>
+                    <div className='setting-list__hint'>{'When allowing open invites this code is used as part of the signup process.  Changing this code will invalidate the previous open signup link.'}</div>
                 </div>
             );
 
@@ -493,8 +492,11 @@ export default class GeneralTab extends React.Component {
                     <h3 className='tab-header'>{'General Settings'}</h3>
                     <div className='divider-dark first'/>
                     {nameSection}
+                    <div className='divider-light'/>
                     {openInviteSection}
+                    <div className='divider-light'/>
                     {teamListingSection}
+                    <div className='divider-light'/>
                     {inviteSection}
                     <div className='divider-dark'/>
                 </div>

web/react/components/tutorial/tutorial_intro_screens.jsx

@@ -35,6 +35,9 @@ export default class TutorialIntroScreens extends React.Component {
         preference = PreferenceStore.setPreference(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), newValue);
         AsyncClient.savePreferences([preference]);
     }
+    componentDidMount() {
+        $('.tutorials__scroll').perfectScrollbar();
+    }
     createScreen() {
         switch (this.state.currentScreen) {
         case 0:
@@ -130,20 +133,26 @@ export default class TutorialIntroScreens extends React.Component {
         );
     }
     render() {
+        const height = Utils.windowHeight() - 100;
         const screen = this.createScreen();
 
         return (
-            <div className='tutorial-steps__container'>
-                <div className='tutorial__content'>
-                    <div className='tutorial__steps'>
-                        {screen}
-                        <button
-                            className='btn btn-primary'
-                            tabIndex='1'
-                            onClick={this.handleNext}
-                        >
-                            {'Next'}
-                        </button>
+            <div
+                className='tutorials__scroll'
+                style={{height}}
+            >
+                <div className='tutorial-steps__container'>
+                    <div className='tutorial__content'>
+                        <div className='tutorial__steps'>
+                            {screen}
+                            <button
+                                className='btn btn-primary'
+                                tabIndex='1'
+                                onClick={this.handleNext}
+                            >
+                                {'Next'}
+                            </button>
+                        </div>
                     </div>
                 </div>
             </div>

web/react/utils/utils.jsx

@@ -59,6 +59,20 @@ export function isTestDomain() {
     return false;
 }
 
+export function isChrome() {
+    if (navigator.userAgent.indexOf('Chrome') > -1) {
+        return true;
+    }
+    return false;
+}
+
+export function isSafari() {
+    if (navigator.userAgent.indexOf('Safari') !== -1 && navigator.userAgent.indexOf('Chrome') === -1) {
+        return true;
+    }
+    return false;
+}
+
 export function isInRole(roles, inRole) {
     var parts = roles.split(' ');
     for (var i = 0; i < parts.length; i++) {
@@ -500,16 +514,16 @@ export function applyTheme(theme) {
         changeCss('#post-create', 'background:' + theme.centerChannelBg, 1);
         changeCss('.date-separator .separator__text, .new-separator .separator__text', 'background:' + theme.centerChannelBg, 1);
         changeCss('.post-image__column .post-image__details', 'background:' + theme.centerChannelBg, 1);
-        changeCss('.sidebar--right, .dropdown-menu, .popover', 'background:' + theme.centerChannelBg, 1);
+        changeCss('.sidebar--right, .dropdown-menu, .popover, .tip-overlay', 'background:' + theme.centerChannelBg, 1);
         changeCss('.popover.bottom>.arrow:after', 'border-bottom-color:' + theme.centerChannelBg, 1);
-        changeCss('.popover.right>.arrow:after', 'border-right-color:' + theme.centerChannelBg, 1);
+        changeCss('.popover.right>.arrow:after, .tip-overlay.tip-overlay--sidebar .arrow, .tip-overlay.tip-overlay--header .arrow', 'border-right-color:' + theme.centerChannelBg, 1);
         changeCss('.popover.left>.arrow:after', 'border-left-color:' + theme.centerChannelBg, 1);
-        changeCss('.popover.top>.arrow:after', 'border-top-color:' + theme.centerChannelBg, 1);
+        changeCss('.popover.top>.arrow:after, .tip-overlay.tip-overlay--chat .arrow', 'border-top-color:' + theme.centerChannelBg, 1);
         changeCss('.search-bar__container .search__form .search-bar, .form-control', 'background:' + theme.centerChannelBg, 1);
     }
 
     if (theme.centerChannelColor) {
-        changeCss('.app__content, .post-create__container .post-create-body .btn-file, .post-create__container .post-create-footer .msg-typing, .command-name, .modal .modal-content, .dropdown-menu, .popover, .mentions-name', 'color:' + theme.centerChannelColor, 1);
+        changeCss('.app__content, .post-create__container .post-create-body .btn-file, .post-create__container .post-create-footer .msg-typing, .command-name, .modal .modal-content, .dropdown-menu, .popover, .mentions-name, .tip-overlay', 'color:' + theme.centerChannelColor, 1);
         changeCss('#post-create', 'color:' + theme.centerChannelColor, 2);
         changeCss('.channel-header__links a', 'fill:' + changeOpacity(theme.centerChannelColor, 0.7), 1);
         changeCss('.channel-header__links a:hover, .channel-header__links a:active', 'fill:' + theme.centerChannelColor, 2);
@@ -519,7 +533,7 @@ export function applyTheme(theme) {
         changeCss('.dropdown-menu, .popover ', 'box-shadow:' + changeOpacity(theme.centerChannelColor, 0.1) + ' 0px 6px 12px', 3);
         changeCss('.dropdown-menu, .popover ', '-webkit-box-shadow:' + changeOpacity(theme.centerChannelColor, 0.1) + ' 0px 6px 12px', 2);
         changeCss('.dropdown-menu, .popover ', '-moz-box-shadow:' + changeOpacity(theme.centerChannelColor, 0.1) + ' 0px 6px 12px', 1);
-        changeCss('.post-body hr, .loading-screen .loading__content .round', 'background:' + theme.centerChannelColor, 1);
+        changeCss('.post-body hr, .loading-screen .loading__content .round, .tutorial__circles .circle, .tip-overlay .tutorial__circles .circle.active', 'background:' + theme.centerChannelColor, 1);
         changeCss('.channel-header .heading', 'color:' + theme.centerChannelColor, 1);
         changeCss('.markdown__table tbody tr:nth-child(2n)', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
         changeCss('.channel-header__info>div.dropdown .header-dropdown__icon', 'color:' + changeOpacity(theme.centerChannelColor, 0.8), 1);
@@ -568,7 +582,7 @@ export function applyTheme(theme) {
     }
 
     if (theme.buttonBg) {
-        changeCss('.btn.btn-primary', 'background:' + theme.buttonBg, 1);
+        changeCss('.btn.btn-primary, .tutorial__circles .circle.active', 'background:' + theme.buttonBg, 1);
         changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background:' + changeColor(theme.buttonBg, -0.25), 1);
         changeCss('.file-playback-controls', 'color:' + changeColor(theme.buttonBg, -0.25), 1);
     }

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

@@ -133,9 +133,6 @@ a:focus, a:hover {
   &.no-resize {
     resize: none;
   }
-  &.min-height {
-    min-height: 100px;
-  }
 }
 
 .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {

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

@@ -275,6 +275,14 @@
     }
 }
 @media screen and (max-width: 768px) {
+    .form-control {
+        &.min-height {
+            min-height: 100px;
+        }
+    }
+    .gif-div {
+        max-width: 100%;
+    }
     .tip-div {
         left: 15px;
         right: auto;
@@ -460,7 +468,7 @@
             }
         }
         .settings-table {
-            .nav {
+            .nav, .nav.absolute {
                 position: relative;
                 top: auto;
                 width: 100%;

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

@@ -72,6 +72,10 @@
             position: fixed;
             top: 57px;
             width: 179px;
+            &.absolute {
+                position: absolute;
+                top: 0;
+            }
         }
         .security-links {
             margin-right: 20px;

web/sass-files/sass/partials/_sidebar--right.scss

@@ -80,13 +80,18 @@
     }
     .sidebar--right__subheader {
         font-size: 1em;
-        text-transform: uppercase;
-        color: #999;
-        font-weight: 400;
-        color: #888;
-        height: 44px;
-        line-height: 44px;
-        padding: 0 1em;
+        padding: 1em 1em 0;
+        h4 {
+            font-size: 1em;
+        }
+        ul {
+            @include opacity(0.7);
+            padding: 10px 0 0 30px;
+        }
+        li {
+            font-size: 0.95em;
+            padding-bottom: 10px;
+        }
     }
 }
 

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

@@ -146,11 +146,12 @@
     text-align: center;
     width: 100%;
     display: table;
+    height: 100%;
     .tutorial__content {
         display: table-cell;
         vertical-align: middle;
         padding-bottom: 100px;
-        padding: 0 40px;
+        padding: 20px 40px 40px;
         .tutorial__steps {
             max-width: 310px;
             min-height: 420px;
@@ -176,7 +177,7 @@
         width: 9px;
         height: 9px;
         @include border-radius(9px);
-        @include opacity(0.1);
+        @include opacity(0.2);
         background: #000;
         display: inline-block;
         margin: 0 5px;