From 56dc9988e09ce374f9ab1b5488150997e456d11f Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilhermegazzo@gmail.com>
Date: Tue, 5 Sep 2017 17:58:46 -0300
Subject: [PATCH 1/3] fix sidebar rtl

---
 .../client/views/sideNav/livechatFlex.html    |  2 +-
 .../client/imports/components/flex-nav.css    |  4 ++++
 .../client/imports/components/popover.css     |  1 +
 .../imports/components/sidebar/sidebar.css    | 14 +++++++++++--
 .../client/imports/general/rtl.css            |  2 --
 .../client/accountFlex.html                   |  2 +-
 .../rocketchat-ui-admin/client/adminFlex.html |  2 +-
 packages/rocketchat-ui/client/lib/menu.js     | 20 +++++++++++--------
 8 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/packages/rocketchat-livechat/client/views/sideNav/livechatFlex.html b/packages/rocketchat-livechat/client/views/sideNav/livechatFlex.html
index 9a1b64628f9b..e49d9b3d7f16 100644
--- a/packages/rocketchat-livechat/client/views/sideNav/livechatFlex.html
+++ b/packages/rocketchat-livechat/client/views/sideNav/livechatFlex.html
@@ -1,5 +1,5 @@
 <template name="livechatFlex">
-	<aside class="sidebar sidebar--light" role="navigation">
+	<aside class="sidebar-light" role="navigation">
 		<header class="sidebar__header">
 			{{> accountBox lighten=true modifier="--livechat"}}
 			<button class="sidebar-flex__back-button" data-action="back">
diff --git a/packages/rocketchat-theme/client/imports/components/flex-nav.css b/packages/rocketchat-theme/client/imports/components/flex-nav.css
index 9a82dd6102ca..c521fc6a49b2 100644
--- a/packages/rocketchat-theme/client/imports/components/flex-nav.css
+++ b/packages/rocketchat-theme/client/imports/components/flex-nav.css
@@ -16,3 +16,7 @@
 		transform: translate3d(-100%, 0, 0);
 	}
 }
