From 62afae5e2d410a7724a2c0cac44e4b8d0ca46613 Mon Sep 17 00:00:00 2001
From: Fahad Alduraibi <fadnix@gmail.com>
Date: Thu, 3 Dec 2015 18:51:15 -0500
Subject: [PATCH] Better RTL support

- Some bug fixes
- Additional support
---
 .../assets/stylesheets/rtl.less               | 356 +++++++++++++++---
 1 file changed, 296 insertions(+), 60 deletions(-)

diff --git a/packages/rocketchat-theme/assets/stylesheets/rtl.less b/packages/rocketchat-theme/assets/stylesheets/rtl.less
index 2d21464f1c8d..0c8af2e45677 100644
--- a/packages/rocketchat-theme/assets/stylesheets/rtl.less
+++ b/packages/rocketchat-theme/assets/stylesheets/rtl.less
@@ -76,9 +76,6 @@
 		.arrow {
 			transform: rotateY(180deg);
 		}
-		.flex-nav {
-			.right(0px);
-		}
 		.flex-nav.animated-hidden {
 			transform: translateX(100%);
 		}
@@ -114,6 +111,7 @@
 			.padding-left(10px);
 		}
 		.flex-nav {
+			.right(0px);
 			> section {
 				.right(0px);
 			}
@@ -143,6 +141,23 @@
 				}
 			}
 		}
