Merge pull request #1046 from asaadmahmoodspin/ui-improvements

Multiple UI Improvements

web/react/components/create_post.jsx

@@ -192,9 +192,12 @@ export default class CreatePost extends React.Component {
         PostStore.storeCurrentDraft(draft);
     }
     resizePostHolder() {
-        const height = $(window).height() - $(React.findDOMNode(this.refs.topDiv)).height() - $('#error_bar').outerHeight() - 50;
+        const height = $(window).height() - $(React.findDOMNode(this.refs.topDiv)).height() - 50;
         $('.post-list-holder-by-time').css('height', `${height}px`);
         $(window).trigger('resize');
+        if ($(window).width() > 960) {
+            $('#post_textbox').focus();
+        }
     }
     handleUploadStart(clientIds, channelId) {
         const draft = PostStore.getDraft(channelId);

web/react/components/error_bar.jsx

@@ -9,7 +9,6 @@ export default class ErrorBar extends React.Component {
 
         this.onErrorChange = this.onErrorChange.bind(this);
         this.handleClose = this.handleClose.bind(this);
-        this.resize = this.resize.bind(this);
         this.prevTimer = null;
 
         this.state = ErrorStore.getLastError();
@@ -46,34 +45,14 @@ export default class ErrorBar extends React.Component {
         return false;
     }
 
-    resize() {
-        if (this.isValidError(this.state)) {
-            var height = $(React.findDOMNode(this)).outerHeight();
-            height = height < 30 ? 30 : height;
-            $('body').css('padding-top', height + 'px');
-        } else {
-            $('body').css('padding-top', '0');
-        }
-    }
-
     componentDidMount() {
         ErrorStore.addChangeListener(this.onErrorChange);
-
-        $(window).resize(() => {
-            this.resize();
-        });
-
-        this.resize();
     }
 
     componentWillUnmount() {
         ErrorStore.removeChangeListener(this.onErrorChange);
     }
 
-    componentDidUpdate() {
-        this.resize();
-    }
-
     onErrorChange() {
         var newState = ErrorStore.getLastError();
 

web/react/components/post_info.jsx

@@ -150,6 +150,7 @@ export default class PostInfo extends React.Component {
             <ul className='post-header post-info'>
                 <li className='post-header-col'>
                     <OverlayTrigger
+                        delayShow='500'
                         container={this}
                         placement='top'
                         overlay={tooltip}

web/react/components/sidebar.jsx

@@ -15,6 +15,8 @@ const TeamStore = require('../stores/team_store.jsx');
 const UnreadChannelIndicator = require('./unread_channel_indicator.jsx');
 const UserStore = require('../stores/user_store.jsx');
 const Utils = require('../utils/utils.jsx');
+const Tooltip = ReactBootstrap.Tooltip;
+const OverlayTrigger = ReactBootstrap.OverlayTrigger;
 
 export default class Sidebar extends React.Component {
     constructor(props) {
@@ -455,14 +457,21 @@ export default class Sidebar extends React.Component {
         }
 
         let closeButton = null;
+        const removeTooltip = <Tooltip>{'Remove from list'}</Tooltip>;
         if (handleClose && !badge) {
             closeButton = (
+                <OverlayTrigger
+                    delayShow='1000'
+                    placement='top'
+                    overlay={removeTooltip}
+                >
                 <span
-                    className='close-btn pull-right small'
+                    className='btn-close'
                     data-close='true'
                 >
                     {'×'}
                 </span>
+                </OverlayTrigger>
             );
 
             rowClass = ' has-close';
@@ -545,6 +554,9 @@ export default class Sidebar extends React.Component {
             showChannelModal = true;
         }
 
+        const createChannelTootlip = <Tooltip>{'Create new channel'}</Tooltip>;
+        const createGroupTootlip = <Tooltip>{'Create new group'}</Tooltip>;
+
         return (
             <div>
                 <NewChannelFlow
@@ -579,6 +591,11 @@ export default class Sidebar extends React.Component {
                         <li>
                             <h4>
                                 {'Channels'}
+                                <OverlayTrigger
+                                    delayShow='500'
+                                    placement='top'
+                                    overlay={createChannelTootlip}
+                                >
                                 <a
                                     className='add-channel-btn'
                                     href='#'
@@ -586,6 +603,7 @@ export default class Sidebar extends React.Component {
                                 >
                                     {'+'}
                                 </a>
+                                </OverlayTrigger>
                             </h4>
                         </li>
                         {publicChannelItems}
@@ -606,6 +624,11 @@ export default class Sidebar extends React.Component {
                         <li>
                             <h4>
                                 {'Private Groups'}
+                                <OverlayTrigger
+                                    delayShow='500'
+                                    placement='top'
+                                    overlay={createGroupTootlip}
+                                >
                                 <a
                                     className='add-channel-btn'
                                     href='#'
@@ -613,6 +636,7 @@ export default class Sidebar extends React.Component {
                                 >
                                     {'+'}
                                 </a>
+                                </OverlayTrigger>
                             </h4>
                         </li>
                         {privateChannelItems}

web/react/components/user_profile.jsx

@@ -32,7 +32,7 @@ export default class UserProfile extends React.Component {
     componentDidMount() {
         UserStore.addChangeListener(this.onChange);
         if (!this.props.disablePopover) {
-            $('#profile_' + this.uniqueId).popover({placement: 'right', container: 'body', trigger: 'hover', html: true, delay: {show: 200, hide: 100}});
+            $('#profile_' + this.uniqueId).popover({placement: 'right', container: 'body', trigger: 'click hover', html: true, delay: {show: 200, hide: 100}});
             $('body').tooltip({selector: '[data-toggle=tooltip]', trigger: 'hover click'});
         }
     }

web/react/utils/utils.jsx

@@ -473,6 +473,8 @@ export function applyTheme(theme) {
     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('#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);
         changeCss('.mentions--top, .command-box', 'box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px', 3);
         changeCss('.mentions--top, .command-box', '-webkit-box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px', 2);
         changeCss('.mentions--top, .command-box', '-moz-box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px', 1);
@@ -485,6 +487,10 @@ export function applyTheme(theme) {
         changeCss('.channel-header__info>div.dropdown .header-dropdown__icon', 'color:' + changeOpacity(theme.centerChannelColor, 0.8), 1);
         changeCss('.channel-header #member_popover', 'color:' + changeOpacity(theme.centerChannelColor, 0.8), 1);
         changeCss('.custom-textarea, .custom-textarea:focus, .preview-container .preview-div, .post-image__column .post-image__details, .sidebar--right .sidebar-right__body, .markdown__table th, .markdown__table td, .command-box, .modal .modal-content, .settings-modal .settings-table .settings-content .divider-light, .dropdown-menu, .modal .modal-header, .popover, .mentions--top .mentions-box', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
+        changeCss('.popover.bottom>.arrow', 'border-bottom-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1);
+        changeCss('.popover.right>.arrow', 'border-right-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1);
+        changeCss('.popover.left>.arrow', 'border-left-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1);
+        changeCss('.popover.top>.arrow', 'border-top-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1);
         changeCss('.command-name, .popover .popover-title', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
         changeCss('.dropdown-menu .divider', 'background:' + theme.centerChannelColor, 1);
         changeCss('.custom-textarea', 'color:' + theme.centerChannelColor, 1);

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

@@ -45,9 +45,9 @@ img {
 
 .popover {
   color: #333;
-  &.bottom {
+  &.bottom, &.right, &.top, &.left {
     >.arrow:after {
-      border-bottom-color: rgba(white, 0.5);
+      border-color: transparent;
     }
   }
   .popover-title {
@@ -83,6 +83,9 @@ a:focus, a:hover {
 .tooltip {
   .tooltip-inner {
     word-break: break-word;
+    font-size: 13px;
+    padding: 3px 10px 4px;
+    font-weight: 500;
   }
 }
 

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

@@ -28,7 +28,7 @@
 	bottom: 0;
 	left: 0;
 	width: 100%;
-	z-index: 6;
+	z-index: 3;
 }
 .post-list {
 	.new-messages-hr {

web/sass-files/sass/partials/_error-bar.scss

@@ -3,7 +3,7 @@
     text-align:center;
     position: relative;
     color: #fff;
-    position: fixed;
+    position: absolute;
     top: 0;
     width: 100%;
     z-index: 9999;

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

@@ -40,5 +40,6 @@
 
 .help-block {
 	font-size: 0.95em;
+	margin: 10px 0 0;
 	color: #999;
 }

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

@@ -291,11 +291,6 @@
 	display: inline-block;
 	width: 15px;
 	margin: 9px 6px 3px 0;
-	&:hover {
-		svg {
-			fill: #777;
-		}
-	}
 	a {
 		height: 100%;
 		display: block;
@@ -303,6 +298,6 @@
 	svg {
 		vertical-align: top;
 		margin-top: 8px;
-		fill: #aaa;
+		fill: inherit;
 	}
 }

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

@@ -95,12 +95,6 @@
 	}
 }
 
-.close-btn {
-    position: absolute;
-    right: 10px;
-    top: 5px;
-}
-
 .badge-notify {
 	background:red;
 	position: absolute;

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

@@ -408,7 +408,7 @@ body.ios {
 	}
 	.post-body {
 		position: relative;
-		z-index: 5;
+		z-index: 1;
 		max-width: 100%;
 		width: 600px;
 		float: left;
@@ -439,7 +439,7 @@ body.ios {
 		padding-left: 0px;
 		&.post-header-post {
 			position: relative;
-			z-index: 5;
+			z-index: 1;
 			width: 200px;
 			text-align: right;
 			float: left;

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

@@ -48,6 +48,7 @@
                 }
                 .post-header {
                     &.post-header-post {
+                        z-index: inherit;
                         width: auto;
                         float: none;
                         text-align: left;
@@ -138,6 +139,7 @@
         }
         .post-header {
             &.post-header-post {
+                z-index: inherit;
                 width: auto;
                 float: none;
                 text-align: left;
@@ -624,6 +626,12 @@
                     &:hover, &:focus {
                         background: transparent;
                     }
+                    &.has-close {
+                        .btn-close {
+                            display: block;
+                            @include opacity(0.5);
+                        }
+                    }
                 }
             }
         }

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

@@ -100,6 +100,24 @@
                 }
                 &.has-close {
                     padding-right: 30px;
+                    &:hover {
+                        .btn-close {
+                            display: block;
+                            @include opacity(0.8);
+                        }
+                    }
+                    .btn-close {
+                        position: absolute;
+                        right: 15px;
+                        top: -1px;
+                        font-size: 20px;
+                        font-weight: 600;
+                        @include opacity(0);
+                        display: none;
+                        &:hover {
+                            @include opacity(1);
+                        }
+                    }
                 }
                 &.nav-more {
                     text-decoration: underline;