Merge pull request #1468 from asaadmahmoodspin/ui-improvements

Multiple UI Improvements

7 files changed, 89 insertions, 8 deletions

diff --git a/web/react/components/post_info.jsx b/web/react/components/post_info.jsx
index 5446fca7a..322834f07 100644
--- a/web/react/components/post_info.jsx
+++ b/web/react/components/post_info.jsx
@@ -74,6 +74,23 @@ export default class PostInfo extends React.Component {
             );
         }
 
+        if (this.props.allowReply === 'true') {
+            dropdownContents.push(
+                <li
+                    key='replyLink'
+                    role='presentation'
+                >
+                    <a
+                        className='reply-link visible-xs theme'
+                        href='#'
+                        onClick={this.props.handleCommentClick}
+                    >
+                        {'Reply'}
+                    </a>
+                </li>
+            );
+        }
+
         if (dropdownContents.length === 0) {
             return '';
         }
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx
index bf40d8c65..cd347f7d6 100644
--- a/web/react/utils/utils.jsx
+++ b/web/react/utils/utils.jsx
@@ -561,8 +561,6 @@ export function applyTheme(theme) {
     if (theme.sidebarTextActiveColor) {
         changeCss('.sidebar--left .nav-pills__container li.active a, .sidebar--left .nav-pills__container li.active a:hover, .sidebar--left .nav-pills__container li.active a:focus, .settings-modal .nav-pills>li.active a, .settings-modal .nav-pills>li.active a:hover, .settings-modal .nav-pills>li.active a:active', 'color:' + theme.sidebarTextActiveColor, 2);
         changeCss('.sidebar--left .nav li.active a, .sidebar--left .nav li.active a:hover, .sidebar--left .nav li.active a:focus', 'background:' + changeOpacity(theme.sidebarTextActiveColor, 0.1), 1);
-        changeCss('.search-help-popover .search-autocomplete__item:hover', 'background:' + changeOpacity(theme.sidebarTextActiveColor, 0.05), 1);
-        changeCss('.search-help-popover .search-autocomplete__item.selected', 'background:' + changeOpacity(theme.sidebarTextActiveColor, 0.15), 1);
     }
 
     if (theme.sidebarHeaderBg) {
@@ -656,8 +654,10 @@ export function applyTheme(theme) {
         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);
-        changeCss('.post.current--user:hover .post__body ', 'background: none;', 1);
+        changeCss('@media(min-width: 960px){.post.current--user:hover .post__body ', 'background: none;', 1);
         changeCss('.sidebar--right', 'color:' + theme.centerChannelColor, 2);
+        changeCss('.search-help-popover .search-autocomplete__item:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.05), 1);
+        changeCss('.search-help-popover .search-autocomplete__item.selected', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1);
     }
 
     if (theme.newMessageSeparator) {
diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss
index c5b1a7425..2fc63443e 100644
--- a/web/sass-files/sass/partials/_base.scss
+++ b/web/sass-files/sass/partials/_base.scss
@@ -122,6 +122,10 @@ a:focus, a:hover {
   }
 }
 
+select {
+  -webkit-appearance: none;
+}
+
 .form-control {
   @include border-radius(2px);
   &:focus {
diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss
index 743a76693..99e985b0c 100644
--- a/web/sass-files/sass/partials/_post.scss
+++ b/web/sass-files/sass/partials/_post.scss
@@ -382,9 +382,11 @@ body.ios {
 	}
 
 	span {
+
 		p:last-child {
 			margin-bottom: 0.5em;
 		}
+
 	}
 
 	&.post--root {
@@ -508,6 +510,7 @@ body.ios {
 		max-width: 1000px;
 		display: table;
 		width: 100%;
+		table-layout: fixed;
 
 		> div {
 			display: table-cell;
@@ -532,7 +535,7 @@ body.ios {
 			position: absolute;
 			right: 0;
 			top: 30px;
-			width: 70px;
+			width: 60px;
 		}
 
 	}
@@ -584,12 +587,15 @@ body.ios {
 		word-wrap: break-word;
 		padding: 0.2em 0.5em 0em;
 		@include legacy-pie-clearfix;
-		width: calc(100% - 80px);
+		width: calc(100% - 70px);
 	}
 
 	.post__link {
 		margin: 2px 0 5px;
 		font-size: 13px;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		white-space: nowrap;
 	}
 
 	.post__time {
@@ -612,7 +618,6 @@ body.ios {
 	}
 
 	.comment-icon__container {
-		margin-right: 7px;
 		fill: $primary-color;
 		display: inline-block;
 		visibility: hidden;
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index 368027cbf..00fa7d817 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/web/sass-files/sass/partials/_responsive.scss
@@ -57,10 +57,55 @@
 
     .post {
 
-        .dropdown, .comment-icon__container {
+        &.same--root {
+
+            &.same--user {
+
+                .post__time {
+                    display: none;
+                }
+
+            }
+
+        }
+
+        .post-list__content & {
+
+            &:hover {
+                background: transparent;
+
+                .comment-icon__container {
+                    visibility: hidden;
+
+                    &.icon--show {
+                        visibility: visible;
+                    }
+
+                }
+
+            }
+
+        }
+
+        .dropdown {
             visibility: visible;
         }
 
+        .post__dropdown {
+            line-height: 9px;
+            text-decoration: none;
+            width: 20px;
+            display: inline-block;
+            text-align: center;
+            height: 20px;
+
+            &:after {
+                font-size: 20px;
+                content: '...'
+            }
+
+        }
+
         .post__img {
             width: 40px;
 
@@ -232,7 +277,8 @@
                 }
                 .modal-header {
                     display: block;
-                    position: fixed;
+                    position: absolute;
+                    top: 0;
                     width: 100%;
                     z-index: 5;
                 }
@@ -358,6 +404,7 @@
     #navbar {
         .navbar-default {
             .navbar-header {
+                float: none;
                 margin: 0 -15px;
                 .dropdown__icon {
                     background: url("../images/dropdown-icon.png");
diff --git a/web/sass-files/sass/partials/_tooltips.scss b/web/sass-files/sass/partials/_tooltips.scss
new file mode 100644
index 000000000..e018cf13c
--- /dev/null
+++ b/web/sass-files/sass/partials/_tooltips.scss
@@ -0,0 +1,5 @@
+#recentMentionsTooltip {
+	.tooltip-arrow {
+		margin-left: 10px;
+	}
+}
\ No newline at end of file
diff --git a/web/sass-files/sass/styles.scss b/web/sass-files/sass/styles.scss
index 5c83d5c5b..01f654eec 100644
--- a/web/sass-files/sass/styles.scss
+++ b/web/sass-files/sass/styles.scss
@@ -41,6 +41,9 @@
 @import "partials/tutorial";
 @import "partials/statistics";
 
+// Elements
+@import "partials/tooltips";
+
 // Responsive Css
 @import "partials/responsive";