Restyle chat messages
Update the rounded corners on all messages Update paddings and margin for message author Move timestamp 3pt from bottom Fix miss-placed padding in message author name Add margin between emoji and timestamp Change reply icon Decrese font size of emoji message Remove extra space in style map Remove extra margin between author and message Replace reply icon with glymph Update Inter font to support new glyphs Update paddings for reply author Update timestamp padding from bottom Added line-height explicitly to support it cross platform. Otherwise android and ios use different size. Remove margin right space on usernames Remove hardcoded width of messages Use same line-height for all types of names Add background to emoji Bug in RN emoji cropped on smaller line-height https://github.com/facebook/react-native/issues/18559 Fix reply on user with ens name Fix message margin top should be always 4 Add minimal fix for ui in ens name screen Remove extra computations for timestamp position Update e2e test Signed-off-by: Gheorghe Pinzaru <feross95@gmail.com>
Before Width: | Height: | Size: 187 B |
Before Width: | Height: | Size: 145 B |
Before Width: | Height: | Size: 224 B |
Before Width: | Height: | Size: 295 B |
Before Width: | Height: | Size: 355 B |
|
@ -203,7 +203,6 @@
|
|||
"../../../../../desktop/resources/tiny_new_contact.png",
|
||||
"../../../../../desktop/resources/tiny_pending.png",
|
||||
"../../../../../desktop/resources/tiny_public.png",
|
||||
"../../../../../desktop/resources/tiny_reply.png",
|
||||
"../../../../../desktop/resources/tiny_settings.png",
|
||||
"../../../../../desktop/resources/tiny_tribute_to_talk.png",
|
||||
"../../../../../desktop/resources/tribute_to_talk.png",
|
||||
|
|
Before Width: | Height: | Size: 187 B |
|
@ -1,23 +0,0 @@
|
|||
{
|
||||
"images" : [
|
||||
{
|
||||
"idiom" : "universal",
|
||||
"filename" : "tiny-reply.png",
|
||||
"scale" : "1x"
|
||||
},
|
||||
{
|
||||
"idiom" : "universal",
|
||||
"filename" : "tiny-reply@2x.png",
|
||||
"scale" : "2x"
|
||||
},
|
||||
{
|
||||
"idiom" : "universal",
|
||||
"filename" : "tiny-reply@3x.png",
|
||||
"scale" : "3x"
|
||||
}
|
||||
],
|
||||
"info" : {
|
||||
"version" : 1,
|
||||
"author" : "xcode"
|
||||
}
|
||||
}
|
Before Width: | Height: | Size: 145 B |
Before Width: | Height: | Size: 224 B |
Before Width: | Height: | Size: 295 B |
|
@ -125,10 +125,6 @@
|
|||
current-public-key [:multiaccount/public-key]]
|
||||
[react/scroll-view {:style style/reply-message-content}
|
||||
[react/view {:style style/reply-message-to-container}
|
||||
[vector-icons/tiny-icon :tiny-icons/tiny-reply {:container-style style/reply-icon
|
||||
:accessibility-label :tiny-reply-icon
|
||||
:width 20
|
||||
:color colors/gray}]
|
||||
(chat-utils/format-reply-author from alias ens-name 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]]))
|
||||
|
||||
|
|
|
@ -50,12 +50,10 @@
|
|||
(when (or quote text)
|
||||
[react/view {:style (style/quoted-message-container outgoing)}
|
||||
[react/view {:style style/quoted-message-author-container}
|
||||
[vector-icons/tiny-icon :tiny-icons/tiny-reply
|
||||
{:color (if outgoing colors/white-transparent colors/gray)}]
|
||||
(chat.utils/format-reply-author
|
||||
[chat.utils/format-reply-author
|
||||
(or from (:from quote))
|
||||
alias ens-name current-public-key
|
||||
(partial style/quoted-message-author outgoing))]
|
||||
(partial style/quoted-message-author outgoing)]]
|
||||
|
||||
[react/text {:style (style/quoted-message-text outgoing)
|
||||
:number-of-lines 5}
|
||||
|
@ -66,7 +64,7 @@
|
|||
:on-press #(re-frame/dispatch [:chat.ui/message-expand-toggled chat-id message-id])}
|
||||
(i18n/label (if expanded? :show-less :show-more))])
|
||||
|
||||
(defn render-inline [message-text outgoing acc {:keys [type literal destination] :as node}]
|
||||
(defn render-inline [message-text outgoing acc {:keys [type literal destination]}]
|
||||
(case type
|
||||
""
|
||||
(conj acc literal)
|
||||
|
@ -177,12 +175,12 @@
|
|||
{:justify-timestamp? true}])
|
||||
|
||||
(defn emoji-message
|
||||
[{:keys [content current-public-key alias] :as message}]
|
||||
[{:keys [content current-public-key alias outgoing] :as message}]
|
||||
(let [response-to (:response-to content)]
|
||||
[message-view message
|
||||
[react/view {:style (style/style-message-text false)}
|
||||
[react/view {:style (style/style-message-text outgoing)}
|
||||
(when response-to
|
||||
[quoted-message response-to (:quoted-message message) alias false current-public-key])
|
||||
[quoted-message response-to (:quoted-message message) alias outgoing current-public-key])
|
||||
[react/text {:style (style/emoji-message message)}
|
||||
(:text content)]]]))
|
||||
|
||||
|
@ -504,7 +502,8 @@
|
|||
from
|
||||
outgoing
|
||||
modal?
|
||||
content] :as message} child]
|
||||
content]
|
||||
:as message} child]
|
||||
[react/view (style/group-message-wrapper message)
|
||||
[react/view (style/message-body message)
|
||||
(when display-photo?
|
||||
|
@ -515,7 +514,8 @@
|
|||
[photos/member-photo from identicon]]])])
|
||||
[react/view (style/group-message-view outgoing display-photo?)
|
||||
(when display-username?
|
||||
[react/touchable-opacity {:on-press #(re-frame/dispatch [:chat.ui/show-profile from])}
|
||||
[react/touchable-opacity {:style style/message-author-touchable
|
||||
:on-press #(re-frame/dispatch [:chat.ui/show-profile from])}
|
||||
[message-author-name from alias]])
|
||||
[react/view {:style (style/timestamp-content-wrapper outgoing)}
|
||||
child]]]
|
||||
|
|
|
@ -11,13 +11,6 @@
|
|||
[outgoing]
|
||||
{:color (if outgoing colors/white colors/text)})
|
||||
|
||||
(defn message-padding-top
|
||||
[{:keys [last-in-group? display-username?]}]
|
||||
(if (and display-username?
|
||||
last-in-group?)
|
||||
6
|
||||
2))
|
||||
|
||||
(defn last-message-padding
|
||||
[{:keys [first? typing]}]
|
||||
(when (and first? (not typing))
|
||||
|
@ -25,10 +18,10 @@
|
|||
|
||||
(defn message-body
|
||||
[{:keys [outgoing] :as message}]
|
||||
(let [align (if outgoing :flex-end :flex-start)
|
||||
(let [align (if outgoing :flex-end :flex-start)
|
||||
direction (if outgoing :row-reverse :row)]
|
||||
{:flex-direction direction
|
||||
:padding-top (message-padding-top message)
|
||||
:margin-top 4
|
||||
:align-self align
|
||||
:align-items align}))
|
||||
|
||||
|
@ -46,11 +39,12 @@
|
|||
(defn message-timestamp-text
|
||||
[justify-timestamp? outgoing rtl? emoji?]
|
||||
(merge message-timestamp
|
||||
{:color (if (and outgoing (not emoji?))
|
||||
colors/white-transparent-70
|
||||
colors/gray)}
|
||||
{:line-height 10
|
||||
:color (if outgoing
|
||||
colors/white-transparent-70
|
||||
colors/gray)}
|
||||
(when justify-timestamp? {:position :absolute
|
||||
:bottom 7
|
||||
:bottom 9 ; 6 Bubble bottom, 3 message baseline
|
||||
(if rtl? :left :right) 12})))
|
||||
|
||||
(def message-expand-button
|
||||
|
@ -66,10 +60,10 @@
|
|||
:color colors/text-gray})
|
||||
|
||||
(defn group-message-wrapper [{:keys [outgoing] :as message}]
|
||||
(merge {:flex-direction :column}
|
||||
(merge {:flex-direction :column}
|
||||
(if outgoing
|
||||
{:margin-left 64}
|
||||
{:margin-right 64})
|
||||
{:margin-left 96}
|
||||
{:margin-right 52})
|
||||
(last-message-padding message)))
|
||||
|
||||
(defn timestamp-content-wrapper [outgoing]
|
||||
|
@ -79,7 +73,7 @@
|
|||
[outgoing display-photo?]
|
||||
(let [align (if outgoing :flex-end :flex-start)]
|
||||
(merge {:flex-direction :column
|
||||
:max-width (if platform/desktop? 500 320)
|
||||
:flex-shrink 1
|
||||
:align-items align}
|
||||
(if outgoing
|
||||
{:margin-right 8}
|
||||
|
@ -93,6 +87,10 @@
|
|||
{:align-self :flex-start
|
||||
:padding-left (if platform/desktop? 24 8)}))
|
||||
|
||||
(def message-author-touchable
|
||||
{:margin-left 12
|
||||
:padding-vertical 2})
|
||||
|
||||
(defn message-author [outgoing]
|
||||
(merge
|
||||
{:width (+ 16 photos/default-size) ;; 16 is for the padding
|
||||
|
@ -134,25 +132,35 @@
|
|||
:line-height 22
|
||||
:margin-bottom (if collapsed? 2 0)))
|
||||
|
||||
(styles/defn emoji-message
|
||||
(defn emoji-message
|
||||
[{:keys [incoming-group]}]
|
||||
{:font-size 40
|
||||
:desktop {:line-height 46}
|
||||
:margin-top (if incoming-group 4 0)})
|
||||
{:font-size 28
|
||||
:line-height 34 ;TODO: Smaller crops the icon on the top
|
||||
:margin-right 12
|
||||
:margin-top (if incoming-group 4 0)})
|
||||
|
||||
(defn message-view
|
||||
[{:keys [content-type outgoing group-chat last-in-group?]}]
|
||||
(merge {:padding-vertical 6
|
||||
:padding-horizontal 12
|
||||
:border-radius 8
|
||||
:margin-top (if (and last-in-group?
|
||||
(or outgoing
|
||||
(not group-chat)))
|
||||
16
|
||||
4)}
|
||||
(if (= content-type constants/content-type-emoji)
|
||||
{:flex-direction :row}
|
||||
{:background-color (if outgoing colors/blue colors/blue-light)})))
|
||||
(merge
|
||||
{:border-top-left-radius 16
|
||||
:border-top-right-radius 16
|
||||
:border-bottom-right-radius 16
|
||||
:border-bottom-left-radius 16
|
||||
:padding-vertical 6
|
||||
:padding-horizontal 12
|
||||
:border-radius 8
|
||||
:margin-top (if (and last-in-group?
|
||||
(or outgoing
|
||||
(not group-chat)))
|
||||
16
|
||||
0)}
|
||||
(if outgoing
|
||||
{:border-bottom-right-radius 4}
|
||||
{:border-bottom-left-radius 4})
|
||||
|
||||
{:background-color (if outgoing colors/blue colors/blue-light)}
|
||||
(when (= content-type constants/content-type-emoji)
|
||||
{:flex-direction :row})))
|
||||
|
||||
(def play-image
|
||||
{:width 33
|
||||
|
@ -175,8 +183,6 @@
|
|||
:font-weight (if chosen? "500" "400")
|
||||
:padding-top 6
|
||||
:padding-left 12
|
||||
:padding-right 16
|
||||
:margin-right 12
|
||||
:text-align-vertical :center})
|
||||
|
||||
(def message-author-name-container
|
||||
|
@ -203,9 +209,11 @@
|
|||
|
||||
(defn quoted-message-author [outgoing chosen?]
|
||||
(assoc (message-author-name chosen?)
|
||||
:padding-bottom 5
|
||||
:padding-top 4
|
||||
:padding-left 6
|
||||
:padding-bottom 6
|
||||
:padding-top 0
|
||||
:padding-left 0
|
||||
:line-height 18
|
||||
:font-weight "500"
|
||||
:color (if outgoing
|
||||
colors/white-transparent-70
|
||||
colors/gray)))
|
||||
|
|
|
@ -14,16 +14,28 @@
|
|||
(defn format-author [alias style name]
|
||||
(let [additional-styles (style false)]
|
||||
(if name
|
||||
[react/text {:style (merge {:color colors/blue :font-size 13 :font-weight "500"} additional-styles)}
|
||||
[react/text {:style (merge {:color colors/blue
|
||||
:font-size 13
|
||||
:line-height 18
|
||||
: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)}
|
||||
[react/text {:style (merge {:color colors/gray
|
||||
:font-size 12
|
||||
:line-height 18
|
||||
:font-weight "400"} additional-styles)}
|
||||
alias])))
|
||||
|
||||
(def ^:private reply-symbol "↪ ")
|
||||
|
||||
(defn format-reply-author [from alias username current-public-key style]
|
||||
(or (and (= from current-public-key)
|
||||
[react/text {:style (style true)}
|
||||
(i18n/label :t/You)])
|
||||
(format-author alias style username)))
|
||||
(let [reply-name (or (some->> username
|
||||
(str "@")
|
||||
(str reply-symbol))
|
||||
(str reply-symbol alias))]
|
||||
(or (and (= from current-public-key)
|
||||
[react/text {:style (style true)}
|
||||
(str reply-symbol (i18n/label :t/You))])
|
||||
(format-author reply-name style false))))
|
||||
|
||||
(def ^:private styling->prop
|
||||
{:bold {:style {:font-weight "700"}}
|
||||
|
|
|
@ -648,7 +648,7 @@
|
|||
:content-type constants/content-type-text
|
||||
:timestamp-str "9:41 AM"}]
|
||||
[react/view
|
||||
[react/view {:padding-left 60}
|
||||
[react/view {:padding-left 72}
|
||||
[message/message-author-name public-key]]
|
||||
[react/view {:flex-direction :row}
|
||||
[react/view {:padding-left 16 :padding-right 8 :padding-top 4}
|
||||
|
|
|
@ -337,7 +337,7 @@ class ChatElementByText(BaseText):
|
|||
class Username(BaseText):
|
||||
def __init__(self, driver, parent_locator):
|
||||
super(Username, self).__init__(driver)
|
||||
self.locator = self.Locator.xpath_selector(parent_locator + "/*[1]/android.widget.TextView")
|
||||
self.locator = self.Locator.xpath_selector(parent_locator + "/*[2]/android.widget.TextView")
|
||||
|
||||
return Username(self.driver, self.locator.value)
|
||||
|
||||
|
|