Fix small UI problems with the compose reply screen
Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>
This commit is contained in:
Alex Good
Andrey Shovkoplyas
parent
6037add156
commit
78c57a356b
|
|
@ -157,8 +157,12 @@
|
|||
(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]]
|
||||
|
|
@ -166,14 +170,16 @@
|
|||
[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]
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
Loading…
Reference in New Issue