[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]
|
(:require [reagent.core :as reagent]
|
||||||
[status-im.ui.components.colors :as colors]
|
[status-im.ui.components.colors :as colors]
|
||||||
[status-im.ui.components.icons.vector-icons :as icons]
|
[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.list-item.styles :as styles]
|
||||||
|
[status-im.ui.components.react :as react]
|
||||||
[status-im.ui.components.tooltip.views :as tooltip]
|
[status-im.ui.components.tooltip.views :as tooltip]
|
||||||
[status-im.ui.screens.chat.photos :as photos]
|
[status-im.ui.screens.chat.photos :as photos]
|
||||||
[status-im.ui.screens.profile.db :as profile.db]
|
[status-im.ui.screens.profile.db :as profile.db]
|
||||||
|
@ -41,7 +41,7 @@
|
||||||
(defn- title-row [{:keys [title title-color-override title-prefix
|
(defn- title-row [{:keys [title title-color-override title-prefix
|
||||||
title-prefix-width title-prefix-height
|
title-prefix-width title-prefix-height
|
||||||
title-accessibility-label title-row-accessory]}
|
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
|
[react/view styles/title-row-container
|
||||||
(when title-prefix
|
(when title-prefix
|
||||||
(cond
|
(cond
|
||||||
|
@ -108,11 +108,11 @@
|
||||||
[react/view styles/title-row-accessory-container title-row-accessory])])
|
[react/view styles/title-row-accessory-container title-row-accessory])])
|
||||||
|
|
||||||
(defn subtitle-row
|
(defn subtitle-row
|
||||||
[subtitle-row-elements icon? theme]
|
[_ _]
|
||||||
(let [subtitle-row-accessory-width (reagent/atom 0)]
|
(let [subtitle-row-accessory-width (reagent/atom 0)]
|
||||||
(reagent/create-class
|
(reagent/create-class
|
||||||
{:reagent-render
|
{: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
|
[react/view styles/subtitle-row-container
|
||||||
(cond
|
(cond
|
||||||
(or (string? subtitle) (keyword? subtitle) (number? subtitle))
|
(or (string? subtitle) (keyword? subtitle) (number? subtitle))
|
||||||
|
@ -152,10 +152,10 @@
|
||||||
(when title
|
(when title
|
||||||
[title-row
|
[title-row
|
||||||
title-row-elements type icon? disabled?
|
title-row-elements type icon? disabled?
|
||||||
theme subtitle content accessories])
|
theme subtitle content])
|
||||||
|
|
||||||
(when (and subtitle (= :default type))
|
(when (and subtitle (= :default type))
|
||||||
[subtitle-row subtitle-row-elements icon? theme])
|
[subtitle-row subtitle-row-elements icon?])
|
||||||
|
|
||||||
(when content
|
(when content
|
||||||
[react/view {:margin-left (if icon? 2 0)}
|
[react/view {:margin-left (if icon? 2 0)}
|
||||||
|
@ -163,11 +163,8 @@
|
||||||
content
|
content
|
||||||
[content])])])
|
[content])])])
|
||||||
|
|
||||||
(defn- accessories-column [accessories theme width]
|
(defn- accessories-column [accessories width]
|
||||||
(let [last-accessory (peek accessories)
|
(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))]
|
|
||||||
(into
|
(into
|
||||||
[react/view styles/accessories-container]
|
[react/view styles/accessories-container]
|
||||||
(for [accessory accessories]
|
(for [accessory accessories]
|
||||||
|
@ -347,53 +344,39 @@
|
||||||
of list-item is colors/gray-selected. Useful for selectable
|
of list-item is colors/gray-selected. Useful for selectable
|
||||||
list-items like list with radio buttons."
|
list-items like list with radio buttons."
|
||||||
|
|
||||||
[{:keys
|
[_]
|
||||||
[react-key type theme container-margin-top container-margin-bottom
|
(let [width (reagent/atom 0)
|
||||||
icon title-prefix title-prefix-width title-prefix-height
|
r-key (name (gensym "list-item"))]
|
||||||
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?)]
|
|
||||||
(reagent/create-class
|
(reagent/create-class
|
||||||
{:reagent-render
|
{:reagent-render
|
||||||
(fn
|
(fn
|
||||||
[{:keys
|
[{:keys
|
||||||
[icon title-prefix title title-row-accessory subtitle
|
[react-key type theme container-margin-top container-margin-bottom
|
||||||
subtitle-max-lines subtitle-row-accessory content
|
icon title-prefix title-prefix-width title-prefix-height
|
||||||
accessories on-press on-long-press error disabled? selected?]
|
title title-color-override title-row-accessory
|
||||||
:or {subtitle-max-lines 1}}]
|
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
|
(let [title-row-elements
|
||||||
(merge title-row-elements
|
{:title title
|
||||||
{:title title
|
:title-color-override title-color-override
|
||||||
:title-prefix title-prefix
|
:title-accessibility-label title-accessibility-label
|
||||||
:title-row-accessory title-row-accessory})
|
: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-row-elements
|
||||||
{:subtitle subtitle
|
{:subtitle subtitle
|
||||||
:subtitle-max-lines subtitle-max-lines
|
:subtitle-max-lines subtitle-max-lines
|
||||||
:subtitle-row-accessory subtitle-row-accessory}
|
:subtitle-row-accessory subtitle-row-accessory}
|
||||||
radio-selected?
|
radio-selected? (and (= theme :selectable) selected?)]
|
||||||
(and (= theme :selectable) selected?)]
|
|
||||||
^{:key react-key}
|
^{:key react-key}
|
||||||
(if (= type :divider)
|
(if (= type :divider)
|
||||||
divider
|
divider
|
||||||
|
@ -419,6 +402,6 @@
|
||||||
type icon disabled? theme content accessories])
|
type icon disabled? theme content accessories])
|
||||||
|
|
||||||
(when accessories
|
(when accessories
|
||||||
[accessories-column accessories theme width])]]
|
[accessories-column accessories width])]]
|
||||||
(when error
|
(when error
|
||||||
[tooltip/tooltip error styles/error])])))})))
|
[tooltip/tooltip error styles/error])])))})))
|
||||||
|
|
|
@ -6,16 +6,13 @@
|
||||||
[status-im.constants :as constants]
|
[status-im.constants :as constants]
|
||||||
[status-im.i18n :as i18n]
|
[status-im.i18n :as i18n]
|
||||||
[status-im.ui.components.chat-icon.screen :as chat-icon.screen]
|
[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.common.common :as components.common]
|
||||||
[status-im.ui.components.icons.vector-icons :as vector-icons]
|
[status-im.ui.components.list-item.views :as list-item]
|
||||||
[status-im.ui.components.list.views :as list]
|
|
||||||
[status-im.ui.components.react :as react]
|
[status-im.ui.components.react :as react]
|
||||||
[status-im.ui.screens.home.styles :as styles]
|
[status-im.ui.screens.home.styles :as styles]
|
||||||
[status-im.utils.contenthash :as contenthash]
|
[status-im.utils.contenthash :as contenthash]
|
||||||
[status-im.utils.core :as utils]
|
[status-im.utils.core :as utils]
|
||||||
[status-im.utils.datetime :as time]
|
[status-im.utils.datetime :as time])
|
||||||
[status-im.ui.components.list-item.views :as list-item])
|
|
||||||
(:require-macros [status-im.utils.views :refer [defview letsubs]]))
|
(:require-macros [status-im.utils.views :refer [defview letsubs]]))
|
||||||
|
|
||||||
(defview command-short-preview [message]
|
(defview command-short-preview [message]
|
||||||
|
@ -47,12 +44,14 @@
|
||||||
(:text content)
|
(:text content)
|
||||||
[react/text {:style styles/last-message-text
|
[react/text {:style styles/last-message-text
|
||||||
:number-of-lines 1
|
:number-of-lines 1
|
||||||
|
:ellipsize-mode :tail
|
||||||
:accessibility-label :chat-message-text}
|
:accessibility-label :chat-message-text}
|
||||||
(:text content)]
|
(string/trim-newline (:text content))]
|
||||||
|
|
||||||
:else
|
:else
|
||||||
[react/text {:style styles/last-message-text
|
[react/text {:style styles/last-message-text
|
||||||
:number-of-lines 1
|
:number-of-lines 1
|
||||||
|
:ellipsize-mode :tail
|
||||||
:accessibility-label :chat-message-text}
|
:accessibility-label :chat-message-text}
|
||||||
content])])
|
content])])
|
||||||
|
|
||||||
|
@ -69,11 +68,11 @@
|
||||||
:accessibility-label :unread-messages-count-text}
|
:accessibility-label :unread-messages-count-text}
|
||||||
unviewed-messages-count])))
|
unviewed-messages-count])))
|
||||||
|
|
||||||
(defn home-list-item [[home-item-id home-item]]
|
(defn home-list-item [[_ home-item]]
|
||||||
(let [{:keys
|
(let [{:keys
|
||||||
[chat-id chat-name name
|
[chat-id chat-name
|
||||||
color online group-chat
|
color online group-chat
|
||||||
public? public-key contact
|
public? contact
|
||||||
last-message-timestamp
|
last-message-timestamp
|
||||||
timestamp
|
timestamp
|
||||||
last-message-content
|
last-message-content
|
||||||
|
|
Loading…
Reference in New Issue