RTL fixes for chat and chat modal, #6192

less/chats.less

@@ -132,8 +132,6 @@
 		}
 
 		.dropdown {
-			float: right;
-
 			.avatar {
 				margin-right: 0.5em;
 			}
@@ -141,8 +139,6 @@
 	}
 
 	.modal-header .dropdown {
-		float: right;
-
 		.avatar {
 			margin-right: 0.5em;
 		}
@@ -168,7 +164,6 @@
 
 		[component="chat/message/remaining"] {
 			position: absolute;
-			float: right;
 			right: 5.25em;
 			z-index: 2;
 			bottom: 0;

less/rtl.less

@@ -59,6 +59,26 @@ html[data-dir="rtl"] {
 
 	}
 
+	[component="chat/composer"] {
+		[component="chat/message/remaining"] {
+			right: auto;
+			left: 5.25em;
+		}
+
+		[data-action="send"] {
+			transform: scale(-1, 1);
+		}
+	}
+
+	[component="chat/nav-wrapper"] {
+		box-shadow: -0.5em 0 0.5em @gray-lighter;
+	}
+
+	.chats-full [component="chat/header"] .dropdown .avatar, .chat-modal [component="chat/header"] .dropdown .avatar {
+		margin-right: 0;
+		margin-left: 0.5em;
+	}
+
 	.slideout-menu .chat-list li .teaser-content, .slideout-menu .chat-list li .room-name {
 		padding-right: 60px;
 	}

templates/chat.tpl

@@ -6,16 +6,16 @@
 				<button id="chat-close-btn" type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 				<button type="button" class="close hidden-xs hidden-sm" data-action="maximize"><span aria-hidden="true"><i class="fa fa-expand"></i></span><span class="sr-only">[[modules:chat.maximize]]</span></button>
 				<button type="button" class="close hidden-xs hidden-sm" data-action="minimize"><span aria-hidden="true"><i class="fa fa-minus"></i></span><span class="sr-only">[[modules:chat.minimize]]</span></button>
-				<div class="dropdown">
+				<div class="dropdown pull-right">
 					<button class="close" data-toggle="dropdown" component="chat/controlsToggle"><i class="fa fa-gear"></i></button>
-					<ul class="dropdown-menu dropdown-menu-right" component="chat/controls">
+					<ul class="dropdown-menu dropdown-menu-right pull-right" component="chat/controls">
 						<!-- IF users.length -->
 						<li class="dropdown-header">[[modules:chat.in-room]]</li>
 						<!-- BEGIN users -->
 						<li>
 							<a href="{config.relative_path}/uid/{../uid}">
 								<!-- IF ../picture -->
-								<img class="avatar avatar-sm" component="user/picture" src="{../picture}" align="left" itemprop="image" />
+								<img class="avatar avatar-sm" component="user/picture" src="{../picture}" itemprop="image" />
 								<!-- ELSE -->
 								<div class="avatar avatar-sm" component="user/picture" style="background-color: {../icon:bgColor};">{../icon:text}</div><!-- END -->{../username}
 							</a>

templates/partials/chats/message-window.tpl

@@ -3,16 +3,16 @@
 	<div component="chat/header">
 		<button type="button" class="close" data-action="pop-out"><span aria-hidden="true"><i class="fa fa-compress"></i></span><span class="sr-only">[[modules:chat.pop-out]]</span></button>
 		
-		<div class="dropdown">
+		<div class="dropdown pull-right">
 			<button class="close" data-toggle="dropdown" component="chat/controlsToggle"><i class="fa fa-gear"></i></button>
-			<ul class="dropdown-menu dropdown-menu-right" component="chat/controls">
+			<ul class="dropdown-menu dropdown-menu-right pull-right" component="chat/controls">
 				<!-- IF users.length -->
 				<li class="dropdown-header">[[modules:chat.in-room]]</li>
 				<!-- BEGIN users -->
 				<li>
 					<a href="{config.relative_path}/uid/{../uid}">
 						<!-- IF ../picture -->
-						<img class="avatar avatar-sm" component="user/picture" src="{../picture}" align="left" itemprop="image" />
+						<img class="avatar avatar-sm" component="user/picture" src="{../picture}" itemprop="image" />
 						<!-- ELSE -->
 						<div class="avatar avatar-sm" component="user/picture" style="background-color: {../icon:bgColor};">{../icon:text}</div><!-- END -->{../username}
 					</a>