Merge pull request #1046 from asaadmahmoodspin/ui-improvements

Multiple UI Improvements
2015-10-14 09:02:05 -04:00
--- a/web/react/components/create_post.jsx
+++ b/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);
--- a/web/react/components/error_bar.jsx
+++ b/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();

--- a/web/react/components/post_info.jsx
+++ b/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}
--- a/web/react/components/sidebar.jsx
+++ b/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}
--- a/web/react/components/user_profile.jsx
+++ b/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'});
        }
    }
--- a/web/react/utils/utils.jsx
+++ b/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);
--- a/web/sass-files/sass/partials/_base.scss
+++ b/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;
  }
 }

--- a/web/sass-files/sass/partials/_content.scss
+++ b/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 {
--- a/web/sass-files/sass/partials/_error-bar.scss
+++ b/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;
--- a/web/sass-files/sass/partials/_forms.scss
+++ b/web/sass-files/sass/partials/_forms.scss
@@ -40,5 +40,6 @@

 .help-block {
 	font-size: 0.95em;
+	margin: 10px 0 0;
 	color: #999;
 }
--- a/web/sass-files/sass/partials/_headers.scss
+++ b/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;
 	}
 }
--- a/web/sass-files/sass/partials/_navbar.scss
+++ b/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;
--- a/web/sass-files/sass/partials/_post.scss
+++ b/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;
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/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);
+                        }
+                    }
                }
            }
        }
--- a/web/sass-files/sass/partials/_sidebar--left.scss
+++ b/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;