[#4301] Move message timestamp to the left for right-to-left languages

Signed-off-by: Dmitry Novotochinov <dmitry.novot@gmail.com>

CHANGELOG.md

@@ -9,6 +9,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - iPad support. Status is now displayed at full native resolution on iPad's
 - fixed Sign in: Cannot paste text within password field [#3931]
 
+### Fixed
+- Fixed chat message layout for right-to-left languages
+
 ## [0.9.22] - 2018-07-09
 ### Added
 - Added Farsi public #status channel

src/status_im/chat/styles/message/message.cljs

@@ -52,12 +52,12 @@
    :letter-spacing 0.1
    :align-self     :flex-end})
 
-(defn message-timestamp-text [justify-timestamp? outgoing]
+(defn message-timestamp-text [justify-timestamp? outgoing rtl?]
   (merge message-timestamp
          {:color (if outgoing colors/wild-blue-yonder colors/gray)}
-         (when justify-timestamp? {:position :absolute
-                                   :bottom   8
-                                   :right    12})))
+         (when justify-timestamp? {:position              :absolute
+                                   :bottom                8
+                                   (if rtl? :left :right) 12})))
 
 (defn message-timestamp-placeholder-text [outgoing]
   (assoc message-timestamp

src/status_im/chat/views/message/message.cljs

@@ -144,15 +144,22 @@
       [message-content-command-send message]
       [message-content-command-with-markup message])))
 
-(defview message-timestamp [t justify-timestamp? outgoing command?]
+(def rtl-characters-regex #"[^\u0591-\u06EF\u06FA-\u07FF\u200F\u202B\u202E\uFB1D-\uFDFD\uFE70-\uFEFC]*?[\u0591-\u06EF\u06FA-\u07FF\u200F\u202B\u202E\uFB1D-\uFDFD\uFE70-\uFEFC]")
+
+(defn right-to-left-text? [content]
+  (let [char (first content)]
+    (re-matches rtl-characters-regex char)))
+
+(defview message-timestamp [t justify-timestamp? outgoing command? content]
   (when-not command?
-    [react/text {:style (style/message-timestamp-text justify-timestamp? outgoing)} t]))
+    (let [rtl? (right-to-left-text? content)]
+      [react/text {:style (style/message-timestamp-text justify-timestamp? outgoing rtl?)} t])))
 
 (defn message-view
-  [{:keys [timestamp-str outgoing] :as message} content {:keys [justify-timestamp?]}]
+  [{:keys [timestamp-str outgoing content] :as message} message-content {:keys [justify-timestamp?]}]
   [react/view (style/message-view message)
-   content
-   [message-timestamp timestamp-str justify-timestamp? outgoing (get-in message [:content :command])]])
+   message-content
+   [message-timestamp timestamp-str justify-timestamp? outgoing (get-in message [:content :command]) content]])
 
 (def replacements
   {"\\*[^*]+\\*" {:font-weight :bold}

test/cljs/status_im/test/chat/views/message.cljs

@@ -21,3 +21,13 @@
          (message/parse-url "Status - https://github.com/status-im/status-react a Mobile Ethereum Operating System")))
   (is (= (lazy-seq [{:text "Browse, chat and make payments securely on the decentralized web." :url? false} nil])
          (message/parse-url "Browse, chat and make payments securely on the decentralized web."))))
+
+(deftest right-to-left-text?
+  (is (not (message/right-to-left-text? "You are lucky today!")))
+  (is (not (message/right-to-left-text? "42")))
+  (is (not (message/right-to-left-text? "You are lucky today! أنت محظوظ اليوم!")))
+  (is (not (message/right-to-left-text? "۱۲۳۴۵۶۷۸۹")))
+  (is (not (message/right-to-left-text? "۱۲۳۴۵۶۷۸۹أنت محظوظ اليوم!")))
+  (is (message/right-to-left-text? "أنت محظوظ اليوم!"))
+  (is (message/right-to-left-text? "أنت محظوظ اليوم! You are lucky today"))
+  (is (message/right-to-left-text? "יש לך מזל היום!")))