status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

[7785] fix - Implement the correct list item layout in chats list 

Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>
This commit is contained in:
bitsikka 2019-08-30 00:39:45 +05:45 committed by Andrey Shovkoplyas
parent 12c08b1398
commit df3473dbef
No known key found for this signature in database
GPG Key ID: EAAB7C8622D860A4
7 changed files with 138 additions and 196 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/status_im/subs.cljs
View File

@ -715,6 +715,16 @@
(fn [{:keys [unviewed-messages-count]}]
unviewed-messages-count))
(re-frame/reg-sub
:chats/last-message-content
(fn [[_ chat-id]]
(re-frame/subscribe [:chats/chat chat-id]))
(fn [{:keys [last-message-content last-message-content-type timestamp last-message-timestamp]}]
{:content last-message-content
:content-type last-message-content-type
:last-message-timestamp last-message-timestamp
:timestamp timestamp}))
(re-frame/reg-sub
:chats/photo-path
:<- [:contacts/contacts]

7
src/status_im/ui/components/chat_icon/styles.cljs
View File

@ -41,10 +41,9 @@
:border-radius 32}))
(def default-chat-icon-text
{:color colors/white
:font-size 20
:font-weight "700"
:opacity 0.8})
{:color (colors/alpha colors/white 0.7)
:typography :title-bold
:line-height 21})
(def message-status-icon-text
{:margin-top -2

53
src/status_im/ui/components/list_item/views.cljs
View File

@ -67,8 +67,9 @@
:else [icon])])
(defn- title-row [{:keys [title title-color-override title-prefix title-prefix-width
title-prefix-height title-row-accessory]}
(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]
[react/view styles/title-row-container
(when title-prefix
@ -77,9 +78,9 @@
(= "main-icons" (namespace title-prefix)))
[icons/icon title-prefix
(merge
{:color colors/gray
:width 16
:height 16
{:color colors/gray
:width 16
:height 16
:container-style
(styles/title-prefix-icon-container
title-prefix-height title-prefix-width)}
@ -109,13 +110,17 @@
(cond
(or (string? title) (keyword? title) (number? title))
[react/text {:number-of-lines 1
:ellipsize-mode :tail
:style
(styles/title
type theme icon? title-prefix subtitle
content title-row-accessory disabled?
title-color-override)}
[react/text
(merge
{:number-of-lines 1
:ellipsize-mode :tail
:style
(styles/title
type theme icon? title-prefix subtitle
content title-row-accessory disabled?
title-color-override)}
(when title-accessibility-label
{:accessibility-label title-accessibility-label}))
(stringify title)]
(vector? title)
@ -288,6 +293,11 @@
;; title-color-override
;; colors/color - only occasionally needed, self-explanatory
;; title-accessibility-label
;; :accessibility-label for title text component
;; sometimes needed for title - e.g. chat-list-item
;; makes sense since `title` is the key element of a list item
;; title-row-accessory
;; component - especially made for chat list item, but may serve other
;; purpose in the unlikely future. Wrapper already has 2px :margin-top
@ -334,9 +344,9 @@
[{:keys [type theme container-margin-top container-margin-bottom
icon title-prefix title-prefix-width title-prefix-height
title title-color-override title-row-accessory
subtitle subtitle-max-lines subtitle-row-accessory
content accessories on-press on-long-press
error accessibility-label disabled?]
title-accessibility-label subtitle subtitle-max-lines
subtitle-row-accessory content accessories on-press
on-long-press error accessibility-label disabled?]
:or {type :default
theme :default
disabled? false
@ -344,12 +354,13 @@
container-margin-bottom 0
subtitle-max-lines 1}}]
(let [title-row-elements
{:title title
:title-color-override title-color-override
:title-prefix title-prefix
:title-prefix-width title-prefix-width
:title-prefix-height title-prefix-height
: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

95
src/status_im/ui/screens/home/styles.cljs
View File

@ -1,8 +1,7 @@
(ns status-im.ui.screens.home.styles
(:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
(:require [status-im.ui.components.colors :as colors]
[status-im.utils.platform :as platform]
[status-im.ui.components.bottom-bar.styles :as tabs.styles]))
[status-im.utils.platform :as platform]))
(defn toolbar []
{:background-color colors/white})
@ -12,83 +11,14 @@
(defstyle sync-info {:margin-horizontal 15})
(defstyle chat-container
{:flex-direction :row
:android {:height 76}
:ios {:height 74}
:desktop {:height 74}
:overflow :hidden})
(defstyle chat-icon-container
{:padding-top 18
:padding-bottom 18
:padding-left 12
:padding-right 20
:width 72
:android {:height 76}
:ios {:height 74}
:desktop {:height 74}})
(defstyle chat-info-container
{:margin-bottom 13
:justify-content :space-between
:flex 1
:flex-direction :column
:android {:margin-top 16}
:ios {:margin-top 14}
:desktop {:margin-top 14}})
(defstyle chat-options-container
{:padding-top 10})
(defstyle item-upper-container
{:flex 1
:flex-direction :row
:padding-right 16})
(defstyle item-lower-container
{:flex 1
:flex-direction :row
:justify-content :space-between
:padding-right 16
:android {:margin-top 4}
:ios {:margin-top 6}
:desktop {:margin-top 6}})
(def message-status-container
{:flex-direction :row
:align-items :center})
(def name-view
{:flex-direction :row
:flex 1
:margin-right 4})
(defstyle name-text
{:color colors/text
:android {:font-size 16
:height 26}
:ios {:font-size 17
:height 26}
:desktop {:font-size 17
:height 26}})
(defstyle private-group-icon-container
{:align-items :center
:justify-content :center
:margin-right 6})
(defstyle public-group-icon-container
{:align-items :center
:justify-content :center
:margin-right 6})
(def last-message-container
{:flex-shrink 1})
(def last-message-text
{:color colors/text-gray
:max-height 24})
{:flex 1
:align-self :stretch
:line-height 22
:color colors/gray})
(def search-input-height 56)
@ -133,10 +63,12 @@
:height 16})
(defstyle datetime-text
{:color colors/text-gray
:android {:font-size 12}
:desktop {:font-size 14}
:ios {:font-size 12}})
{:color colors/text-gray
:font-size 10
:text-align :right
:letter-spacing 0.4
:align-items :center
:line-height 12})
(defstyle new-messages-text
{:left 0
@ -189,10 +121,7 @@
{:position :absolute
:z-index 2
:align-items :center
:bottom (+ tabs.styles/tabs-diff (cond
platform/ios? 16
platform/android? 0
platform/desktop? 6))
:bottom 16
:left (- (/ home-width 2) 20)
:width 40
:height 40})

13
src/status_im/ui/screens/home/views.cljs
View File

@ -11,6 +11,7 @@
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.screens.home.styles :as styles]
[status-im.ui.screens.home.filter.views :as filter.views]
[status-im.utils.platform :as platform]
[status-im.utils.utils :as utils]
[status-im.ui.components.bottom-bar.styles :as tabs.styles]
[status-im.ui.screens.home.views.inner-item :as inner-item]
@ -93,16 +94,15 @@
false)}))
[list/flat-list {:data all-home-items
:key-fn first
:footer [react/view
{:style {:height tabs.styles/tabs-diff
:align-self :stretch}}]
:header [react/view {:height 4 :flex 1}]
:footer [react/view {:height 4 :flex 1}]
:on-scroll-begin-drag
(fn [e]
(reset! scrolling-from-top?
;; check if scrolling up from top of list
(zero? (.-y (.-contentOffset (.-nativeEvent e))))))
:render-fn
(fn [home-item]
(fn [home-item _]
[inner-item/home-list-item home-item])}]
(when (:to-hide? @search-input-state)
[react/view {:width 1
@ -128,7 +128,10 @@
(let [home-width (if (> window-width constants/two-pane-min-width)
(max constants/left-pane-min-width (/ window-width 3))
window-width)]
[react/view (merge {:flex 1 :width home-width}
[react/view (merge {:flex 1
:width home-width}
(when platform/ios?
{:margin-bottom tabs.styles/tabs-diff})
(when two-pane-ui-enabled?
{:border-right-width 1 :border-right-color colors/black-transparent}))
[status-bar/status-bar {:type :main}]

148
src/status_im/ui/screens/home/views/inner_item.cljs
View File

@ -14,7 +14,8 @@
[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.utils.datetime :as time]
[status-im.ui.components.list-item.views :as list-item])
(:require-macros [status-im.utils.views :refer [defview letsubs]]))
(defview command-short-preview [message]
@ -23,43 +24,46 @@
(when-let [command (commands-receiving/lookup-command-by-ref message id->command)]
(commands/generate-short-preview command (commands/add-chat-contacts contacts message)))))
(defn message-content-text [{:keys [content content-type] :as message}]
[react/view styles/last-message-container
(cond
(defview message-content-text [chat-id]
(letsubs [{:keys [content content-type] :as message} [:chats/last-message-content chat-id]]
[react/view styles/last-message-container
(cond
(not (and content content-type))
[react/text {:style styles/last-message-text
:accessibility-label :no-messages-text}
(i18n/label :t/no-messages)]
(not (and content content-type))
[react/text {:style styles/last-message-text
:accessibility-label :no-messages-text}
(i18n/label :t/no-messages)]
(= constants/content-type-command content-type)
[command-short-preview message]
(= constants/content-type-command content-type)
[command-short-preview message]
(= constants/content-type-sticker content-type)
[react/image {:style {:margin 2 :width 30 :height 30}
:source {:uri (contenthash/url (:hash content))}}]
(= constants/content-type-sticker content-type)
[react/image {:style {:margin 1 :width 20 :height 20}
:source {:uri (contenthash/url (:hash content))}}]
(string/blank? (:text content))
[react/text {:style styles/last-message-text}
""]
(string/blank? (:text content))
[react/text {:style styles/last-message-text}
""]
(:text content)
[react/text {:style styles/last-message-text
:number-of-lines 1
:accessibility-label :chat-message-text}
(:text content)]
(:text content)
[react/text {:style styles/last-message-text
:number-of-lines 1
:accessibility-label :chat-message-text}
(:text content)]
:else
[react/text {:style styles/last-message-text
:number-of-lines 1
:accessibility-label :chat-message-text}
content])])
:else
[react/text {:style styles/last-message-text
:number-of-lines 1
:accessibility-label :chat-message-text}
content])]))
(defn message-timestamp [timestamp]
(when timestamp
[react/text {:style styles/datetime-text
:accessibility-label :last-message-time-text}
(time/to-short-str timestamp)]))
(defview message-timestamp [chat-id]
(letsubs [{:keys [last-message-timestamp timestamp]} [:chats/last-message-content chat-id]]
(let [ts (if (pos? last-message-timestamp) last-message-timestamp timestamp)]
(when ts
[react/text {:style styles/datetime-text
:accessibility-label :last-message-time-text}
(string/upper-case (time/to-short-str ts))]))))
(defview unviewed-indicator [chat-id]
(letsubs [unviewed-messages-count [:chats/unviewed-messages-count chat-id]]
@ -68,54 +72,36 @@
:accessibility-label :unread-messages-count-text}
unviewed-messages-count])))
(defn chat-list-item-name [chat-name group-chat? public? public-key]
(let [private-group? (and group-chat? (not public?))
public-group? (and group-chat? public?)]
[react/view styles/name-view
(when public-group?
[react/view styles/public-group-icon-container
[vector-icons/tiny-icon :tiny-icons/tiny-public {:color colors/gray}]])
(when private-group?
[react/view styles/private-group-icon-container
[vector-icons/tiny-icon :tiny-icons/tiny-group {:color colors/gray}]])
[react/view {:flex-shrink 1
:align-items :center
:justify-content :center}
[react/text {:style styles/name-text
:number-of-lines 1
:accessibility-label :chat-name-text}
chat-name]]]))
(defn home-list-item [[home-item-id home-item]]
(let [{:keys [chat-id chat-name
name color online
group-chat public?
public-key contact
last-message-timestamp
timestamp
last-message-content
last-message-content-type]} home-item
truncated-chat-name (utils/truncate-str chat-name 30)
chat-actions (cond
(and group-chat public?) :public-chat-actions
(and group-chat (not public?)) :group-chat-actions
:else :private-chat-actions)]
[react/touchable-highlight {:on-press #(do
(re-frame/dispatch [:chat.ui/navigate-to-chat chat-id])
(re-frame/dispatch [:chat.ui/mark-messages-seen :chat]))
:on-long-press #(re-frame/dispatch [:bottom-sheet/show-sheet chat-actions {:chat-id chat-id}])}
[react/view styles/chat-container
[react/view styles/chat-icon-container
[chat-icon.screen/chat-icon-view-chat-list contact group-chat truncated-chat-name color online false]]
[react/view styles/chat-info-container
[react/view styles/item-upper-container
[chat-list-item-name truncated-chat-name group-chat public? public-key]
[react/view styles/message-status-container
[message-timestamp (if (pos? last-message-timestamp) last-message-timestamp timestamp)]]]
[react/view styles/item-lower-container
(let [{:keys [tribute-status tribute-label]} (:tribute-to-talk contact)]
(if (not (#{:require :pending} tribute-status))
[message-content-text {:content last-message-content
:content-type last-message-content-type}]
[react/text {:style styles/last-message-text} tribute-label]))
[unviewed-indicator chat-id]]]]]))
(let [{:keys
[chat-id chat-name name
color online group-chat
public? public-key
contact]} home-item
private-group? (and group-chat (not public?))
public-group? (and group-chat public?)
truncated-chat-name (utils/truncate-str chat-name 30)
chat-actions (cond
(and group-chat public?) :public-chat-actions
(and group-chat (not public?)) :group-chat-actions
:else :private-chat-actions)]
[list-item/list-item
{:icon [chat-icon.screen/chat-icon-view-chat-list
contact group-chat truncated-chat-name color online false]
:title-prefix (cond
private-group? :main-icons/tiny-group
public-group? :main-icons/tiny-public
:else nil)
:title truncated-chat-name
:title-accessibility-label :chat-name-text
:title-row-accessory [message-timestamp chat-id]
:subtitle
(let [{:keys [tribute-status tribute-label]} (:tribute-to-talk contact)]
(if (not (#{:require :pending} tribute-status))
[message-content-text chat-id]
tribute-label))
:subtitle-row-accessory [unviewed-indicator chat-id]
:on-press #(do
(re-frame/dispatch [:chat.ui/navigate-to-chat chat-id])
(re-frame/dispatch [:chat.ui/mark-messages-seen :chat]))
:on-long-press #(re-frame/dispatch [:bottom-sheet/show-sheet chat-actions {:chat-id chat-id}])}]))

8
src/status_im/ui/screens/profile/user/views.cljs
View File

@ -23,6 +23,7 @@
[status-im.ui.screens.profile.components.views :as profile.components]
[status-im.ui.screens.profile.user.styles :as styles]
[status-im.utils.identicon :as identicon]
[status-im.utils.platform :as platform]
[status-im.utils.universal-links.core :as universal-links]))
(views/defview share-chat-key []
@ -198,8 +199,11 @@
content (flat-list-content
preferred-name registrar tribute-to-talk
active-contacts-count show-backup-seed?)]
[react/safe-area-view {:style {:flex 1
:margin-bottom tabs.styles/tabs-diff}}
[react/safe-area-view
{:style
(merge {:flex 1}
(when platform/ios?
{:margin-bottom tabs.styles/tabs-diff}))}
[status-bar/status-bar {:type :main}]
[large-toolbar/minimized-toolbar
(header-in-toolbar multiaccount)