From 924a11e7712664ab0d62cc0c561f13495d1334e2 Mon Sep 17 00:00:00 2001
From: Shahar Porat <shahar3012@outlook.com>
Date: Fri, 12 Jun 2015 00:45:49 +0300
Subject: [PATCH 1/3] RTL Support first submit - WIP

This is a work in progress of Rocket.Chat RTL Support. The work is not
finished. I didn't know where to put the .rtl class in the html file, so
I use the addClass method in layout.coffee. Please write down suggestion
and don't accept this pull request yet, until final version.
---
 client/stylesheets/rtl.less                | 90 ++++++++++++++++++++++
 client/views/app/chatMessageDashboard.html |  2 +-
 client/views/app/chatWindowDashboard.html  |  4 +-
 client/views/app/layout.coffee             |  2 +-
 4 files changed, 94 insertions(+), 4 deletions(-)
 create mode 100644 client/stylesheets/rtl.less

diff --git a/client/stylesheets/rtl.less b/client/stylesheets/rtl.less
new file mode 100644
index 0000000000000..a569cbd3149bb
--- /dev/null
+++ b/client/stylesheets/rtl.less
@@ -0,0 +1,90 @@
+// Mix-ins
+.right(@right) {
+  right: @right;
+  left: auto;
+}
+
+.left (@left) {
+  left: @left;
+  right: auto;
+}
+
+.margin-right(@margin-right) {
+  margin-right: @margin-right;
+  margin-left: auto;
+}
+
+.margin-left(@margin-left) {
+  margin-left: @margin-left;
+  margin-right: auto;
+}
+
+.padding-right(@padding-right) {
+  padding-right: @padding-right;
+  padding-left: 0px;
+}
+
+.padding-left(@padding-left) {
+  padding-left: @padding-left;
+  padding-right: 0px;
+}
+
+
+.rtl
+{
+
+  direction: rtl;
+
+  .side-nav {
+    .right(0px);
+  }
+
+  .main-content {
+    .margin-right(260px);
+  }
+
+  .account-box .options span.soon {
+    .left(-30px);
+  }
+
+  .messages-box {
+    .message {
+       .padding-right(50px);
+     }
+
+     .thumb {
+       .right(0px);
+     }
+
+     .message.with-thumb .time {
+       .right(4px);
+     }
+
+      .time-single {
+        .right(-15px);
+     }
+  }
+
+  .messages-container {
+    .message-form {
+      textarea {
+          padding-left: 38px;
+          padding-right: 8px;
+      }
+
+     .icon-paper-plane {
+      .left(10px);
+      transform: rotateY(180deg);
+      }
+    }
+  }
+
+  q {
+    padding-right: 10px;
+    padding-left: 0px;
+  }
+  q:before {
+    right: 50px;
+    left: auto;
+  }
+}
diff --git a/client/views/app/chatMessageDashboard.html b/client/views/app/chatMessageDashboard.html
index 58262053cf329..b785ac9752139 100644
--- a/client/views/app/chatMessageDashboard.html
+++ b/client/views/app/chatMessageDashboard.html
@@ -41,7 +41,7 @@
 						{{/if}}
 					</span>
 					{{/if}}
-					<div>
+					<div dir="auto">
 						{{{renderMessage}}}
 					</div>
 				{{/if}}
diff --git a/client/views/app/chatWindowDashboard.html b/client/views/app/chatWindowDashboard.html
index 2f6ab4d98002f..fe642dd3b903d 100644
--- a/client/views/app/chatWindowDashboard.html
+++ b/client/views/app/chatWindowDashboard.html
@@ -58,7 +58,7 @@ <h2>
 			<form class="message-form" method="post" action="/">
 				<div>
 					{{> messagePopupConfig getPupupConfig}}
-					<textarea name="msg" class="input-message"></textarea>
+					<textarea dir="auto" name="msg" class="input-message"></textarea>
 					<i class="icon-paper-plane" title="{{_ "chatWindowDashboard.Send_Message"}}"></i>
 				</div>
 				<div class="users-typing">
@@ -79,7 +79,7 @@ <h2>
 						{{/if}}
 					{{/with}}
 				</div>
