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_new_contact.png",
|
||||||
"../../../../../desktop/resources/tiny_pending.png",
|
"../../../../../desktop/resources/tiny_pending.png",
|
||||||
"../../../../../desktop/resources/tiny_public.png",
|
"../../../../../desktop/resources/tiny_public.png",
|
||||||
"../../../../../desktop/resources/tiny_reply.png",
|
|
||||||
"../../../../../desktop/resources/tiny_settings.png",
|
"../../../../../desktop/resources/tiny_settings.png",
|
||||||
"../../../../../desktop/resources/tiny_tribute_to_talk.png",
|
"../../../../../desktop/resources/tiny_tribute_to_talk.png",
|
||||||
"../../../../../desktop/resources/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]]
|
current-public-key [:multiaccount/public-key]]
|
||||||
[react/scroll-view {:style style/reply-message-content}
|
[react/scroll-view {:style style/reply-message-content}
|
||||||
[react/view {:style style/reply-message-to-container}
|
[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)]
|
(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]]))
|
[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)
|
(when (or quote text)
|
||||||
[react/view {:style (style/quoted-message-container outgoing)}
|
[react/view {:style (style/quoted-message-container outgoing)}
|
||||||
[react/view {:style style/quoted-message-author-container}
|
[react/view {:style style/quoted-message-author-container}
|
||||||
[vector-icons/tiny-icon :tiny-icons/tiny-reply
|
[chat.utils/format-reply-author
|
||||||
{:color (if outgoing colors/white-transparent colors/gray)}]
|
|
||||||
(chat.utils/format-reply-author
|
|
||||||
(or from (:from quote))
|
(or from (:from quote))
|
||||||
alias ens-name current-public-key
|
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)
|
[react/text {:style (style/quoted-message-text outgoing)
|
||||||
:number-of-lines 5}
|
:number-of-lines 5}
|
||||||
|
@ -66,7 +64,7 @@
|
||||||
:on-press #(re-frame/dispatch [:chat.ui/message-expand-toggled chat-id message-id])}
|
:on-press #(re-frame/dispatch [:chat.ui/message-expand-toggled chat-id message-id])}
|
||||||
(i18n/label (if expanded? :show-less :show-more))])
|
(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
|
(case type
|
||||||
""
|
""
|
||||||
(conj acc literal)
|
(conj acc literal)
|
||||||
|
@ -177,12 +175,12 @@
|
||||||
{:justify-timestamp? true}])
|
{:justify-timestamp? true}])
|
||||||
|
|
||||||
(defn emoji-message
|
(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)]
|
(let [response-to (:response-to content)]
|
||||||
[message-view message
|
[message-view message
|
||||||
[react/view {:style (style/style-message-text false)}
|
[react/view {:style (style/style-message-text outgoing)}
|
||||||
(when response-to
|
(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)}
|
[react/text {:style (style/emoji-message message)}
|
||||||
(:text content)]]]))
|
(:text content)]]]))
|
||||||
|
|
||||||
|
@ -504,7 +502,8 @@
|
||||||
from
|
from
|
||||||
outgoing
|
outgoing
|
||||||
modal?
|
modal?
|
||||||
content] :as message} child]
|
content]
|
||||||
|
:as message} child]
|
||||||
[react/view (style/group-message-wrapper message)
|
[react/view (style/group-message-wrapper message)
|
||||||
[react/view (style/message-body message)
|
[react/view (style/message-body message)
|
||||||
(when display-photo?
|
(when display-photo?
|
||||||
|
@ -515,7 +514,8 @@
|
||||||
[photos/member-photo from identicon]]])])
|
[photos/member-photo from identicon]]])])
|
||||||
[react/view (style/group-message-view outgoing display-photo?)
|
[react/view (style/group-message-view outgoing display-photo?)
|
||||||
(when display-username?
|
(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]])
|
[message-author-name from alias]])
|
||||||
[react/view {:style (style/timestamp-content-wrapper outgoing)}
|
[react/view {:style (style/timestamp-content-wrapper outgoing)}
|
||||||
child]]]
|
child]]]
|
||||||
|
|
|
@ -11,13 +11,6 @@
|
||||||
[outgoing]
|
[outgoing]
|
||||||
{:color (if outgoing colors/white colors/text)})
|
{: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
|
(defn last-message-padding
|
||||||
[{:keys [first? typing]}]
|
[{:keys [first? typing]}]
|
||||||
(when (and first? (not typing))
|
(when (and first? (not typing))
|
||||||
|
@ -28,7 +21,7 @@
|
||||||
(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)]
|
||||||
{:flex-direction direction
|
{:flex-direction direction
|
||||||
:padding-top (message-padding-top message)
|
:margin-top 4
|
||||||
:align-self align
|
:align-self align
|
||||||
:align-items align}))
|
:align-items align}))
|
||||||
|
|
||||||
|
@ -46,11 +39,12 @@
|
||||||
(defn message-timestamp-text
|
(defn message-timestamp-text
|
||||||
[justify-timestamp? outgoing rtl? emoji?]
|
[justify-timestamp? outgoing rtl? emoji?]
|
||||||
(merge message-timestamp
|
(merge message-timestamp
|
||||||
{:color (if (and outgoing (not emoji?))
|
{:line-height 10
|
||||||
|
:color (if outgoing
|
||||||
colors/white-transparent-70
|
colors/white-transparent-70
|
||||||
colors/gray)}
|
colors/gray)}
|
||||||
(when justify-timestamp? {:position :absolute
|
(when justify-timestamp? {:position :absolute
|
||||||
:bottom 7
|
:bottom 9 ; 6 Bubble bottom, 3 message baseline
|
||||||
(if rtl? :left :right) 12})))
|
(if rtl? :left :right) 12})))
|
||||||
|
|
||||||
(def message-expand-button
|
(def message-expand-button
|
||||||
|
@ -68,8 +62,8 @@
|
||||||
(defn group-message-wrapper [{:keys [outgoing] :as message}]
|
(defn group-message-wrapper [{:keys [outgoing] :as message}]
|
||||||
(merge {:flex-direction :column}
|
(merge {:flex-direction :column}
|
||||||
(if outgoing
|
(if outgoing
|
||||||
{:margin-left 64}
|
{:margin-left 96}
|
||||||
{:margin-right 64})
|
{:margin-right 52})
|
||||||
(last-message-padding message)))
|
(last-message-padding message)))
|
||||||
|
|
||||||
(defn timestamp-content-wrapper [outgoing]
|
(defn timestamp-content-wrapper [outgoing]
|
||||||
|
@ -79,7 +73,7 @@
|
||||||
[outgoing display-photo?]
|
[outgoing display-photo?]
|
||||||
(let [align (if outgoing :flex-end :flex-start)]
|
(let [align (if outgoing :flex-end :flex-start)]
|
||||||
(merge {:flex-direction :column
|
(merge {:flex-direction :column
|
||||||
:max-width (if platform/desktop? 500 320)
|
:flex-shrink 1
|
||||||
:align-items align}
|
:align-items align}
|
||||||
(if outgoing
|
(if outgoing
|
||||||
{:margin-right 8}
|
{:margin-right 8}
|
||||||
|
@ -93,6 +87,10 @@
|
||||||
{:align-self :flex-start
|
{:align-self :flex-start
|
||||||
:padding-left (if platform/desktop? 24 8)}))
|
:padding-left (if platform/desktop? 24 8)}))
|
||||||
|
|
||||||
|
(def message-author-touchable
|
||||||
|
{:margin-left 12
|
||||||
|
:padding-vertical 2})
|
||||||
|
|
||||||
(defn message-author [outgoing]
|
(defn message-author [outgoing]
|
||||||
(merge
|
(merge
|
||||||
{:width (+ 16 photos/default-size) ;; 16 is for the padding
|
{:width (+ 16 photos/default-size) ;; 16 is for the padding
|
||||||
|
@ -134,25 +132,35 @@
|
||||||
:line-height 22
|
:line-height 22
|
||||||
:margin-bottom (if collapsed? 2 0)))
|
:margin-bottom (if collapsed? 2 0)))
|
||||||
|
|
||||||
(styles/defn emoji-message
|
(defn emoji-message
|
||||||
[{:keys [incoming-group]}]
|
[{:keys [incoming-group]}]
|
||||||
{:font-size 40
|
{:font-size 28
|
||||||
:desktop {:line-height 46}
|
:line-height 34 ;TODO: Smaller crops the icon on the top
|
||||||
|
:margin-right 12
|
||||||
:margin-top (if incoming-group 4 0)})
|
:margin-top (if incoming-group 4 0)})
|
||||||
|
|
||||||
(defn message-view
|
(defn message-view
|
||||||
[{:keys [content-type outgoing group-chat last-in-group?]}]
|
[{:keys [content-type outgoing group-chat last-in-group?]}]
|
||||||
(merge {:padding-vertical 6
|
(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
|
:padding-horizontal 12
|
||||||
:border-radius 8
|
:border-radius 8
|
||||||
:margin-top (if (and last-in-group?
|
:margin-top (if (and last-in-group?
|
||||||
(or outgoing
|
(or outgoing
|
||||||
(not group-chat)))
|
(not group-chat)))
|
||||||
16
|
16
|
||||||
4)}
|
0)}
|
||||||
(if (= content-type constants/content-type-emoji)
|
(if outgoing
|
||||||
{:flex-direction :row}
|
{:border-bottom-right-radius 4}
|
||||||
{:background-color (if outgoing colors/blue colors/blue-light)})))
|
{: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
|
(def play-image
|
||||||
{:width 33
|
{:width 33
|
||||||
|
@ -175,8 +183,6 @@
|
||||||
:font-weight (if chosen? "500" "400")
|
:font-weight (if chosen? "500" "400")
|
||||||
:padding-top 6
|
:padding-top 6
|
||||||
:padding-left 12
|
:padding-left 12
|
||||||
:padding-right 16
|
|
||||||
:margin-right 12
|
|
||||||
:text-align-vertical :center})
|
:text-align-vertical :center})
|
||||||
|
|
||||||
(def message-author-name-container
|
(def message-author-name-container
|
||||||
|
@ -203,9 +209,11 @@
|
||||||
|
|
||||||
(defn quoted-message-author [outgoing chosen?]
|
(defn quoted-message-author [outgoing chosen?]
|
||||||
(assoc (message-author-name chosen?)
|
(assoc (message-author-name chosen?)
|
||||||
:padding-bottom 5
|
:padding-bottom 6
|
||||||
:padding-top 4
|
:padding-top 0
|
||||||
:padding-left 6
|
:padding-left 0
|
||||||
|
:line-height 18
|
||||||
|
:font-weight "500"
|
||||||
:color (if outgoing
|
:color (if outgoing
|
||||||
colors/white-transparent-70
|
colors/white-transparent-70
|
||||||
colors/gray)))
|
colors/gray)))
|
||||||
|
|
|
@ -14,16 +14,28 @@
|
||||||
(defn format-author [alias style name]
|
(defn format-author [alias style name]
|
||||||
(let [additional-styles (style false)]
|
(let [additional-styles (style false)]
|
||||||
(if name
|
(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))]
|
(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])))
|
alias])))
|
||||||
|
|
||||||
|
(def ^:private reply-symbol "↪ ")
|
||||||
|
|
||||||
(defn format-reply-author [from alias username current-public-key style]
|
(defn format-reply-author [from alias username current-public-key style]
|
||||||
|
(let [reply-name (or (some->> username
|
||||||
|
(str "@")
|
||||||
|
(str reply-symbol))
|
||||||
|
(str reply-symbol alias))]
|
||||||
(or (and (= from current-public-key)
|
(or (and (= from current-public-key)
|
||||||
[react/text {:style (style true)}
|
[react/text {:style (style true)}
|
||||||
(i18n/label :t/You)])
|
(str reply-symbol (i18n/label :t/You))])
|
||||||
(format-author alias style username)))
|
(format-author reply-name style false))))
|
||||||
|
|
||||||
(def ^:private styling->prop
|
(def ^:private styling->prop
|
||||||
{:bold {:style {:font-weight "700"}}
|
{:bold {:style {:font-weight "700"}}
|
||||||
|
|
|
@ -648,7 +648,7 @@
|
||||||
:content-type constants/content-type-text
|
:content-type constants/content-type-text
|
||||||
:timestamp-str "9:41 AM"}]
|
:timestamp-str "9:41 AM"}]
|
||||||
[react/view
|
[react/view
|
||||||
[react/view {:padding-left 60}
|
[react/view {:padding-left 72}
|
||||||
[message/message-author-name public-key]]
|
[message/message-author-name public-key]]
|
||||||
[react/view {:flex-direction :row}
|
[react/view {:flex-direction :row}
|
||||||
[react/view {:padding-left 16 :padding-right 8 :padding-top 4}
|
[react/view {:padding-left 16 :padding-right 8 :padding-top 4}
|
||||||
|
|
|
@ -337,7 +337,7 @@ class ChatElementByText(BaseText):
|
||||||
class Username(BaseText):
|
class Username(BaseText):
|
||||||
def __init__(self, driver, parent_locator):
|
def __init__(self, driver, parent_locator):
|
||||||
super(Username, self).__init__(driver)
|
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)
|
return Username(self.driver, self.locator.value)
|
||||||
|
|
||||||
|
|