diff --git a/resources/images/icons2/32x32/group@2x.png b/resources/images/icons2/32x32/group@2x.png new file mode 100644 index 00000000000..3d045706926 Binary files /dev/null and b/resources/images/icons2/32x32/group@2x.png differ diff --git a/resources/images/icons2/32x32/group@3x.png b/resources/images/icons2/32x32/group@3x.png new file mode 100644 index 00000000000..6acf361937e Binary files /dev/null and b/resources/images/icons2/32x32/group@3x.png differ diff --git a/src/status_im/contexts/chat/messenger/messages/list/style.cljs b/src/status_im/contexts/chat/messenger/messages/list/style.cljs index eba0c882dbb..513d3a7bef0 100644 --- a/src/status_im/contexts/chat/messenger/messages/list/style.cljs +++ b/src/status_im/contexts/chat/messenger/messages/list/style.cljs @@ -8,10 +8,6 @@ {:flex 1 :z-index 2}) -(def chat-actions-container - {:margin-top 16 - :padding-bottom 20}) - (defn background-container [background-color background-opacity top-margin] (reanimated/apply-animations-to-style @@ -24,12 +20,12 @@ :height (+ top-margin messages.constants/header-container-radius)})) (defn header-bottom-part - [border-radius theme top-margin] + [bottom theme top-margin] (reanimated/apply-animations-to-style - {:border-top-left-radius border-radius - :border-top-right-radius border-radius} + {:bottom bottom} {:background-color (colors/theme-colors colors/white colors/neutral-95 theme) :padding-horizontal 20 + :border-radius 20 :margin-top top-margin})) (defn header-image @@ -43,5 +39,20 @@ :border-radius 50 :border-color (colors/theme-colors colors/white colors/neutral-95 theme)})) -(def bio - {:margin-top 8}) +(defn user-name-container + [top left] + (reanimated/apply-animations-to-style + {:top top + :left left} + {:z-index -1})) + +(def user-name + {:align-items :center + :flex-direction :row + :margin-top 52}) + +(defn bio-and-actions + [top] + (reanimated/apply-animations-to-style + {:top top} + {:row-gap 16})) diff --git a/src/status_im/contexts/chat/messenger/messages/list/view.cljs b/src/status_im/contexts/chat/messenger/messages/list/view.cljs index 8f155a1816a..876f446befd 100644 --- a/src/status_im/contexts/chat/messenger/messages/list/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/list/view.cljs @@ -64,8 +64,7 @@ [{:keys [ens-verified added?]} theme] (when (or ens-verified added?) [rn/view - {:style {:margin-left 4 - :margin-top 8}} + {:style {:margin-left 4}} (if ens-verified [quo/icon :i/verified {:no-color true @@ -112,27 +111,55 @@ (- 70 (:bottom insets)))] [rn/view {:style {:height height}}])) -(defn f-list-footer-avatar - [{:keys [distance-from-list-top display-name online? profile-picture theme]}] +(defn list-footer-avatar + [{:keys [distance-from-list-top display-name online? profile-picture theme group-chat color]}] (let [scale (reanimated/interpolate distance-from-list-top [0 messages.constants/header-container-top-margin] [1 0.4] messages.constants/default-extrapolation-option) top (reanimated/interpolate distance-from-list-top [0 messages.constants/header-container-top-margin] - [-44 -8] + [-44 -12] messages.constants/default-extrapolation-option) left (reanimated/interpolate distance-from-list-top [0 messages.constants/header-container-top-margin] - [16 -4] + [16 -8] messages.constants/default-extrapolation-option)] [reanimated/view {:style (style/header-image scale top left theme)} - [quo/user-avatar - {:full-name display-name - :online? online? - :profile-picture profile-picture - :size :big}]])) + (if group-chat + [quo/group-avatar + {:customization-color color + :size :size-80 + :picture profile-picture + :override-theme :dark}] + [quo/user-avatar + {:full-name display-name + :online? online? + :profile-picture profile-picture + :size :big}])])) + +(defn chat-display-name + [{:keys [distance-from-list-top display-name contact theme]}] + (let [top (reanimated/interpolate distance-from-list-top + [0 messages.constants/header-container-top-margin] + [0 -35] + messages.constants/default-extrapolation-option) + left (reanimated/interpolate distance-from-list-top + [0 messages.constants/header-container-top-margin] + [0 40] + messages.constants/default-extrapolation-option)] + [reanimated/view + {:style (style/user-name-container top left)} + [rn/view + {:style style/user-name} + [quo/text + {:weight :semi-bold + :size :heading-1 + :style {:flex-shrink 1} + :number-of-lines 1} + display-name] + [contact-icon contact theme]]])) (defn actions [chat-id cover-bg-color] @@ -143,89 +170,102 @@ muted? (and muted (some? muted-till)) mute-chat-label (if community-channel? :t/mute-channel :t/mute-chat) unmute-chat-label (if community-channel? :t/unmute-channel :t/unmute-chat)] + [quo/channel-actions - {:container-style style/chat-actions-container - :actions [{:accessibility-label :action-button-pinned - :big? true - :label (or latest-pin-text (i18n/label :t/no-pinned-messages)) - :customization-color cover-bg-color - :icon :i/pin - :counter-value pins-count - :on-press (fn [] - (rf/dispatch [:pin-message/show-pins-bottom-sheet - chat-id]))} - {:accessibility-label :action-button-mute - :label (i18n/label (if muted - unmute-chat-label - mute-chat-label)) - :customization-color cover-bg-color - :icon (if muted? :i/activity-center :i/muted) - :on-press (fn [] - (if muted? - (home.actions/unmute-chat-action chat-id) - (home.actions/mute-chat-action chat-id - chat-type - muted?)))}]}])) + {:actions [{:accessibility-label :action-button-pinned + :big? true + :label (or latest-pin-text (i18n/label :t/no-pinned-messages)) + :customization-color cover-bg-color + :icon :i/pin + :counter-value pins-count + :on-press (fn [] + (rf/dispatch [:pin-message/show-pins-bottom-sheet + chat-id]))} + {:accessibility-label :action-button-mute + :label (i18n/label (if muted + unmute-chat-label + mute-chat-label)) + :customization-color cover-bg-color + :icon (if muted? :i/activity-center :i/muted) + :on-press (fn [] + (if muted? + (home.actions/unmute-chat-action chat-id) + (home.actions/mute-chat-action chat-id + chat-type + muted?)))}]}])) + +(defn bio-and-actions + [{:keys [distance-from-list-top bio chat-id customization-color]}] + (let [has-bio (seq bio) + top (reanimated/interpolate + distance-from-list-top + [0 messages.constants/header-container-top-margin] + [(if has-bio 8 16) (if has-bio -28 -20)] + messages.constants/default-extrapolation-option)] + [reanimated/view + {:style (style/bio-and-actions top)} + (when has-bio + [quo/text bio]) + [actions chat-id customization-color]])) -(defn f-list-footer +(defn footer-component [{:keys [chat distance-from-list-top theme customization-color]}] (let [{:keys [chat-id chat-name emoji chat-type - group-chat]} chat - display-name (cond - (= chat-type constants/one-to-one-chat-type) - (first (rf/sub [:contacts/contact-two-names-by-identity chat-id])) - (= chat-type constants/community-chat-type) - (str (when emoji (str emoji " ")) "# " chat-name) - :else (str emoji chat-name)) - {:keys [bio]} (rf/sub [:contacts/contact-by-identity chat-id]) - online? (rf/sub [:visibility-status-updates/online? chat-id]) - contact (when-not group-chat - (rf/sub [:contacts/contact-by-address chat-id])) - photo-path (rf/sub [:chats/photo-path chat-id]) - top-margin (+ (safe-area/get-top) - messages.constants/top-bar-height - messages.constants/header-container-top-margin) - background-color (colors/theme-colors - (colors/resolve-color customization-color theme 20) - (colors/resolve-color customization-color theme 40) - theme) - border-radius (reanimated/interpolate - distance-from-list-top - [0 messages.constants/header-container-top-margin] - [20 0] - messages.constants/default-extrapolation-option) - background-opacity (reanimated/interpolate - distance-from-list-top - [messages.constants/header-container-top-margin - (+ messages.constants/header-animation-distance - messages.constants/header-container-top-margin)] - [1 0] - messages.constants/default-extrapolation-option)] + group-chat color]} chat + display-name (cond + (= chat-type constants/one-to-one-chat-type) + (first (rf/sub [:contacts/contact-two-names-by-identity chat-id])) + (= chat-type constants/community-chat-type) + (str (when emoji (str emoji " ")) "# " chat-name) + :else (str emoji chat-name)) + {:keys [bio]} (rf/sub [:contacts/contact-by-identity chat-id]) + online? (rf/sub [:visibility-status-updates/online? chat-id]) + contact (when-not group-chat + (rf/sub [:contacts/contact-by-address chat-id])) + photo-path (rf/sub [:chats/photo-path chat-id]) + top-margin (+ (safe-area/get-top) + messages.constants/top-bar-height + messages.constants/header-container-top-margin + 32) + background-color (colors/theme-colors + (colors/resolve-color customization-color theme 20) + (colors/resolve-color customization-color theme 40) + theme) + bottom (reanimated/interpolate + distance-from-list-top + [0 messages.constants/header-container-top-margin] + [32 -4] + messages.constants/default-extrapolation-option) + background-opacity (reanimated/interpolate + distance-from-list-top + [messages.constants/header-container-top-margin + (+ messages.constants/header-animation-distance + messages.constants/header-container-top-margin)] + [1 0] + messages.constants/default-extrapolation-option)] [:<> [reanimated/view {:style (style/background-container background-color background-opacity top-margin)}] - [reanimated/view {:style (style/header-bottom-part border-radius theme top-margin)} - (when-not group-chat - [:f> f-list-footer-avatar - {:distance-from-list-top distance-from-list-top - :display-name display-name - :online? online? - :theme theme - :profile-picture photo-path}]) - [rn/view - {:style {:flex-direction :row - :margin-top (if group-chat 94 52)}} - [quo/text - {:weight :semi-bold - :size :heading-1 - :style {:flex-shrink 1} - :number-of-lines 1} - display-name] - [contact-icon contact theme]] - (when (seq bio) - [quo/text {:style style/bio} - bio]) - [actions chat-id customization-color]]])) + [reanimated/view {:style (style/header-bottom-part bottom theme top-margin)} + [list-footer-avatar + {:distance-from-list-top distance-from-list-top + :display-name display-name + :online? online? + :theme theme + :profile-picture photo-path + :group-chat group-chat + :color color}] + [chat-display-name + {:distance-from-list-top distance-from-list-top + :display-name display-name + :theme theme + :contact contact + :group-chat group-chat}] + [bio-and-actions + {:distance-from-list-top distance-from-list-top + :bio bio + :chat-id chat-id + :customization-color customization-color}]]])) (defn list-footer [props] @@ -235,7 +275,7 @@ [:<> (if (or loading-messages? (not all-loaded?)) [loading-view chat-id props] - [:f> f-list-footer props])])) + [footer-component props])])) (defn list-group-chat-header [{:keys [chat-id invitation-admin]}] @@ -285,7 +325,7 @@ (reset! layout-height-atom layout-height)) (reset! distance-atom new-distance))) -(defn f-messages-list-content +(defn messages-list-content [{:keys [insets distance-from-list-top content-height layout-height distance-atom chat-screen-layout-calculations-complete? chat-list-scroll-y]}] (let [theme (quo.theme/use-theme-value) diff --git a/src/status_im/contexts/chat/messenger/messages/navigation/view.cljs b/src/status_im/contexts/chat/messenger/messages/navigation/view.cljs index c78c67d535d..4a6623a2181 100644 --- a/src/status_im/contexts/chat/messenger/messages/navigation/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/navigation/view.cljs @@ -18,37 +18,42 @@ [utils.worklets.chat.messenger.messages :as messages.worklets] [utils.worklets.chat.messenger.navigation :as worklets])) -(defn f-header-content-container +(defn header-content-container [{:keys [chat distance-from-list-top all-loaded? chat-screen-layout-calculations-complete?]}] (let [{:keys [chat-id group-chat chat-type chat-name - emoji]} chat - display-name (cond - (= chat-type constants/one-to-one-chat-type) - (first (rf/sub - [:contacts/contact-two-names-by-identity - chat-id])) - (= chat-type constants/community-chat-type) - (str (when emoji (str emoji " ")) "# " chat-name) - :else (str emoji chat-name)) - online? (when-not group-chat (rf/sub [:visibility-status-updates/online? chat-id])) - photo-path (when-not group-chat (rf/sub [:chats/photo-path chat-id])) - header-opacity (worklets/navigation-header-opacity - distance-from-list-top - all-loaded? - chat-screen-layout-calculations-complete? - (if platform/ios? - messages.constants/content-animation-start-position-ios - messages.constants/content-animation-start-position-android)) - header-position (worklets/navigation-header-position - distance-from-list-top - all-loaded? - messages.constants/top-bar-height - (if platform/ios? - messages.constants/content-animation-start-position-ios - messages.constants/content-animation-start-position-android))] + emoji color]} chat + display-name (cond + (= chat-type constants/one-to-one-chat-type) + (first (rf/sub + [:contacts/contact-two-names-by-identity + chat-id])) + (= chat-type constants/community-chat-type) + (str (when emoji (str emoji " ")) "# " chat-name) + :else (str emoji chat-name)) + online? (when-not group-chat (rf/sub [:visibility-status-updates/online? chat-id])) + photo-path (when-not group-chat (rf/sub [:chats/photo-path chat-id])) + header-opacity (worklets/navigation-header-opacity + distance-from-list-top + all-loaded? + chat-screen-layout-calculations-complete? + (if platform/ios? + messages.constants/content-animation-start-position-ios + messages.constants/content-animation-start-position-android)) + header-position (worklets/navigation-header-position + distance-from-list-top + all-loaded? + messages.constants/top-bar-height + (if platform/ios? + messages.constants/content-animation-start-position-ios + messages.constants/content-animation-start-position-android))] [reanimated/view {:style (style/header-content-container header-opacity header-position)} - (when-not group-chat + (if group-chat + [quo/group-avatar + {:customization-color color + :size :size-32 + :picture photo-path + :override-theme :dark}] [quo/user-avatar {:full-name display-name :online? online? @@ -70,7 +75,7 @@ (i18n/label (if online? :t/online :t/offline))])]])) -(defn f-animated-background-and-pinned-banner +(defn animated-background-and-pinned-banner [{:keys [chat-id navigation-view-height distance-from-list-top all-loaded?]}] (let [animation-distance messages.constants/header-animation-distance props {:distance-from-list-top distance-from-list-top @@ -122,7 +127,7 @@ [all-loaded-sub]) [rn/view {:style (style/navigation-view navigation-view-height messages.constants/pinned-banner-height)} - [:f> f-animated-background-and-pinned-banner + [animated-background-and-pinned-banner {:chat-id chat-id :navigation-view-height navigation-view-height :distance-from-list-top distance-from-list-top @@ -137,7 +142,7 @@ :accessibility-label :back-button :on-press #(rf/dispatch [:navigate-back])} (if (= chat-type constants/community-chat-type) :i/arrow-left :i/close)]] - [:f> f-header-content-container + [header-content-container {:chat chat :distance-from-list-top distance-from-list-top :all-loaded? all-loaded? diff --git a/src/status_im/contexts/chat/messenger/messages/view.cljs b/src/status_im/contexts/chat/messenger/messages/view.cljs index b25eecda3c7..799d165cee3 100644 --- a/src/status_im/contexts/chat/messenger/messages/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/view.cljs @@ -13,7 +13,7 @@ ;; NOTE(parvesh) - I am working on refactoring/optimization of the chat screen for performance ;; improvement. Please avoid refactoring these files. Also if you are not already working on bug ;; fixes related to the composer, please skip them. And ping me, so I can address them while refactoring -(defn- f-chat-screen +(defn- chat-screen [chat-screen-layout-calculations-complete?] (let [insets (safe-area/get-insets) content-height (atom 0) @@ -27,7 +27,7 @@ [messages.navigation/view {:distance-from-list-top distance-from-list-top :chat-screen-layout-calculations-complete? chat-screen-layout-calculations-complete?}] - [:f> list.view/f-messages-list-content + [list.view/messages-list-content {:insets insets :layout-height layout-height :content-height content-height @@ -46,15 +46,11 @@ (when-not screen-loaded? (reanimated/set-shared-value chat-screen-layout-calculations-complete? false)) (when screen-loaded? - [:f> f-chat-screen chat-screen-layout-calculations-complete?]))) + [chat-screen chat-screen-layout-calculations-complete?]))) -(defn- f-chat +(defn chat [] (let [chat-screen-layout-calculations-complete? (reanimated/use-shared-value false)] [:<> [lazy-chat-screen chat-screen-layout-calculations-complete?] - [:f> placeholder.view/f-view chat-screen-layout-calculations-complete?]])) - -(defn chat - [] - [:f> f-chat]) + [placeholder.view/view chat-screen-layout-calculations-complete?]])) diff --git a/src/status_im/contexts/chat/messenger/placeholder/view.cljs b/src/status_im/contexts/chat/messenger/placeholder/view.cljs index 416c1b22298..a8fc68a8d27 100644 --- a/src/status_im/contexts/chat/messenger/placeholder/view.cljs +++ b/src/status_im/contexts/chat/messenger/placeholder/view.cljs @@ -14,7 +14,7 @@ :parent-height (:height (rn/get-window)) :animated? false}]) -(defn f-view +(defn view [chat-screen-layout-calculations-complete?] (let [top (safe-area/get-top) opacity (worklets/placeholder-opacity chat-screen-layout-calculations-complete?)