-				<div class="formatting-tips" aria-hidden="true">
+				<div class="formatting-tips" aria-hidden="true" dir="auto">
 					<b>*bold*</b>
 					<i>_italics_</i>
 					~<strike>strike</strike>~
diff --git a/client/views/app/layout.coffee b/client/views/app/layout.coffee
index 553ea951a4790..6f4ea5b4eccaf 100644
--- a/client/views/app/layout.coffee
+++ b/client/views/app/layout.coffee
@@ -3,4 +3,4 @@ Template.appLayout.helpers
 		return 'flex-opened' if Session.equals('flexOpened', true)
 
 Template.appLayout.rendered = ->
-	$('html').addClass("noscroll").removeClass "scroll"
+	$('html').addClass("noscroll").addClass("rtl").removeClass "scroll"

From 73950b63c44ca5d20a31e98d1e4390c3981134c9 Mon Sep 17 00:00:00 2001
From: Shahar Porat <shahar3012@outlook.com>
Date: Fri, 12 Jun 2015 00:50:17 +0300
Subject: [PATCH 2/3] Updating mixing

---
 client/stylesheets/rtl.less | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/client/stylesheets/rtl.less b/client/stylesheets/rtl.less
index a569cbd3149bb..719d303349a46 100644
--- a/client/stylesheets/rtl.less
+++ b/client/stylesheets/rtl.less
@@ -80,11 +80,9 @@
   }
 
   q {
-    padding-right: 10px;
-    padding-left: 0px;
+    .padding-right(10px);
   }
   q:before {
-    right: 50px;
-    left: auto;
+    .right(50px);
   }
 }

From 7bdb3220f57339c46d67e963b269bf600f6cdbe0 Mon Sep 17 00:00:00 2001
From: Shahar Porat <shahar3012@outlook.com>
Date: Fri, 12 Jun 2015 19:41:12 +0300
Subject: [PATCH 3/3] RTL Support second submit - WIP

This is a work in progress of the RTL Support. It includes several
update to the input and textarea elements that aren't yet supported both
RTL and LRT writing (using `dir="auto"`).
---
 client/stylesheets/rtl.less                   | 205 +++++++++++++++---
 client/views/app/chatMessageDashboard.html    |   2 +-
 client/views/app/chatWindowDashboard.html     |   2 +-
 client/views/app/privateHistory.html          |   2 +-
 .../views/app/sideNav/createChannelFlex.html  |   2 +-
 .../views/app/sideNav/privateGroupsFlex.html  |   4 +-
 client/views/login/form.html                  |   2 +-
 client/views/username/prompt.html             |   2 +-
 8 files changed, 179 insertions(+), 42 deletions(-)

