[FIX] RTL

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">

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);
+}

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;
 

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;
 

packages/rocketchat-theme/client/imports/components/sidebar/sidebar-account.css

@@ -29,6 +29,7 @@
 
 		width: var(--sidebar-account-thumb-size);
 		height: var(--sidebar-account-thumb-size);
+		margin: 0 0.5rem;
 	}
 
 	&-data {
@@ -39,7 +40,7 @@
 		flex-direction: column;
 		flex: 1;
 
-		margin-left: 1rem;
+		margin: 0 0.5rem;
 	}
 
 	&-username {
@@ -61,6 +62,7 @@
 
 	&-visual-status {
 		max-width: 124px;
+		margin-right: 8px;
 
 		user-select: none;
 
@@ -70,6 +72,8 @@
 	&-status {
 		display: flex;
 
+		margin: 0 -0.25rem;
+
 		color: var(--sidebar-account-status-color);
 
 		align-items: center;
@@ -80,7 +84,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);
 
@@ -109,7 +113,6 @@
 
 		position: relative;
 
-		margin-right: -9px;
 		padding: 0;
 
 		cursor: pointer;
@@ -133,10 +136,14 @@
 	}
 }
 
+.rtl .sidebar__account .rc-popover {
+	right: 0;
+	left: initial;
+}
+
 @media (width <= 400px) {
 	.sidebar__account {
 		margin: 0 0 5px;
-		padding: 5px var(--sidebar-small-default-padding);
 
 		&-thumb {
 
@@ -155,7 +162,7 @@
 
 		&-username {
 			width: auto;
-			margin: 0  0.65rem;
+			margin: 0 0.65rem;
 
 			font-weight: var(--sidebar-small-account-username-weight);
 		}

packages/rocketchat-theme/client/imports/components/sidebar/sidebar-item.css

@@ -1,11 +1,17 @@
+.rtl .sidebar-item {
+	margin: 0 8px 0 0;
+}
+
 .sidebar-item {
 	position: relative;
 
 	display: flex;
 
 	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;
 	}
@@ -100,12 +105,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;
@@ -114,17 +123,25 @@
 	}
 }
 
+.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);
 
 		& .badge {
 			margin: 0 0 0 3px;
 		}
 
 		&__user-status {
-			right: calc(100% + var(--sidebar-small-item-user-status-size));
-			left: auto;
+			left: 0;
 		}
 	}
+
+	.rtl .sidebar-item__user-status {
+		right: 0;
+	}
 }

packages/rocketchat-theme/client/imports/components/sidebar/sidebar.css

@@ -17,9 +17,11 @@
 
 	background-color: var(--sidebar-background);
 
-	&--light {
+	&-light {
 		position: absolute;
 
+		width: 100%;
+
 		height: 100%;
 
 		background-color: var(--sidebar-background-light);
@@ -60,33 +62,29 @@
 	& .unread-rooms {
 		display: none;
 	}
-
-	& .rooms-list {
-		padding: 0 calc(var(--sidebar-default-padding) / 3);
-	}
 }
 
 @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);
 		touch-action: pan-y;
 		-webkit-user-drag: none;
 		will-change: transform;
 	}
+
+	.rtl .sidebar {
+		transform: translate3d(200%, 0, 0);
+	}
 }
 
 @media (width <= 400px) {
 	.sidebar {
 		flex: 0 0 var(--sidebar-small-width);
 
 		width: var(--sidebar-small-width);
-
-		& .unread-rooms,
-		& .rooms-list {
-			padding: 0 var(--sidebar-small-default-padding)  var(--sidebar-small-default-padding)  var(--sidebar-small-default-padding);
-		}
+		max-width: var(--sidebar-small-width);
 
 		&__footer {
 			display: none;
@@ -96,4 +94,8 @@
 			transform: translate3d(-100%, 0, 0);
 		}
 	}
+
+	.rtl .sidebar {
+		transform: translate3d(200%, 0, 0);
+	}
 }

packages/rocketchat-theme/client/imports/components/sidebar/toolbar.css

@@ -2,8 +2,11 @@
 	padding: 0 var(--sidebar-default-padding) var(--sidebar-default-padding);
 
 	&__wrapper {
+
 		display: flex;
 
+		margin: 0 -0.25rem;
+
 		color: var(--toolbar-placeholder-color);
 	}
 
@@ -42,6 +45,8 @@
 	}
 
 	& .rc-input {
+		margin: 0 0.25rem;
+
 		&__wrapper {
 			padding: 0;
 
@@ -85,7 +90,7 @@
 	}
 
 	& .rc-button {
-		margin-left: 0.5rem;
+		margin: 0 0.25rem;
 
 		color: var(--color-gray);
 		border-color: #414852;

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 {

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">

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">

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>

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>