From 3e4e783d04d5a640369a6260977553e4df9bcf88 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilhermegazzo@gmail.com>
Date: Fri, 7 Jul 2017 15:28:32 -0300
Subject: [PATCH] flex-tab now is side by side with message list

---
 .../rocketchat-theme/client/imports/base.css  |  35 ++--
 .../rocketchat-ui/client/views/app/room.html  | 176 +++++++++---------
 2 files changed, 109 insertions(+), 102 deletions(-)

diff --git a/packages/rocketchat-theme/client/imports/base.css b/packages/rocketchat-theme/client/imports/base.css
index 13977625000..435a051f94d 100644
--- a/packages/rocketchat-theme/client/imports/base.css
+++ b/packages/rocketchat-theme/client/imports/base.css
@@ -1561,7 +1561,6 @@ label.required::after {
 .fixed-title {
 	display: flex;
 	align-items: center;
-	position: absolute;
 	flex-flow: row nowrap;
 	padding: 0 10px 0 20px;
 	border-width: 0 0 1px;
@@ -2131,6 +2130,16 @@ label.required::after {
 	left: 0;
 	z-index: 1;
 
+	&-wrapper {
+		height: 100%;
+		display: flex;
+	}
+
+	&-main {
+		width: 1px;
+		flex: 1 1 1px;
+	}
+
 	& .room-topic {
 		font-size: 14px;
 		opacity: 0.4;
@@ -2155,7 +2164,6 @@ label.required::after {
 	}
 
 	& .footer {
-		position: absolute;
 		padding: 8px 20px 0;
 		border-width: 1px 0 0;
 		z-index: 100;
@@ -2314,11 +2322,9 @@ label.required::after {
 			display: flex;
 			align-items: center;
 			overflow: hidden;
-			position: absolute;
-			right: 20px;
 			opacity: 0.5;
 			white-space: nowrap;
-			transition: opacity 0.2 linear;
+			transition: opacity 0.2s linear;
 
 			& > * {
 				margin: 0 3px;
@@ -2518,7 +2524,6 @@ label.required::after {
 
 .messages-box {
 	position: relative;
-	margin: 60px 20px 0 0;
 	overflow: hidden;
 	width: 100%;
 	height: calc(100% - 130px);
@@ -2640,7 +2645,7 @@ label.required::after {
 			font-size: 12px;
 			font-weight: 600;
 			text-align: center;
-			z-index: 10;
+			z-index: 1;
 			padding: 0 10px;
 			min-width: 140px;
 		}
@@ -3024,6 +3029,7 @@ body:not(.is-cordova) {
 
 .flex-tab-container {
 	display: flex;
+	flex: 0 0 41px;
 	z-index: 2;
 	border-width: 0 0 0 1px;
 
@@ -4789,6 +4795,7 @@ a + br.only-after-a {
 		right: 40px;
 		border-width: 0 0 0 1px;
 		height: 100%;
+		z-index: 100;
 	}
 }
 
@@ -4887,17 +4894,13 @@ a + br.only-after-a {
 }
 
 @media (width <= 440px) {
-	.flex-tab-container.opened {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		top: 0;
+	.flex-tab-container.opened .flex-tab {
 		left: 0;
+		width: auto;
+	}
 
-		& .flex-tab {
-			position: relative;
-			right: auto;
-		}
+	.flex-tab-container.opened {
+		left: 0;
 	}
 }
 
diff --git a/packages/rocketchat-ui/client/views/app/room.html b/packages/rocketchat-ui/client/views/app/room.html
index fc15fdae2e2..789deb4923a 100644
--- a/packages/rocketchat-ui/client/views/app/room.html
+++ b/packages/rocketchat-ui/client/views/app/room.html
@@ -34,100 +34,104 @@
 						</div>
 					{{/if}}
 				{{/unless}}
-				<div class="container-bars {{containerBarsShow unreadData uploading}}">
-					{{#with unreadData}}
-						{{#if since}}
-							{{#if count}}
-								<div class="unread-bar color-primary-action-color background-component-color">
-									<button class="jump-to">
-										<span class="jump-to-large">{{_ "Jump_to_first_unread"}}</span>
-										<span class="jump-to-small">{{_ "Jump"}}</span>
-									</button>
-									<span class="unread-count-since">
-										{{_ "S_new_messages_since_s" count formatUnreadSince}}
-									</span>
-									<span class="unread-count">
-										{{_ "N_new_messages" count}}
-									</span>
-									<button class="mark-read">
-										{{_ "Mark_as_read"}}
-									</button>
-								</div>
-							{{/if}}
-						{{/if}}
-					{{/with}}
-					{{#each uploading}}
-						<div class="upload-progress color-primary-action-color background-component-color {{#if error}}error-background error-border{{/if}}">
-							{{#if error}}
-								<div class="upload-progress-text">
-									{{error}}
-									<button>
-										{{_ "close"}}
-									</button>
-								</div>
-							{{else}}
-								<div class="upload-progress-progress" style="width: {{percentage}}%;"></div>
-								<div class="upload-progress-text">
-									{{name}}... {{percentage}}%
-									<button>
-										{{_ "cancel"}}
-									</button>
+				<div class="messages-container-wrapper">
+					<div class="messages-container-main">
+						<div class="container-bars {{containerBarsShow unreadData uploading}}">
+							{{#with unreadData}}
+								{{#if since}}
+									{{#if count}}
+										<div class="unread-bar color-primary-action-color background-component-color">
+											<button class="jump-to">
+												<span class="jump-to-large">{{_ "Jump_to_first_unread"}}</span>
+												<span class="jump-to-small">{{_ "Jump"}}</span>
+											</button>
+											<span class="unread-count-since">
+												{{_ "S_new_messages_since_s" count formatUnreadSince}}
+											</span>
+											<span class="unread-count">
+												{{_ "N_new_messages" count}}
+											</span>
+											<button class="mark-read">
+												{{_ "Mark_as_read"}}
+											</button>
+										</div>
+									{{/if}}
+								{{/if}}
+							{{/with}}
+							{{#each uploading}}
+								<div class="upload-progress color-primary-action-color background-component-color {{#if error}}error-background error-border{{/if}}">
+									{{#if error}}
+										<div class="upload-progress-text">
+											{{error}}
+											<button>
+												{{_ "close"}}
+											</button>
+										</div>
+									{{else}}
+										<div class="upload-progress-progress" style="width: {{percentage}}%;"></div>
+										<div class="upload-progress-text">
+											{{name}}... {{percentage}}%
+											<button>
+												{{_ "cancel"}}
+											</button>
+										</div>
+									{{/if}}
 								</div>
-							{{/if}}
+							{{/each}}
 						</div>
-					{{/each}}
-				</div>
-				<div class="messages-box {{#if selectable}}selectable{{/if}} {{viewMode}}">
-					<div class="ticks-bar"></div>
-					<button class="new-message background-primary-action-color color-content-background-color not">
-						<i class="icon-down-big"></i>
-						{{_ "New_messages"}}
-					</button>
-					<div class="jump-recent background-component-color {{#unless hasMoreNext}}not{{/unless}}">
-						<button>{{_ "Jump_to_recent_messages"}} <i class="icon-level-down"></i></button>
-					</div>
-					{{#unless canPreview}}
-						<div class="content room-not-found error-color">
-							<div>
-								{{_ "You_must_join_to_view_messages_in_this_channel"}}
+						<div class="messages-box {{#if selectable}}selectable{{/if}} {{viewMode}}">
+							<div class="ticks-bar"></div>
+							<button class="new-message background-primary-action-color color-content-background-color not">
+								<i class="icon-down-big"></i>
+								{{_ "New_messages"}}
+							</button>
+							<div class="jump-recent background-component-color {{#unless hasMoreNext}}not{{/unless}}">
+								<button>{{_ "Jump_to_recent_messages"}} <i class="icon-level-down"></i></button>
 							</div>
-						</div>
-					{{/unless}}
-					<div class="wrapper {{#if hasMoreNext}}has-more-next{{/if}} {{hideUsername}} {{hideAvatar}}">
-						<ul aria-live="polite">
-							{{#if canPreview}}
-								{{#if hasMore}}
-									<li class="load-more">
-										{{#if isLoading}}
-											{{> loading}}
+							{{#unless canPreview}}
+								<div class="content room-not-found error-color">
+									<div>
+										{{_ "You_must_join_to_view_messages_in_this_channel"}}
+									</div>
+								</div>
+							{{/unless}}
+							<div class="wrapper {{#if hasMoreNext}}has-more-next{{/if}} {{hideUsername}} {{hideAvatar}}">
+								<ul aria-live="polite">
+									{{#if canPreview}}
+										{{#if hasMore}}
+											<li class="load-more">
+												{{#if isLoading}}
+													{{> loading}}
+												{{/if}}
+											</li>
+										{{else}}
+											<li class="start color-info-font-color">
+												{{_ "Start_of_conversation"}}
+											</li>
 										{{/if}}
-									</li>
-								{{else}}
-									<li class="start color-info-font-color">
-										{{_ "Start_of_conversation"}}
-									</li>
-								{{/if}}
-							{{/if}}
-							{{#each messagesHistory}}
-								{{#nrr nrrargs 'message' .}}{{/nrr}}
-							{{/each}}
-							{{#if hasMoreNext}}
-								<li class="load-more">
-									{{#if isLoading}}
-										{{> loading}}
 									{{/if}}
-								</li>
-							{{/if}}
-						</ul>
+									{{#each messagesHistory}}
+										{{#nrr nrrargs 'message' .}}{{/nrr}}
+									{{/each}}
+									{{#if hasMoreNext}}
+										<li class="load-more">
+											{{#if isLoading}}
+												{{> loading}}
+											{{/if}}
+										</li>
+									{{/if}}
+								</ul>
+							</div>
+						</div>
+						<footer class="footer border-component-color">
+							{{> messageBox}}
+						</footer>
 					</div>
+					{{#with flexData}}
+					{{> flexTabBar}}
+					{{/with}}
 				</div>
-				<footer class="footer border-component-color">
-					{{> messageBox}}
-				</footer>
 			</section>
-			{{#with flexData}}
-				{{> flexTabBar}}
-			{{/with}}
 		</div>
 	</div>
 </template>