[WIP] RTL Support

client/stylesheets/rtl.less

@@ -0,0 +1,225 @@
+.rtl
+{
+  direction: rtl;
+
+  // 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;
+  }
+
+  .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;
+        }
+      }
+    }
+  }
+
+  .side-nav:before {
+    .right(8px);
+  }
+
+  .main-content {
+    .margin-right(260px);
+  }
+
+  .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;
+      }
+
+     > .formatting-tips {
+       float: left;
+     }
+     .icon-paper-plane {
+      .left(10px);
+      transform: rotateY(180deg);
+      }
+    }
+  }
+
+  q {
+    .padding-right(10px);
+  }
+  q:before {
+    .right(50px);
+  }
+}

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}}
@@ -41,7 +41,7 @@
 						{{/if}}
 					</span>
 					{{/if}}
-					<div>
+					<div dir="auto">
 						{{{renderMessage}}}
 					</div>
 				{{/if}}

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>
@@ -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>~

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"

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>

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>

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>
+</template>

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"}}' />

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