+
+.rtl .flex-nav.animated-hidden {
+	transform: translate3d(200%, 0, 0);
+}
diff --git a/packages/rocketchat-theme/client/imports/components/popover.css b/packages/rocketchat-theme/client/imports/components/popover.css
index 5d8aeb9ff41b..69377805ccb6 100644
--- a/packages/rocketchat-theme/client/imports/components/popover.css
+++ b/packages/rocketchat-theme/client/imports/components/popover.css
@@ -8,6 +8,7 @@
 	--rc-popover-open-mobile: {
 		position: fixed;
 		top: initial;
+		right: 0;
 		bottom: 0;
 		left: 0;
 
diff --git a/packages/rocketchat-theme/client/imports/components/sidebar/sidebar.css b/packages/rocketchat-theme/client/imports/components/sidebar/sidebar.css
index 5675d3c5b9ca..daf1c83bf59c 100644
--- a/packages/rocketchat-theme/client/imports/components/sidebar/sidebar.css
+++ b/packages/rocketchat-theme/client/imports/components/sidebar/sidebar.css
@@ -17,7 +17,8 @@
 
 	background-color: var(--sidebar-background);
 
-	&--light {
+	&-light {
+		width: 100%;
 		position: absolute;
 
 		height: 100%;
@@ -71,7 +72,7 @@
 }
 
 @media (width < 780px) {
-	.sidebar:not(.sidebar--light) {
+	.sidebar:not(.sidebar-light) {
 		user-select: none;
 		transform: translate3d(calc(var(--sidebar-width) * -1), 0, 0);
 		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -79,6 +80,10 @@
 		-webkit-user-drag: none;
 		will-change: transform;
 	}
+	.rtl .sidebar {
+		transform: translate3d(200%, 0, 0);
+	}
+
 }
 
 @media (width <= 400px) {
@@ -86,6 +91,7 @@
 		flex: 0 0 var(--sidebar-small-width);
 
 		width: var(--sidebar-small-width);
+		max-width: var(--sidebar-small-width);
 
 		&__header {
 			height: auto;
@@ -105,4 +111,8 @@
 			transform: translate3d(-100%, 0, 0);
 		}
 	}
+
+	.rtl .sidebar {
+		transform: translate3d(200%, 0, 0);
+	}
 }
diff --git a/packages/rocketchat-theme/client/imports/general/rtl.css b/packages/rocketchat-theme/client/imports/general/rtl.css
index 17b6ee534a9e..34b2d19d48fe 100644
--- a/packages/rocketchat-theme/client/imports/general/rtl.css
+++ b/packages/rocketchat-theme/client/imports/general/rtl.css
@@ -212,7 +212,6 @@
 	}
 
 	& .main-content {
-		right: var(--rooms-box-width);
 		left: 0;
 
 		transition: left 0.25s cubic-bezier(0.5, 0, 0.1, 1);
@@ -771,7 +770,6 @@
 
 	@media (width <= 1100px) {
 		& #rocket-chat .flex-opened {
-			right: var(--rooms-box-width);
 			left: 0;
 
 			& .flex-tab {
diff --git a/packages/rocketchat-ui-account/client/accountFlex.html b/packages/rocketchat-ui-account/client/accountFlex.html
index 64447abf8c74..2571bda5e8b1 100644
--- a/packages/rocketchat-ui-account/client/accountFlex.html
+++ b/packages/rocketchat-ui-account/client/accountFlex.html
@@ -1,5 +1,5 @@
 <template name="accountFlex">
-	<aside class="sidebar sidebar--light" role="navigation">
+	<aside class="sidebar-light" role="navigation">
 		<header class="sidebar__header">
 			{{> accountBox lighten=true modifier="--account" }}
 			<button class="sidebar-flex__back-button" data-action="back">
diff --git a/packages/rocketchat-ui-admin/client/adminFlex.html b/packages/rocketchat-ui-admin/client/adminFlex.html
index 20d359744264..b31088c17210 100644
--- a/packages/rocketchat-ui-admin/client/adminFlex.html
+++ b/packages/rocketchat-ui-admin/client/adminFlex.html
@@ -1,5 +1,5 @@
 <template name="adminFlex">
-	<aside class="sidebar sidebar--light" role="navigation">
+	<aside class="sidebar-light" role="navigation">
 		<header class="sidebar__header">
 			{{> accountBox lighten=true modifier="--admin"}}
 			<button class="sidebar-flex__back-button" data-action="back">
diff --git a/packages/rocketchat-ui/client/lib/menu.js b/packages/rocketchat-ui/client/lib/menu.js
index c99acbb8379a..0876b9e426fb 100644
--- a/packages/rocketchat-ui/client/lib/menu.js
+++ b/packages/rocketchat-ui/client/lib/menu.js
@@ -109,19 +109,23 @@ this.menu = new class extends EventEmitter {
 					this.diff = 0;
 				}
 			}
-			if (map((this.diff / sideNavW), 0, 1, -.1, .8) > 0) {
-				this.sidebar.css('box-shadow', '0 0 15px 1px rgba(0,0,0,.3)');
-				// this.sidebarWrap.css('z-index', '9998');
-				this.translate(this.diff);
-			}
+			// if (map((this.diff / sideNavW), 0, 1, -.1, .8) > 0) {
+			this.sidebar.css('box-shadow', '0 0 15px 1px rgba(0,0,0,.3)');
+			// this.sidebarWrap.css('z-index', '9998');
+			this.translate(this.diff);
+			// }
 		}
 	}
 	translate(diff, width = sideNavW) {
+		if (diff === undefined) {
+			diff = this.isRtl ? -1 * sideNavW : sideNavW;
+		}
 		this.sidebarWrap.css('width', '100%');
 		this.wrapper.css('overflow', 'hidden');
 		this.sidebarWrap.css('background-color', '#000');
-		this.sidebarWrap.css('opacity', map((diff / width), 0, 1, -.1, .8).toFixed(2));
-		this.sidebar.css('transform', `translate3d(${ (diff - sideNavW).toFixed(3) }px, 0 , 0`);
+		this.sidebarWrap.css('opacity', map((Math.abs(diff) / width), 0, 1, -.1, .8).toFixed(2));
+		console.log(sideNavW, diff);
+		this.isRtl ? this.sidebar.css('transform', `translate3d(${ (sideNavW + diff).toFixed(3) }px, 0 , 0)`) : this.sidebar.css('transform', `translate3d(${ (diff - sideNavW).toFixed(3) }px, 0 , 0)`);
 	}
 	touchend() {
 		const [max, min] = [sideNavW * .76, sideNavW * .24];
@@ -173,7 +177,7 @@ this.menu = new class extends EventEmitter {
 		this.on('open', ignore(() => {
 			this.sidebar.css('box-shadow', '0 0 15px 1px rgba(0,0,0,.3)');
 			// this.sidebarWrap.css('z-index', '9998');
-			this.translate(sideNavW);
+			this.translate();
 		}));
 		this.mainContent = $('.main-content');
 

From 0ddf27afdffe1c5e7facea7a849c62ee6d36fc7f Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilhermegazzo@gmail.com>
Date: Wed, 6 Sep 2017 13:54:52 -0300
Subject: [PATCH 2/3] sidebar account and toolbar

---
 .../components/sidebar/sidebar-account.css    | 19 ++++++++++++-------
 .../imports/components/sidebar/sidebar.css    |  5 +++--
 .../imports/components/sidebar/toolbar.css    |  7 ++++++-
 3 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-account.css b/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-account.css
index 6962e7681d18..0070256bc5aa 100644
--- a/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-account.css
+++ b/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-account.css
@@ -1,6 +1,7 @@
 .sidebar__account {
 	display: flex;
 
+	margin: 0 -0.5rem;
 	margin-bottom: 12px;
 	align-items: center;
 
@@ -20,6 +21,7 @@
 
 		width: var(--sidebar-account-thumb-size);
 		height: var(--sidebar-account-thumb-size);
+		margin: 0 0.5rem;
 	}
 
 	&-data {
@@ -30,7 +32,7 @@
 		flex-direction: column;
 		flex: 1;
 
-		margin-left: 1rem;
+		margin: 0 0.5rem;
 	}
 
 	&-username {
@@ -52,9 +54,6 @@
 	}
 
 	&-visual-status {
-		max-width: 124px;
-		margin-right: 8px;
-
 		user-select: none;
 
 		font-size: var(--sidebar-account-status-font-size);
@@ -63,6 +62,8 @@
 	&-status {
 		display: flex;
 
+		margin: 0 -0.25rem;
+
 		color: var(--sidebar-account-status-color);
 
 		align-items: center;
@@ -73,7 +74,7 @@
 
 		width: var(--sidebar-account-status-bullet-size);
 		height: var(--sidebar-account-status-bullet-size);
-		margin: 0.25rem 0.5rem 0.25rem 0;
+		margin: 0.25rem;
 
 		border-radius: var(--sidebar-account-status-bullet-radius);
 
@@ -102,7 +103,6 @@
 
 		position: relative;
 
-		margin-right: -9px;
 		padding: 0;
 
 		cursor: pointer;
@@ -126,6 +126,11 @@
 	}
 }
 
+.rtl .sidebar__account .rc-popover {
+	right: 0;
+	left: initial;
+}
+
 @media (width <= 400px) {
 	.sidebar__account {
 		margin: 0 0 5px;
@@ -147,7 +152,7 @@
 
 		&-username {
 			width: auto;
-			margin: 0  0.65rem;
+			margin: 0 0.65rem;
 
 			font-weight: var(--sidebar-small-account-username-weight);
 		}
diff --git a/packages/rocketchat-theme/client/imports/components/sidebar/sidebar.css b/packages/rocketchat-theme/client/imports/components/sidebar/sidebar.css
index daf1c83bf59c..3d0fb8b6f63b 100644
--- a/packages/rocketchat-theme/client/imports/components/sidebar/sidebar.css
+++ b/packages/rocketchat-theme/client/imports/components/sidebar/sidebar.css
@@ -18,9 +18,10 @@
 	background-color: var(--sidebar-background);
 
 	&-light {
-		width: 100%;
 		position: absolute;
 
+		width: 100%;
+
 		height: 100%;
 
 		background-color: var(--sidebar-background-light);
@@ -80,10 +81,10 @@
 		-webkit-user-drag: none;
 		will-change: transform;
 	}
+
 	.rtl .sidebar {
 		transform: translate3d(200%, 0, 0);
 	}
-
 }
 
 @media (width <= 400px) {
diff --git a/packages/rocketchat-theme/client/imports/components/sidebar/toolbar.css b/packages/rocketchat-theme/client/imports/components/sidebar/toolbar.css
index db7694c823d5..2a4a4e18786a 100644
--- a/packages/rocketchat-theme/client/imports/components/sidebar/toolbar.css
+++ b/packages/rocketchat-theme/client/imports/components/sidebar/toolbar.css
@@ -1,7 +1,10 @@
 .toolbar {
 	&__wrapper {
+
 		display: flex;
 
+		margin: 0 -0.25rem;
+
 		color: var(--toolbar-placeholder-color);
 	}
 
@@ -34,6 +37,8 @@
 	}
 
 	& .rc-input {
+		margin: 0 0.25rem;
+
 		&__wrapper {
 			padding: 0;
 
@@ -77,7 +82,7 @@
 	}
 
 	& .rc-button {
-		margin-left: 0.5rem;
+		margin: 0 0.25rem;
 
 		color: var(--color-gray);
 		border-color: #414852;

From 7062918db8fbe97d98fa0b25fd07838429821f56 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilhermegazzo@gmail.com>
Date: Wed, 13 Sep 2017 16:22:58 -0300
Subject: [PATCH 3/3] rtl sidenav

---
 .../imports/components/sidebar/rooms-list.css | 24 +++++++++++---
 .../components/sidebar/sidebar-account.css    |  2 --
 .../components/sidebar/sidebar-item.css       | 33 ++++++++++++++-----
 .../imports/components/sidebar/sidebar.css    |  9 -----
 .../client/roomList.html                      |  2 +-
 .../client/sidebarItem.html                   |  7 ++--
 6 files changed, 49 insertions(+), 28 deletions(-)

diff --git a/packages/rocketchat-theme/client/imports/components/sidebar/rooms-list.css b/packages/rocketchat-theme/client/imports/components/sidebar/rooms-list.css
index 4fc2a652609c..8459c7071d15 100644
--- a/packages/rocketchat-theme/client/imports/components/sidebar/rooms-list.css
+++ b/packages/rocketchat-theme/client/imports/components/sidebar/rooms-list.css
@@ -1,5 +1,7 @@
+
+
 .rooms-list {
-	overflow-y: auto;
+	overflow-y: scroll;
 
 	height: 100%;
 
@@ -10,12 +12,20 @@
 	}
 
 	&__type {
-		margin-bottom: 0.5rem;
-		margin-left: calc(var(--sidebar-default-padding) - calc(var(--sidebar-default-padding) / 3));
+		display: flex;
+
+		flex-direction: row;
+
+		padding: 0 var(--sidebar-default-padding) 0.5rem var(--sidebar-default-padding);
 
 		color: var(--rooms-list-title-color);
 
 		font-size: var(--rooms-list-title-text-size);
+		align-items: center;
+
+		&-text {
+			margin: 0 8px;
+		}
 	}
 
 	&__empty-room {
@@ -27,7 +37,7 @@
 	}
 
 	& .badge {
-		margin-left: 8px;
+		margin: 0 4px;
 	}
 
 	&__toolbar-search {
@@ -47,12 +57,18 @@
 }
 
 @media (width <= 400px) {
+	padding: 0 calc(var(--sidebar-small-default-padding) - 4px);
+
 	.rooms-list {
 		&__type,
 		&__empty-room {
 			margin-left: 0;
 		}
 
+		&__type {
+			padding: 0 calc(var(--sidebar-small-default-padding) - 4px) 0.5rem calc(var(--sidebar-small-default-padding) - 4px);
+		}
+
 		&__toolbar-search {
 			bottom: 0;
 		}
diff --git a/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-account.css b/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-account.css
index 0070256bc5aa..fec2f0f085d8 100644
--- a/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-account.css
+++ b/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-account.css
@@ -133,8 +133,6 @@
 
 @media (width <= 400px) {
 	.sidebar__account {
-		margin: 0 0 5px;
-
 		&-thumb {
 
 			flex: 0 0 var(--sidebar-small-account-thumb-size);
diff --git a/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-item.css b/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-item.css
index 0ce2156fd2ec..da562bca163d 100644
--- a/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-item.css
+++ b/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-item.css
@@ -1,3 +1,7 @@
+.rtl .sidebar-item {
+	margin: 0 8px 0 0;
+}
+
 .sidebar-item {
 	position: relative;
 
@@ -5,7 +9,9 @@
 
 	height: var(--sidebar-item-height);
 
-	padding-left: calc(var(--sidebar-default-padding) - calc(var(--sidebar-default-padding) / 3));
+	margin: 0 0 0 8px;
+
+	padding: 0 calc(var(--sidebar-default-padding) - 8px);
 
 	cursor: pointer;
 
@@ -39,10 +45,11 @@
 		overflow: hidden;
 		flex: 1;
 
+		margin: 0 -4px;
+
 		color: var(--sidebar-item-text-color);
 
 		font-size: 1rem;
-		line-height: var(--sidebar-item-height);
 		align-items: center;
 
 		&--active {
@@ -55,8 +62,6 @@
 	}
 
 	&__icon {
-		margin: 0 auto;
-
 		font-size: 1.25rem;
 		fill: currentColor;
 	}
@@ -96,12 +101,16 @@
 		display: flex;
 		flex: 0 0 var(--sidebar-item-thumb-size);
 
-		margin-right: 6px;
+		margin: 0 4px;
+
 		align-items: center;
 	}
 
 	&__name {
 		overflow: hidden;
+		flex: 1;
+
+		margin: 0 4px;
 
 		white-space: nowrap;
 		text-overflow: ellipsis;
@@ -110,13 +119,21 @@
 	}
 }
 
+.rtl .sidebar-item__user-status {
+	right: 4px;
+	left: initial;
+}
+
 @media (width <= 400px) {
 	.sidebar-item {
-		padding-left: 0;
+		padding: 0 calc(var(--sidebar-small-default-padding) - 8px);
 
 		&__user-status {
-			right: calc(100% + var(--sidebar-small-item-user-status-size));
-			left: auto;
+			left: 0;
 		}
 	}
+
+	.rtl .sidebar-item__user-status {
+		right: 0;
+	}
 }
diff --git a/packages/rocketchat-theme/client/imports/components/sidebar/sidebar.css b/packages/rocketchat-theme/client/imports/components/sidebar/sidebar.css
index 3d0fb8b6f63b..6506e6c50a4a 100644
--- a/packages/rocketchat-theme/client/imports/components/sidebar/sidebar.css
+++ b/packages/rocketchat-theme/client/imports/components/sidebar/sidebar.css
@@ -66,10 +66,6 @@
 	& .unread-rooms {
 		display: none;
 	}
-
-	& .rooms-list {
-		padding: 0 calc(var(--sidebar-default-padding) / 3);
-	}
 }
 
 @media (width < 780px) {
@@ -99,11 +95,6 @@
 			padding: var(--sidebar-small-default-padding);
 		}
 
-		& .unread-rooms,
-		& .rooms-list {
-			padding: 0 var(--sidebar-small-default-padding)  var(--sidebar-small-default-padding)  var(--sidebar-small-default-padding);
-		}
-
 		&__footer {
 			display: none;
 		}
diff --git a/packages/rocketchat-ui-sidenav/client/roomList.html b/packages/rocketchat-ui-sidenav/client/roomList.html
index bcb37d1b7aa0..a7c4a21a7a6a 100644
--- a/packages/rocketchat-ui-sidenav/client/roomList.html
+++ b/packages/rocketchat-ui-sidenav/client/roomList.html
@@ -5,7 +5,7 @@
 		{{#with rooms}}
 			{{#if shouldAppear .. .}}
 					<h3 class="rooms-list__type">
-						{{_ ../label}}
+						<div class="rooms-list__type-text">{{_ ../label}}</div>
 						{{#with count}}
 							{{#if .}}
 								<span class="badge">{{.}}</span>
diff --git a/packages/rocketchat-ui-sidenav/client/sidebarItem.html b/packages/rocketchat-ui-sidenav/client/sidebarItem.html
index 1229ece43d3c..4d62bdaec76a 100644
--- a/packages/rocketchat-ui-sidenav/client/sidebarItem.html
+++ b/packages/rocketchat-ui-sidenav/client/sidebarItem.html
@@ -16,10 +16,9 @@
 				{{/if}}
 			</div>
 			<div class='sidebar-item__name {{archivedClass}}'>{{name}}</div>
-		</a>
-
-		{{#if unread}}
+			{{#if unread}}
 			<span class="badge badge--unread">{{unread}}</span>
-		{{/if}}
+			{{/if}}
+		</a>
 	</li>
 </template>