[8978] fix - chat text ending with new-line breaks chat-list layout
Signed-off-by: yenda <eric@status.im>
This commit is contained in:
parent
62442d70d5
commit
d472cfcddd
|
@ -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])])))})))
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue