Fix small UI problems with the compose reply screen

Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>
status-im · Oct 2, 2019 · 78c57a3 · 78c57a3
1 parent 6037add
commit 78c57a3
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 35 deletions.
diff --git a/src/status_im/ui/screens/chat/input/input.cljs b/src/status_im/ui/screens/chat/input/input.cljs
@@ -157,23 +157,29 @@
   (letsubs [{:keys [username]} [:contacts/contact-name-by-identity from]
             current-public-key [:multiaccount/public-key]]
     [react/scroll-view {:style style/reply-message-content}
-     (chat-utils/format-reply-author from alias username current-public-key style/reply-message-author)
-     [react/text {:style (message-style/style-message-text false)} message-text]]))
+     [react/view {:style style/reply-message-to-container}
+      [vector-icons/tiny-icon :tiny-icons/tiny-reply {:container-style style/reply-icon
+                                                      :width 20
+                                                      :color colors/gray}]
+      (chat-utils/format-reply-author from alias username current-public-key style/reply-message-author)]
+     [react/text {:style (assoc (message-style/style-message-text false) :font-size 14) :number-of-lines 3} message-text]]))
 
 (defview reply-message-view []
   (letsubs [{:keys [content from alias] :as message} [:chats/reply-message]]
     (when message
       [react/view {:style style/reply-message-container}
        [react/view {:style style/reply-message}
         [photos/member-photo from]
-        [reply-message from alias (:text content)]]
-       [react/touchable-highlight
-        {:style               style/cancel-reply-highlight
-         :on-press            #(re-frame/dispatch [:chat.ui/cancel-message-reply])
-         :accessibility-label :cancel-message-reply}
-        [react/view {:style style/cancel-reply-container}
-         [vector-icons/icon :main-icons/close {:container-style style/cancel-reply-icon
-                                               :color           colors/white}]]]])))
+        [reply-message from alias (:text content)]
+        [react/touchable-highlight
+         {:style               style/cancel-reply-highlight
+          :on-press            #(re-frame/dispatch [:chat.ui/cancel-message-reply])
+          :accessibility-label :cancel-message-reply}
+         [react/view {:style style/cancel-reply-container}
+          [vector-icons/icon :main-icons/close {:container-style style/cancel-reply-icon
+                                                :width 19
+                                                :height 19
+                                                :color           colors/white}]]]]])))
 
 (defview input-container []
   (letsubs [margin               [:chats/input-margin]

diff --git a/src/status_im/ui/screens/chat/styles/input/input.cljs b/src/status_im/ui/screens/chat/styles/input/input.cljs
@@ -13,49 +13,67 @@
    :margin-bottom    margin-bottom
    :flex-direction   :column
    :border-top-width border-height
-   :border-top-color colors/black-transparent
-   :elevation        2})
+   :border-top-color colors/gray-lighter})
 
 (def reply-message
   {:flex-direction :row
    :align-items    :flex-start
-   :border-width   1
-   :border-radius  10
-   :border-color   colors/black-transparent
-   :padding-top    10
-   :padding-bottom 10
-   :padding-right  14
-   :padding-left   7
-   :margin-top     12
-   :margin-left    12
-   :margin-right   12})
+   :justify-content :space-between
+   :padding-top    8
+   :padding-bottom 8
+   :padding-right  8
+   :padding-left   8})
 
 (def reply-message-content
   {:flex-direction :column
-   :padding-left   7
+   :padding-left   8
+   :padding-right 8
    :max-height     140})
 
 (defn reply-message-author [chosen?]
   (assoc (message-author-name chosen?)
-         :padding-bottom 6))
+         :flex-shrink 1
+         ;; NOTE:  overriding the values from the definition of message-author-name
+         :padding-left 0
+         :padding-top 0
+         :padding-bottom 0
+         :margin 0
+         :height 18
+         :include-font-padding false))
 
 (def reply-message-container
   {:flex-direction :column-reverse})
 
+(def reply-message-to-container
+  {:flex-direction :row
+   :height 18
+   :padding-top 0
+   :padding-bottom 0
+   :padding-right 8
+   :justify-content :flex-start})
+
+(def reply-icon
+  {:width 20
+   :margin-top 1
+   :margin-bottom 1
+   :margin-right 0})
+
 (def cancel-reply-highlight
-  {:position :absolute
-   :z-index  5
-   :top      0
-   :right    0
-   :height   26})
+  {:align-self :flex-start
+   :width 19
+   :height   19})
 
 (def cancel-reply-container
   {:flex-direction  :row
    :justify-content :flex-end
-   :margin-right     12})
+   :height "100%"})
 
 (def cancel-reply-icon
   {:background-color colors/gray
+   :width 21
+   :height 21
+   :align-items :center
+   :justify-content :center
    :border-radius    12})
 
 (def input-container

diff --git a/src/status_im/ui/screens/chat/utils.cljs b/src/status_im/ui/screens/chat/utils.cljs
@@ -12,11 +12,12 @@
             [status-im.utils.http :as http]))
 
 (defn format-author [alias style name]
-  (if (ens/is-valid-eth-name? name)
-    [react/text {:style {:color colors/blue :font-size 13 :font-weight "500"}}
-     (str "@" (or (stateofus/username name) name))]
-    [react/text {:style {:color colors/gray :font-size 12 :font-weight "400"}}
-     alias]))
+  (let [additional-styles (style false)]
+    (if (ens/is-valid-eth-name? name)
+      [react/text {:style (merge {:color colors/blue :font-size 13 :font-weight "500"} additional-styles)}
+       (str "@" (or (stateofus/username name) name))]
+      [react/text {:style (merge {:color colors/gray :font-size 12 :font-weight "400"} additional-styles)}
+       alias])))
 
 (defn format-reply-author [from alias username current-public-key style]
   (or (and (= from current-public-key)