fix: polish new chat (#19054)

This commit is contained in:
BalogunofAfrica 2024-03-14 17:30:23 +01:00 committed by GitHub
parent 69294b196f
commit 2a515a82ce
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 129 additions and 91 deletions

View File

@ -18,9 +18,9 @@
:align-items :center}) :align-items :center})
(defn action-icon (defn action-icon
[{:keys [type on-press on-check disabled? checked?]} theme] [{:keys [type on-press on-check disabled? checked?]} customization-color theme]
[rn/touchable-opacity [rn/touchable-opacity
{:on-press (when on-press on-press)} {:on-press on-press}
(case type (case type
:options :options
[icons/icon :i/options [icons/icon :i/options
@ -30,6 +30,7 @@
[selectors/view [selectors/view
{:type :checkbox {:type :checkbox
:checked? checked? :checked? checked?
:customization-color customization-color
:accessibility-label :user-list-toggle-check :accessibility-label :user-list-toggle-check
:disabled? disabled? :disabled? disabled?
:on-change (when on-check on-check)}] :on-change (when on-check on-check)}]
@ -68,4 +69,4 @@
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}} :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}}
short-chat-key])] short-chat-key])]
(when accessory (when accessory
[action-icon accessory theme])]]) [action-icon accessory customization-color theme])]])

View File

@ -95,13 +95,34 @@
(into [{:title title :header? true}] data)) (into [{:title title :header? true}] data))
sections)) sections))
(defn- find-sticky-indices
[data]
(->> data
(map-indexed (fn [index item] (when (:header? item) index)))
(remove nil?)
(vec)))
(defn- is-last-item-in-section
[data index]
(let [next-item (nth data (inc index) nil)]
(or (nil? next-item) (:header? next-item))))
(defn section-list (defn section-list
[{:keys [sections render-section-header-fn render-fn] :as props}] [{:keys [sections sticky-section-headers-enabled render-section-header-fn render-section-footer-fn
render-fn]
:or {sticky-section-headers-enabled true}
:as props}]
(let [data (flatten-sections sections)] (let [data (flatten-sections sections)]
[flat-list [flat-list
(merge props (merge props
{:data data {:data data
:render-fn (fn [p1 p2 p3 p4] :render-fn (fn [p1 p2 p3 p4]
[:<>
(if (:header? p1) (if (:header? p1)
[render-section-header-fn p1 p2 p3 p4] [render-section-header-fn p1 p2 p3 p4]
[render-fn p1 p2 p3 p4]))})])) [render-fn p1 p2 p3 p4])
(when (and render-section-footer-fn
(is-last-item-in-section data p2))
[render-section-footer-fn p1 p2 p3 p4])])
:sticky-header-indices (when sticky-section-headers-enabled
(find-sticky-indices data))})]))

View File

@ -1,5 +1,9 @@
(ns status-im.common.contact-list.style) (ns status-im.common.contact-list.style
(:require [quo.foundations.colors :as colors]))
(def contacts-section-footer
{:height 8})
(defn contacts-section-header (defn contacts-section-header
[first-item?] [theme]
{:padding-top (if first-item? 0 8)}) {:background-color (colors/theme-colors colors/white colors/neutral-95 theme)})

View File

@ -1,10 +1,16 @@
(ns status-im.common.contact-list.view (ns status-im.common.contact-list.view
(:require (:require
[quo.core :as quo] [quo.core :as quo]
[quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[status-im.common.contact-list.style :as style])) [status-im.common.contact-list.style :as style]))
(defn contacts-section-footer
[]
[rn/view style/contacts-section-footer])
(defn contacts-section-header (defn contacts-section-header
[{:keys [title index]}] [{:keys [title]}]
[rn/view (style/contacts-section-header (= index 0)) (let [theme (quo.theme/use-theme-value)]
[quo/divider-label title]]) [rn/view (style/contacts-section-header theme)
[quo/divider-label title]]))

View File

@ -62,6 +62,7 @@
:sticky-section-headers-enabled false :sticky-section-headers-enabled false
:sections (rf/sub [:contacts/grouped-by-first-letter]) :sections (rf/sub [:contacts/grouped-by-first-letter])
:render-section-header-fn contact-list/contacts-section-header :render-section-header-fn contact-list/contacts-section-header
:render-section-footer-fn contact-list/contacts-section-footer
:content-container-style {:padding-bottom 20} :content-container-style {:padding-bottom 20}
:render-data {:group group} :render-data {:group group}
:render-fn add-member-contact-item-render}] :render-fn add-member-contact-item-render}]