+		.search-form {
+			.search {
+				.padding-right(25px);
+			}
+			.margin-left(20px);
+		}
+		h3 {
+			.padding-right(10px);
+			&.add-room {
+				i {
+					.left(6px);
+				}
+			}
+		}
+		.unread {
+			.left(6px);
+		}
 	}
 
 	.side-nav:before {
@@ -152,51 +167,51 @@
 	.main-content {
 		left: 0;
 		right: @rooms-box-width;
-		margin-right: unset;
-		margin-left: 40px;
+		.margin-left(40px);
 		&.flex-opened {
 			left: @flex-tab-width;
 			.flex-tab {
-				right: unset;
-				left: 40px
+				.left(40px);
 			}
 		}
 	}
 
 	.messages-box {
-		margin: 60px 0px 20px 0px;
-		.message {
-			padding-right: 50px;
-			padding-left: 50px;
-			margin: 12px 20px 5px 20px;
-			.thumb {
+		margin: 60px 0px 0px 20px;
+		.new-message {
+			.right(50%);
+		}
+	}
+
+	.container-bars {
+		.upload-progress {
+			.upload-progress-progress {
 				.right(0px);
 			}
-		}
-		.message.new-day {
-			margin-top: 60px;
-		}
-		.message.sequential {
-			.info {
-				.right(-15px);
-				.edited, .time {
+			.upload-progress-text {
+				> a {
 					float: left;
 				}
-				.edit-message {
-					float: right;
-					.margin-right(5px);
-				}
-			}
-			.message.with-thumb .time {
-				.right(4px);
 			}
-			.time-single {
-				.right(-15px);
+		}
+		.unread-bar {
+			> a {
+				float: left;
 			}
 		}
 	}
 
 	.messages-container {
+		.right(0);
+		.edit-room-title {
+			.margin-right(4px);
+		}
+		.wrapper {
+			.right(0);
+		}
+		.footer {
+			.right(0);
+		}
 		.message-form {
 			> div {
 				> .file {
@@ -238,16 +253,14 @@
 	}
 
 	.flex-tab-bar {
-		left: 0;
-		right: unset;
+		.left(0);
 		border-right: 1px solid #eaeaea;
 		border-left: none;
 		z-index: 13;
 
 		.tab-button {
 			&.active {
-				margin-right: -1px;
-				margin-left: unset;
+				.margin-right(-1px);
 				border-left: 3px solid #ff0000;
 				border-right: unset;
 			}
@@ -257,8 +270,7 @@
 	.flex-tab {
 		border-left: unset;
 		border-right: 1px solid;
-		right: unset;
-		left: 0;
+		.left(0);
 		.transform(translateX(-100%));
 		.control {
 			text-align: right;
@@ -267,18 +279,69 @@
 			> form {
 				float: right;
 			}
+			.more {
+				.right(0);
+				.transform(translateX(27px));
+			}
+			.search-form {
+				padding: 0 0 0 4px;
+				width: 100%;
+				.icon-plus {
+					.right(4px);
+				}
+			}
+			.info-tabs {
+				text-align: left;
+				.left(20px);
+			}
+		}
+	}
+	
+	.flex-opened {
+		.flex-tab {
+			.control {
+				.more {
+					.transform(translateX(0));
+				}
+			}
 		}
 	}
 
 	.input-line {
 		&.search {
 			.octicon {
-				left: unset;
-				right: 10px;
+				.right(10px);
+			}
+			.icon-spin4 {
+				.left(5px);
+			}
+			.icon-search {
+				.right(2px);
 			}
 			input {
-				padding-left: unset;
 				padding-right: 20px;
+				padding-left: 8px;
+				text-align: right;
+			}
+		}
+		&.double-col {
+			> label {
+				float: right;
+				.padding-left(20px);
+				text-align: left;
+				padding: 10px 0 10px 20px;
+			}
+			> div {
+				float: right;
+				label {
+					.margin-left(4px);
+					&:nth-last-child(1) {
+						.margin-left(0);
+					}
+					input {
+						.margin-left(4px);
+					}
+				}
 			}
 		}
 	}
@@ -286,8 +349,7 @@
 	.user-image {
 		.avatar {
 			&:after {
-				left: unset;
-				right: -12px;
+				.right(-12px);
 			}
 		}
 	}
@@ -299,8 +361,7 @@
 		}
 		p {
 			float: right;
-			padding-right: 10px;
-			padding-left: unset;
+			.padding-right(10px);
 		}
 	}
 
@@ -309,15 +370,13 @@
 			float: right;
 		}
 		nav {
-			margin-left: unset;
-			margin-right: -4px;
+			.margin-right(-4px);
 			.back {
 				float: left;
 			}
 		}
 		.info {
-			margin-left: unset;
-			margin-right: 120px;
+			.margin-right(120px);
 		}
 		.stats {
 			li {
@@ -363,30 +422,207 @@
 	}
 
 	.burger {
-		margin-right: 7px;
-		margin-left: unset;
-		right: 0px;
-		left: unset;
+		.margin-right(7px);
+		.right(0px);
 		.unread-burger-alert {
-			left: 4px;
-			right: unset;
+			.left(4px);
+		}
+	}
+
+	.arrow {
+		&:before,
+		&:after {
+			.calc(right,~"50% - 5px");
+		}
+		&:before {
+			.transform(rotate(135deg) translateX(4px));
+		}
+		&:after {
+			.transform(rotate(-135deg) translateX(4px));
+		}
+		&.left {
+			&:before {
+				.transform(rotate(-45deg) translateY(-4px));
+			}
+			&:after {
+				.transform(rotate(45deg) translateY(4px));
+			}
+		}
+		&.top {
+			&:before {
+				.transform(rotate(45deg) translateX(-2px) translateY(2px));
+			}
+			&:after {
+				.transform(rotate(-45deg) translateX(2px) translateY(2px));
+			}
+		}
+		&.bottom {
+			&:before {
+				.transform(rotate(-45deg) translateX(-2px) translateY(-2px));
+			}
+			&:after {
+				.transform(rotate(45deg) translateX(2px) translateY(-2px));
+			}
+		}
+		&.close {
+			&:before {
+				.transform(rotate(-45deg));
+			}
+			&:after {
+				.transform(rotate(45deg));
+			}
+		}
+	}
+
+	.message {
+		padding: 18px 70px 4px 20px;
+		&.new-day {
+			margin-top: 60px;
+			&:before {
+				.right(0);
+				.calc(right,~"50% - 70px");
+			}
+			&:after {
+				.right(0);
+				.margin-right(2%);
+			}
+		}
+		.message-dropdown {
+			.right(-2px);
+			ul {
+				li {
+					&:first-child {
+						padding-right: 6px;
+						padding-left: 8px;
+						border-left: 1px solid #eee;
+						border-right: unset;
+					}
+					&:last-child {
+						padding-left: 13px;
+						padding-right: 8px;
+					}
+				}
+			}
+		}
+		.user {
+			margin-left: 5px;
+			margin-right: 0;
+		}
+		.thumb {
+			.right(20px);
+		}
+		.info {
+			.edited {
+				border-right: 1px dotted #BAB8B8;
+				border-left: unset;
+				.padding-right(3px);
+				.margin-right(3px);
+			}
+		}
+		.private {
+			.margin-right(10px); //
+		}
+		&.sequential {
+			padding-top: 4px;
+			.info {
+				text-align: left;
+				.right(5px);
+				.edited {
+					border-right: 0;
+					.margin-right(0);
+					.padding-right(0);
+				}
+				.message-action {
+					float: right; //
+					.margin-right(1px); //
+				}
+			}
+		}
+	}
+
+	blockquote {
+		.padding-right(10px);
+		&:before {
+			.right(0px);
+		}
+	}
+
+	.first-unread {
+		.body {
+			&::before {
+				right: 20px;
+				left: 0px;
+			}
+			&::after {
+				.left(0px);
+			}
+		}
+	}
+
+	.ticks-bar {
+		.left(2px);
+	}
+
+	.fixed-title {
+		padding: 0 20px 0 10px;
+		.right(0);
+	}
+
+	.list-view {
+		> .status {
+			.see-all {
+				float: left;
+			}
+		}
+		&.uploaded-files-list {
+			i {
+				float: right;
+				.margin-left(10px);
+			}
+		}
+	}
+
+	.page-list {
+		.list {
+			a {
+				.info {
+					ul {
+						.margin-right(3px);
+					}
+				}
+			}
+			.user-image {
+				float: left;
+				.margin-right(12px);
+			}
+			table {
+				thead {
+					th {
+						text-align: right;
+					}
+				}
+			}
+		}
+	}
+
+	.statistics-table {
+		th, td {
+			text-align: right;
 		}
 	}
 
+	/* Overridding classes from swipebox.min.css */
 	#swipebox-close {
-		left: 0;
-		right: unset;
+		.left(0);
 	}
-	
 	@media screen and (min-width:800px) {
 		#swipebox-close {
-			left: 10px;
-			right: unset;
+			.left(10px);
 		}
 	}
 
-
-	/* Overridding the icons code to suit RTL languages */
+	/* Overridding the icons Unicode to suit RTL languages
+	 * from _octicons.less */
 	.octicon-chevron-right:before { content: '\f0a4'}
 	.icon-angle-right:before { content: '\e914'; }
 }