From d37cf0c2b4e66c43835e60f42682eaabd38e3566 Mon Sep 17 00:00:00 2001
From: Rodrigo Nascimento <rodrigoknascimento@gmail.com>
Date: Mon, 2 Jan 2017 19:04:55 -0200
Subject: [PATCH] Finixh moving flex tab template

---
 client/routes/adminRouter.js                  |   1 -
 .../admin/adminEmoji.html                     | 106 +++++-----
 .../rocketchat-theme/client/imports/base.less |   5 +-
 .../admin/rooms/adminRooms.html               | 112 +++++-----
 .../admin/users/adminUsers.html               | 110 +++++-----
 .../flex-tab/flexTabBar.html                  |  15 +-
 packages/rocketchat-ui/views/app/room.html    | 191 +++++++++---------
 7 files changed, 270 insertions(+), 270 deletions(-)

diff --git a/client/routes/adminRouter.js b/client/routes/adminRouter.js
index bc89c6b2104..050e9be8002 100644
--- a/client/routes/adminRouter.js
+++ b/client/routes/adminRouter.js
@@ -17,7 +17,6 @@ FlowRouter.route('/admin/rooms', {
 FlowRouter.route('/admin/info', {
 	name: 'admin-info',
 	action() {
-		RocketChat.TabBar.showGroup('adminInfo');
 		BlazeLayout.render('main', {center: 'adminInfo'});
 	}
 });
diff --git a/packages/rocketchat-emoji-custom/admin/adminEmoji.html b/packages/rocketchat-emoji-custom/admin/adminEmoji.html
index 1af79f80f47..84a766c692c 100644
--- a/packages/rocketchat-emoji-custom/admin/adminEmoji.html
+++ b/packages/rocketchat-emoji-custom/admin/adminEmoji.html
@@ -1,56 +1,56 @@
 <template name="adminEmoji">
-	<section class="page-container page-list">
-		<header class="fixed-title">
-			{{> burger}}
-			<h2>
-				<span class="room-title">{{_ "Custom_Emoji"}}</span>
-			</h2>
-		</header>
-		<div class="content">
-			{{#unless hasPermission 'manage-emoji'}}
-				<p>{{_ "You_are_not_authorized_to_view_this_page"}}</p>
-			{{else}}
-				<form class="search-form" role="form">
-					<div class="input-line search">
-						<input type="text" id="emoji-filter" placeholder="{{_ "Search"}}" dir="auto">
-						<i class="icon-search"></i>
-						{{#unless isReady}}<i class="icon-spin"></i>{{/unless}}
+	<div class="flex-tab-container">
+		<section class="page-container page-list flex-tab-main-content">
+			<header class="fixed-title">
+				{{> burger}}
+				<h2>
+					<span class="room-title">{{_ "Custom_Emoji"}}</span>
+				</h2>
+			</header>
+			<div class="content">
+				{{#unless hasPermission 'manage-emoji'}}
+					<p>{{_ "You_are_not_authorized_to_view_this_page"}}</p>
+				{{else}}
+					<form class="search-form" role="form">
+						<div class="input-line search">
+							<input type="text" id="emoji-filter" placeholder="{{_ "Search"}}" dir="auto">
+							<i class="icon-search"></i>
+							{{#unless isReady}}<i class="icon-spin"></i>{{/unless}}
+						</div>
+					</form>
+					<div class="results">
+						{{{_ "Showing_results" customemoji.length}}}
 					</div>
-				</form>
-				<div class="results">
-					{{{_ "Showing_results" customemoji.length}}}
-				</div>
-				<div class="list">
-					<table>
-						<thead>
-							<tr>
-								<th>&nbsp;</th>
-								<th width="51%">{{_ "Name"}}</th>
-								<th width="49%">{{_ "Aliases"}}</th>
-							</tr>
-						</thead>
-						<tbody>
-							{{#each customemoji}}
-							<tr class="emoji-info row-link">
-								<td>
-									<div class="emojiAdminPreview-image">
-										{{> emojiPreview name=name extension=extension}}
-									</div>
-								</td>
-								<td>{{name}}</td>
-								<td>{{aliases}}</td>
-							</tr>
-							{{/each}}
-						</tbody>
-					</table>
-					{{#if hasMore}}
-						<button class="button secondary load-more {{isLoading}}">{{_ "Load_more"}}</button>
-					{{/if}}
-				</div>
-			{{/unless}}
-		</div>
-	</section>
-	<section class="flex-tab">
-		{{> Template.dynamic template=flexTemplate data=flexData}}
-	</section>
+					<div class="list">
+						<table>
+							<thead>
+								<tr>
+									<th>&nbsp;</th>
+									<th width="51%">{{_ "Name"}}</th>
+									<th width="49%">{{_ "Aliases"}}</th>
+								</tr>
+							</thead>
+							<tbody>
+								{{#each customemoji}}
+								<tr class="emoji-info row-link">
+									<td>
+										<div class="emojiAdminPreview-image">
+											{{> emojiPreview name=name extension=extension}}
+										</div>
+									</td>
+									<td>{{name}}</td>
+									<td>{{aliases}}</td>
+								</tr>
+								{{/each}}
+							</tbody>
+						</table>
+						{{#if hasMore}}
+							<button class="button secondary load-more {{isLoading}}">{{_ "Load_more"}}</button>
+						{{/if}}
+					</div>
+				{{/unless}}
+			</div>
+		</section>
+		{{> flexTabBar template=flexTemplate data=flexData}}
+	</div>
 </template>
diff --git a/packages/rocketchat-theme/client/imports/base.less b/packages/rocketchat-theme/client/imports/base.less
index 9433582ed69..01b2c3169da 100644
--- a/packages/rocketchat-theme/client/imports/base.less
+++ b/packages/rocketchat-theme/client/imports/base.less
@@ -2246,6 +2246,7 @@ label.required::after {
 
 .flex-tab-main-content {
 	flex-grow: 1;
+	position: relative;
 }
 
 .room-container {
@@ -3033,7 +3034,7 @@ body:not(.is-cordova) {
 }
 
 .flex-tab-bar {
-	width: 40px;
+	min-width: 40px;
 	height: 100%;
 	z-index: 130;
 	will-change: transform;
@@ -3159,7 +3160,7 @@ body:not(.is-cordova) {
 	display: none;
 	top: 0;
 	bottom: 0;
-	width: @flex-tab-width;
+	min-width: @flex-tab-width;
 	z-index: 110;
 	overflow-x: visible;
 	.transition(transform .25s cubic-bezier(.5, 0, .1, 1));
diff --git a/packages/rocketchat-ui-admin/admin/rooms/adminRooms.html b/packages/rocketchat-ui-admin/admin/rooms/adminRooms.html
index 8315a3d9128..c460475ae70 100644
--- a/packages/rocketchat-ui-admin/admin/rooms/adminRooms.html
+++ b/packages/rocketchat-ui-admin/admin/rooms/adminRooms.html
@@ -1,59 +1,59 @@
 <template name="adminRooms">
-	<section class="page-container page-list">
-		<header class="fixed-title">
-			{{> burger}}
-			<h2>
-				<span class="room-title">{{_ "Rooms"}}</span>
-			</h2>
-		</header>
-		<div class="content">
-			{{#unless hasPermission 'view-room-administration'}}
-				<p>{{_ "You_are_not_authorized_to_view_this_page"}}</p>
-			{{else}}
-				<form class="search-form" role="form">
-					<div class="input-line search">
-						<input type="text" id="rooms-filter" placeholder="{{_ "Search"}}" dir="auto">
-						<i class="icon-search"></i>
-						{{#unless isReady}}<i class="icon-spin"></i>{{/unless}}
+	<div class="flex-tab-container">
+		<section class="page-container page-list flex-tab-main-content">
+			<header class="fixed-title">
+				{{> burger}}
+				<h2>
+					<span class="room-title">{{_ "Rooms"}}</span>
+				</h2>
+			</header>
+			<div class="content">
+				{{#unless hasPermission 'view-room-administration'}}
+					<p>{{_ "You_are_not_authorized_to_view_this_page"}}</p>
+				{{else}}
+					<form class="search-form" role="form">
+						<div class="input-line search">
+							<input type="text" id="rooms-filter" placeholder="{{_ "Search"}}" dir="auto">
+							<i class="icon-search"></i>
+							{{#unless isReady}}<i class="icon-spin"></i>{{/unless}}
+						</div>
+						<label><input type="checkbox" name="room-type" value="c"> {{_ "Channels"}}</label>
+						<label><input type="checkbox" name="room-type" value="d"> {{_ "Direct_Messages"}}</label>
+						<label><input type="checkbox" name="room-type" value="p"> {{_ "Private_Groups"}}</label>
+					</form>
+					<div class="results">
+						{{{_ "Showing_results" roomCount}}}
 					</div>
-					<label><input type="checkbox" name="room-type" value="c"> {{_ "Channels"}}</label>
-					<label><input type="checkbox" name="room-type" value="d"> {{_ "Direct_Messages"}}</label>
-					<label><input type="checkbox" name="room-type" value="p"> {{_ "Private_Groups"}}</label>
-				</form>
-				<div class="results">
-					{{{_ "Showing_results" roomCount}}}
-				</div>
-				<div class="list">
-					<table>
-						<thead>
-							<tr>
-								<th width="30%">{{_ "Name"}}</th>
-								<th width="20%">{{_ "Type"}}</th>
-								<th width="20%">{{_ "Users"}}</th>
-								<th width="10%">{{_ "Msgs"}}</th>
-								<th width="20%">{{_ "Default"}}</th>
-							</tr>
-						</thead>
-						<tbody>
-							{{#each rooms}}
-							<tr class="room-info row-link">
-								<td>{{name}}</td>
-								<td>{{type}}</td>
-								<td>{{usernames.length}}</td>
-								<td>{{msgs}}</td>
-								<td>{{default}}</td>
-							</tr>
-							{{/each}}
-						</tbody>
-					</table>
-					{{#if hasMore}}
-						<button class="button secondary load-more {{isLoading}}">{{_ "Load_more"}}</button>
-					{{/if}}
-				</div>
-			{{/unless}}
-		</div>
-	</section>
-	<section class="flex-tab">
-		{{> Template.dynamic template=flexTemplate data=flexData}}
-	</section>
+					<div class="list">
+						<table>
+							<thead>
+								<tr>
+									<th width="30%">{{_ "Name"}}</th>
+									<th width="20%">{{_ "Type"}}</th>
+									<th width="20%">{{_ "Users"}}</th>
+									<th width="10%">{{_ "Msgs"}}</th>
+									<th width="20%">{{_ "Default"}}</th>
+								</tr>
+							</thead>
+							<tbody>
+								{{#each rooms}}
+								<tr class="room-info row-link">
+									<td>{{name}}</td>
+									<td>{{type}}</td>
+									<td>{{usernames.length}}</td>
+									<td>{{msgs}}</td>
+									<td>{{default}}</td>
+								</tr>
+								{{/each}}
+							</tbody>
+						</table>
+						{{#if hasMore}}
+							<button class="button secondary load-more {{isLoading}}">{{_ "Load_more"}}</button>
+						{{/if}}
+					</div>
+				{{/unless}}
+			</div>
+		</section>
+		{{> flexTabBar template=flexTemplate data=flexData}}
+	</div>
 </template>
diff --git a/packages/rocketchat-ui-admin/admin/users/adminUsers.html b/packages/rocketchat-ui-admin/admin/users/adminUsers.html
index cab9a39673c..d2e8f04504c 100644
--- a/packages/rocketchat-ui-admin/admin/users/adminUsers.html
+++ b/packages/rocketchat-ui-admin/admin/users/adminUsers.html
@@ -1,58 +1,58 @@
 <template name="adminUsers">
-	<section class="page-container page-list">
-		<header class="fixed-title">
-			{{> burger}}
-			<h2>
-				<span class="room-title">{{_ "Users"}}</span>
-			</h2>
-		</header>
-		<div class="content">
-			{{#unless hasPermission 'view-user-administration'}}
-				<p>{{_ "You_are_not_authorized_to_view_this_page"}}</p>
-			{{else}}
-				<form class="search-form" role="form">
-					<div class="input-line search">
-						<input type="text" id="users-filter" placeholder="{{_ "Search"}}" dir="auto">
-						<i class="icon-search"></i>
-						{{#unless isReady}}<i class="icon-spin"></i>{{/unless}}
+	<div class="flex-tab-container">
+		<section class="page-container page-list flex-tab-main-content">
+			<header class="fixed-title">
+				{{> burger}}
+				<h2>
+					<span class="room-title">{{_ "Users"}}</span>
+				</h2>
+			</header>
+			<div class="content">
+				{{#unless hasPermission 'view-user-administration'}}
+					<p>{{_ "You_are_not_authorized_to_view_this_page"}}</p>
+				{{else}}
+					<form class="search-form" role="form">
+						<div class="input-line search">
+							<input type="text" id="users-filter" placeholder="{{_ "Search"}}" dir="auto">
+							<i class="icon-search"></i>
+							{{#unless isReady}}<i class="icon-spin"></i>{{/unless}}
+						</div>
+					</form>
+					<div class="results">
+						{{{_ "Showing_results" users.length}}}
 					</div>
-				</form>
-				<div class="results">
-					{{{_ "Showing_results" users.length}}}
-				</div>
-				<div class="list">
-					<table>
-						<thead>
-							<tr>
-								<th>&nbsp;</th>
-								<th width="34%">{{_ "Name"}}</th>
-								<th width="33%">{{_ "Username"}}</th>
-								<th width="33%">{{_ "Email"}}</th>
-							</tr>
-						</thead>
-						<tbody>
-							{{#each users}}
-							<tr class="user-info row-link">
-								<td>
-									<div class="user-image status-{{status}}">
-										{{> avatar username=username}}
-									</div>
-								</td>
-								<td>{{name}}</td>
-								<td>{{username}}</td>
-								<td>{{emailAddress}}</td>
-							</tr>
-							{{/each}}
-						</tbody>
-					</table>
-					{{#if hasMore}}
-						<button class="button secondary load-more {{isLoading}}">{{_ "Load_more"}}</button>
-					{{/if}}
-				</div>
-			{{/unless}}
-		</div>
-	</section>
-	<section class="flex-tab">
-		{{> Template.dynamic template=flexTemplate data=flexData}}
-	</section>
+					<div class="list">
+						<table>
+							<thead>
+								<tr>
+									<th>&nbsp;</th>
+									<th width="34%">{{_ "Name"}}</th>
+									<th width="33%">{{_ "Username"}}</th>
+									<th width="33%">{{_ "Email"}}</th>
+								</tr>
+							</thead>
+							<tbody>
+								{{#each users}}
+								<tr class="user-info row-link">
+									<td>
+										<div class="user-image status-{{status}}">
+											{{> avatar username=username}}
+										</div>
+									</td>
+									<td>{{name}}</td>
+									<td>{{username}}</td>
+									<td>{{emailAddress}}</td>
+								</tr>
+								{{/each}}
+							</tbody>
+						</table>
+						{{#if hasMore}}
+							<button class="button secondary load-more {{isLoading}}">{{_ "Load_more"}}</button>
+						{{/if}}
+					</div>
+				{{/unless}}
+			</div>
+		</section>
+		{{> flexTabBar template=flexTemplate data=flexData}}
+	</div>
 </template>
diff --git a/packages/rocketchat-ui-flextab/flex-tab/flexTabBar.html b/packages/rocketchat-ui-flextab/flex-tab/flexTabBar.html
index 276694e58e8..3b71432a94f 100644
--- a/packages/rocketchat-ui-flextab/flex-tab/flexTabBar.html
+++ b/packages/rocketchat-ui-flextab/flex-tab/flexTabBar.html
@@ -1,7 +1,12 @@
 <template name="flexTabBar">
-	{{#each buttons}}
-		<div class="tab-button {{active}} {{visible}} {{class}}" title="{{title}}">
-			<button aria-label="{{title}}"><i class="{{icon}}"></i></button>
-		</div>
-	{{/each}}
+	<section class="flex-tab">
+		{{> Template.dynamic template=template data=data}}
+	</section>
+	<div class="flex-tab-bar" role="toolbar">
+		{{#each buttons}}
+			<div class="tab-button {{active}} {{visible}} {{class}}" title="{{title}}">
+				<button aria-label="{{title}}"><i class="{{icon}}"></i></button>
+			</div>
+		{{/each}}
+	</div>
 </template>
diff --git a/packages/rocketchat-ui/views/app/room.html b/packages/rocketchat-ui/views/app/room.html
index 78d8187d2ab..b56aa2f34ea 100644
--- a/packages/rocketchat-ui/views/app/room.html
+++ b/packages/rocketchat-ui/views/app/room.html
@@ -6,113 +6,108 @@
 			</div>
 		</div>
 		<div class="flex-tab-container">
-		<section class="messages-container flex-tab-main-content {{adminClass}}" id="{{windowId}}" aria-label="{{_ "Channel"}}">
-			{{#unless embeddedVersion}}
-			<header class="fixed-title">
-				{{> burger}}
-				<h2>
-					{{#if showToggleFavorite}}
-						<a href="#favorite" class="toggle-favorite"><i class="{{favorite}}" aria-label="{{_ favoriteLabel}}"></i></a>
-					{{/if}}
-					<i class="{{roomIcon}} status-{{userStatus}}"></i>
-					<span class="room-title">{{roomName}}</span>
-					<span class="room-topic">{{{RocketChatMarkdown roomTopic}}}</span>
-				</h2>
-			</header>
-			{{/unless}}
-			<div class="container-bars {{containerBarsShow unreadData uploading}}">
-				{{#with unreadData}}
-					{{#if since}}
-						{{#if count}}
-							<div class="unread-bar">
-								<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>
+			<section class="messages-container flex-tab-main-content {{adminClass}}" id="{{windowId}}" aria-label="{{_ "Channel"}}">
+				{{#unless embeddedVersion}}
+				<header class="fixed-title">
+					{{> burger}}
+					<h2>
+						{{#if showToggleFavorite}}
+							<a href="#favorite" class="toggle-favorite"><i class="{{favorite}}" aria-label="{{_ favoriteLabel}}"></i></a>
 						{{/if}}
-					{{/if}}
-				{{/with}}
-				{{#each uploading}}
-					<div class="upload-progress {{#if error}}upload-error{{/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>
+						<i class="{{roomIcon}} status-{{userStatus}}"></i>
+						<span class="room-title">{{roomName}}</span>
+						<span class="room-topic">{{{RocketChatMarkdown roomTopic}}}</span>
+					</h2>
+				</header>
+				{{/unless}}
+				<div class="container-bars {{containerBarsShow unreadData uploading}}">
+					{{#with unreadData}}
+						{{#if since}}
+							{{#if count}}
+								<div class="unread-bar">
+									<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}}
-					</div>
-				{{/each}}
-			</div>
-			<div class="messages-box {{#if selectable}}selectable{{/if}} {{viewMode}}">
-				<div class="ticks-bar"></div>
-				<button class="new-message not">
-					<i class="icon-down-big"></i>
-					{{_ "New_messages"}}
-				</button>
-				<div class="jump-recent {{#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">
-						<div>
-							{{_ "You_must_join_to_view_messages_in_this_channel"}}
+					{{/with}}
+					{{#each uploading}}
+						<div class="upload-progress {{#if error}}upload-error{{/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>
+					{{/each}}
+				</div>
+				<div class="messages-box {{#if selectable}}selectable{{/if}} {{viewMode}}">
+					<div class="ticks-bar"></div>
+					<button class="new-message not">
+						<i class="icon-down-big"></i>
+						{{_ "New_messages"}}
+					</button>
+					<div class="jump-recent {{#unless hasMoreNext}}not{{/unless}}">
+						<button>{{_ "Jump_to_recent_messages"}} <i class="icon-level-down"></i></button>
 					</div>
-				{{/unless}}
-				<div class="wrapper {{#if hasMoreNext}}has-more-next{{/if}} {{hideUsername}} {{hideAvatar}}">
-					<ul aria-live="polite">
-						{{#if canPreview}}
-							{{#if hasMore}}
+					{{#unless canPreview}}
+						<div class="content room-not-found">
+							<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">
+										{{> loading}}
+									</li>
+								{{else}}
+									<li class="start">
+										{{_ "Start_of_conversation"}}
+									</li>
+								{{/if}}
+							{{/if}}
+							{{#each messagesHistory}}
+								{{#nrr nrrargs 'message' .}}{{/nrr}}
+							{{/each}}
+							{{#if hasMoreNext}}
 								<li class="load-more">
 									{{> loading}}
 								</li>
-							{{else}}
-								<li class="start">
-									{{_ "Start_of_conversation"}}
-								</li>
 							{{/if}}
-						{{/if}}
-						{{#each messagesHistory}}
-							{{#nrr nrrargs 'message' .}}{{/nrr}}
-						{{/each}}
-						{{#if hasMoreNext}}
-							<li class="load-more">
-								{{> loading}}
-							</li>
-						{{/if}}
-					</ul>
+						</ul>
+					</div>
 				</div>
-			</div>
-			<footer class="footer">
-				{{> messageBox}}
-			</footer>
-		</section>
-		<section class="flex-tab">
-			{{> Template.dynamic template=flexTemplate data=flexData}}
-		</section>
-		<div class="flex-tab-bar" role="toolbar">
-			{{> flexTabBar}}
-		</div>
+				<footer class="footer">
+					{{> messageBox}}
+				</footer>
+			</section>
+			{{> flexTabBar template=flexTemplate data=flexData}}
 		</div>
 	</div>
 </template>