Merge pull request #329 from asaadmahmoodspin/ui-changes

UI Improvements

12 files changed, 102 insertions, 37 deletions

diff --git a/web/react/components/channel_header.jsx b/web/react/components/channel_header.jsx
index b6182cfa5..a79d3547f 100644
--- a/web/react/components/channel_header.jsx
+++ b/web/react/components/channel_header.jsx
@@ -67,7 +67,7 @@ var PopoverListMembers = React.createClass({
 
         return (
             <div id='member_popover' data-toggle='popover' data-content={popoverHtml} data-original-title='Members' >
-                <div id='member_tooltip' data-toggle='tooltip' title='View Channel Members'>
+                <div id='member_tooltip' data-placement='left' data-toggle='tooltip' title='View Channel Members'>
                     {count} <span className='glyphicon glyphicon-user' aria-hidden='true'></span>
                 </div>
             </div>
diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx
index a0f68df98..5f1bb6d0e 100644
--- a/web/react/components/mention_list.jsx
+++ b/web/react/components/mention_list.jsx
@@ -20,6 +20,12 @@ module.exports = React.createClass({
         PostStore.addMentionDataChangeListener(this.onListenerChange);
         var self = this;
 
+        $('.post-right__scroll').scroll(function(){
+            if($('.mentions--top').length){
+                $('#reply_mention_tab .mentions--top').css({ bottom: $(window).height() - $('.post-right__scroll #reply_textbox').offset().top });
+            }
+        });
+
         $('body').on('keydown.mentionlist', '#' + this.props.id,
             function(e) {
                 if (!self.isEmpty() && self.state.mentionText !== '-1' && (e.which === 13 || e.which === 9)) {
diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx
index 3f59d5843..90a02e791 100644
--- a/web/react/components/post_list.jsx
+++ b/web/react/components/post_list.jsx
@@ -37,15 +37,23 @@ module.exports = React.createClass({
     componentDidMount: function() {
         var user = UserStore.getCurrentUser();
         if (user.props && user.props.theme) {
-            utils.changeCss('a.theme', 'color:'+user.props.theme+'; fill:'+user.props.theme+'!important;');
             utils.changeCss('div.theme', 'background-color:'+user.props.theme+';');
             utils.changeCss('.btn.btn-primary', 'background: ' + user.props.theme+';');
-            utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, -10)  +';');
             utils.changeCss('.modal .modal-header', 'background: ' + user.props.theme+';');
             utils.changeCss('.mention', 'background: ' + user.props.theme+';');
             utils.changeCss('.mention-link', 'color: ' + user.props.theme+';');
             utils.changeCss('@media(max-width: 768px){.search-bar__container', 'background: ' + user.props.theme+';}');
         }
+        if (user.props.theme != '#000000' && user.props.theme != '#585858') {
+            utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, -10)  +';');
+            utils.changeCss('a.theme', 'color:'+user.props.theme+'; fill:'+user.props.theme+'!important;');
+        } else if (user.props.theme == '#000000') {
+            utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, +50)  +';');
+            $('.team__header').addClass('theme--black');
+        } else if (user.props.theme == '#585858') {
+            utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, +10)  +';');
+            $('.team__header').addClass('theme--gray');
+        }
 
         PostStore.addChangeListener(this._onChange);
         ChannelStore.addChangeListener(this._onChange);
diff --git a/web/react/components/user_profile.jsx b/web/react/components/user_profile.jsx
index 65f025919..5c4d26a23 100644
--- a/web/react/components/user_profile.jsx
+++ b/web/react/components/user_profile.jsx
@@ -28,6 +28,7 @@ module.exports = React.createClass({
     componentDidMount: function() {
         UserStore.addChangeListener(this._onChange);
         $("#profile_" + this.uniqueId).popover({placement : 'right', container: 'body', trigger: 'hover', html: true, delay: { "show": 200, "hide": 100 }});
+        $('body').tooltip( {selector: '[data-toggle=tooltip]', trigger: 'hover click'} );
     },
     componentWillUnmount: function() {
         UserStore.removeChangeListener(this._onChange);
@@ -57,7 +58,7 @@ module.exports = React.createClass({
         if (!config.ShowEmail) {
             data_content += "<div class='text-nowrap'>Email not shared</div>";
         } else {
-            data_content += "<div><a href='mailto:" + this.state.profile.email + "' class='text-nowrap text-lowercase'>" + this.state.profile.email + "</a></div>";
+            data_content += "<div data-toggle='tooltip' title= '" + this.state.profile.email + "'><a href='mailto:" + this.state.profile.email + "' class='text-nowrap text-lowercase user-popover__email'>" + this.state.profile.email + "</a></div>";
         }
 
         return (
diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss
index 52659521d..78006ff18 100644
--- a/web/sass-files/sass/partials/_base.scss
+++ b/web/sass-files/sass/partials/_base.scss
@@ -49,6 +49,12 @@ div.theme {
   background-color: $primary-color;
 }
 
+.tooltip {
+  .tooltip-inner {
+    word-break: break-word;
+  }
+}
+
 .nopadding {
  padding: 0;
  margin: 0;
@@ -61,6 +67,10 @@ div.theme {
   }
 }
 
+.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
+  cursor: auto;
+}
+
 .form-group {
   &.form-group--small {
     margin-bottom: 10px;
diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss
index 22e2f44c5..65775f01e 100644
--- a/web/sass-files/sass/partials/_files.scss
+++ b/web/sass-files/sass/partials/_files.scss
@@ -4,7 +4,8 @@
   max-height: 110px;
   height: 110px;
   white-space: nowrap;
-  overflow: auto;
+  overflow-x: auto;
+  overflow-y: hidden;
   .preview-div {
     display: inline-block;
     width: 120px;
@@ -28,9 +29,9 @@
     }
   }
   .preview-img {
-      display: block;
-      height: auto;
-      max-width: 100%;
+    display: block;
+    height: auto;
+    max-width: 100%;
   }
   .remove-preview {
     position: absolute;
@@ -129,10 +130,10 @@
     background-color: #FFF;
     background-repeat: no-repeat;
     &.small {
-        background-position: center;
+      background-position: center;
     }
     &.normal {
-        background-position: top left;
+      background-position: top left;
     }
   }
   .post-image__thumbnail {
@@ -140,6 +141,8 @@
     vertical-align: top;
     width: 50%;
     height: 100%;
+    cursor: zoom-in;
+    cursor: -webkit-zoom-in;
   }
   .post-image__details {
     display: table-cell;
@@ -168,34 +171,34 @@
 }
 
 .file-details__container {
-    @include display-flex;
-    display: -ms-flexbox;
+  @include display-flex;
+  display: -ms-flexbox;
 
-    .file-details {
-        width: 320px;
-        height: 270px;
-        padding: 14px;
-        text-align: left;
-        vertical-align: top;
+  .file-details {
+    width: 320px;
+    height: 270px;
+    padding: 14px;
+    text-align: left;
+    vertical-align: top;
 
-        .file-details__name {
-            font-size: 16px;
-        }
-        .file-details__info {
-            color: grey;
-        }
+    .file-details__name {
+      font-size: 16px;
     }
-    .file-details__preview {
-        width: 320px;
-        height: 270px;
-        border-right: 1px solid #ddd;
-        vertical-align: center;
+    .file-details__info {
+      color: grey;
+    }
+  }
+  .file-details__preview {
+    width: 320px;
+    height: 270px;
+    border-right: 1px solid #ddd;
+    vertical-align: center;
 
         // helper to center the image icon in the preview window
         .file-details__preview-helper {
-            height: 100%;
-            display: inline-block;
-            vertical-align: middle;
+          height: 100%;
+          display: inline-block;
+          vertical-align: middle;
         }
+      }
     }
-}
diff --git a/web/sass-files/sass/partials/_headers.scss b/web/sass-files/sass/partials/_headers.scss
index fb37c43eb..da648a170 100644
--- a/web/sass-files/sass/partials/_headers.scss
+++ b/web/sass-files/sass/partials/_headers.scss
@@ -110,6 +110,20 @@
 				}
 			}
 		}
+		&.theme--black {
+			&:hover {
+				&:before {
+					background: rgba(white, 0.2);
+				}
+			}
+		}
+		&.theme--gray {
+			&:hover {
+				&:before {
+					background: rgba(white, 0.1);
+				}
+			}
+		}
 		a {
 			color: #fff;
 		}
diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss
index f359037c5..014f834ed 100644
--- a/web/sass-files/sass/partials/_modal.scss
+++ b/web/sass-files/sass/partials/_modal.scss
@@ -15,10 +15,13 @@
 	}
 	.remove__member {
 		float: right;
-		color: #E56565;
+		color: #999;
 		font-size: 20px;
 		line-height: 0;
 		padding: 6px;
+		&:hover {
+			color: #E56565;
+		}
 	}
 	.modal-dialog {
 		max-width: 95%;
@@ -151,10 +154,9 @@
 		height: 100%;
 		margin: 0 auto;
 		.image-wrapper {
-			background: #FFF;
 			position: relative;
 			max-width: 90%;
-			min-height: 50px;
+			min-height: 100px;
 			min-width: 320px;
 			@include border-radius(3px);
 			display: table;
@@ -182,6 +184,7 @@
 				z-index: 9999;
 			}
 			> a {
+				background: #FFF;
 				display: table-cell;
 				vertical-align: middle;
 			}
diff --git a/web/sass-files/sass/partials/_navbar.scss b/web/sass-files/sass/partials/_navbar.scss
index 905907d84..2e78a8728 100644
--- a/web/sass-files/sass/partials/_navbar.scss
+++ b/web/sass-files/sass/partials/_navbar.scss
@@ -19,6 +19,7 @@
 			}
 		}
 		.navbar-toggle {
+			width: 43px;
 			float: left;
 			border-color: transparent;
 			border-radius: 0;
diff --git a/web/sass-files/sass/partials/_popover.scss b/web/sass-files/sass/partials/_popover.scss
index fa1b44841..5008331b4 100644
--- a/web/sass-files/sass/partials/_popover.scss
+++ b/web/sass-files/sass/partials/_popover.scss
@@ -6,4 +6,11 @@
 .user-popover__image {
 	margin: 0 0 10px;
 	@include border-radius(128px);
+}
+
+.user-popover__email {
+	max-width: 200px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: block;
 }
\ No newline at end of file
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index e3f140413..47b2b6bd7 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/web/sass-files/sass/partials/_responsive.scss
@@ -229,6 +229,16 @@
     }
 }
 
+@media screen and (max-height: 640px) {
+    .signup-team__container {
+        padding: 30px 0;
+        margin-bottom: 30px;
+        font-size: 0.9em;
+        .signup-team__name {
+            font-size: 2em;
+        }
+    }
+}
 @media screen and (max-width: 768px) {
     .date-separator, .new-separator {
         &.hovered--after {
diff --git a/web/templates/channel.html b/web/templates/channel.html
index 6325069ee..da6fed97d 100644
--- a/web/templates/channel.html
+++ b/web/templates/channel.html
@@ -49,7 +49,9 @@
   <div id="activity_log_modal"></div>
   <div id="removed_from_channel_modal"></div>
 <script>
-window.setup_channel_page('{{ .Props.TeamDisplayName }}', '{{ .Props.TeamType }}', '{{ .Props.TeamId }}', '{{ .Props.ChannelName }}', '{{ .Props.ChannelId }}');
+  window.setup_channel_page('{{ .Props.TeamDisplayName }}', '{{ .Props.TeamType }}', '{{ .Props.TeamId }}', '{{ .Props.ChannelName }}', '{{ .Props.ChannelId }}');
+  $('body').tooltip( {selector: '[data-toggle=tooltip]'} );
+  $('.modal-body').perfectScrollbar();
 </script>
 </body>
 </html>