Chat messages layout fixes
Signed-off-by: Julien Eluard <julien.eluard@gmail.com>
This commit is contained in:
parent
2423d7c244
commit
d724a12d51
|
@ -1,4 +1,5 @@
|
||||||
(ns status-im.chat.styles.message.datemark
|
(ns status-im.chat.styles.message.datemark
|
||||||
|
(:require-macros [status-im.utils.styles :refer [defstyle]])
|
||||||
(:require [status-im.ui.components.styles :as common]))
|
(:require [status-im.ui.components.styles :as common]))
|
||||||
|
|
||||||
(def datemark-wrapper
|
(def datemark-wrapper
|
||||||
|
@ -9,7 +10,7 @@
|
||||||
{:margin-top 16
|
{:margin-top 16
|
||||||
:height 22})
|
:height 22})
|
||||||
|
|
||||||
(def datemark-text
|
(defstyle datemark-text
|
||||||
{:color common/color-gray4
|
{:color common/color-gray4
|
||||||
:letter-spacing -0.2
|
:ios {:letter-spacing -0.2}
|
||||||
:font-size 15})
|
:font-size 15})
|
||||||
|
|
|
@ -10,7 +10,7 @@
|
||||||
:color styles/text1-color
|
:color styles/text1-color
|
||||||
:letter-spacing -0.2
|
:letter-spacing -0.2
|
||||||
:android {:line-height 22}
|
:android {:line-height 22}
|
||||||
:ios {:line-height 23}})
|
:ios {:line-height 22}})
|
||||||
|
|
||||||
(def style-sub-text
|
(def style-sub-text
|
||||||
{:top -2
|
{:top -2
|
||||||
|
@ -23,31 +23,29 @@
|
||||||
[{:keys [first-in-group? display-username?]}]
|
[{:keys [first-in-group? display-username?]}]
|
||||||
(if (and display-username?
|
(if (and display-username?
|
||||||
first-in-group?)
|
first-in-group?)
|
||||||
8
|
6
|
||||||
4))
|
2))
|
||||||
|
|
||||||
(def message-empty-spacing
|
(def message-empty-spacing
|
||||||
{:height 16})
|
{:height 16})
|
||||||
|
|
||||||
(def message-body-base
|
|
||||||
{:padding-right 10
|
|
||||||
:padding-left 10})
|
|
||||||
|
|
||||||
(defn last-message-padding
|
(defn last-message-padding
|
||||||
[{:keys [last? typing]}]
|
[{:keys [last? typing]}]
|
||||||
(when (and last? (not typing))
|
(when (and last? (not typing))
|
||||||
{:padding-bottom 16}))
|
{:padding-bottom 16}))
|
||||||
|
|
||||||
(defn message-body
|
(defn message-body
|
||||||
[{:keys [outgoing] :as message}]
|
[{:keys [outgoing display-photo?] :as message}]
|
||||||
(let [align (if outgoing :flex-end :flex-start)
|
(let [align (if outgoing :flex-end :flex-start)
|
||||||
direction (if outgoing :row-reverse :row)]
|
direction (if outgoing :row-reverse :row)]
|
||||||
(merge message-body-base
|
(merge {:flex-direction direction
|
||||||
{:flex-direction direction
|
|
||||||
:width 230
|
:width 230
|
||||||
:padding-top (message-padding-top message)
|
:padding-top (message-padding-top message)
|
||||||
:align-self align
|
:align-self align
|
||||||
:align-items align})))
|
:align-items align}
|
||||||
|
(when display-photo?
|
||||||
|
{:padding-right 8
|
||||||
|
:padding-left 8}))))
|
||||||
|
|
||||||
(def message-timestamp
|
(def message-timestamp
|
||||||
{:font-size 10
|
{:font-size 10
|
||||||
|
@ -89,17 +87,17 @@
|
||||||
[outgoing]
|
[outgoing]
|
||||||
(let [align (if outgoing :flex-end :flex-start)]
|
(let [align (if outgoing :flex-end :flex-start)]
|
||||||
{:flex-direction :column
|
{:flex-direction :column
|
||||||
:width 260
|
:width 230
|
||||||
:padding-left 10
|
:padding-left 8
|
||||||
:padding-right 10
|
:padding-right 8
|
||||||
:align-items align}))
|
:align-items align}))
|
||||||
|
|
||||||
(defn delivery-status [outgoing]
|
(defn delivery-status [outgoing]
|
||||||
(if outgoing
|
(if outgoing
|
||||||
{:align-self :flex-end
|
{:align-self :flex-end
|
||||||
:padding-right 22}
|
:padding-right 8}
|
||||||
{:align-self :flex-start
|
{:align-self :flex-start
|
||||||
:padding-left 16}))
|
:padding-left 8}))
|
||||||
|
|
||||||
(def message-author
|
(def message-author
|
||||||
{:width photos/default-size
|
{:width photos/default-size
|
||||||
|
|
|
@ -79,6 +79,7 @@
|
||||||
(letsubs [network [:network-name]]
|
(letsubs [network [:network-name]]
|
||||||
(let [{{:keys [amount fiat-amount tx-hash asset] send-network :network} :params} content
|
(let [{{:keys [amount fiat-amount tx-hash asset] send-network :network} :params} content
|
||||||
recipient-name (get-in content [:params :bot-db :public :recipient])
|
recipient-name (get-in content [:params :bot-db :public :recipient])
|
||||||
|
amount-text-long? (< 10 (count amount))
|
||||||
network-mismatch? (and (seq send-network) (not= network send-network))]
|
network-mismatch? (and (seq send-network) (not= network send-network))]
|
||||||
[react/view style/command-send-message-view
|
[react/view style/command-send-message-view
|
||||||
[react/view
|
[react/view
|
||||||
|
@ -88,7 +89,7 @@
|
||||||
:font :medium}
|
:font :medium}
|
||||||
amount
|
amount
|
||||||
[react/text {:style (style/command-amount-currency-separator outgoing)}
|
[react/text {:style (style/command-amount-currency-separator outgoing)}
|
||||||
"."]
|
(if amount-text-long? "\n" ".")]
|
||||||
[react/text {:style (style/command-send-currency-text outgoing)
|
[react/text {:style (style/command-send-currency-text outgoing)
|
||||||
:font :default}
|
:font :default}
|
||||||
asset]]]]
|
asset]]]]
|
||||||
|
|
Loading…
Reference in New Issue