Merge pull request #1406 from asaadmahmoodspin/ui-improvements

UI Improvements for centre channel due to preview

web/react/components/textbox.jsx

@@ -243,7 +243,6 @@ export default class Textbox extends React.Component {
 
         const lht = parseInt($(e).css('lineHeight'), 10);
         const lines = e.scrollHeight / lht;
-        const previewLinkHeightMod = 20;
         let mod = 15;
 
         if (lines < 2.5 || this.props.messageText === '') {
@@ -252,17 +251,17 @@ export default class Textbox extends React.Component {
 
         if (e.scrollHeight - mod < 167) {
             $(e).css({height: 'auto', 'overflow-y': 'hidden'}).height(e.scrollHeight - mod);
-            $(w).css({height: 'auto'}).height(e.scrollHeight + 2 + previewLinkHeightMod);
+            $(w).css({height: 'auto'}).height(e.scrollHeight + 2);
             $(w).closest('.post-body__cell').removeClass('scroll');
             if (this.state.preview) {
                 $(ReactDOM.findDOMNode(this.refs.preview)).css({height: 'auto', 'overflow-y': 'auto'}).height(e.scrollHeight - mod);
             }
         } else {
             $(e).css({height: 'auto', 'overflow-y': 'scroll'}).height(167 - mod);
-            $(w).css({height: 'auto'}).height(167 + previewLinkHeightMod);
+            $(w).css({height: 'auto'}).height(163);
             $(w).closest('.post-body__cell').addClass('scroll');
             if (this.state.preview) {
-                $(ReactDOM.findDOMNode(this.refs.preview)).css({height: 'auto', 'overflow-y': 'scroll'}).height(167 - mod);
+                $(ReactDOM.findDOMNode(this.refs.preview)).css({height: 'auto', 'overflow-y': 'scroll'}).height(163);
             }
         }
 

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

@@ -1,5 +1,6 @@
 .preview-container {
   position: relative;
+  margin-top: 10px;
   width: 100%;
   max-height: 110px;
   height: 110px;

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

@@ -96,9 +96,9 @@
 }
 
 .badge-notify {
-	background:red;
+	background: red;
 	position: absolute;
-	right: -5px;
+	left: 4px;
-	top: -5px;
+	top: 3px;
 	z-index: 100;
 }

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

@@ -46,21 +46,22 @@ body.ios {
 
 .textarea-wrapper {
 	position:relative;
-	min-height:57px;
+	min-height: 36px;
-    .textbox-preview-area {
+	.textbox-preview-area {
-        position: absolute;
+		position: absolute;
-        z-index: 2;
+		z-index: 2;
-        top: 0;
+		top: 0;
-        left: 0;
+		left: 0;
-        box-shadow: none;
+		box-shadow: none;
-    }
+	}
-    .textbox-preview-link {
+	.textbox-preview-link {
-        position: absolute;
+		position: absolute;
-        z-index: 3;
+		z-index: 3;
-        bottom: 0;
+		bottom: -23px;
-        right: 10px;
+		right: 0;
-        cursor: pointer;
+		font-size: 13px;
-    }
+		cursor: pointer;
+	}
 }
 
 .date-separator, .new-separator {
@@ -338,9 +339,9 @@ body.ios {
 			}
 		}
 		.msg-typing {
-			min-height: 20px;
+			min-height: 25px;
-			line-height: 18px;
+			line-height: 25px;
-			display: inline-block;
+			display: block;
 			font-size: 13px;
 			@include opacity(0.7);
 		}

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

@@ -13,6 +13,7 @@
 		&.post--root {
 			padding: 1em 1em 0;
 			margin: 0 0 1em;
+			width: 100%;
 			hr {
 				border-color: #DDD;
 				margin: 1em 0 0 0;
@@ -21,9 +22,10 @@
 	}
 
 	.post-create__container {
+		width: 100%;
 		margin-top: 10px;
 		.textarea-wrapper {
-			min-height: 120px;
+			min-height: 100px;
 		}
 		.custom-textarea {
 			min-height: 100px;
@@ -31,10 +33,18 @@
 		.msg-typing {
 			@include opacity(0.7);
 			float: left;
-			padding-top: 17px;
+			margin-top: 3px;
+			font-size: 13px;
+			line-height: 20px;
+			min-width: 1px;
+			display: block;
+			height: 20px;
+			max-width: 200px;
+			@include clearfix;
 		}
 		.post-create-footer {
-			padding-top: 10px;
+			width: 100%;
+			padding-top: 5px;
 		}
 		.post-right-comments-upload-in-progress {
 			padding: 6px 0;

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

@@ -507,8 +507,16 @@
         form {
             padding: 0;
         }
+        .post-create-footer {
+            .msg-typing {
+                margin-left: 45px;
+                width: 55%;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
+        }
         .post-create-body {
-            padding-bottom: 10px;
             display: table;
             width: 100%;
             .post-body__cell {
@@ -532,11 +540,10 @@
                 display: table-cell;
             }
         }
-        .post-create-footer .msg-typing {
-            display: none;
-        }
     }
     .preview-container {
+        padding: 0px 10px;
+        margin-top: 20px;
         .preview-div {
             margin-top: 0;
         }

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

@@ -64,6 +64,10 @@
             }
         }
     }
+    .profile-img {
+        width: 128px;
+        height: 128px;
+    }
     .settings-table {
         display: table;
         table-layout: fixed;