diff --git a/client/stylesheets/rtl.less b/client/stylesheets/rtl.less
index 719d303349a46..8e429821b081a 100644
--- a/client/stylesheets/rtl.less
+++ b/client/stylesheets/rtl.less
@@ -1,50 +1,184 @@
-// Mix-ins
-.right(@right) {
-  right: @right;
-  left: auto;
-}
-
-.left (@left) {
-  left: @left;
-  right: auto;
-}
-
-.margin-right(@margin-right) {
-  margin-right: @margin-right;
-  margin-left: auto;
-}
+.rtl
+{
+  direction: rtl;
 
-.margin-left(@margin-left) {
-  margin-left: @margin-left;
-  margin-right: auto;
-}
+  // Mix-ins
+  .right(@right) {
+    right: @right;
+    left: auto;
+  }
 
-.padding-right(@padding-right) {
-  padding-right: @padding-right;
-  padding-left: 0px;
-}
+  .left (@left) {
+    left: @left;
+    right: auto;
+  }
 
-.padding-left(@padding-left) {
-  padding-left: @padding-left;
-  padding-right: 0px;
-}
+  .margin-right(@margin-right) {
+    margin-right: @margin-right;
+    margin-left: auto;
+  }
 
+  .margin-left(@margin-left) {
+    margin-left: @margin-left;
+    margin-right: auto;
+  }
 
-.rtl
-{
+  .padding-right(@padding-right) {
+    padding-right: @padding-right;
+    padding-left: 0px;
+  }
 
-  direction: rtl;
+  .padding-left(@padding-left) {
+    padding-left: @padding-left;
+    padding-right: 0px;
+  }
 
   .side-nav {
     .right(0px);
+
+    .header {
+      .right(0px);
+
+      .account-box {
+        .info {
+          padding: 10px 18px 10px 0px;
+
+          .thumb {
+            float: right;
+          }
+          .thumb:after {
+            .right(-14px);
+          }
+
+          .data {
+            float: right;
+            padding: 0 10px 0 25px;
+
+            .wrp {
+              text-align: right;
+            }
+          }
+        }
+
+        .options {
+          .right(0px);
+
+          .status {
+            .padding-right(38px);
+          }
+
+          span.soon {
+           .left(-30px);
+         }
+
+          .status:after {
+            .right(18px);
+          }
+        }
+        .options._hidden {
+          transform: translateX(100%);
+        }
+
+      }
+    }
+
+    > .arrow {
+      .left(8px);
+    }
+
+    .arrow {
+      transform: rotateY(180deg);
+    }
+
+    .flex-nav {
+      .right(0px);
+    }
+
+    .flex-nav.hidden {
+      transform: translateX(100%);
+    }
+
+    .footer {
+      .right(0px);
+    }
+
+    .rooms-list {
+      > .wrapper {
+        direction: rtl;
+        .padding-right(8px);
+
+        h3.add-room
+        {
+          i {
+            .left(6px);
+          }
+        }
+
+        h3 {
+          .padding-right(10px);
+        }
+
+        ul a {
+          padding: 6px 6px 7px 25px;
+        }
+      }
+    }
+
+    .more {
+      padding: 4px 10px 4px 0px;
+    }
+    .empty {
+      .padding-right(10px);
+    }
+
+    ul .opt {
+      .left(0px);
+    }
+
+    .flex-nav {
+      > section {
+        .right(0px);
+      }
+
+      header {
+        .right(0px);
+        .padding-right(15px);
+
+        > div {
+          text-align: right;
+        }
+      }
+
+      .content {
+        > .wrapper {
+          direction: rtl;
+        }
+      }
+      .input-submit {
+        margin: 35px -4px 0 0px;
+      }
+
+      .button:before {
+        .right(0px);
+      }
+
+      footer {
+        .right(0px);
+        text-align: right;
+
+        > div {
+          text-align: right;
+        }
+      }
+    }
   }
 
-  .main-content {
-    .margin-right(260px);
+  .side-nav:before {
+    .right(8px);
   }
 
-  .account-box .options span.soon {
-    .left(-30px);
+  .main-content {
+    .margin-right(260px);
   }
 
   .messages-box {
@@ -72,6 +206,9 @@
           padding-right: 8px;
       }
 
+     > .formatting-tips {
+       float: left;
+     }
      .icon-paper-plane {
       .left(10px);
       transform: rotateY(180deg);
diff --git a/client/views/app/chatMessageDashboard.html b/client/views/app/chatMessageDashboard.html
index b785ac9752139..c29ed51a1ae39 100644
--- a/client/views/app/chatMessageDashboard.html
+++ b/client/views/app/chatMessageDashboard.html
@@ -25,7 +25,7 @@
 				{{#if isEditing}}
 					<div class="input-message-editing-container">
 						{{> messagePopupConfig getPupupConfig}}
-						<textarea class="input-message-editing">{{msg}}</textarea>
+						<textarea class="input-message-editing" dir="auto">{{msg}}</textarea>
 					</div>
 				{{else}}
 					{{#if ../single}}
diff --git a/client/views/app/chatWindowDashboard.html b/client/views/app/chatWindowDashboard.html
index fe642dd3b903d..7a4e799b26212 100644
--- a/client/views/app/chatWindowDashboard.html
+++ b/client/views/app/chatWindowDashboard.html
@@ -13,7 +13,7 @@ <h2>
 					<i class="{{roomTypeIcon}}"></i>
 					<span class="room-title {{editingTitle}}">{{roomName}}</span>
 					{{#if canEditName}}
-					<input type="text" id="room-title-field" class="{{showEditingTitle}}" value="{{roomNameEdit}}">
+					<input type="text" id="room-title-field" class="{{showEditingTitle}}" value="{{roomNameEdit}}" dir="auto">
 					<a href="#edit" class="edit-room-title"><i class="icon-pencil"></i></a>
 					{{/if}}
 				</h2>
diff --git a/client/views/app/privateHistory.html b/client/views/app/privateHistory.html
index 55a7c8fd7c98d..901274c54c247 100644
--- a/client/views/app/privateHistory.html
+++ b/client/views/app/privateHistory.html
@@ -10,7 +10,7 @@ <h2>
 		<div class="content">
 			<form class="search-form" role="form">
 				<div class="input-line search">
-					<input type="text" id="history-filter" placeholder="{{_ "general.Search"}}">
+					<input type="text" id="history-filter" placeholder="{{_ "general.Search"}}" dir="auto">
 					<i class="icon-search"></i>
 				</div>
 			</form>
diff --git a/client/views/app/sideNav/createChannelFlex.html b/client/views/app/sideNav/createChannelFlex.html
index 50128bce81d58..8dbdb66af91ab 100644
--- a/client/views/app/sideNav/createChannelFlex.html
+++ b/client/views/app/sideNav/createChannelFlex.html
@@ -9,7 +9,7 @@ <h4>{{_ "chatRooms.Channels"}}</h4>
 			<h4>{{_ "chatRooms.Create_new_channel" }}</h4>
 			<div class="input-line">
 				<label for="channel-name">{{_ "chatRooms.Name"}}</label>
-				<input type="text" id="channel-name" class="required">
+				<input type="text" id="channel-name" class="required" dir="auto">
 			</div>
 			<div class="input-line">
 				<label for="channel-members">Add Members</label>
diff --git a/client/views/app/sideNav/privateGroupsFlex.html b/client/views/app/sideNav/privateGroupsFlex.html
index fe9a16817fc74..0cd39bc2d2d68 100644
--- a/client/views/app/sideNav/privateGroupsFlex.html
+++ b/client/views/app/sideNav/privateGroupsFlex.html
@@ -9,7 +9,7 @@ <h4>{{_ "chatRooms.Private_Groups"}}</h4>
 			<h4>Create a new private group</h4>
 			<div class="input-line">
 				<label for="pvt-group-name">{{_ "chatRooms.Name"}}</label>
-				<input type="text" id="pvt-group-name" class="required">
+				<input type="text" id="pvt-group-name" class="required" dir="auto">
 			</div>
 			<div class="input-line">
 				<label for="pvt-group-members">{{_ "chatRooms.Members" }}</label>
@@ -34,4 +34,4 @@ <h4>Create a new private group</h4>
 			</div>
 		</div>
 	</div>
-</template>
\ No newline at end of file
+</template>
diff --git a/client/views/login/form.html b/client/views/login/form.html
index 3f4643f4f93cf..9f729cb9a5842 100644
--- a/client/views/login/form.html
+++ b/client/views/login/form.html
@@ -10,7 +10,7 @@ <h2>{{_ "login.Enter_info"}}</h2>
 		{{/if}}
 		<div class="fields">
 			<div class='input-text active {{showName}}'>
-				<input type="text" name='name' placeholder='{{_ "general.Name"}}' />
+				<input type="text" name='name' placeholder='{{_ "general.Name"}}' dir="auto"/>
 			</div>
 			<div class='input-text active {{showEmailOrUsername}}'>
 				<input type="text" name='emailOrUsername' placeholder='{{_ "login.Email_or_username"}}' />
diff --git a/client/views/username/prompt.html b/client/views/username/prompt.html
index 7ba513529e6a6..ba81c004f7b7c 100644
--- a/client/views/username/prompt.html
+++ b/client/views/username/prompt.html
@@ -23,7 +23,7 @@ <h2>{{_ "usernameRegistration.Username_title"}}</h2>
 			<div class='input-text active'>
 				{{#if username.ready}}
 					<span>
-						<input type="text" name='username' value="{{username.username}}" placeholder='{{_ "usernameRegistration.Username"}}' />
+						<input type="text" name='username' value="{{username.username}}" placeholder='{{_ "usernameRegistration.Username"}}' dir="auto"/>
 					</span>
 					<i></i>
 				{{else}}