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

fix: Page Nav title animation (#19651)

This commit is contained in:
Ajay Sivan 2024-05-16 18:38:32 +05:30 committed by GitHub
parent 22d63002b2
commit bd5fb0d407
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 91 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/quo/components/navigation/page_nav/style.cljs
View File

@ -13,13 +13,12 @@
:align-items :center}) :align-items :center})
(defn center-content-container (defn center-content-container
[centered? center-opacity] [centered?]
{:flex 1 {:flex 1
:margin-horizontal 12 :margin-horizontal 12
:flex-direction :row :flex-direction :row
:align-items :center :align-items :center
:justify-content (if centered? :center :flex-start) :justify-content (if centered? :center :flex-start)})
:opacity center-opacity})
(def right-actions-container (def right-actions-container
{:flex-direction :row}) {:flex-direction :row})

169
src/quo/components/navigation/page_nav/view.cljs
View File

@ -99,14 +99,13 @@
(def threshold (- header-height page-nav-height)) (def threshold (- header-height page-nav-height))
(defn- title-center (defn- title-center
[{:keys [centered? title center-opacity scroll-y]}] [{:keys [title scroll-y center-content-container-style]}]
(let [animated-style (when scroll-y (let [animated-style (when scroll-y
(header-worklet/profile-header-animation scroll-y (header-worklet/profile-header-animation scroll-y
threshold threshold
page-nav-height))] page-nav-height))]
[reanimated/view [reanimated/view
{:style [(style/center-content-container centered? center-opacity) {:style [center-content-container-style animated-style]}
animated-style]}
[text/text [text/text
{:weight :medium {:weight :medium
:size :paragraph-1 :size :paragraph-1
@ -114,14 +113,15 @@
title]])) title]]))
(defn- dropdown-center (defn- dropdown-center
[{:keys [background dropdown-on-press dropdown-selected? dropdown-text center-opacity]}] [{:keys [background dropdown-on-press dropdown-selected? dropdown-text
center-content-container-style]}]
(let [theme (quo.theme/use-theme) (let [theme (quo.theme/use-theme)
dropdown-type (cond dropdown-type (cond
(= background :photo) :grey (= background :photo) :grey
(and (= theme :dark) (= background :blur)) :grey (and (= theme :dark) (= background :blur)) :grey
:else :ghost) :else :ghost)
dropdown-state (if dropdown-selected? :active :default)] dropdown-state (if dropdown-selected? :active :default)]
[reanimated/view {:style (style/center-content-container true center-opacity)} [reanimated/view {:style center-content-container-style}
[dropdown/view [dropdown/view
{:type dropdown-type {:type dropdown-type
:state dropdown-state :state dropdown-state
@ -131,9 +131,9 @@
dropdown-text]])) dropdown-text]]))
(defn- token-center (defn- token-center
[{:keys [background token-logo token-name token-abbreviation center-opacity]}] [{:keys [background token-logo token-name token-abbreviation center-content-container-style]}]
(let [theme (quo.theme/use-theme)] (let [theme (quo.theme/use-theme)]
[reanimated/view {:style (style/center-content-container false center-opacity)} [reanimated/view {:style center-content-container-style}
[rn/image {:style style/token-logo :source token-logo}] [rn/image {:style style/token-logo :source token-logo}]
[text/text [text/text
{:style style/token-name {:style style/token-name
@ -149,9 +149,9 @@
token-abbreviation]])) token-abbreviation]]))
(defn- channel-center (defn- channel-center
[{:keys [background channel-emoji channel-name channel-icon center-opacity]}] [{:keys [background channel-emoji channel-name channel-icon center-content-container-style]}]
(let [theme (quo.theme/use-theme)] (let [theme (quo.theme/use-theme)]
[reanimated/view {:style (style/center-content-container false center-opacity)} [reanimated/view {:style center-content-container-style}
[rn/text {:style style/channel-emoji} [rn/text {:style style/channel-emoji}
channel-emoji] channel-emoji]
[text/text [text/text
@ -163,9 +163,9 @@
[icons/icon channel-icon {:size 16 :color (style/channel-icon-color theme background)}]])) [icons/icon channel-icon {:size 16 :color (style/channel-icon-color theme background)}]]))
(defn- title-description-center (defn- title-description-center
[{:keys [background picture title description center-opacity]}] [{:keys [background picture title description center-content-container-style]}]
(let [theme (quo.theme/use-theme)] (let [theme (quo.theme/use-theme)]
[reanimated/view {:style (style/center-content-container false center-opacity)} [reanimated/view {:style center-content-container-style}
(when picture (when picture
[rn/view {:style style/group-avatar-picture} [rn/view {:style style/group-avatar-picture}
[group-avatar/view {:picture picture :size :size-28}]]) [group-avatar/view {:picture picture :size :size-28}]])
@ -184,11 +184,11 @@
description]]])) description]]]))
(defn- community-network-center (defn- community-network-center
[{:keys [type community-logo network-logo community-name network-name center-opacity]}] [{:keys [type community-logo network-logo community-name network-name center-content-container-style]}]
(let [community? (= type :community) (let [community? (= type :community)
shown-logo (if community? community-logo network-logo) shown-logo (if community? community-logo network-logo)
shown-name (if community? community-name network-name)] shown-name (if community? community-name network-name)]
[reanimated/view {:style (style/center-content-container false center-opacity)} [reanimated/view {:style center-content-container-style}
[rn/image [rn/image
{:style style/community-network-logo {:style style/community-network-logo
:source shown-logo}] :source shown-logo}]
@ -199,8 +199,8 @@
shown-name]])) shown-name]]))
(defn- wallet-networks-center (defn- wallet-networks-center
[{:keys [networks networks-on-press background center-opacity]}] [{:keys [networks networks-on-press background center-content-container-style]}]
[reanimated/view {:style (style/center-content-container true center-opacity)} [reanimated/view {:style center-content-container-style}
[network-dropdown/view [network-dropdown/view
{:state :default {:state :default
:on-press networks-on-press :on-press networks-on-press
@ -250,82 +250,91 @@
`:network` `:network`
- network-name - network-name
- network-logo a valid rn/image `:source` value" - network-logo a valid rn/image `:source` value"
[{:keys [type right-side background text-align behind-overlay?] [{:keys [type right-side background text-align behind-overlay? center-opacity]
:or {type :no-title :or {type :no-title
text-align :center text-align :center
right-side :none right-side :none
background :white} background :white}
:as props}] :as props}]
(case type (let [center-content-container-style (reanimated/apply-animations-to-style
:no-title (if center-opacity
[page-nav-base props {:opacity center-opacity}
[right-content nil)
{:background background (style/center-content-container
:content right-side (and (= type :title) (= text-align :center))))
:max-actions 3 props-with-style (assoc props
:behind-overlay? behind-overlay?}]] :center-content-container-style
center-content-container-style)]
:title (case type
(let [centered? (= text-align :center)] :no-title
[page-nav-base props [page-nav-base props
[title-center (assoc props :centered? centered?)] [right-content
{:background background
:content right-side
:max-actions 3
:behind-overlay? behind-overlay?}]]
:title
(let [centered? (= text-align :center)]
[page-nav-base props
[title-center props-with-style]
[right-content
{:background background
:content right-side
:max-actions (if centered? 1 3)
:min-size? centered?}]])
:dropdown
[page-nav-base props
[dropdown-center props-with-style]
[right-content
{:background background
:content right-side
:max-actions 1
:support-account-switcher? false}]]
:token
[page-nav-base props
[token-center props-with-style]
[right-content [right-content
{:background background {:background background
:content right-side :content right-side
:max-actions (if centered? 1 3) :max-actions 3}]]
:min-size? centered?}]])
:dropdown :channel
[page-nav-base props [page-nav-base props
[dropdown-center props] [channel-center props-with-style]
[right-content [right-content
{:background background {:background background
:content right-side :content right-side
:max-actions 1 :max-actions 3
:support-account-switcher? false}]] :support-account-switcher? false}]]
:token :title-description
[page-nav-base props [page-nav-base props
[token-center props] [title-description-center props-with-style]
[right-content [right-content
{:background background {:background background
:content right-side :content right-side
:max-actions 3}]] :max-actions 2
:support-account-switcher? false}]]
:channel :wallet-networks
[page-nav-base props [page-nav-base props
[channel-center props] [wallet-networks-center props-with-style]
[right-content [right-content
{:background background {:background background
:content right-side :content right-side
:max-actions 3 :max-actions 3
:support-account-switcher? false}]] :min-size? true}]]
:title-description (:community :network)
[page-nav-base props [page-nav-base props
[title-description-center props] [community-network-center props-with-style]
[right-content [right-content
{:background background {:background background
:content right-side :content right-side
:max-actions 2 :max-actions 3
:support-account-switcher? false}]] :support-account-switcher? false}]]
:wallet-networks nil)))
[page-nav-base props
[wallet-networks-center props]
[right-content
{:background background
:content right-side
:max-actions 3
:min-size? true}]]
(:community :network)
[page-nav-base props
[community-network-center props]
[right-content
{:background background
:content right-side
:max-actions 3
:support-account-switcher? false}]]
nil))