Merge pull request #1617 from asaadmahmoodspin/ui-improvements

Multiple UI Improvements

web/react/components/access_history_modal.jsx

@@ -32,7 +32,7 @@ export default class AccessHistoryModal extends React.Component {
     onShow() {
         AsyncClient.getAudits();
 
-        $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 300);
+        $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 50);
         if ($(window).width() > 768) {
             $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
         }

web/react/components/activity_log_modal.jsx

@@ -51,7 +51,7 @@ export default class ActivityLogModal extends React.Component {
     onShow() {
         AsyncClient.getSessions();
 
-        $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 300);
+        $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 50);
         if ($(window).width() > 768) {
             $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
         }

web/react/components/center_panel.jsx

@@ -71,7 +71,8 @@ export default class CenterPanel extends React.Component {
                         href=''
                         onClick={handleClick}
                     >
-                        {'You are viewing the Archives. Click here to jump to recent messages.'}
+                        {'You are viewing the Archives. Click here to jump to recent messages. '}
+                        {<i className='fa fa-arrow-down'></i>}
                     </a>
                 </div>
             );

web/react/components/invite_member_modal.jsx

@@ -143,7 +143,7 @@ export default class InviteMemberModal extends React.Component {
 
     componentDidUpdate(prevProps, prevState) {
         if (!prevState.show && this.state.show) {
-            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 300);
+            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 50);
             if ($(window).width() > 768) {
                 $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
             }

web/react/components/more_direct_channels.jsx

@@ -166,7 +166,7 @@ export default class MoreDirectChannels extends React.Component {
 
     componentDidUpdate(prevProps) {
         if (!prevProps.show && this.props.show) {
-            $(ReactDOM.findDOMNode(this.refs.userList)).css('max-height', $(window).height() - 300);
+            $(ReactDOM.findDOMNode(this.refs.userList)).css('max-height', $(window).height() - 50);
             if ($(window).width() > 768) {
                 $(ReactDOM.findDOMNode(this.refs.userList)).perfectScrollbar();
             }

web/react/components/search_results_item.jsx

@@ -65,7 +65,7 @@ export default class SearchResultsItem extends React.Component {
                                     className='search-item__jump'
                                     onClick={this.handleClick}
                                 >
-                                    {'[Jump]'}
+                                    {<i className='fa fa-mail-reply'></i>}
                                 </a>
                             </li>
                         </ul>

web/react/components/team_members_modal.jsx

@@ -26,7 +26,7 @@ export default class TeamMembersModal extends React.Component {
     }
 
     onShow() {
-        $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 300);
+        $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 50);
         if ($(window).width() > 768) {
             $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
         }

web/react/components/user_settings/user_settings_modal.jsx

@@ -47,7 +47,7 @@ export default class UserSettingsModal extends React.Component {
     }
 
     handleShow() {
-        $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 300);
+        $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 50);
         if ($(window).width() > 768) {
             $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
         }

web/react/utils/utils.jsx

@@ -681,7 +681,11 @@ export function applyTheme(theme) {
     }
 
     if (theme.mentionHighlightBg) {
-        changeCss('.mention-highlight, .search-highlight', 'background:' + theme.mentionHighlightBg, 1);
+        changeCss('.mention-highlight, .search-highlight, #archive-link-home', 'background:' + theme.mentionHighlightBg, 1);
+    }
+
+    if (theme.mentionHighlightBg) {
+        changeCss('.post.post--highlight, #archive-link-home', 'background:' + changeOpacity(theme.mentionHighlightBg, 0.5), 1);
     }
 
     if (theme.mentionHighlightLink) {

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

@@ -123,7 +123,7 @@ a:focus, a:hover {
 }
 
 select {
-  -webkit-appearance: none;
+  -moz-appearance:none;
 }
 
 .form-control {

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

@@ -18,30 +18,29 @@
 	margin-left: 220px;
 	position: relative;
 	background: #fff;
-    @include display-flex;
+	@include display-flex;
-    @include flex-direction(column);
+	@include flex-direction(column);
 	.channel__wrap & {
 		padding-top: 0;
 	}
 }
 #post-create {
-    @include flex(0 0 auto);
+	@include flex(0 0 auto);
 	background: #fff;
 	width: 100%;
 	z-index: 3;
 }
 
 #archive-link-home {
-    @include flex(0 0 auto);
+	@include flex(0 0 auto);
-	background: #fff;
-	width: 100%;
-	min-height: 50px;
-	z-index: 3;
-	background-color: beige;
-	text-align: center;
-	vertical-align: middle;
-	padding-top: 10px;
 	cursor: pointer;
+	padding: 10px;
+	font-size: 13px;
+
+	a {
+		color: inherit;
+	}
+
 }
 
 .post-list {

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

@@ -599,6 +599,10 @@ body.ios {
 		@include legacy-pie-clearfix;
 		width: calc(100% - 70px);
 
+		img {
+            max-height: 400px;
+        }
+
 		ul {
 			padding: 5px 0 0 20px;
 		}

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

@@ -296,6 +296,9 @@
                             }
                         }
                     }
+                    .section-min:hover {
+                        background: none;
+                    }
                     .no-padding--left {
                         padding-left: 15px;
                     }

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

@@ -1,9 +1,9 @@
 #channel-header .search-bar__container {
-    padding: 0 8px 0 3px;
+	padding: 0 8px 0 3px;
 }
 .search-bar__container {
 	padding: 12px 8px 0 0;
-    @include flex(0 0 56px);
+	@include flex(0 0 56px);
 }
 .search__clear {
 	display: none;
@@ -107,7 +107,9 @@
 }
 
 .search-item__jump {
-	margin-left: 10px;
+	position: absolute;
+	right: 0;
+	top: 0;
 }
 
 .search-item-time {

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

@@ -12,6 +12,14 @@
         right: 0;
     }
 
+    .post-body {
+
+        img {
+            max-height: 200px;
+        }
+
+    }
+
     .sidebar--right__content {
         height: 100%;
         @include display-flex;

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

@@ -47,17 +47,19 @@
 }
 
 .emoticon-suggestion {
+    @include clearfix;
     width: 100%;
-    height: 36px;
+    height: 30px;
     cursor: pointer;
     font-size: 13px;
-    line-height: 36px;
+    line-height: 30px;
 }
 
 .emoticon-suggestion__image {
-    width: 32px;
+    width: 20px;
-    height: 32px;
+    height: 20px;
-    margin-right: 6px;
+    margin: 6px 6px 0 5px;
-    padding: 2px;
+    padding: 0;
     text-align: center;
+    vertical-align: top;
 }

web/templates/channel.html

@@ -30,7 +30,7 @@ window.setup_channel_page({{ .Props }}, {{ .Team }}, {{ .Channel }}, {{ .User }}
   if($(window).height() > 1200){
     modals.css('max-height', 1000);
   } else {
-    modals.css('max-height', $(window).height() - 200);
+    modals.css('max-height', $(window).height() - 50);
   }
   modals.perfectScrollbar();
 </script>