From 5134b2ed5651149fa36243dea32fac6b06a011d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adriano=20Cahet=C3=A9?= <nano.rj@gmail.com>
Date: Thu, 3 Sep 2015 02:45:42 -0300
Subject: [PATCH] Better layout for tabs

---
 client/stylesheets/base.less              | 465 ++++++++++++----------
 client/stylesheets/global/_variables.less |  63 +--
 client/views/app/room.html                | 235 +++++------
 3 files changed, 404 insertions(+), 359 deletions(-)

diff --git a/client/stylesheets/base.less b/client/stylesheets/base.less
index 25402b604d4bd..2a88f5cb8470f 100644
--- a/client/stylesheets/base.less
+++ b/client/stylesheets/base.less
@@ -2209,6 +2209,7 @@ a.github-fork {
 		left: 0;
 		width: 100%;
 		min-height: @footer-min-height;
+		z-index:210;
 	}
 	.message-popup-position {
 		position: relative;
@@ -2642,199 +2643,6 @@ a.github-fork {
 	}
 }
 
-// FLEX-TAB and FLEX-TAB views
-.flex-tab {
-	background-color: @secondary-background-color;
-	border-left: 1px solid @tertiary-background-color;
-	overflow-x: visible;
-	position: fixed;
-	z-index: 100;
-	max-width: @flex-tab-width;
-	width: 90%;
-	bottom: 0;
-	right: 0;
-	top: 0;
-	.transform(translateX(100%));
-	.transition(transform .25s cubic-bezier(.5,
-	0,
-	.1,
-	1));
-	.control {
-		height: 60px;
-		position: relative;
-		text-align: left;
-		z-index: 100;
-		padding: 12px 30px 12px;
-		background-color: @secondary-background-color;
-		> a,
-		> form {
-			float: left;
-		}
-		&:before {
-			content: " ";
-			height: 1px;
-			left: 15px;
-			position: absolute;
-			background-color: @tertiary-background-color;
-			bottom: 0px;
-			.calc(width, ~'100% - 15px');
-		}
-		.button {
-			min-height: 36px;
-			margin: 0 1px;
-		}
-		.more {
-			position: absolute;
-			left: 0;
-			top: 0px;
-			background-color: @tertiary-background-color;
-			border: none;
-			height: 60px;
-			width: 30px;
-			border-bottom: 1px solid @tertiary-background-color;
-			color: @secondary-font-color;
-			cursor: pointer;
-			.transform(translateX(-27px));
-			.transition(transform .25s ease-out .475s,
-			background .075s ease-out .5s);
-			&:hover {
-				.arrow {
-					.arrow {
-						&:before,
-						&:after {
-							background-color: #4a4a4a;
-						}
-					}
-				}
-			}
-			.arrow {
-				&:before,
-				&:after {
-					background-color: #7a7a7a;
-				}
-			}
-			i {
-				.transform-origin(50%,
-				50%,
-				0);
-				.transition(transform .3s ease-out);
-				height: 12.5px;
-				vertical-align: top;
-				margin-top: 1px;
-			}
-			.flex-opened & {
-				background-color: @secondary-background-color;
-				.transition-delay(0s);
-				.transform(translateX(0));
-				&:hover {
-					.arrow {
-						&:before,
-						&:after {
-							background-color: #7a7a7a;
-						}
-					}
-				}
-			}
-		}
-		.search-form {
-			padding: 0 4px 0 0;
-			width: 100%;
-			> div {
-				position: relative;
-			}
-		.icon-plus {
-				position: absolute;
-				top: 11px;
-				left: 8px;
-				font-size: 13px;
-				color: @secondary-font-color;
-			}
-		}
-		.info-tabs {
-			position: absolute;
-			top: 0;
-			text-align: right;
-			height: 60px;
-			right: 20px;
-			a {
-				float: left;
-				display: inline-block;
-				padding: 0 15px;
-				height: 60px;
-				line-height: 60px;
-				vertical-align: middle;
-				color: inherit;
-				border-left: 1px solid rgb(234, 234, 234);
-				&.active {
-					background-color: #F4F4F4;
-				}
-				&:last-child {
-					border-right: 1px solid rgb(234, 234, 234);
-				}
-			}
-		}
-	}
-	.content {
-		&:extend(.fill-all);
-		.custom-scroll(transparent,
-		#DADADA);
-		margin-top: 60px;
-		overflow-x: hidden;
-		overflow-y: auto;
-		-webkit-overflow-scrolling: touch;
-		> div {
-			.transition(transform .45s cubic-bezier(.5,
-			0,
-			0,
-			1),
-			opacity .125s ease-out .1s);
-		}
-		> .-hidden {
-			.transform(translateX(100%));
-			opacity: 0;
-		}
-		> .animated {
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-		}
-	}
-	footer {
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		width: 100%;
-		padding: 9px 15px 0px 15px;
-		z-index: 100;
-		text-align: right;
-		height: @footer-min-height;
-	}
-	.social {
-		text-align: center;
-		h4 {
-			font-weight: 300;
-			position: absolute;
-			width: 100%;
-			top: -12px;
-			left: 0;
-			font-size: 13px;
-		}
-		.share {
-			border-radius: 50%;
-			min-height: 40px;
-			line-height: 20px;
-			&:before {
-				border-radius: 50%;
-			}
-			span {
-				display: none;
-			}
-		}
-	}
-}
-
 .list-view {
 	padding: 5px 30px 20px;
 	.list {
@@ -3076,15 +2884,31 @@ a.github-fork {
 	}
 }
 
+// Sidebar
+.sidebar {
+	width: @sidebar-width;
+	background: @sidebar-bg-color;
+	height: 100%;
+	position: fixed;
+	z-index:200;
+	border-left:1px solid #EAEAEA;
+
+	&.right {
+		right: 0;	
+	}
+
+}
 
 
-.flex-tab-2 {
-	background-color: @secondary-background-color;
-	border-left: 1px solid @tertiary-background-color;
+//Sidebar Tabs
+// FLEX-TAB and FLEX-TAB views
+.flex-tab {
+	background-color: @sidebar-bg-color;
+	border-left: 1px solid #EAEAEA;
 	overflow-x: visible;
 	position: fixed;
 	z-index: 100;
-	max-width: @flex-tab-2-width;
+	max-width: @flex-tab-width;
 	width: 90%;
 	bottom: 0;
 	right: 0;
@@ -3121,15 +2945,14 @@ a.github-fork {
 		.more {
 			position: absolute;
 			left: 0;
-			top: 100px;
-			background-color: @tertiary-background-color;
+			top: 0px;
+			background-color: transparent;
 			border: none;
-			height: 60px;
-			width: 30px;
-			border-bottom: 1px solid @tertiary-background-color;
+			height: @flex-tab-button-height;
+			width: @flex-tab-button-width;
 			color: @secondary-font-color;
 			cursor: pointer;
-			.transform(translateX(-27px));
+			.transform(translateX(-@flex-tab-button-width));
 			.transition(transform .25s ease-out .475s,
 			background .075s ease-out .5s);
 			&:hover {
@@ -3157,7 +2980,7 @@ a.github-fork {
 				vertical-align: top;
 				margin-top: 1px;
 			}
-			.flex-2-opened & {
+			.flex-opened & {
 				background-color: @secondary-background-color;
 				.transition-delay(0s);
 				.transform(translateX(0));
@@ -3171,6 +2994,202 @@ a.github-fork {
 				}
 			}
 		}
+		.search-form {
+			padding: 0 4px 0 8px;
+			width: 100%;
+			> div {
+				position: relative;
+			}
+		.icon-plus {
+				position: absolute;
+				top: 11px;
+				left: 8px;
+				font-size: 13px;
+				color: @secondary-font-color;
+			}
+		}
+		.info-tabs {
+			position: absolute;
+			top: 0;
+			text-align: right;
+			height: 60px;
+			right: 20px;
+			a {
+				float: left;
+				display: inline-block;
+				padding: 0 15px;
+				height: 60px;
+				line-height: 60px;
+				vertical-align: middle;
+				color: inherit;
+				border-left: 1px solid rgb(234, 234, 234);
+				&.active {
+					background-color: #F4F4F4;
+				}
+				&:last-child {
+					border-right: 1px solid rgb(234, 234, 234);
+				}
+			}
+		}
+	}
+	.content {
+		&:extend(.fill-all);
+		.custom-scroll(transparent,#DADADA);
+		margin-top: 60px;
+		overflow-x: hidden;
+		overflow-y: auto;
+		-webkit-overflow-scrolling: touch;
+		
+		.list-view {
+			padding: 5px 12px 20px 30px;
+			margin-right: @sidebar-width;
+		}
+		
+		> div {
+			.transition(transform .45s cubic-bezier(.5,
+			0,
+			0,
+			1),
+			opacity .125s ease-out .1s);
+		}
+		
+		> .-hidden {
+			.transform(translateX(100%));
+			opacity: 0;
+		}
+		
+		> .animated {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+		}
+	}
+	footer {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		padding: 9px 15px 0px 15px;
+		z-index: 100;
+		text-align: right;
+		height: @footer-min-height;
+	}
+	.social {
+		text-align: center;
+		h4 {
+			font-weight: 300;
+			position: absolute;
+			width: 100%;
+			top: -12px;
+			left: 0;
+			font-size: 13px;
+		}
+		.share {
+			border-radius: 50%;
+			min-height: 40px;
+			line-height: 20px;
+			&:before {
+				border-radius: 50%;
+			}
+			span {
+				display: none;
+			}
+		}
+	}
+}
+
+.flex-tab-2 {
+	background-color: @sidebar-bg-color;
+	border-left: 1px solid #EAEAEA;
+	overflow-x: visible;
+	position: fixed;
+	z-index: 100;
+	max-width: @flex-tab-2-width;
+	width: 90%;
+	bottom: 0;
+	right: 0;
+	top: 0;
+	.transform(translateX(100%));
+	.transition(transform .25s cubic-bezier(.5,0,.1,1));
+	
+	.control {
+		height: 60px;
+		position: relative;
+		text-align: left;
+		padding: 12px 12px 12px @sidebar-width;
+		margin-right:@sidebar-width;
+		> a,
+		> form {
+			float: left;
+		}
+		&:before {
+			content: " ";
+			height: 1px;
+			left: 15px;
+			position: absolute;
+			background-color: @sidebar-bg-color;
+			bottom: 0px;
+			.calc(width, ~'100% - 15px');
+		}
+		.button {
+			min-height: 36px;
+			margin: 0 1px;
+		}
+		.more {
+			position: absolute;
+			left: 0;
+			top: @flex-tab-button-height;
+			background-color: transparent;
+			border: none;
+			height: @flex-tab-button-height;
+			width: @flex-tab-button-width;
+			color: @secondary-font-color;
+			cursor: pointer;
+			.transform(translateX(-@flex-tab-button-width));
+			.transition(transform .25s ease-out .475s,background .075s ease-out .5s);
+			
+			&:hover {
+				.arrow {
+					.arrow {
+						&:before,
+						&:after {
+							background-color: #4a4a4a;
+						}
+					}
+				}
+			}
+			.arrow {
+				&:before,
+				&:after {
+					background-color: #7a7a7a;
+				}
+			}
+			i {
+				.transform-origin(50%,
+				50%,
+				0);
+				.transition(transform .3s ease-out);
+				height: 12.5px;
+				vertical-align: top;
+				margin-top: 1px;
+			}
+			.flex-2-opened & {
+				.transition-delay(0s);
+				.transform(translateX(0));
+				z-index:100;
+				top:0;
+				&:hover {
+					.arrow {
+						&:before,
+						&:after {
+							background-color: #7a7a7a;
+						}
+					}
+				}
+			}
+		}
 		.search-form {
 			padding: 0 4px 0 0;
 			width: 100%;
@@ -3221,10 +3240,7 @@ a.github-fork {
 		overflow-y: auto;
 		-webkit-overflow-scrolling: touch;
 		> div {
-			.transition(transform .45s cubic-bezier(.5,
-			0,
-			0,
-			1),
+			.transition(transform .45s cubic-bezier(.5,0,0,1),
 			opacity .125s ease-out .1s);
 		}
 		> .-hidden {
@@ -3274,8 +3290,8 @@ a.github-fork {
 }
 
 .flex-tab-3 {
-	background-color: @secondary-background-color;
-	border-left: 1px solid @tertiary-background-color;
+	background-color: @sidebar-bg-color;
+	border-left: 1px solid @sidebar-bg-color;
 	overflow-x: visible;
 	position: fixed;
 	z-index: 100;
@@ -3305,7 +3321,7 @@ a.github-fork {
 			height: 1px;
 			left: 15px;
 			position: absolute;
-			background-color: @tertiary-background-color;
+			background-color: @sidebar-bg-color;
 			bottom: 0px;
 			.calc(width, ~'100% - 15px');
 		}
@@ -3316,15 +3332,14 @@ a.github-fork {
 		.more {
 			position: absolute;
 			left: 0;
-			top: 180px;
-			background-color: @tertiary-background-color;
+			top: @flex-tab-button-height*2;
+			background-color: transparent;
 			border: none;
-			height: 60px;
-			width: 30px;
-			border-bottom: 1px solid @tertiary-background-color;
+			height: @flex-tab-button-height;
+			width: @flex-tab-button-width;
 			color: @secondary-font-color;
 			cursor: pointer;
-			.transform(translateX(-27px));
+			.transform(translateX(-@flex-tab-button-width));
 			.transition(transform .25s ease-out .475s,
 			background .075s ease-out .5s);
 			&:hover {
@@ -3356,6 +3371,7 @@ a.github-fork {
 				background-color: @secondary-background-color;
 				.transition-delay(0s);
 				.transform(translateX(0));
+				top:0;
 				&:hover {
 					.arrow {
 						&:before,
@@ -3367,7 +3383,7 @@ a.github-fork {
 			}
 		}
 		.search-form {
-			padding: 0 4px 0 0;
+			padding: 0 4px 0 4px;
 			width: 100%;
 			> div {
 				position: relative;
@@ -3412,6 +3428,7 @@ a.github-fork {
 		overflow-x: hidden;
 		overflow-y: auto;
 		-webkit-overflow-scrolling: touch;
+		border-left:1px solid #EAEAEA;
 		> div {
 			.transition(transform .45s cubic-bezier(.5,
 			0,
@@ -3465,6 +3482,8 @@ a.github-fork {
 	}
 }
 
+
+// User Image
 .user-image-status(@color) {
 	.avatar {
 		&:after {
@@ -3473,7 +3492,7 @@ a.github-fork {
 	}
 }
 
-@user-image-square: 20px;
+
 .user-image {
 	margin: 4px;
 	height: @user-image-square;
@@ -4180,6 +4199,14 @@ a.github-fork {
 	background: none;
 }
 
+.codeEditor {
+	position:relative;
+	padding: 10px 0 0 30px;
+	border-top:1px solid #EAEAEA;
+}
+
+
+// Media Queries
 @media all and(max-width: 1100px) {
 	#rocket-chat {
 		.flex-opened {
diff --git a/client/stylesheets/global/_variables.less b/client/stylesheets/global/_variables.less
index 7e72c159ad623..317f56575de8c 100644
--- a/client/stylesheets/global/_variables.less
+++ b/client/stylesheets/global/_variables.less
@@ -1,33 +1,50 @@
-@header-min-height: 60px;
-@footer-min-height: 70px;
+// Sizes
+// --------------
+@header-min-height: 			60px;
+@footer-min-height: 			70px;
+
+@rooms-box-width: 				260px;
+
+// Sidebar Sizes
+@sidebar-width:					40px;
+
+@flex-tab-width: 				400px;
+@flex-tab-webrtc-width: 		400px;
+@flex-tab-webrtc-2-width: 		850px;
 
-@rooms-box-width: 260px;
-@flex-tab-width: 400px;
-@flex-tab-webrtc-width: 400px;
-@flex-tab-webrtc-2-width: 850px;
+@flex-tab-2-width: 				400px;
+@flex-tab-3-width: 				850px;
+
+@flex-tab-button-height:		60px;
+@flex-tab-button-width:			@sidebar-width;
+
+
+// User
+@user-image-square: 			20px;
 
-@flex-tab-2-width: 400px;
-@flex-tab-3-width: 850px;
 
 // Colors
 // --------------
+//@primary-background-color: 	#045080;
+//@primary-background-color: 	#38393d;
+
+@primary-background-color:  	#04436a;
+@secondary-background-color: 	#F4F4F4;
+@tertiary-background-color:	 	#EAEAEA;
 
-//@primary-background-color: #045080;
-//@primary-background-color: #38393d;
+@link-font-color: 			 	#008CE3;
 
-@primary-background-color: #04436a;
-@secondary-background-color: #F4F4F4;
-@tertiary-background-color: #EAEAEA;
+@primary-font-color:		 	#444444;
+@secondary-font-color:			#7f7f7f;
+@tertiary-font-color:			rgba(255, 255, 255, 0.6);
+@quaternary-font-color: 	 	rgba(255, 255, 255, 0.85);
+@info-font-color: 				#AAAAAA;
 
-@link-font-color: #008CE3;
+@status-online: 				#35AC19;
+@status-offline: 				rgba(150, 150, 150, 0.50);
+@status-busy: 					#D30230;
+@status-away: 					#fcb316;
 
-@primary-font-color: #444444;
-@secondary-font-color: #7f7f7f;
-@tertiary-font-color: rgba(255, 255, 255, 0.6);
-@quaternary-font-color: rgba(255, 255, 255, 0.85);
-@info-font-color: #AAAAAA;
+@sidebar-bg-color:				#FCFCFC;
 
-@status-online: #35AC19;
-@status-offline: rgba(150, 150, 150, 0.50);
-@status-busy: #D30230;
-@status-away: #fcb316;
+//@sidebar-button-opened:			#EFF9FF;
diff --git a/client/views/app/room.html b/client/views/app/room.html
index e06d934b3576f..49c4b54e0ed92 100644
--- a/client/views/app/room.html
+++ b/client/views/app/room.html
@@ -126,136 +126,137 @@ <h2>
 				{{/if}}
 			</footer>
 		</section>
-		<section class="flex-tab">
-			<div class="control">
-				<button class="more"><span class="arrow {{arrowPosition}}"></span></button>
-				<form class="search-form" role="form">
-					<div class="input-line search">
-						<!-- {{> inputAutocomplete settings=autocompleteSettingsRoomSearch id="room-search" class="search" placeholder=tQuickSearch autocomplete="off"}} -->
-						<input type="text" id="room-search" class="search" placeholder="{{tQuickSearch}}" autocomplete="off" />
-						<i class="icon-search"></i>
-					</div>
-				</form>
-			</div>
-			{{#if flexOpened}}
-				<div class="content">
-					{{#if searchResult.messages}}
-						<ul>
-							{{#each searchResult.messages}}
-								{{#nrr nrrargs 'message' .}}{{/nrr}}
+		<div class="sidebar right">
+			<section class="flex-tab">
+				<div class="control">
+					<button class="more"><span class="icon-users" title="{{#if flexOpened}}{{_ 'Close'}}{{/if}}"></span></button>
+					<form class="search-form" role="form">
+						<div class="input-line search">
+							<!-- {{> inputAutocomplete settings=autocompleteSettingsRoomSearch id="room-search" class="search" placeholder=tQuickSearch autocomplete="off"}} -->
+							<input type="text" id="room-search" class="search" placeholder="{{tQuickSearch}}" autocomplete="off" />
+							<i class="icon-search"></i>
+						</div>
+					</form>
+				</div>
+				{{#if flexOpened}}
+					<div class="content">
+						{{#if searchResult.messages}}
+							<ul>
+								{{#each searchResult.messages}}
+									{{#nrr nrrargs 'message' .}}{{/nrr}}
+								{{/each}}
+							</ul>
+							<!-- {{#each searchResult.users}}
+								@{{username}}
 							{{/each}}
-						</ul>
-						<!-- {{#each searchResult.users}}
-							@{{username}}
-						{{/each}}
-						{{#each searchResult.rooms}}
-							#{{name}}
-						{{/each}} -->
-					{{else}}
-						{{#if isGroupChat}}
-							<div class="list-view{{#if $.Session.get 'showUserInfo'}} -hidden{{/if}}">
-								{{#with roomUsers}}
-									<div class="status">
-										<h2>{{_ "Members_List"}}</h2>
-										<p>
-											{{{_ "Showing_online_users" total_online=totalOnline total=total}}}
-											{{!--<button class="see-all">{{seeAll}}</button>--}}
-										</p>
-										{{#if canAddUser}}
-											<div class="control">
-												<div class="search-form">
-													<div class="input-line search">
-														{{> inputAutocomplete settings=autocompleteSettingsAddUser id="user-add-search" class="search" placeholder=tAddUsers}}
-														<i class="icon-plus"></i>
+							{{#each searchResult.rooms}}
+								#{{name}}
+							{{/each}} -->
+						{{else}}
+							{{#if isGroupChat}}
+								<div class="list-view{{#if $.Session.get 'showUserInfo'}} -hidden{{/if}}">
+									{{#with roomUsers}}
+										<div class="status">
+											<h2>{{_ "Members_List"}}</h2>
+											<p>
+												{{{_ "Showing_online_users" total_online=totalOnline total=total}}}
+												{{!--<button class="see-all">{{seeAll}}</button>--}}
+											</p>
+											{{#if canAddUser}}
+												<div class="control">
+													<div class="search-form">
+														<div class="input-line search">
+															{{> inputAutocomplete settings=autocompleteSettingsAddUser id="user-add-search" class="search" placeholder=tAddUsers}}
+															<i class="icon-plus"></i>
+														</div>
 													</div>
 												</div>
-											</div>
-										{{/if}}
-									</div>
-									<ul class='list clearfix lines'>
-										{{#each users}}
-											<li class='user-image user-card-room status-{{status}}'>
-												<a data-username="{{username}}" tabindex="0" title="{{username}}">
-													{{> avatar username=username}}
-													<p>{{username}} {{utcOffset}}</p>
-												</a>
-											</li>
-										{{/each}}
-									</ul>
-								{{/with}}
-							</div>
-							<div class="user-view animated{{#unless $.Session.get 'showUserInfo'}} -hidden{{/unless}}">
-								{{> userInfo user=flexUserInfo showAll=true}}
-							</div>
-						{{else}}
-							<div class="user-view">
-								{{> userInfo user=flexUserInfo video=true}}
-							</div>
+											{{/if}}
+										</div>
+										<ul class='list clearfix lines'>
+											{{#each users}}
+												<li class='user-image user-card-room status-{{status}}'>
+													<a data-username="{{username}}" tabindex="0" title="{{username}}">
+														{{> avatar username=username}}
+														<p>{{username}} {{utcOffset}}</p>
+													</a>
+												</li>
+											{{/each}}
+										</ul>
+									{{/with}}
+								</div>
+								<div class="user-view animated{{#unless $.Session.get 'showUserInfo'}} -hidden{{/unless}}">
+									{{> userInfo user=flexUserInfo showAll=true}}
+								</div>
+							{{else}}
+								<div class="user-view">
+									{{> userInfo user=flexUserInfo video=true}}
+								</div>
+							{{/if}}
 						{{/if}}
-					{{/if}}
-				</div>
-			{{/if}}
-		</section>
-		<section class="flex-tab-2">
-			<div class="control">
-				<button class="more"><span class="arrow {{arrow2Position}}"></span></button>
-				
-			    <h3>Bot Controlled UI</h3>
-			    <div>
-			    UI is dynamically generated based on DSL message from BOT. DSL also specifies command sent back.
-			    </div>
-			 
-			 </div>
-			
-		
-			{{#if flex2Opened}}
+					</div>
+				{{/if}}
+			</section>
+			<section class="flex-tab-2">
 				<div class="control">
-			<div class="botgen">
-				   <input type="text" id="gistbutton" class="search" placeholder="Gist Id or Url" autocomplete="off" />
-			</div>
-				<div class="botgen">
-					<button class='button'><span> {{_ "Get Gist"}}</span></button>
-			</div>
-				
-					<div class="botgen">
-					<button class='button'><span> {{_ "Show history"}}</span></button>
+					<button class="more" title="{{#if flex2Opened}}{{_ 'Close'}}{{/if}}"><span class="icon-cube"></span></button>
+
+					<h3>Bot Controlled UI</h3>
+					<div>
+					UI is dynamically generated based on DSL message from BOT. DSL also specifies command sent back.
 					</div>
+
+				 </div>
+
+
+				{{#if flex2Opened}}
+					<div class="control">
+				<div class="botgen">
+					   <input type="text" id="gistbutton" class="search" placeholder="Gist Id or Url" autocomplete="off" />
+				</div>
 					<div class="botgen">
-					<button class='button'><span> {{_ "Blame"}}</span></button>
-					</div>
-				
-					
+						<button class='button'><span> {{_ "Get Gist"}}</span></button>
 				</div>
-			{{/if}}
-		
-		
-		</section>
-		<section class="flex-tab-3">
-			<div class="control">
-				<button class="more"><span class="arrow {{arrow3Position}}"></span></button>
-				<form class="search-form" role="form">
-					<div class="input-line search">
-						<!-- {{> inputAutocomplete settings=autocompleteSettingsRoomSearch id="room-search" class="search" placeholder=tQuickSearch autocomplete="off"}} -->
-						<input type="text" id="room-search" class="search" placeholder="{{tQuickSearch}}" autocomplete="off" />
-						<i class="icon-search"></i>
+
+						<div class="botgen">
+						<button class='button'><span> {{_ "Show history"}}</span></button>
+						</div>
+						<div class="botgen">
+						<button class='button'><span> {{_ "Blame"}}</span></button>
+						</div>
+
+
 					</div>
-				</form>
-			</div>
-			{{#if flex3Opened}}
-				<div class="content">
-					{{> CodeMirror id="flyineditor" name="flyineditor" options=editorOptions code=editorCode }}
+				{{/if}}
 
-			<div style="position:relative; padding: 10px 0 0 30px;">
-			<button class='button'><span> {{_ "Save"}}</span></button>
-			<button class='button'><span> {{_ "Commit"}}</span></button>
-			<button class='button'><span> {{_ "Cancel"}}</span></button>
-			</div>
 
+			</section>
+			<section class="flex-tab-3">
+				<div class="control">
+					<button class="more"><span class="icon-code" title="{{#if flex3Opened}}{{_ 'Close'}}{{/if}}"></span></button>
+					<form class="search-form" role="form">
+						<div class="input-line search">
+							<!-- {{> inputAutocomplete settings=autocompleteSettingsRoomSearch id="room-search" class="search" placeholder=tQuickSearch autocomplete="off"}} -->
+							<input type="text" id="room-search" class="search" placeholder="{{tQuickSearch}}" autocomplete="off" />
+							<i class="icon-search"></i>
+						</div>
+					</form>
 				</div>
-			
+				{{#if flex3Opened}}
+					<div class="content">
+						{{> CodeMirror id="flyineditor" name="flyineditor" options=editorOptions code=editorCode }}
 
-			{{/if}}
-		</section>
+						<div class="codeEditor">
+							<button class='button'><span> {{_ "Save"}}</span></button>
+							<button class='button'><span> {{_ "Commit"}}</span></button>
+							<button class='button'><span> {{_ "Cancel"}}</span></button>
+						</div>
+
+					</div>
 
+
+				{{/if}}
+			</section>
+		</div>
 	</div>
 </template>