Merge pull request #1219 from asaadmahmoodspin/ui-improvements

Ui improvements

web/react/components/file_attachment.jsx

@@ -270,7 +270,7 @@ export default class FileAttachment extends React.Component {
                         href={fileUrl}
                         download={filenameString}
                         data-toggle='tooltip'
-                        title={filenameString}
+                        title={'Download ' + filenameString}
                         className='post-image__name'
                     >
                         {trimmedFilename}

web/react/components/get_link_modal.jsx

@@ -98,7 +98,7 @@ export default class GetLinkModal extends React.Component {
                                 <br /><br />
                                 </p>
                                 <textarea
-                                    className='form-control no-resize'
+                                    className='form-control no-resize min-height'
                                     readOnly='true'
                                     ref='textarea'
                                     value={this.state.value}

web/react/components/navbar_dropdown.jsx

@@ -58,6 +58,7 @@ export default class NavbarDropdown extends React.Component {
         TeamStore.addChangeListener(this.onListenerChange);
 
         $(ReactDOM.findDOMNode(this.refs.dropdown)).on('hide.bs.dropdown', () => {
+            $('.sidebar--left .dropdown-menu').scrollTop(0);
             this.blockToggle = true;
             setTimeout(() => {
                 this.blockToggle = false;

web/react/components/register_app_modal.jsx

@@ -96,75 +96,74 @@ export default class RegisterAppModal extends React.Component {
         var body = '';
         if (this.state.clientId === '') {
             body = (
-                <div className='form-group user-settings'>
+                <div className='settings-modal'>
-                    <h3>{'Register a New Application'}</h3>
+                    <div className='form-horizontal user-settings'>
-                    <br/>
+                        <h4 className='padding-bottom x3'>{'Register a New Application'}</h4>
-                    <label className='col-sm-4 control-label'>{'Application Name'}</label>
+                        <div className='row'>
-                    <div className='col-sm-7'>
+                            <label className='col-sm-4 control-label'>{'Application Name'}</label>
-                        <input
+                            <div className='col-sm-7'>
-                            ref='name'
+                                <input
-                            className='form-control'
+                                    ref='name'
-                            type='text'
+                                    className='form-control'
-                            placeholder='Required'
+                                    type='text'
-                        />
+                                    placeholder='Required'
-                        {nameError}
+                                />
+                                {nameError}
+                            </div>
+                        </div>
+                        <div className='row padding-top x2'>
+                            <label className='col-sm-4 control-label'>{'Homepage URL'}</label>
+                            <div className='col-sm-7'>
+                                <input
+                                    ref='homepage'
+                                    className='form-control'
+                                    type='text'
+                                    placeholder='Required'
+                                />
+                                {homepageError}
+                            </div>
+                        </div>
+                        <div className='row padding-top x2'>
+                            <label className='col-sm-4 control-label'>{'Description'}</label>
+                            <div className='col-sm-7'>
+                                <input
+                                    ref='desc'
+                                    className='form-control'
+                                    type='text'
+                                    placeholder='Optional'
+                                />
+                            </div>
+                        </div>
+                        <div className='row padding-top padding-bottom x2'>
+                            <label className='col-sm-4 control-label'>{'Callback URL'}</label>
+                            <div className='col-sm-7'>
+                                <textarea
+                                    ref='callback'
+                                    className='form-control'
+                                    type='text'
+                                    placeholder='Required'
+                                    rows='5'
+                                />
+                                {callbackError}
+                            </div>
+                        </div>
+                        {serverError}
+                        <hr />
+                        <a
+                            className='btn btn-sm theme pull-right'
+                            href='#'
+                            data-dismiss='modal'
+                            aria-label='Close'
+                        >
+                            {'Cancel'}
+                        </a>
+                        <a
+                            className='btn btn-sm btn-primary pull-right'
+                            onClick={this.register}
+                        >
+                            {'Register'}
+                        </a>
                     </div>
-                    <br/>
-                    <br/>
-                    <label className='col-sm-4 control-label'>{'Homepage URL'}</label>
-                    <div className='col-sm-7'>
-                        <input
-                            ref='homepage'
-                            className='form-control'
-                            type='text'
-                            placeholder='Required'
-                        />
-                        {homepageError}
-                    </div>
-                    <br/>
-                    <br/>
-                    <label className='col-sm-4 control-label'>{'Description'}</label>
-                    <div className='col-sm-7'>
-                        <input
-                            ref='desc'
-                            className='form-control'
-                            type='text'
-                            placeholder='Optional'
-                        />
-                    </div>
-                    <br/>
-                    <br/>
-                    <label className='col-sm-4 control-label'>{'Callback URL'}</label>
-                    <div className='col-sm-7'>
-                        <textarea
-                            ref='callback'
-                            className='form-control'
-                            type='text'
-                            placeholder='Required'
-                            rows='5'
-                        />
-                        {callbackError}
-                    </div>
-                    <br/>
-                    <br/>
-                    <br/>
-                    <br/>
-                    <br/>
-                    {serverError}
-                    <a
-                        className='btn btn-sm theme pull-right'
-                        href='#'
-                        data-dismiss='modal'
-                        aria-label='Close'
-                    >
-                        {'Cancel'}
-                    </a>
-                    <a
-                        className='btn btn-sm btn-primary pull-right'
-                        onClick={this.register}
-                    >
-                        {'Register'}
-                    </a>
                 </div>
             );
         } else {

web/react/components/search_autocomplete.jsx

@@ -10,6 +10,7 @@ const patterns = new Map([
     ['channels', /\b(?:in|channel):\s*(\S*)$/i],
     ['users', /\bfrom:\s*(\S*)$/i]
 ]);
+const Popover = ReactBootstrap.Popover;
 
 export default class SearchAutocomplete extends React.Component {
     constructor(props) {
@@ -36,6 +37,11 @@ export default class SearchAutocomplete extends React.Component {
         $(document).on('click', this.handleDocumentClick);
     }
 
+    componentDidUpdate() {
+        $(ReactDOM.findDOMNode(this.refs.searchPopover)).find('.popover-content').perfectScrollbar();
+        $(ReactDOM.findDOMNode(this.refs.searchPopover)).find('.popover-content').css('max-height', $(window).height() - 200);
+    }
+
     componentWillUnmount() {
         $(document).off('click', this.handleDocumentClick);
     }
@@ -193,7 +199,7 @@ export default class SearchAutocomplete extends React.Component {
 
         if (this.state.mode === 'channels') {
             suggestions = this.state.suggestions.map((channel, index) => {
-                let className = 'search-autocomplete__channel';
+                let className = 'search-autocomplete__item';
                 if (this.state.selection === index) {
                     className += ' selected';
                 }
@@ -211,7 +217,7 @@ export default class SearchAutocomplete extends React.Component {
             });
         } else if (this.state.mode === 'users') {
             suggestions = this.state.suggestions.map((user, index) => {
-                let className = 'search-autocomplete__user';
+                let className = 'search-autocomplete__item';
                 if (this.state.selection === index) {
                     className += ' selected';
                 }
@@ -224,7 +230,7 @@ export default class SearchAutocomplete extends React.Component {
                         className={className}
                     >
                         <img
-                            className='profile-img'
+                            className='profile-img rounded'
                             src={'/api/v1/users/' + user.id + '/image?time=' + user.update_at}
                         />
                         {user.username}
@@ -234,12 +240,15 @@ export default class SearchAutocomplete extends React.Component {
         }
 
         return (
-            <div
+            <Popover
-                ref='container'
+                ref='searchPopover'
-                className='search-autocomplete'
+                onShow={this.componentDidMount}
+                id='search-autocomplete__popover'
+                className='search-help-popover autocomplete visible'
+                placement='bottom'
             >
                 {suggestions}
-            </div>
+            </Popover>
         );
     }
 }

web/react/components/setting_item_max.jsx

@@ -35,8 +35,10 @@ export default class SettingItemMax extends React.Component {
         var widthClass;
         if (this.props.width === 'full') {
             widthClass = 'col-sm-12';
-        } else {
+        } else if (this.props.width === 'medium') {
             widthClass = 'col-sm-10 col-sm-offset-2';
+        } else {
+            widthClass = 'col-sm-9 col-sm-offset-3';
         }
 
         return (

web/react/components/setting_picture.jsx

@@ -42,7 +42,7 @@ export default class SettingPicture extends React.Component {
             img = (
                 <img
                     ref='image'
-                    className='profile-img'
+                    className='profile-img rounded'
                     src=''
                 />
             );
@@ -50,7 +50,7 @@ export default class SettingPicture extends React.Component {
             img = (
                 <img
                     ref='image'
-                    className='profile-img'
+                    className='profile-img rounded'
                     src={this.props.src}
                 />
             );

web/react/components/sidebar_header.jsx

@@ -5,6 +5,9 @@ var NavbarDropdown = require('./navbar_dropdown.jsx');
 var UserStore = require('../stores/user_store.jsx');
 const Utils = require('../utils/utils.jsx');
 
+const Tooltip = ReactBootstrap.Tooltip;
+const OverlayTrigger = ReactBootstrap.OverlayTrigger;
+
 export default class SidebarHeader extends React.Component {
     constructor(props) {
         super(props);
@@ -47,7 +50,15 @@ export default class SidebarHeader extends React.Component {
                     {profilePicture}
                     <div className='header__info'>
                         <div className='user__name'>{'@' + me.username}</div>
+                        <OverlayTrigger
+                            trigger={['hover', 'focus']}
+                            delayShow={1000}
+                            placement='bottom'
+                            overlay={<Tooltip id='team-name__tooltip'>{this.props.teamDisplayName}</Tooltip>}
+                            ref='descriptionOverlay'
+                        >
                         <div className='team__name'>{this.props.teamDisplayName}</div>
+                        </OverlayTrigger>
                     </div>
                 </a>
                 <NavbarDropdown

web/react/components/team_signup_with_email.jsx

@@ -71,7 +71,7 @@ export default class EmailSignUpPage extends React.Component {
                         className='btn btn-md btn-primary'
                         type='submit'
                     >
-                        {'Sign up'}
+                        {'Create Team'}
                     </button>
                     {serverError}
                 </div>

web/react/components/user_settings/manage_outgoing_hooks.jsx

@@ -236,6 +236,7 @@ export default class ManageOutgoingHooks extends React.Component {
         return (
             <div key='addOutgoingHook'>
                 <label className='control-label'>{'Add a new outgoing webhook'}</label>
+                <div className='padding-top divider-light'></div>
                 <div className='padding-top'>
                     <div>
                         <label className='control-label'>{'Channel'}</label>

web/react/components/user_settings/user_settings_integrations.jsx

@@ -43,6 +43,7 @@ export default class UserSettingsIntegrationsTab extends React.Component {
                 incomingHooksSection = (
                     <SettingItemMax
                         title='Incoming Webhooks'
+                        width='medium'
                         inputs={inputs}
                         updateSection={(e) => {
                             this.updateSection('');
@@ -54,6 +55,7 @@ export default class UserSettingsIntegrationsTab extends React.Component {
                 incomingHooksSection = (
                     <SettingItemMin
                         title='Incoming Webhooks'
+                        width='medium'
                         describe='Manage your incoming webhooks (Developer feature)'
                         updateSection={() => {
                             this.updateSection('incoming-hooks');
@@ -72,6 +74,7 @@ export default class UserSettingsIntegrationsTab extends React.Component {
                 outgoingHooksSection = (
                     <SettingItemMax
                         title='Outgoing Webhooks'
+                        width='medium'
                         inputs={inputs}
                         updateSection={(e) => {
                             this.updateSection('');
@@ -83,6 +86,7 @@ export default class UserSettingsIntegrationsTab extends React.Component {
                 outgoingHooksSection = (
                     <SettingItemMin
                         title='Outgoing Webhooks'
+                        width='medium'
                         describe='Manage your outgoing webhooks'
                         updateSection={() => {
                             this.updateSection('outgoing-hooks');

web/react/utils/utils.jsx

@@ -438,6 +438,8 @@ export function applyTheme(theme) {
     if (theme.sidebarTextActiveColor) {
         changeCss('.sidebar--left .nav-pills__container li.active a, .sidebar--left .nav-pills__container li.active a:hover, .sidebar--left .nav-pills__container li.active a:focus, .settings-modal .nav-pills>li.active a, .settings-modal .nav-pills>li.active a:hover, .settings-modal .nav-pills>li.active a:active', 'color:' + theme.sidebarTextActiveColor, 2);
         changeCss('.sidebar--left .nav li.active a, .sidebar--left .nav li.active a:hover, .sidebar--left .nav li.active a:focus', 'background:' + changeOpacity(theme.sidebarTextActiveColor, 0.1), 1);
+        changeCss('.search-help-popover .search-autocomplete__item:hover', 'background:' + changeOpacity(theme.sidebarTextActiveColor, 0.05), 1);
+        changeCss('.search-help-popover .search-autocomplete__item.selected', 'background:' + changeOpacity(theme.sidebarTextActiveColor, 0.15), 1);
     }
 
     if (theme.sidebarHeaderBg) {

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

@@ -37,6 +37,9 @@ body {
 img {
   max-width: 100%;
   height: auto;
+  &.rounded {
+    @include border-radius(100%);
+  }
 }
 
 .popover {
@@ -122,6 +125,9 @@ 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/_modal.scss

@@ -113,11 +113,10 @@
 		text-align: center;
 		padding: 2em 1em;
 		.primary-message {
-			font-size: 1.2em;
+			font-size: 1.25em;
 		}
 		.secondary-message {
-			font-size: 1.25em;
+			@include opacity(0.8);
-			color: #888;
 			margin: 1em 0 0;
 		}
 	}

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

@@ -28,6 +28,36 @@
     @include single-transition(opacity, 0.3s, ease-in);
     font-size: em(13px);
 
+    &.autocomplete {
+        display: block;
+        .popover-content {
+            padding: 10px;
+            position: relative;
+        }
+    }
+
+    .search-autocomplete__item {
+        cursor: pointer;
+        padding: 6px 8px;
+        margin: 3px 0;
+        @include border-radius(2px);
+
+        &:hover {
+            background: rgba(black, 0.1);
+        }
+
+        &.selected {
+            background: rgba(black, 0.2);
+        }
+
+        .profile-img {
+            margin-top: -1px;
+            height: 16px;
+            margin-right: 6px;
+            width: 16px;
+        }
+    }
+
     &.bottom > .arrow {
         top: -18px;
         border-width: 9px;

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

@@ -379,7 +379,9 @@
             }
             .btn {
                 &.btn-primary {
-                    margin: 8px 0 0 -10px;
+                    display: block;
+                    margin: 10px 0 6px;
+                    width: 100%;
                     float: none;
                 }
             }
@@ -401,7 +403,13 @@
                     &.minimize-settings {
                         display: block;
                         .section-edit {
-                            text-align: left;
+                            position: absolute;
+                            top: 7px;
+                            right: 0;
+                            width: 50px;
+                            .fa {
+                                display: inline-block;
+                            }
                         }
                     }
                     .no-padding--left {

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

@@ -108,44 +108,4 @@
 
 .search-highlight {
 	background-color: #FFF2BB;
-}
+}
-
-.search-autocomplete {
-    background-color: #fff;
-    border: $border-gray;
-    line-height: 36px;
-    overflow-x: hidden;
-    overflow-y: scroll;
-    position: absolute;
-    text-align: left;
-    width: 100%;
-    z-index: 100;
-    @extend %popover-box-shadow;
-}
-
-.search-autocomplete__channel {
-    cursor: pointer;
-    height: 36px;
-    padding: 0px 6px;
-
-    &.selected {
-        background-color:rgba(51, 51, 51, 0.15);
-    }
-}
-
-.search-autocomplete__user {
-    cursor: pointer;
-    height: 36px;
-    padding: 0px;
-
-    .profile-img {
-        height: 32px;
-        margin-right: 6px;
-        width: 32px;
-        @include border-radius(16px);
-    }
-
-    &.selected {
-        background-color:rgba(51, 51, 51, 0.15);
-    }
-}

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

@@ -33,6 +33,33 @@
     label {
         font-weight: 600;
     }
+    .no-padding--left {
+        padding-left: 0;
+    }
+    .padding-top {
+        padding-top: 7px;
+        &.x2 {
+            padding-top: 14px;
+        }
+        &.x3 {
+            padding-top: 21px;
+        }
+    }
+    .padding-bottom {
+        padding-bottom: 7px;
+        &.x2 {
+            padding-bottom: 14px;
+        }
+        &.x3 {
+            padding-bottom: 21px;
+        }
+        .control-label {
+            font-weight: 600;
+            &.text-left {
+                text-align: left;
+            }
+        }
+    }
     .settings-table {
         display: table;
         table-layout: fixed;
@@ -44,7 +71,7 @@
         .nav {
             position: fixed;
             top: 57px;
-            width: 180px;
+            width: 179px;
         }
         .security-links {
             margin-right: 20px;
@@ -66,6 +93,7 @@
                 padding: 1em 0;
                 margin-bottom: 0;
                 cursor: pointer;
+                position: relative;
                 @include clearfix;
                 &:hover {
                     background: #f9f9f9;
@@ -170,33 +198,6 @@
             .has-error {
                 color: #a94442;
             }
-            .no-padding--left {
-                padding-left: 0;
-            }
-            .padding-top {
-                padding-top: 7px;
-                &.x2 {
-                    padding-top: 14px;
-                }
-                &.x3 {
-                    padding-top: 21px;
-                }
-            }
-            .padding-bottom {
-                padding-bottom: 7px;
-                &.x2 {
-                    padding-bottom: 14px;
-                }
-                &.x3 {
-                    padding-bottom: 21px;
-                }
-                .control-label {
-                    font-weight: 600;
-                    &.text-left {
-                        text-align: left;
-                    }
-                }
-            }
 
             .file-status {
                 font-size: 13px;