diff --git a/src/status_im/subs.cljs b/src/status_im/subs.cljs index 1969e596b0..c21ddb0325 100644 --- a/src/status_im/subs.cljs +++ b/src/status_im/subs.cljs @@ -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] diff --git a/src/status_im/ui/components/chat_icon/styles.cljs b/src/status_im/ui/components/chat_icon/styles.cljs index b1a49b55f0..7f75124485 100644 --- a/src/status_im/ui/components/chat_icon/styles.cljs +++ b/src/status_im/ui/components/chat_icon/styles.cljs @@ -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 diff --git a/src/status_im/ui/components/list_item/views.cljs b/src/status_im/ui/components/list_item/views.cljs index 2f3e769d41..36e0a7fc67 100644 --- a/src/status_im/ui/components/list_item/views.cljs +++ b/src/status_im/ui/components/list_item/views.cljs @@ -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 diff --git a/src/status_im/ui/screens/home/styles.cljs b/src/status_im/ui/screens/home/styles.cljs index ef53ffdb79..254fc21efb 100644 --- a/src/status_im/ui/screens/home/styles.cljs +++ b/src/status_im/ui/screens/home/styles.cljs @@ -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}) diff --git a/src/status_im/ui/screens/home/views.cljs b/src/status_im/ui/screens/home/views.cljs index 7ba3ad9802..12aa28cfa1 100644 --- a/src/status_im/ui/screens/home/views.cljs +++ b/src/status_im/ui/screens/home/views.cljs @@ -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}] diff --git a/src/status_im/ui/screens/home/views/inner_item.cljs b/src/status_im/ui/screens/home/views/inner_item.cljs index ad9e004f22..93ae5d2256 100644 --- a/src/status_im/ui/screens/home/views/inner_item.cljs +++ b/src/status_im/ui/screens/home/views/inner_item.cljs @@ -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}])}])) diff --git a/src/status_im/ui/screens/profile/user/views.cljs b/src/status_im/ui/screens/profile/user/views.cljs index 6bc9834e7a..1b5d72b2b1 100644 --- a/src/status_im/ui/screens/profile/user/views.cljs +++ b/src/status_im/ui/screens/profile/user/views.cljs @@ -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)