From 110bc3e7e9258903230780b25478b03c562cded8 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <Unknowngi@live.com>
Date: Thu, 29 Oct 2015 00:02:17 +0500
Subject: Multiple UI changes

---
 web/react/components/file_attachment.jsx        |  2 +-
 web/react/components/get_link_modal.jsx         |  2 +-
 web/react/components/navbar_dropdown.jsx        |  1 +
 web/react/components/search_autocomplete.jsx    | 23 ++++++++++++++++-------
 web/react/components/setting_picture.jsx        |  4 ++--
 web/react/components/sidebar_header.jsx         | 11 +++++++++++
 web/react/components/team_signup_with_email.jsx |  2 +-
 web/react/utils/utils.jsx                       |  2 ++
 8 files changed, 35 insertions(+), 12 deletions(-)

(limited to 'web/react')

diff --git a/web/react/components/file_attachment.jsx b/web/react/components/file_attachment.jsx
index 4d4e8390c..e707e32f5 100644
--- a/web/react/components/file_attachment.jsx
+++ b/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}
diff --git a/web/react/components/get_link_modal.jsx b/web/react/components/get_link_modal.jsx
index 325e86f3d..8839bc3c7 100644
--- a/web/react/components/get_link_modal.jsx
+++ b/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}
diff --git a/web/react/components/navbar_dropdown.jsx b/web/react/components/navbar_dropdown.jsx
index 2b68645e5..2b0f3c40e 100644
--- a/web/react/components/navbar_dropdown.jsx
+++ b/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;
diff --git a/web/react/components/search_autocomplete.jsx b/web/react/components/search_autocomplete.jsx
index 03c7b894c..f7d772677 100644
--- a/web/react/components/search_autocomplete.jsx
+++ b/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
-                ref='container'
-                className='search-autocomplete'
+            <Popover
+                ref='searchPopover'
+                onShow={this.componentDidMount}
+                id='search-autocomplete__popover'
+                className='search-help-popover autocomplete visible'
+                placement='bottom'
             >
                 {suggestions}
-            </div>
+            </Popover>
         );
     }
 }
diff --git a/web/react/components/setting_picture.jsx b/web/react/components/setting_picture.jsx
index b6bcb13a6..e69412cca 100644
--- a/web/react/components/setting_picture.jsx
+++ b/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}
                 />
             );
diff --git a/web/react/components/sidebar_header.jsx b/web/react/components/sidebar_header.jsx
index de28a8374..65e4c6d7e 100644
--- a/web/react/components/sidebar_header.jsx
+++ b/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
diff --git a/web/react/components/team_signup_with_email.jsx b/web/react/components/team_signup_with_email.jsx
index ff4ccd4d8..021713f04 100644
--- a/web/react/components/team_signup_with_email.jsx
+++ b/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>
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx
index b643c6012..0d16ef82e 100644
--- a/web/react/utils/utils.jsx
+++ b/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) {
-- 
cgit v1.2.3-1-g7c22