Merge pull request #1659 from asaadmahmoodspin/ui-improvements

Multiple UI Improvements

web/react/components/admin_console/user_item.jsx

@@ -227,7 +227,6 @@ export default class UserItem extends React.Component {
                             href='#'
                             className='dropdown-toggle theme'
                             type='button'
-                            id='channel_header_dropdown'
                             data-toggle='dropdown'
                             aria-expanded='true'
                         >
@@ -237,7 +236,6 @@ export default class UserItem extends React.Component {
                         <ul
                             className='dropdown-menu member-menu'
                             role='menu'
-                            aria-labelledby='channel_header_dropdown'
                         >
                             {makeAdmin}
                             {makeMember}

web/react/components/create_comment.jsx

@@ -362,11 +362,11 @@ export default class CreateComment extends React.Component {
                             onClick={this.handleSubmit}
                         />
                         {uploadsInProgressText}
+                        {preview}
                         {postError}
                         {serverError}
                     </div>
                 </div>
-                {preview}
             </form>
         );
     }

web/react/components/create_post.jsx

@@ -470,13 +470,13 @@ export default class CreatePost extends React.Component {
                         {tutorialTip}
                     </div>
                     <div className={postFooterClassName}>
-                        {postError}
-                        {serverError}
-                        {preview}
                         <MsgTyping
                             channelId={this.state.channelId}
                             parentId=''
                         />
+                        {preview}
+                        {postError}
+                        {serverError}
                     </div>
                 </div>
             </form>

web/react/components/member_list_item.jsx

@@ -78,17 +78,15 @@ export default class MemberListItem extends React.Component {
                                 href='#'
                                 className='dropdown-toggle theme'
                                 type='button'
-                                id='channel_header_dropdown'
                                 data-toggle='dropdown'
                                 aria-expanded='true'
                             >
+                                <span className='fa fa-pencil'></span>
                                 <span className='text-capitalize'>{member.roles || 'Member'} </span>
-                                <span className='caret'></span>
                             </a>
                             <ul
                                 className='dropdown-menu member-menu'
                                 role='menu'
-                                aria-labelledby='channel_header_dropdown'
                             >
                                 {makeAdminOption}
                                 {handleRemoveOption}
@@ -96,7 +94,7 @@ export default class MemberListItem extends React.Component {
                         </div>
                     );
         } else {
-            invite = <div className='member-role text-capitalize'>{member.roles || 'Member'}<span className='caret hidden'></span></div>;
+            invite = <div className='member-role text-capitalize'><span className='fa fa-pencil hidden'></span>{member.roles || 'Member'}</div>;
         }
 
         return (

web/react/components/member_list_team_item.jsx

@@ -181,17 +181,15 @@ export default class MemberListTeamItem extends React.Component {
                             href='#'
                             className='dropdown-toggle theme'
                             type='button'
-                            id='channel_header_dropdown'
                             data-toggle='dropdown'
                             aria-expanded='true'
                         >
+                            <span className='fa fa-pencil'></span>
                             <span>{currentRoles} </span>
-                            <span className='caret'></span>
                         </a>
                         <ul
                             className='dropdown-menu member-menu'
                             role='menu'
-                            aria-labelledby='channel_header_dropdown'
                         >
                             {makeAdmin}
                             {makeMember}

web/react/components/navbar.jsx

@@ -272,7 +272,6 @@ export default class Navbar extends React.Component {
                             href='#'
                             className='dropdown-toggle theme'
                             type='button'
-                            id='channel_header_dropdown'
                             data-toggle='dropdown'
                             aria-expanded='true'
                         >
@@ -282,7 +281,6 @@ export default class Navbar extends React.Component {
                         <ul
                             className='dropdown-menu'
                             role='menu'
-                            aria-labelledby='channel_header_dropdown'
                         >
                             {viewInfoOption}
                             {addMembersOption}

web/react/components/search_results_item.jsx

@@ -19,6 +19,11 @@ export default class SearchResultsItem extends React.Component {
         e.preventDefault();
 
         EventHelpers.emitPostFocusEvent(this.props.post.id);
+
+        if ($(window).width() < 768) {
+            $('.sidebar--right').removeClass('move--left');
+            $('.inner__wrap').removeClass('move--left');
+        }
     }
 
     render() {
@@ -65,7 +70,7 @@ export default class SearchResultsItem extends React.Component {
                                     className='search-item__jump'
                                     onClick={this.handleClick}
                                 >
-                                    {<i className='fa fa-mail-reply'></i>}
+                                    {'Jump'}
                                 </a>
                             </li>
                         </ul>

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

@@ -19,6 +19,7 @@
         font-weight: 600;
         text-decoration: none;
         padding: 0 10px;
+        font-family: 'Open Sans', sans-serif;
         &:hover {
             color: #FFF;
             text-decoration: none;

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

@@ -2,7 +2,7 @@
 
 .preview-container {
   position: relative;
-  margin-top: 25px;
+  margin: 1px 0 10px;
   width: 100%;
   max-height: 100px;
   height: 100px;

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

@@ -186,6 +186,7 @@
 						padding: 8px 15px 8px 8px;
 						width: 80px;
 						vertical-align: middle;
+						position: relative;
 						&.lg {
 							width: 110px;
 						}

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

@@ -319,13 +319,11 @@ body.ios {
 		@include clearfix;
 		padding: 3px 0 0 0;
 		font-size: 13px;
-		.has-error {
+		.control-label {
-			.control-label {
+			font-weight: normal;
-				height: 0;
+			margin-bottom: 0;
-				display: block;
+			top: -5px;
-				font-weight: normal;
+			position: relative;
-				margin-bottom: 0;
-			}
 		}
 		.msg-typing {
 			min-height: 25px;

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

@@ -44,6 +44,9 @@
 		.textarea-wrapper {
 			min-height: 100px;
 		}
+		.btn {
+			margin-bottom: 10px;
+		}
 		.custom-textarea {
 			min-height: 100px;
 		}
@@ -123,6 +126,11 @@
 	overflow: auto;
 	-webkit-overflow-scrolling: touch;
 	@include flex(1 1 auto);
+
+	.preview-container {
+		margin-top: 5px;
+	}
+
 }
 
 .post-right-comment-time {

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

@@ -377,10 +377,8 @@
             .msg-typing {
                 display: none;
             }
-            .has-error {
+            .control-label {
-                .control-label {
+                top: 0;
-                    height: auto;
-                }
             }
         }
         .post-create-body {
@@ -409,8 +407,7 @@
         }
     }
     .preview-container {
-        padding: 0px;
+        margin: 5px 0 0;
-        margin-top: 5px;
         .preview-div {
             margin-top: 0;
         }

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

@@ -111,7 +111,14 @@
 .search-item__jump {
 	position: absolute;
 	right: 0;
-	top: 0;
+	top: 0px;
+	font-size: 13px;
+	@include opacity(0.8);
+
+	&:hover {
+		@include opacity(1);
+	}
+
 }
 
 .search-item-time {

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

@@ -135,9 +135,10 @@
                     .input-group-addon {
                         padding: 4px 5px;
                         width: 40px;
-                        img {
+                    }
-                            border: 1px solid rgba(black, 0.15);
+                    img {
-                        }
+                        border: 1px solid rgba(black, 0.15);
+                        width: 29px;
                     }
                 }
                 .premade-themes {
@@ -325,12 +326,22 @@
         overflow: hidden;
         text-overflow: ellipsis;
     }
+}
 
-    .member-role, .member-drop {
+.member-role, .member-drop {
-        position:absolute;
+    position:absolute;
-        right: 15px;
+    right: 15px;
-        top: 8px;
+    top: 8px;
+
+    .fa {
+        margin-right: 5px;
     }
+
+    .member-menu {
+        top: -50%;
+        right: 110%;
+    }
+
 }
 
 .member-invite {