[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] (: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])])))})))

View File

@ -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