View File

@ -1,5 +1,6 @@
(ns status-im.contexts.chat.home.new-chat.styles (ns status-im.contexts.chat.home.new-chat.styles
(:require (:require
[quo.foundations.colors :as colors]
[react-native.safe-area :as safe-area])) [react-native.safe-area :as safe-area]))
(def contact-selection-heading (def contact-selection-heading
@ -9,11 +10,16 @@
:margin-top 24 :margin-top 24
:margin-bottom 16}) :margin-bottom 16})
(def chat-button (defn chat-button-container
[theme]
{:position :absolute {:position :absolute
:bottom (+ 12 (safe-area/get-bottom)) :bottom 0
:left 20 :padding-bottom 33
:right 20}) :background-color (colors/theme-colors colors/white-opa-70 colors/neutral-95-opa-70 theme)
:padding-top 12
:padding-horizontal 20
:left 0
:right 0})
(defn no-contacts (defn no-contacts
[] []

View File

@ -2,7 +2,7 @@
(:require (:require
[quo.core :as quo] [quo.core :as quo]
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[quo.theme :as quo.theme] [quo.theme]
[re-frame.core :as re-frame] [re-frame.core :as re-frame]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.gesture :as gesture] [react-native.gesture :as gesture]
@ -85,11 +85,13 @@
:on-check on-toggle}} :on-check on-toggle}}
item])) item]))
(defn- view-internal (defn view
[{:keys [scroll-enabled? on-scroll close theme]}] [{:keys [scroll-enabled? on-scroll close]}]
(let [contacts (rf/sub [:contacts/sorted-and-grouped-by-first-letter]) (let [theme (quo.theme/use-theme-value)
contacts (rf/sub [:contacts/sorted-and-grouped-by-first-letter])
selected-contacts-count (rf/sub [:selected-contacts-count]) selected-contacts-count (rf/sub [:selected-contacts-count])
selected-contacts (rf/sub [:group/selected-contacts]) selected-contacts (rf/sub [:group/selected-contacts])
customization-color (rf/sub [:profile/customization-color])
one-contact-selected? (= selected-contacts-count 1) one-contact-selected? (= selected-contacts-count 1)
[has-error? set-has-error] (rn/use-state false) [has-error? set-has-error] (rn/use-state false)
render-fn (rn/use-callback (fn [item] render-fn (rn/use-callback (fn [item]
@ -111,7 +113,9 @@
{:weight :semi-bold {:weight :semi-bold
:size :heading-1 :size :heading-1
:style {:color (colors/theme-colors colors/neutral-100 colors/white theme)}} :style {:color (colors/theme-colors colors/neutral-100 colors/white theme)}}
(i18n/label :t/new-chat)] (if (or (not contacts-selected?) one-contact-selected?)
(i18n/label :t/new-chat)
(i18n/label :t/new-group-chat))]
(when (seq contacts) (when (seq contacts)
[quo/text [quo/text
{:size :paragraph-2 {:size :paragraph-2
@ -127,24 +131,24 @@
[no-contacts-view {:theme theme}] [no-contacts-view {:theme theme}]
[gesture/section-list [gesture/section-list
{:key-fn :title {:key-fn :title
:sticky-section-headers-enabled false
:sections (rf/sub [:contacts/filtered-active-sections]) :sections (rf/sub [:contacts/filtered-active-sections])
:render-section-header-fn contact-list/contacts-section-header :render-section-header-fn contact-list/contacts-section-header
:render-section-footer-fn contact-list/contacts-section-footer
:content-container-style {:padding-bottom 70} :content-container-style {:padding-bottom 70}
:render-fn render-fn :render-fn render-fn
:scroll-enabled @scroll-enabled? :scroll-enabled @scroll-enabled?
:on-scroll on-scroll}]) :on-scroll on-scroll}])
(when contacts-selected? (when contacts-selected?
[rn/view
{:style (style/chat-button-container theme)}
[quo/button [quo/button
{:type :primary {:type :primary
:customization-color customization-color
:accessibility-label :next-button :accessibility-label :next-button
:container-style style/chat-button
:on-press (fn [] :on-press (fn []
(if one-contact-selected? (if one-contact-selected?
(rf/dispatch [:chat.ui/start-chat public-key]) (rf/dispatch [:chat.ui/start-chat public-key])
(rf/dispatch [:navigate-to :new-group])))} (rf/dispatch [:navigate-to :new-group])))}
(if one-contact-selected? (if one-contact-selected?
(i18n/label :t/chat-with {:selected-user primary-name}) (i18n/label :t/chat-with {:selected-user primary-name})
(i18n/label :t/setup-group-chat))])])) (i18n/label :t/setup-group-chat))]])]))
(def view (quo.theme/with-theme view-internal))

View File

@ -106,6 +106,7 @@
:sections items :sections items
:sticky-section-headers-enabled false :sticky-section-headers-enabled false
:render-section-header-fn contact-list/contacts-section-header :render-section-header-fn contact-list/contacts-section-header
:render-section-footer-fn contact-list/contacts-section-footer
:render-fn (fn [data] :render-fn (fn [data]
(contact-item-render data theme)) (contact-item-render data theme))
:scroll-event-throttle 8 :scroll-event-throttle 8
@ -126,12 +127,12 @@
:title (i18n/label :t/invite-friends-to-status) :title (i18n/label :t/invite-friends-to-status)
:description (i18n/label :t/share-invite-link)}}) :description (i18n/label :t/share-invite-link)}})
(defn- f-view-internal (defn view
[{:keys [theme]}] []
(let [scroll-ref (atom nil) (let [theme (quo.theme/use-theme-value)
set-scroll-ref #(reset! scroll-ref %)] scroll-ref (rn/use-ref-atom nil)
(fn [] set-scroll-ref (rn/use-callback #(reset! scroll-ref %))
(let [{:keys [universal-profile-url]} (rf/sub [:profile/profile]) {:keys [universal-profile-url]} (rf/sub [:profile/profile])
customization-color (rf/sub [:profile/customization-color]) customization-color (rf/sub [:profile/customization-color])
pending-contact-requests (rf/sub [:activity-center/pending-contact-requests]) pending-contact-requests (rf/sub [:activity-center/pending-contact-requests])
selected-tab (or (rf/sub [:messages-home/selected-tab]) :tab/recent) selected-tab (or (rf/sub [:messages-home/selected-tab]) :tab/recent)
@ -148,7 +149,7 @@
:set-scroll-ref set-scroll-ref :set-scroll-ref set-scroll-ref
:scroll-shared-value scroll-shared-value :scroll-shared-value scroll-shared-value
:theme theme}]) :theme theme}])
[:f> common.banner/animated-banner [common.banner/animated-banner
{:content (banner-data universal-profile-url) {:content (banner-data universal-profile-url)
:customization-color customization-color :customization-color customization-color
:scroll-ref scroll-ref :scroll-ref scroll-ref
@ -164,10 +165,4 @@
:notification-dot? (pos? (count pending-contact-requests))}] :notification-dot? (pos? (count pending-contact-requests))}]
:selected-tab selected-tab :selected-tab selected-tab
:on-tab-change (fn [tab] (rf/dispatch [:messages-home/select-tab tab])) :on-tab-change (fn [tab] (rf/dispatch [:messages-home/select-tab tab]))
:scroll-shared-value scroll-shared-value}]])))) :scroll-shared-value scroll-shared-value}]]))
(defn- internal-chats-home-view
[params]
[:f> f-view-internal params])
(def view (quo.theme/with-theme internal-chats-home-view))