Merge pull request #1445 from asaadmahmoodspin/ui-improvements

Multiple UI Improvements

web/react/components/rhs_thread.jsx

@@ -117,8 +117,6 @@ export default class RhsThread extends React.Component {
         }
     }
     resize() {
-        var height = this.state.windowHeight - $('#error_bar').outerHeight() - 100;
-        $('.post-right__scroll').css('height', height + 'px');
         $('.post-right__scroll').scrollTop(100000);
         if (this.state.windowWidth > 768) {
             $('.post-right__scroll').perfectScrollbar();

web/react/components/search_results.jsx

@@ -62,8 +62,6 @@ export default class SearchResults extends React.Component {
     }
 
     resize() {
-        var height = this.state.windowHeight - $('#error_bar').outerHeight() - 100;
-        $('#search-items-container').css('height', height + 'px');
         $('#search-items-container').scrollTop(0);
         if (this.state.windowWidth > 768) {
             $('#search-items-container').perfectScrollbar();

web/react/components/sidebar_right_menu.jsx

@@ -48,7 +48,7 @@ export default class SidebarRightMenu extends React.Component {
                         href='#'
                         onClick={InviteMemberModal.show}
                     >
-                        <i className='glyphicon glyphicon-user'></i>Invite New Member
+                        <i className='fa fa-user'></i>Invite New Member
                     </a>
                 </li>
             );
@@ -61,7 +61,7 @@ export default class SidebarRightMenu extends React.Component {
                             data-target='#get_link'
                             data-title='Team Invite'
                             data-value={utils.getWindowLocationOrigin() + '/signup_user_complete/?id=' + TeamStore.getCurrent().invite_id}
-                        ><i className='glyphicon glyphicon-link'></i>Get Team Invite Link</a>
+                        ><i className='fa fa-link'></i>Get Team Invite Link</a>
                     </li>
                 );
             }
@@ -74,7 +74,7 @@ export default class SidebarRightMenu extends React.Component {
                         href='#'
                         data-toggle='modal'
                         data-target='#team_settings'
-                    ><i className='glyphicon glyphicon-globe'></i>Team Settings</a>
+                    ><i className='fa fa-globe'></i>Team Settings</a>
                 </li>
             );
             manageLink = (
@@ -84,7 +84,7 @@ export default class SidebarRightMenu extends React.Component {
                         data-toggle='modal'
                         data-target='#team_members'
                     >
-                    <i className='glyphicon glyphicon-wrench'></i>Manage Members</a>
+                    <i className='fa fa-users'></i>Manage Members</a>
                 </li>
             );
         }
@@ -95,7 +95,7 @@ export default class SidebarRightMenu extends React.Component {
                     <a
                         href={'/admin_console?' + utils.getSessionIndex()}
                     >
-                    <i className='glyphicon glyphicon-wrench'></i>System Console</a>
+                    <i className='fa fa-wrench'></i>System Console</a>
                 </li>
             );
         }
@@ -125,7 +125,7 @@ export default class SidebarRightMenu extends React.Component {
                                 href='#'
                                 onClick={() => this.setState({showUserSettingsModal: true})}
                             >
-                                <i className='glyphicon glyphicon-cog'></i>Account Settings
+                                <i className='fa fa-cog'></i>Account Settings
                             </a>
                         </li>
                         {teamSettingsLink}
@@ -137,18 +137,18 @@ export default class SidebarRightMenu extends React.Component {
                             <a
                                 href='#'
                                 onClick={this.handleLogoutClick}
-                            ><i className='glyphicon glyphicon-log-out'></i>Logout</a></li>
+                            ><i className='fa fa-sign-out'></i>Logout</a></li>
                         <li className='divider'></li>
                         <li>
                             <a
                                 target='_blank'
                                 href='/static/help/configure_links.html'
-                            ><i className='glyphicon glyphicon-question-sign'></i>Help</a></li>
+                            ><i className='fa fa-question'></i>Help</a></li>
                         <li>
                             <a
                                 target='_blank'
                                 href='/static/help/configure_links.html'
-                            ><i className='glyphicon glyphicon-earphone'></i>Report a Problem</a></li>
+                            ><i className='fa fa-phone'></i>Report a Problem</a></li>
                     </ul>
                 </div>
                 <UserSettingsModal

web/react/utils/channel_intro_mssages.jsx

@@ -92,6 +92,7 @@ export function createOffTopicIntroMessage(channel, showInviteModal) {
             </a>
             <a
                 href='#'
+                className='intro-links'
                 onClick={showInviteModal}
             >
                 <i className='fa fa-user-plus'></i>{'Invite others to this channel'}

web/react/utils/utils.jsx

@@ -616,7 +616,7 @@ 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, .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', 'fill:' + changeOpacity(theme.centerChannelColor, 0.9), 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);
@@ -644,7 +644,7 @@ export function applyTheme(theme) {
         changeCss('.search-bar__container .search__form .search-bar, .form-control', 'color:' + theme.centerChannelColor, 2);
         changeCss('@media(max-width: 768px){.search-bar__container .search__form .search-bar', 'background:' + changeOpacity(theme.centerChannelColor, 0.2) + '; color: inherit;', 1);
         changeCss('.input-group-addon, .search-bar__container .search__form, .form-control', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
-        changeCss('.form-control:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1);
+        changeCss('.form-control:focus, .channel-header__links', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1);
         changeCss('.attachment .attachment__content', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1);
         changeCss('.channel-intro .channel-intro__content, .webhooks__container', 'background:' + changeOpacity(theme.centerChannelColor, 0.05), 1);
         changeCss('.date-separator .separator__text', 'color:' + theme.centerChannelColor, 2);
@@ -656,7 +656,7 @@ export function applyTheme(theme) {
         changeCss('@media(max-width: 1440px){.post.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2);
         changeCss('@media(max-width: 1440px){.post.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2);
         changeCss('@media(max-width: 1800px){.inner__wrap.move--left .post.post--comment.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2);
-        changeCss('.post:hover, .modal .more-table tbody>tr:hover td, .sidebar--right .sidebar--right__header, .settings-modal .settings-table .settings-content .section-min:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
+        changeCss('.post:hover, .channel-header__links a:hover, .channel-header__links a:active, .modal .more-table tbody>tr:hover td, .settings-modal .settings-table .settings-content .section-min:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
         changeCss('.date-separator.hovered--before:after, .date-separator.hovered--after:before, .new-separator.hovered--after:before, .new-separator.hovered--before:after', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
         changeCss('.command-name:hover, .mentions-name:hover, .mentions-focus, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .bot-indicator', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1);
         changeCss('code', 'background:' + changeOpacity(theme.centerChannelColor, 0.1), 1);

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

@@ -20,7 +20,6 @@
 	background: #fff;
     @include display-flex;
     @include flex-direction(column);
-    flex-direction: column;
 	.channel__wrap & {
 		padding-top: 0;
 	}

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

@@ -1,9 +1,9 @@
 .preview-container {
   position: relative;
-  margin-top: 10px;
+  margin-top: 25px;
   width: 100%;
-  max-height: 110px;
-  height: 110px;
+  max-height: 100px;
+  height: 100px;
   white-space: nowrap;
   overflow-x: auto;
   overflow-y: hidden;
@@ -11,7 +11,7 @@
     display: inline-block;
     width: 120px;
     height: 100px;
-    margin: 7px 0 0 5px;
+    margin: 0 0 0 5px;
     vertical-align: top;
     position: relative;
     border: 1px solid #DDD;

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

@@ -1,8 +1,5 @@
 #channel-header {
-    padding: 3px 0;
-    height: 58px;
-    flex: 0 0 58px;
-    @include flex(0 0 50px);
+	@include flex(0 0 56px);
 }
 .row {
 	&.header {
@@ -45,9 +42,9 @@
 			text-overflow: ellipsis;
 			margin-top: 2px;
 			max-height: 45px;
-            .markdown-inline-img {
-                max-height: 45px
-            }
+			.markdown-inline-img {
+				max-height: 45px
+			}
 		}
 		&.popover {
 			white-space: normal;
@@ -97,7 +94,7 @@
 .sidebar--left, .sidebar--menu {
 	.team__header {
 		position: relative;
-		padding: 10px;
+		padding: 9px 10px;
 		@include legacy-pie-clearfix;
 		&:before {
 			@include single-transition(all, 0.05s, linear);
@@ -125,7 +122,7 @@
 		.navbar-right {
 			font-size: 0.85em;
 			position: absolute;
-			top: 11px;
+			top: 10px;
 			right: 22px;
 			z-index: 5;
 			.dropdown-toggle {
@@ -217,7 +214,7 @@
 	width:100%;
 	border-left: none;
 	font-size: 14px;
-	line-height: 50px;
+	line-height: 56px;
 	#member_popover {
 		margin-right: 5px;
 		width: 45px;
@@ -296,17 +293,19 @@
 
 .channel-header__links {
 	height: 32px;
-	vertical-align: top;
-	display: inline-block;
-	width: 15px;
-	margin: 9px 6px 3px 0;
-	a {
+	width: 32px;
+	@include border-radius(50px);
+	border: 1px solid #ccc;
+	margin-right: 10px;
+	> a {
+		@include border-radius(50px);
 		height: 100%;
 		display: block;
+		@include single-transition(all, 0.1s, ease-in);
 	}
 	svg {
 		vertical-align: top;
-		margin-top: 8px;
+	    margin: 7px 0 0 0px;
 		fill: inherit;
 	}
 }

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

@@ -332,18 +332,19 @@ body.ios {
 	}
 	.post-create-footer {
 		@include clearfix;
-		padding: 0;
+		padding: 3px 0 0 0;
+		font-size: 13px;
 		.has-error {
 			.control-label {
+				height: 0;
+				display: block;
 				font-weight: normal;
 				margin-bottom: 0;
 			}
 		}
 		.msg-typing {
 			min-height: 25px;
-			line-height: 25px;
 			display: block;
-			font-size: 13px;
 			@include opacity(0.7);
 		}
 	}
@@ -417,9 +418,6 @@ body.ios {
 			}
 		}
 	}
-	.post-create-footer {
-		padding: 0;
-	}
 	p {
 		margin: 0 0 1em;
 		line-height: 1.6em;
@@ -545,13 +543,14 @@ body.ios {
 		}
 		&.post-info {
 			.post-profile-time {
-				color: #a8adb7;
 				vertical-align: top;
+				width: 150px;
 				max-width: 220px;
 				overflow: hidden;
 				display: block;
 				white-space: nowrap;
 				text-overflow: ellipsis;
+				margin: 0 0 0 50px;
 			}
 		}
 		.post-header-col {
@@ -577,7 +576,7 @@ body.ios {
 			}
 		}
 		.post-profile-time {
-			color: #a8adb7;
+			@include opacity(0.5);
 		}
 	}
 	.post-comment {

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

@@ -1,4 +1,7 @@
 .post-right__container {
+	@include display-flex;
+	@include flex-direction(column);
+	height: 100%;
 
 	.post-right-root-message {
 		padding: 1em 1em 0;
@@ -19,6 +22,15 @@
 				margin: 1em 0 0 0;
 			}
 		}
+		.post-header {
+			.post-profile-time {
+				width: 200px;
+				display: inline-block;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+		}
 	}
 
 	.post-create__container {
@@ -44,7 +56,7 @@
 		}
 		.post-create-footer {
 			width: 100%;
-			padding-top: 5px;
+			padding: 5px 0 10px;
 		}
 		.post-right-comments-upload-in-progress {
 			padding: 6px 0;
@@ -103,8 +115,9 @@
 
 .post-right__scroll {
 	position: relative;
-	overflow: scroll;
+	overflow: auto;
 	-webkit-overflow-scrolling: touch;
+	@include flex(1 1 auto);
 }
 
 .post-right-comment-time {

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

@@ -275,6 +275,11 @@
     }
 }
 @media screen and (max-width: 768px) {
+    .textarea-wrapper {
+        .textbox-preview-link {
+            display: none;
+        }
+    }
     .form-control {
         &.min-height {
             min-height: 100px;
@@ -503,17 +508,22 @@
     .post-create__container {
         .post-right__container & {
             padding: 0 1em;
+            .msg-typing {
+                display: none;
+            }
         }
         form {
-            padding: 0;
+            padding: 0.5em 0;
         }
         .post-create-footer {
+            padding: 0 1em;
             .msg-typing {
-                margin-left: 45px;
-                width: 55%;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                overflow: hidden;
+                display: none;
+            }
+            .has-error {
+                .control-label {
+                    height: auto;
+                }
             }
         }
         .post-create-body {
@@ -542,8 +552,8 @@
         }
     }
     .preview-container {
-        padding: 0px 10px;
-        margin-top: 20px;
+        padding: 0px;
+        margin-top: 5px;
         .preview-div {
             margin-top: 0;
         }
@@ -616,7 +626,7 @@
     }
     .search-bar__container {
         padding: 0;
-        height: 45px;
+        @include flex(0 0 44px);
         background: $primary-color;
         color: #fff;
         &.focused {
@@ -745,6 +755,12 @@
         .sidebar--right__close {
             display: none;
         }
+        .sidebar-right__body {
+            height: calc(100% - 44px);
+        }
+    }
+    .search-items-container {
+        height: calc(100% - 44px);
     }
     .inner__wrap {
         &.move--right {

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

@@ -1,8 +1,9 @@
 #channel-header .search-bar__container {
-    padding: 8px 8px 8px 0;
+    padding: 0 8px 0 0;
 }
 .search-bar__container {
-	padding: 12px 8px 12px 0;
+	padding: 12px 8px 0 0;
+    @include flex(0 0 56px);
 }
 .search__clear {
 	display: none;
@@ -71,8 +72,10 @@
 
 .search-items-container {
 	position: relative;
-	overflow: scroll;
+	overflow: auto;
 	-webkit-overflow-scrolling: touch;
+	@include flex(1 1 auto);
+	height: calc(100% - 56px);
 }
 
 .search-results-header {
@@ -92,9 +95,11 @@
 	padding: 10px 1em;
 	margin: 0;
 	cursor: pointer;
+
 	&:first-child {
 		border: none;
 	}
+
 	.search-channel__name {
 		font-weight: 600;
 		margin: 0 0 10px 0;

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

@@ -47,7 +47,7 @@
     .nav-pills__container {
         height: 100%;
         position: relative;
-        overflow: scroll;
+        overflow: auto;
         -webkit-overflow-scrolling: touch;
     }
 

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

@@ -57,8 +57,11 @@
                 color: inherit;
                 line-height: 40px;
                 padding: 0 15px;
-                .glyphicon {
+                .fa ,.glyphicon {
                     width: 25px;
+                    text-align: center;
+                    left: -5px;
+                    position: relative;
                 }
             }
         }

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

@@ -3,24 +3,38 @@
     width: 400px;
     height: 100%;
     right: 0px;
-    padding: 0 0 2em 0;
+    padding: 0;
     background: #fff;
     @include single-transition(transform, 0.5s, ease);
     right: -320px;
+
     &.move--left {
         right: 0;
     }
+
+    .sidebar--right__content {
+        height: 100%;
+        @include display-flex;
+        @include flex-direction(column);
+    }
+
     .sidebar--right__back {
-        color: #666;
-        width: 20px;
+        color: inherit;
+        @include opacity(0.8);
+        width: 30px;
         text-align: center;
-        margin: 0 0 0 -6px;
-        font-size: 12px;
+        margin: 0 0 0 -14px;
+        font-size: 13px;
         display: inline-block;
     }
     .sidebar-right__body {
+        @include flex(1 1 auto);
         border-left: $border-gray;
         border-top: $border-gray;
+        @include display-flex;
+        @include flex-direction(column);
+        height: calc(100% - 56px);
+        @include border-radius(2px 0 0 0);
     }
     .post {
         .post-header {
@@ -75,7 +89,7 @@
         height: 44px;
         padding: 0 1em;
         line-height: 44px;
-        background: #F5F5F5;
+        @include flex(0 0 44px);
         border-bottom: $border-gray;
     }
     .sidebar--right__subheader {