[8978] fix - chat text ending with new-line breaks chat-list layout

Signed-off-by: yenda <eric@status.im>
This commit is contained in:
bitsikka 2019-09-12 19:22:09 +05:45 committed by yenda
parent 62442d70d5
commit d472cfcddd
No known key found for this signature in database
GPG Key ID: 0095623C0069DCE6
2 changed files with 42 additions and 60 deletions

View File

@ -2,8 +2,8 @@
(:require [reagent.core :as reagent]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.icons.vector-icons :as icons]
[status-im.ui.components.react :as react]
[status-im.ui.components.list-item.styles :as styles]
[status-im.ui.components.react :as react]
[status-im.ui.components.tooltip.views :as tooltip]
[status-im.ui.screens.chat.photos :as photos]
[status-im.ui.screens.profile.db :as profile.db]
@ -41,7 +41,7 @@
(defn- title-row [{:keys [title title-color-override title-prefix
title-prefix-width title-prefix-height
title-accessibility-label title-row-accessory]}
type icon? disabled? theme subtitle content accessories]
type icon? disabled? theme subtitle content]
[react/view styles/title-row-container
(when title-prefix
(cond
@ -108,11 +108,11 @@
[react/view styles/title-row-accessory-container title-row-accessory])])
(defn subtitle-row
[subtitle-row-elements icon? theme]
[_ _]
(let [subtitle-row-accessory-width (reagent/atom 0)]
(reagent/create-class
{:reagent-render
(fn [{:keys [subtitle subtitle-max-lines subtitle-row-accessory]} icon? theme]
(fn [{:keys [subtitle subtitle-max-lines subtitle-row-accessory]} icon?]
[react/view styles/subtitle-row-container
(cond
(or (string? subtitle) (keyword? subtitle) (number? subtitle))
@ -152,10 +152,10 @@
(when title
[title-row
title-row-elements type icon? disabled?
theme subtitle content accessories])
theme subtitle content])
(when (and subtitle (= :default type))
[subtitle-row subtitle-row-elements icon? theme])
[subtitle-row subtitle-row-elements icon?])
(when content
[react/view {:margin-left (if icon? 2 0)}
@ -163,11 +163,8 @@
content
[content])])])
(defn- accessories-column [accessories theme width]
(let [last-accessory (peek accessories)
last-accessory-is-component (and (not (utils.label/stringify last-accessory))
(not= :chevron last-accessory))
second-last-accessory (peek (pop accessories))]
(defn- accessories-column [accessories width]
(let [last-accessory (peek accessories)]
(into
[react/view styles/accessories-container]
(for [accessory accessories]
@ -318,7 +315,7 @@
`styles/subtitle-title-row-container` and/or `styles/subtitle`.
`accessories`
Vector of `:chevron`, Any one of keyword representing `:main-icon/icon`,
Vector of `:chevron`, Any one of keyword representing `:main-icon/icon`,
`number`, `keyword` or `component`
Long stringified accessory has max-width of 62% of device width.
That means `title` is also constrained to not be longer than
@ -347,53 +344,39 @@
of list-item is colors/gray-selected. Useful for selectable
list-items like list with radio buttons."
[{:keys
[react-key type theme container-margin-top container-margin-bottom
icon title-prefix title-prefix-width title-prefix-height
title title-color-override title-row-accessory
title-accessibility-label subtitle subtitle-max-lines
subtitle-row-accessory content accessories on-press
on-long-press error accessibility-label disabled? selected?]
:or {react-key (name (gensym "list-item"))
type :default
theme :default
disabled? false
container-margin-top 0
container-margin-bottom 0
subtitle-max-lines 1}}]
(let [title-row-elements
{:title title
:title-color-override title-color-override
:title-accessibility-label title-accessibility-label
:title-prefix title-prefix
:title-prefix-width title-prefix-width
:title-prefix-height title-prefix-height
:title-row-accessory title-row-accessory}
subtitle-row-elements
{:subtitle subtitle
:subtitle-max-lines subtitle-max-lines
:subtitle-row-accessory subtitle-row-accessory}
width (reagent/atom 0)
radio-selected? (and (= theme :selectable) selected?)]
[_]
(let [width (reagent/atom 0)
r-key (name (gensym "list-item"))]
(reagent/create-class
{:reagent-render
(fn
[{:keys
[icon title-prefix title title-row-accessory subtitle
subtitle-max-lines subtitle-row-accessory content
accessories on-press on-long-press error disabled? selected?]
:or {subtitle-max-lines 1}}]
[react-key type theme container-margin-top container-margin-bottom
icon title-prefix title-prefix-width title-prefix-height
title title-color-override title-row-accessory
title-accessibility-label subtitle subtitle-max-lines
subtitle-row-accessory content accessories on-press
on-long-press error accessibility-label disabled? selected?]
:or {react-key r-key
type :default
theme :default
disabled? false
container-margin-top 0
container-margin-bottom 0
subtitle-max-lines 1}}]
(let [title-row-elements
(merge title-row-elements
{:title title
:title-prefix title-prefix
:title-row-accessory title-row-accessory})
{:title title
:title-color-override title-color-override
:title-accessibility-label title-accessibility-label
:title-prefix title-prefix
:title-prefix-width title-prefix-width
:title-prefix-height title-prefix-height
:title-row-accessory title-row-accessory}
subtitle-row-elements
{:subtitle subtitle
:subtitle-max-lines subtitle-max-lines
:subtitle-row-accessory subtitle-row-accessory}
radio-selected?
(and (= theme :selectable) selected?)]
radio-selected? (and (= theme :selectable) selected?)]
^{:key react-key}
(if (= type :divider)
divider
@ -419,6 +402,6 @@
type icon disabled? theme content accessories])
(when accessories
[accessories-column accessories theme width])]]
[accessories-column accessories width])]]
(when error
[tooltip/tooltip error styles/error])])))})))

View File

@ -6,16 +6,13 @@
[status-im.constants :as constants]
[status-im.i18n :as i18n]
[status-im.ui.components.chat-icon.screen :as chat-icon.screen]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.common.common :as components.common]
[status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.components.list.views :as list]
[status-im.ui.components.list-item.views :as list-item]
[status-im.ui.components.react :as react]
[status-im.ui.screens.home.styles :as styles]
[status-im.utils.contenthash :as contenthash]
[status-im.utils.core :as utils]
[status-im.utils.datetime :as time]
[status-im.ui.components.list-item.views :as list-item])
[status-im.utils.datetime :as time])
(:require-macros [status-im.utils.views :refer [defview letsubs]]))
(defview command-short-preview [message]
@ -47,12 +44,14 @@
(:text content)
[react/text {:style styles/last-message-text
:number-of-lines 1
:ellipsize-mode :tail
:accessibility-label :chat-message-text}
(:text content)]
(string/trim-newline (:text content))]
:else
[react/text {:style styles/last-message-text
:number-of-lines 1
:ellipsize-mode :tail
:accessibility-label :chat-message-text}
content])])
@ -69,11 +68,11 @@
:accessibility-label :unread-messages-count-text}
unviewed-messages-count])))
(defn home-list-item [[home-item-id home-item]]
(defn home-list-item [[_ home-item]]
(let [{:keys
[chat-id chat-name name
[chat-id chat-name
color online group-chat
public? public-key contact
public? contact
last-message-timestamp
timestamp
last-message-content