Implement animations for discover communities screen
This commit is contained in:
parent
4c2ae2338a
commit
e6e29a8521
|
@ -9,10 +9,12 @@ export const OPEN_WITH_ANIMATION = 3;
|
||||||
// Floating Screen States
|
// Floating Screen States
|
||||||
export const CLOSE_SCREEN_WITHOUT_ANIMATION = 0;
|
export const CLOSE_SCREEN_WITHOUT_ANIMATION = 0;
|
||||||
export const OPEN_SCREEN_WITHOUT_ANIMATION = 1;
|
export const OPEN_SCREEN_WITHOUT_ANIMATION = 1;
|
||||||
export const CLOSE_SCREEN_WITH_SLIDE_ANIMATION = 2;
|
export const CLOSE_SCREEN_WITH_SHELL_ANIMATION = 2;
|
||||||
export const OPEN_SCREEN_WITH_SLIDE_ANIMATION = 3;
|
export const OPEN_SCREEN_WITH_SHELL_ANIMATION = 3;
|
||||||
export const CLOSE_SCREEN_WITH_SHELL_ANIMATION = 4;
|
export const CLOSE_SCREEN_WITH_SLIDE_TO_RIGHT_ANIMATION = 4;
|
||||||
export const OPEN_SCREEN_WITH_SHELL_ANIMATION = 5;
|
export const OPEN_SCREEN_WITH_SLIDE_FROM_RIGHT_ANIMATION = 5;
|
||||||
|
export const CLOSE_SCREEN_WITH_SLIDE_TO_BOTTOM_ANIMATION = 6;
|
||||||
|
export const OPEN_SCREEN_WITH_SLIDE_FROM_BOTTOM_ANIMATION = 7;
|
||||||
|
|
||||||
export const SHELL_ANIMATION_TIME = 200;
|
export const SHELL_ANIMATION_TIME = 200;
|
||||||
|
|
||||||
|
|
|
@ -6,10 +6,6 @@ export function screenLeft(screenState, screenWidth, switcherCardLeftPosition) {
|
||||||
return useDerivedValue(function () {
|
return useDerivedValue(function () {
|
||||||
'worklet';
|
'worklet';
|
||||||
switch (screenState.value) {
|
switch (screenState.value) {
|
||||||
case constants.CLOSE_SCREEN_WITH_SLIDE_ANIMATION:
|
|
||||||
return withTiming(screenWidth, constants.EASE_OUT_EASING);
|
|
||||||
case constants.OPEN_SCREEN_WITH_SLIDE_ANIMATION:
|
|
||||||
return withTiming(0, constants.EASE_OUT_EASING);
|
|
||||||
case constants.CLOSE_SCREEN_WITHOUT_ANIMATION:
|
case constants.CLOSE_SCREEN_WITHOUT_ANIMATION:
|
||||||
return screenWidth;
|
return screenWidth;
|
||||||
case constants.OPEN_SCREEN_WITHOUT_ANIMATION:
|
case constants.OPEN_SCREEN_WITHOUT_ANIMATION:
|
||||||
|
@ -17,25 +13,51 @@ export function screenLeft(screenState, screenWidth, switcherCardLeftPosition) {
|
||||||
// https://github.com/software-mansion/react-native-reanimated/issues/3296#issuecomment-1573900172
|
// https://github.com/software-mansion/react-native-reanimated/issues/3296#issuecomment-1573900172
|
||||||
return withSequence(withTiming(-1, { duration: 0 }), withTiming(0, { duration: 0 }));
|
return withSequence(withTiming(-1, { duration: 0 }), withTiming(0, { duration: 0 }));
|
||||||
case constants.CLOSE_SCREEN_WITH_SHELL_ANIMATION:
|
case constants.CLOSE_SCREEN_WITH_SHELL_ANIMATION:
|
||||||
return withTiming(switcherCardLeftPosition, constants.EASE_OUT_EASING);
|
return withSequence(
|
||||||
|
withTiming(switcherCardLeftPosition, constants.EASE_OUT_EASING),
|
||||||
|
withTiming(screenWidth, { duration: 0 }),
|
||||||
|
);
|
||||||
case constants.OPEN_SCREEN_WITH_SHELL_ANIMATION:
|
case constants.OPEN_SCREEN_WITH_SHELL_ANIMATION:
|
||||||
return withTiming(0, constants.EASE_OUT_EASING);
|
return withTiming(0, constants.EASE_OUT_EASING);
|
||||||
|
case constants.CLOSE_SCREEN_WITH_SLIDE_TO_RIGHT_ANIMATION:
|
||||||
|
return withTiming(screenWidth, constants.EASE_OUT_EASING);
|
||||||
|
case constants.OPEN_SCREEN_WITH_SLIDE_FROM_RIGHT_ANIMATION:
|
||||||
|
return withTiming(0, constants.EASE_OUT_EASING);
|
||||||
|
case constants.CLOSE_SCREEN_WITH_SLIDE_TO_BOTTOM_ANIMATION:
|
||||||
|
return withDelay(constants.SHELL_ANIMATION_TIME, withTiming(screenWidth, { duration: 0 }));
|
||||||
|
case constants.OPEN_SCREEN_WITH_SLIDE_FROM_BOTTOM_ANIMATION:
|
||||||
|
return 0;
|
||||||
default:
|
default:
|
||||||
return screenWidth;
|
return screenWidth;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export function screenTop(screenState, switcherCardTopPosition) {
|
export function screenTop(screenState, screenHeight, switcherCardTopPosition) {
|
||||||
return useDerivedValue(function () {
|
return useDerivedValue(function () {
|
||||||
'worklet';
|
'worklet';
|
||||||
switch (screenState.value) {
|
switch (screenState.value) {
|
||||||
|
case constants.CLOSE_SCREEN_WITHOUT_ANIMATION:
|
||||||
|
return screenHeight;
|
||||||
|
case constants.OPEN_SCREEN_WITHOUT_ANIMATION:
|
||||||
|
return withSequence(withTiming(-1, { duration: 0 }), withTiming(0, { duration: 0 }));
|
||||||
case constants.CLOSE_SCREEN_WITH_SHELL_ANIMATION:
|
case constants.CLOSE_SCREEN_WITH_SHELL_ANIMATION:
|
||||||
return withTiming(switcherCardTopPosition, constants.EASE_OUT_EASING);
|
return withSequence(
|
||||||
|
withTiming(switcherCardTopPosition, constants.EASE_OUT_EASING),
|
||||||
|
withTiming(screenHeight, { duration: 0 }),
|
||||||
|
);
|
||||||
case constants.OPEN_SCREEN_WITH_SHELL_ANIMATION:
|
case constants.OPEN_SCREEN_WITH_SHELL_ANIMATION:
|
||||||
return withTiming(0, constants.EASE_OUT_EASING);
|
return withTiming(0, constants.EASE_OUT_EASING);
|
||||||
default:
|
case constants.CLOSE_SCREEN_WITH_SLIDE_TO_RIGHT_ANIMATION:
|
||||||
|
return withDelay(constants.SHELL_ANIMATION_TIME, withTiming(screenHeight, { duration: 0 }));
|
||||||
|
case constants.OPEN_SCREEN_WITH_SLIDE_FROM_RIGHT_ANIMATION:
|
||||||
return 0;
|
return 0;
|
||||||
|
case constants.CLOSE_SCREEN_WITH_SLIDE_TO_BOTTOM_ANIMATION:
|
||||||
|
return withTiming(screenHeight, constants.EASE_OUT_EASING);
|
||||||
|
case constants.OPEN_SCREEN_WITH_SLIDE_FROM_BOTTOM_ANIMATION:
|
||||||
|
return withTiming(0, constants.EASE_OUT_EASING);
|
||||||
|
default:
|
||||||
|
return screenHeight;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -79,7 +101,8 @@ export function screenZIndex(screenState) {
|
||||||
'worklet';
|
'worklet';
|
||||||
switch (screenState.value) {
|
switch (screenState.value) {
|
||||||
case constants.CLOSE_SCREEN_WITH_SHELL_ANIMATION:
|
case constants.CLOSE_SCREEN_WITH_SHELL_ANIMATION:
|
||||||
case constants.CLOSE_SCREEN_WITH_SLIDE_ANIMATION:
|
case constants.CLOSE_SCREEN_WITH_SLIDE_TO_RIGHT_ANIMATION:
|
||||||
|
case constants.CLOSE_SCREEN_WITH_SLIDE_TO_BOTTOM_ANIMATION:
|
||||||
return withDelay(constants.SHELL_ANIMATION_TIME, withTiming(-1, { duration: 0 }));
|
return withDelay(constants.SHELL_ANIMATION_TIME, withTiming(-1, { duration: 0 }));
|
||||||
case constants.CLOSE_SCREEN_WITHOUT_ANIMATION:
|
case constants.CLOSE_SCREEN_WITHOUT_ANIMATION:
|
||||||
return -1;
|
return -1;
|
||||||
|
@ -95,10 +118,12 @@ export function screenBorderRadius(screenState) {
|
||||||
switch (screenState.value) {
|
switch (screenState.value) {
|
||||||
case constants.OPEN_SCREEN_WITH_SHELL_ANIMATION:
|
case constants.OPEN_SCREEN_WITH_SHELL_ANIMATION:
|
||||||
return withDelay(constants.SHELL_ANIMATION_TIME, withTiming(0, { duration: 0 }));
|
return withDelay(constants.SHELL_ANIMATION_TIME, withTiming(0, { duration: 0 }));
|
||||||
case constants.OPEN_SCREEN_WITH_SLIDE_ANIMATION:
|
case constants.OPEN_SCREEN_WITH_SLIDE_FROM_RIGHT_ANIMATION:
|
||||||
|
case constants.OPEN_SCREEN_WITH_SLIDE_FROM_BOTTOM_ANIMATION:
|
||||||
case constants.OPEN_SCREEN_WITHOUT_ANIMATION:
|
case constants.OPEN_SCREEN_WITHOUT_ANIMATION:
|
||||||
return 0;
|
return 0;
|
||||||
case constants.CLOSE_SCREEN_WITH_SLIDE_ANIMATION:
|
case constants.CLOSE_SCREEN_WITH_SLIDE_TO_RIGHT_ANIMATION:
|
||||||
|
case constants.CLOSE_SCREEN_WITH_SLIDE_TO_BOTTOM_ANIMATION:
|
||||||
return withDelay(constants.SHELL_ANIMATION_TIME, withTiming(20, { duration: 0 }));
|
return withDelay(constants.SHELL_ANIMATION_TIME, withTiming(20, { duration: 0 }));
|
||||||
case constants.CLOSE_SCREEN_WITHOUT_ANIMATION:
|
case constants.CLOSE_SCREEN_WITHOUT_ANIMATION:
|
||||||
case constants.CLOSE_SCREEN_WITH_SHELL_ANIMATION:
|
case constants.CLOSE_SCREEN_WITH_SHELL_ANIMATION:
|
||||||
|
|
|
@ -783,18 +783,6 @@
|
||||||
:on-success #(re-frame/dispatch [:sanitize-messages-and-process-response %])
|
:on-success #(re-frame/dispatch [:sanitize-messages-and-process-response %])
|
||||||
:on-error #(log/error "failed to reorder community category" %)}]})
|
:on-error #(log/error "failed to reorder community category" %)}]})
|
||||||
|
|
||||||
;; Note - dispatch is used to make sure we are opening community once `pop-to-root` is processed.
|
|
||||||
;; Don't directly merge effects using `navigation/navigate-to`, because it will work in debug and
|
|
||||||
;; release, but for e2e `pop-to-root` closes even currently opened community
|
|
||||||
;; https://github.com/status-im/status-mobile/pull/16438#issuecomment-1623954774
|
|
||||||
(rf/defn navigate-to-community
|
|
||||||
{:events [:communities/navigate-to-community]}
|
|
||||||
[cofx community-id]
|
|
||||||
(rf/merge
|
|
||||||
cofx
|
|
||||||
{:dispatch [:navigate-to :community-overview community-id]}
|
|
||||||
(navigation/pop-to-root :shell-stack)))
|
|
||||||
|
|
||||||
(rf/defn member-role-updated
|
(rf/defn member-role-updated
|
||||||
{:events [:community.member/role-updated]}
|
{:events [:community.member/role-updated]}
|
||||||
[cofx response-js]
|
[cofx response-js]
|
||||||
|
|
|
@ -251,9 +251,9 @@
|
||||||
[rn/text {:style {:color quo.colors/black}} description]]]
|
[rn/text {:style {:color quo.colors/black}} description]]]
|
||||||
[rn/view (style/community-view-button)
|
[rn/view (style/community-view-button)
|
||||||
[rn/touchable-opacity
|
[rn/touchable-opacity
|
||||||
{:on-press #(do (rf/dispatch
|
{:on-press #(do
|
||||||
[:communities/navigate-to-community
|
(rf/dispatch [:pop-to-root :shell-stack])
|
||||||
(:id community)])
|
(rf/dispatch [:navigate-to :community-overview (:id community)])
|
||||||
(rf/dispatch [:chat/close]))}
|
(rf/dispatch [:chat/close]))}
|
||||||
[rn/text
|
[rn/text
|
||||||
{:style {:text-align :center
|
{:style {:text-align :center
|
||||||
|
|
|
@ -15,6 +15,7 @@
|
||||||
[status-im2.contexts.chat.actions.view :as chat.actions.view]
|
[status-im2.contexts.chat.actions.view :as chat.actions.view]
|
||||||
[status-im2.contexts.chat.home.chat-list-item.view :as chat-list-item]
|
[status-im2.contexts.chat.home.chat-list-item.view :as chat-list-item]
|
||||||
[status-im2.contexts.chat.home.contact-request.view :as contact-request]
|
[status-im2.contexts.chat.home.contact-request.view :as contact-request]
|
||||||
|
[status-im2.contexts.shell.jump-to.constants :as jump-to.constants]
|
||||||
[utils.i18n :as i18n]
|
[utils.i18n :as i18n]
|
||||||
[utils.re-frame :as rf]))
|
[utils.re-frame :as rf]))
|
||||||
|
|
||||||
|
@ -66,6 +67,8 @@
|
||||||
:data items
|
:data items
|
||||||
:render-fn chat-list-item/chat-list-item
|
:render-fn chat-list-item/chat-list-item
|
||||||
:scroll-event-throttle 8
|
:scroll-event-throttle 8
|
||||||
|
:content-container-style {:padding-bottom
|
||||||
|
jump-to.constants/floating-shell-button-height}
|
||||||
:on-scroll #(common.banner/set-scroll-shared-value
|
:on-scroll #(common.banner/set-scroll-shared-value
|
||||||
{:scroll-input (oops/oget % "nativeEvent.contentOffset.y")
|
{:scroll-input (oops/oget % "nativeEvent.contentOffset.y")
|
||||||
:shared-value scroll-shared-value})}])))
|
:shared-value scroll-shared-value})}])))
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
(ns status-im2.contexts.communities.discover.style
|
(ns status-im2.contexts.communities.discover.style
|
||||||
(:require
|
(:require
|
||||||
[react-native.platform :as platform]))
|
[react-native.platform :as platform]
|
||||||
|
[status-im2.contexts.shell.jump-to.constants :as jump-to.constants]))
|
||||||
|
|
||||||
(def screen-title-container
|
(def screen-title-container
|
||||||
{:height 56
|
{:height 56
|
||||||
|
@ -32,6 +33,7 @@
|
||||||
|
|
||||||
(def other-communities-container
|
(def other-communities-container
|
||||||
{:flex 1
|
{:flex 1
|
||||||
|
:padding-bottom (+ jump-to.constants/floating-shell-button-height 34)
|
||||||
:margin-horizontal 20})
|
:margin-horizontal 20})
|
||||||
|
|
||||||
(defn discover-communities-segments
|
(defn discover-communities-segments
|
||||||
|
@ -72,3 +74,7 @@
|
||||||
:justify-content :center
|
:justify-content :center
|
||||||
:flex 1
|
:flex 1
|
||||||
:background-color :transparent})
|
:background-color :transparent})
|
||||||
|
|
||||||
|
(def floating-shell-button
|
||||||
|
{:position :absolute
|
||||||
|
:bottom 34})
|
||||||
|
|
|
@ -21,11 +21,11 @@
|
||||||
[quo/community-card-view-item
|
[quo/community-card-view-item
|
||||||
{:community (assoc item :cover cover)
|
{:community (assoc item :cover cover)
|
||||||
:width width
|
:width width
|
||||||
:on-press #(rf/dispatch [:communities/navigate-to-community (:id item)])}]
|
:on-press #(rf/dispatch [:navigate-to :community-overview (:id item)])}]
|
||||||
[quo/community-list-item
|
[quo/community-list-item
|
||||||
{:on-press (fn []
|
{:on-press (fn []
|
||||||
(rf/dispatch [:dismiss-keyboard])
|
(rf/dispatch [:dismiss-keyboard])
|
||||||
(rf/dispatch [:communities/navigate-to-community (:id item)]))
|
(rf/dispatch [:navigate-to :community-overview (:id item)]))
|
||||||
:on-long-press #(rf/dispatch
|
:on-long-press #(rf/dispatch
|
||||||
[:show-bottom-sheet
|
[:show-bottom-sheet
|
||||||
{:content (fn []
|
{:content (fn []
|
||||||
|
@ -143,12 +143,12 @@
|
||||||
(if (= view-type :card-view)
|
(if (= view-type :card-view)
|
||||||
[quo/community-card-view-item
|
[quo/community-card-view-item
|
||||||
{:community (assoc community :cover cover)
|
{:community (assoc community :cover cover)
|
||||||
:on-press #(rf/dispatch [:communities/navigate-to-community (:id community)])}]
|
:on-press #(rf/dispatch [:navigate-to :community-overview (:id community)])}]
|
||||||
|
|
||||||
[quo/community-list-item
|
[quo/community-list-item
|
||||||
{:on-press (fn []
|
{:on-press (fn []
|
||||||
(rf/dispatch [:dismiss-keyboard])
|
(rf/dispatch [:dismiss-keyboard])
|
||||||
(rf/dispatch [:communities/navigate-to-community (:id community)]))
|
(rf/dispatch [:navigate-to :community-overview (:id community)]))
|
||||||
:on-long-press #(js/alert "TODO: to be implemented")}
|
:on-long-press #(js/alert "TODO: to be implemented")}
|
||||||
community])]))
|
community])]))
|
||||||
(if communities communities communities-ids))
|
(if communities communities communities-ids))
|
||||||
|
@ -225,12 +225,19 @@
|
||||||
|
|
||||||
(defn f-view-internal
|
(defn f-view-internal
|
||||||
[{:keys [theme]}]
|
[{:keys [theme]}]
|
||||||
(let [featured-communities (rf/sub [:communities/featured-contract-communities])]
|
(let [featured-communities (rf/sub [:communities/featured-contract-communities])
|
||||||
|
customization-color (rf/sub [:profile/customization-color])]
|
||||||
[rn/view
|
[rn/view
|
||||||
{:style (style/discover-screen-container (colors/theme-colors
|
{:style (style/discover-screen-container (colors/theme-colors
|
||||||
colors/white
|
colors/white
|
||||||
colors/neutral-95))}
|
colors/neutral-95
|
||||||
[discover-screen-content featured-communities theme]]))
|
theme))}
|
||||||
|
[discover-screen-content featured-communities theme]
|
||||||
|
[quo/floating-shell-button
|
||||||
|
{:jump-to {:on-press #(rf/dispatch [:shell/navigate-to-jump-to])
|
||||||
|
:customization-color customization-color
|
||||||
|
:label (i18n/label :t/jump-to)}}
|
||||||
|
style/floating-shell-button]]))
|
||||||
|
|
||||||
|
|
||||||
(defn- internal-discover-view
|
(defn- internal-discover-view
|
||||||
|
|
|
@ -11,6 +11,7 @@
|
||||||
[status-im2.common.resources :as resources]
|
[status-im2.common.resources :as resources]
|
||||||
[status-im2.contexts.communities.actions.community-options.view :as options]
|
[status-im2.contexts.communities.actions.community-options.view :as options]
|
||||||
[status-im2.contexts.communities.actions.home-plus.view :as actions.home-plus]
|
[status-im2.contexts.communities.actions.home-plus.view :as actions.home-plus]
|
||||||
|
[status-im2.contexts.shell.jump-to.constants :as jump-to.constants]
|
||||||
[utils.debounce :as debounce]
|
[utils.debounce :as debounce]
|
||||||
[utils.i18n :as i18n]
|
[utils.i18n :as i18n]
|
||||||
[utils.number]
|
[utils.number]
|
||||||
|
@ -103,6 +104,8 @@
|
||||||
:style {:margin-top -1}
|
:style {:margin-top -1}
|
||||||
:data selected-items
|
:data selected-items
|
||||||
:scroll-event-throttle 8
|
:scroll-event-throttle 8
|
||||||
|
:content-container-style {:padding-bottom
|
||||||
|
jump-to.constants/floating-shell-button-height}
|
||||||
:on-scroll #(common.banner/set-scroll-shared-value
|
:on-scroll #(common.banner/set-scroll-shared-value
|
||||||
{:scroll-input (oops/oget
|
{:scroll-input (oops/oget
|
||||||
%
|
%
|
||||||
|
|
|
@ -4,6 +4,7 @@
|
||||||
[react-native.core :as rn]
|
[react-native.core :as rn]
|
||||||
[react-native.reanimated :as reanimated]
|
[react-native.reanimated :as reanimated]
|
||||||
[status-im2.contexts.chat.messages.view :as chat]
|
[status-im2.contexts.chat.messages.view :as chat]
|
||||||
|
[status-im2.contexts.communities.discover.view :as communities.discover]
|
||||||
[status-im2.contexts.communities.overview.view :as communities.overview]
|
[status-im2.contexts.communities.overview.view :as communities.overview]
|
||||||
[status-im2.contexts.shell.jump-to.animation :as animation]
|
[status-im2.contexts.shell.jump-to.animation :as animation]
|
||||||
[status-im2.contexts.shell.jump-to.components.floating-screens.style :as style]
|
[status-im2.contexts.shell.jump-to.components.floating-screens.style :as style]
|
||||||
|
@ -13,8 +14,9 @@
|
||||||
[utils.re-frame :as rf]))
|
[utils.re-frame :as rf]))
|
||||||
|
|
||||||
(def screens-map
|
(def screens-map
|
||||||
{shell.constants/community-screen communities.overview/overview
|
{shell.constants/chat-screen chat/chat
|
||||||
shell.constants/chat-screen chat/chat})
|
shell.constants/community-screen communities.overview/overview
|
||||||
|
shell.constants/discover-communities-screen communities.discover/view})
|
||||||
|
|
||||||
(defn f-screen
|
(defn f-screen
|
||||||
[{:keys [screen-id id animation clock] :as screen-param}]
|
[{:keys [screen-id id animation clock] :as screen-param}]
|
||||||
|
@ -46,5 +48,6 @@
|
||||||
(defn view
|
(defn view
|
||||||
[]
|
[]
|
||||||
[:<>
|
[:<>
|
||||||
|
[lazy-screen shell.constants/discover-communities-screen]
|
||||||
[lazy-screen shell.constants/community-screen]
|
[lazy-screen shell.constants/community-screen]
|
||||||
[lazy-screen shell.constants/chat-screen]])
|
[lazy-screen shell.constants/chat-screen]])
|
||||||
|
|
|
@ -52,18 +52,21 @@
|
||||||
(def ^:const communities-discover 9)
|
(def ^:const communities-discover 9)
|
||||||
|
|
||||||
;; Floating Screens
|
;; Floating Screens
|
||||||
(def ^:const community-screen :community-overview)
|
|
||||||
(def ^:const chat-screen :chat)
|
(def ^:const chat-screen :chat)
|
||||||
|
(def ^:const community-screen :community-overview)
|
||||||
|
(def ^:const discover-communities-screen :discover-communities)
|
||||||
|
|
||||||
(def ^:const floating-screens [chat-screen community-screen])
|
(def ^:const floating-screens [chat-screen community-screen discover-communities-screen])
|
||||||
|
|
||||||
;; Floating Screen states
|
;; Floating Screen states
|
||||||
(def ^:const close-screen-without-animation 0)
|
(def ^:const close-screen-without-animation 0)
|
||||||
(def ^:const open-screen-without-animation 1)
|
(def ^:const open-screen-without-animation 1)
|
||||||
(def ^:const close-screen-with-slide-animation 2)
|
(def ^:const close-screen-with-shell-animation 2)
|
||||||
(def ^:const open-screen-with-slide-animation 3)
|
(def ^:const open-screen-with-shell-animation 3)
|
||||||
(def ^:const close-screen-with-shell-animation 4)
|
(def ^:const close-screen-with-slide-to-right-animation 4)
|
||||||
(def ^:const open-screen-with-shell-animation 5)
|
(def ^:const open-screen-with-slide-from-right-animation 5)
|
||||||
|
(def ^:const close-screen-with-slide-to-bottom-animation 6)
|
||||||
|
(def ^:const open-screen-with-slide-from-bottom-animation 7)
|
||||||
|
|
||||||
;; Floating Screen gesture
|
;; Floating Screen gesture
|
||||||
(def ^:const gesture-width 30)
|
(def ^:const gesture-width 30)
|
||||||
|
|
|
@ -126,25 +126,30 @@
|
||||||
(rf/defn navigate-to-jump-to
|
(rf/defn navigate-to-jump-to
|
||||||
{:events [:shell/navigate-to-jump-to]}
|
{:events [:shell/navigate-to-jump-to]}
|
||||||
[{:keys [db]}]
|
[{:keys [db]}]
|
||||||
(let [chat-screen-open? (shell.utils/floating-screen-open? shell.constants/chat-screen)
|
(let [open-floating-screens (shell.utils/open-floating-screens)]
|
||||||
community-screen-open? (shell.utils/floating-screen-open? shell.constants/community-screen)]
|
|
||||||
(merge
|
(merge
|
||||||
(if config/shell-navigation-disabled?
|
(if config/shell-navigation-disabled?
|
||||||
{:pop-to-root-fx :shell-stack}
|
{:pop-to-root-fx :shell-stack}
|
||||||
{:db
|
{:db
|
||||||
(cond-> db
|
(cond-> db
|
||||||
|
|
||||||
chat-screen-open?
|
(get open-floating-screens shell.constants/chat-screen)
|
||||||
(assoc-in [:shell/floating-screens shell.constants/chat-screen :animation]
|
(assoc-in [:shell/floating-screens shell.constants/chat-screen :animation]
|
||||||
shell.constants/close-screen-with-shell-animation)
|
shell.constants/close-screen-with-shell-animation)
|
||||||
|
|
||||||
(and chat-screen-open? community-screen-open?)
|
(and (get open-floating-screens shell.constants/chat-screen)
|
||||||
|
(get open-floating-screens shell.constants/community-screen))
|
||||||
(assoc-in [:shell/floating-screens shell.constants/community-screen :animation]
|
(assoc-in [:shell/floating-screens shell.constants/community-screen :animation]
|
||||||
shell.constants/close-screen-without-animation)
|
shell.constants/close-screen-without-animation)
|
||||||
|
|
||||||
(and (not chat-screen-open?) community-screen-open?)
|
(and (not (get open-floating-screens shell.constants/chat-screen))
|
||||||
|
(get open-floating-screens shell.constants/community-screen))
|
||||||
(assoc-in [:shell/floating-screens shell.constants/community-screen :animation]
|
(assoc-in [:shell/floating-screens shell.constants/community-screen :animation]
|
||||||
shell.constants/close-screen-with-shell-animation))
|
shell.constants/close-screen-with-shell-animation)
|
||||||
|
|
||||||
|
(get open-floating-screens shell.constants/discover-communities-screen)
|
||||||
|
(assoc-in [:shell/floating-screens shell.constants/discover-communities-screen :animation]
|
||||||
|
shell.constants/close-screen-without-animation))
|
||||||
|
|
||||||
:dispatch [:set-view-id :shell]})
|
:dispatch [:set-view-id :shell]})
|
||||||
{:shell/navigate-to-jump-to-fx nil})))
|
{:shell/navigate-to-jump-to-fx nil})))
|
||||||
|
@ -172,11 +177,17 @@
|
||||||
:community-id community-id
|
:community-id community-id
|
||||||
:hidden-screen? hidden-screen?
|
:hidden-screen? hidden-screen?
|
||||||
:clock now
|
:clock now
|
||||||
:animation (or animation
|
:animation (or
|
||||||
(case current-view-id
|
animation
|
||||||
:shell shell.constants/open-screen-with-shell-animation
|
(cond
|
||||||
:chat shell.constants/open-screen-without-animation
|
(= current-view-id :shell)
|
||||||
shell.constants/open-screen-with-slide-animation))})
|
shell.constants/open-screen-with-shell-animation
|
||||||
|
(= current-view-id :chat)
|
||||||
|
shell.constants/open-screen-without-animation
|
||||||
|
(= go-to-view-id shell.constants/discover-communities-screen)
|
||||||
|
shell.constants/open-screen-with-slide-from-bottom-animation
|
||||||
|
:else
|
||||||
|
shell.constants/open-screen-with-slide-from-right-animation))})
|
||||||
:dispatch-n (cond-> []
|
:dispatch-n (cond-> []
|
||||||
(not hidden-screen?)
|
(not hidden-screen?)
|
||||||
(conj [:set-view-id go-to-view-id])
|
(conj [:set-view-id go-to-view-id])
|
||||||
|
@ -197,31 +208,25 @@
|
||||||
(rf/defn shell-navigate-back
|
(rf/defn shell-navigate-back
|
||||||
{:events [:shell/navigate-back]}
|
{:events [:shell/navigate-back]}
|
||||||
[{:keys [db]} animation]
|
[{:keys [db]} animation]
|
||||||
(let [chat-screen-open? (shell.utils/floating-screen-open? shell.constants/chat-screen)
|
(let [current-chat-id (:current-chat-id db)
|
||||||
community-screen-open? (shell.utils/floating-screen-open? shell.constants/community-screen)
|
|
||||||
current-chat-id (:current-chat-id db)
|
|
||||||
current-view-id (:view-id db)
|
current-view-id (:view-id db)
|
||||||
community-id (when current-chat-id
|
community-id (when current-chat-id
|
||||||
(get-in db [:chats current-chat-id :community-id]))]
|
(get-in db [:chats current-chat-id :community-id]))]
|
||||||
(if (and (not @navigation.state/curr-modal)
|
(if (and (not @navigation.state/curr-modal)
|
||||||
(shell.utils/shell-navigation? current-view-id)
|
(shell.utils/shell-navigation? current-view-id)
|
||||||
(or chat-screen-open? community-screen-open?))
|
(seq (shell.utils/open-floating-screens)))
|
||||||
|
(merge
|
||||||
{:db (assoc-in
|
{:db (assoc-in
|
||||||
db
|
db
|
||||||
[:shell/floating-screens
|
[:shell/floating-screens current-view-id :animation]
|
||||||
(if chat-screen-open? shell.constants/chat-screen shell.constants/community-screen)
|
|
||||||
:animation]
|
|
||||||
(or animation shell.constants/close-screen-with-slide-animation))
|
|
||||||
:dispatch-n (cond-> [[:set-view-id
|
|
||||||
(cond
|
(cond
|
||||||
(and chat-screen-open? community-screen-open?)
|
animation animation
|
||||||
shell.constants/community-screen
|
(= current-view-id shell.constants/discover-communities-screen)
|
||||||
community-screen-open?
|
shell.constants/close-screen-with-slide-to-bottom-animation
|
||||||
:communities-stack
|
:else
|
||||||
:else :chats-stack)]]
|
shell.constants/close-screen-with-slide-to-right-animation))}
|
||||||
;; When navigating back from community chat to community, update switcher card
|
(when (and current-chat-id community-id)
|
||||||
(and chat-screen-open? community-screen-open? community-id)
|
{:dispatch [:shell/add-switcher-card shell.constants/community-screen community-id]}))
|
||||||
(conj [:shell/add-switcher-card shell.constants/community-screen community-id]))}
|
|
||||||
{:navigate-back nil})))
|
{:navigate-back nil})))
|
||||||
|
|
||||||
(rf/defn floating-screen-opened
|
(rf/defn floating-screen-opened
|
||||||
|
@ -237,10 +242,10 @@
|
||||||
:dispatch [:shell/navigate-to shell.constants/community-screen
|
:dispatch [:shell/navigate-to shell.constants/community-screen
|
||||||
community-id shell.constants/open-screen-without-animation true]})
|
community-id shell.constants/open-screen-without-animation true]})
|
||||||
;; Only update switcher cards for top screen
|
;; Only update switcher cards for top screen
|
||||||
(not hidden-screen?)
|
(and id (not hidden-screen?))
|
||||||
(conj {:ms (* 2 shell.constants/shell-animation-time)
|
(conj {:ms (* 2 shell.constants/shell-animation-time)
|
||||||
:dispatch [:shell/add-switcher-card screen-id id]}))}
|
:dispatch [:shell/add-switcher-card screen-id id]}))}
|
||||||
(when-not hidden-screen?
|
(when (and id (not hidden-screen?))
|
||||||
{:shell/change-tab-fx (if (or (= screen-id shell.constants/community-screen)
|
{:shell/change-tab-fx (if (or (= screen-id shell.constants/community-screen)
|
||||||
community-id)
|
community-id)
|
||||||
:communities-stack
|
:communities-stack
|
||||||
|
@ -251,6 +256,7 @@
|
||||||
[{:keys [db]} screen-id]
|
[{:keys [db]} screen-id]
|
||||||
(merge
|
(merge
|
||||||
{:db (-> (update db :shell/floating-screens dissoc screen-id)
|
{:db (-> (update db :shell/floating-screens dissoc screen-id)
|
||||||
(update :shell/loaded-screens dissoc screen-id))}
|
(update :shell/loaded-screens dissoc screen-id))
|
||||||
(when (= screen-id shell.constants/chat-screen)
|
:dispatch-n (cond-> [[:set-view-id :shell-stack]]
|
||||||
{:dispatch [:chat/close]})))
|
(= screen-id shell.constants/chat-screen)
|
||||||
|
(conj [:chat/close]))}))
|
||||||
|
|
|
@ -89,7 +89,9 @@
|
||||||
:screen-left (worklets.shell/floating-screen-left screen-state
|
:screen-left (worklets.shell/floating-screen-left screen-state
|
||||||
width
|
width
|
||||||
switcher-card-left-position)
|
switcher-card-left-position)
|
||||||
:screen-top (worklets.shell/floating-screen-top screen-state switcher-card-top-position)
|
:screen-top (worklets.shell/floating-screen-top screen-state
|
||||||
|
height
|
||||||
|
switcher-card-top-position)
|
||||||
:screen-z-index (worklets.shell/floating-screen-z-index screen-state)
|
:screen-z-index (worklets.shell/floating-screen-z-index screen-state)
|
||||||
:screen-width (worklets.shell/floating-screen-width screen-state
|
:screen-width (worklets.shell/floating-screen-width screen-state
|
||||||
width
|
width
|
||||||
|
@ -119,14 +121,12 @@
|
||||||
shared-values
|
shared-values
|
||||||
(stacks-and-bottom-tabs-derived-values shared-values)
|
(stacks-and-bottom-tabs-derived-values shared-values)
|
||||||
(home-stack-derived-values shared-values dimensions)
|
(home-stack-derived-values shared-values dimensions)
|
||||||
{shell.constants/community-screen (floating-screen-derived-values
|
(into {}
|
||||||
shell.constants/community-screen
|
(for [screen-id shell.constants/floating-screens]
|
||||||
|
[screen-id
|
||||||
|
(floating-screen-derived-values
|
||||||
|
screen-id
|
||||||
dimensions
|
dimensions
|
||||||
switcher-card-left-position
|
switcher-card-left-position
|
||||||
switcher-card-top-position)
|
switcher-card-top-position)]))))
|
||||||
shell.constants/chat-screen (floating-screen-derived-values
|
|
||||||
shell.constants/chat-screen
|
|
||||||
dimensions
|
|
||||||
switcher-card-left-position
|
|
||||||
switcher-card-top-position)}))
|
|
||||||
@state/shared-values-atom))
|
@state/shared-values-atom))
|
||||||
|
|
|
@ -97,27 +97,43 @@
|
||||||
shell.constants/close-screen-without-animation))))
|
shell.constants/close-screen-without-animation))))
|
||||||
|
|
||||||
;;; Floating screen
|
;;; Floating screen
|
||||||
|
(defn- screen-state-open?
|
||||||
|
[state]
|
||||||
|
(#{shell.constants/open-screen-without-animation
|
||||||
|
shell.constants/open-screen-with-shell-animation
|
||||||
|
shell.constants/open-screen-with-slide-from-right-animation
|
||||||
|
shell.constants/open-screen-with-slide-from-bottom-animation}
|
||||||
|
state))
|
||||||
|
|
||||||
(defn floating-screen-open?
|
(defn floating-screen-open?
|
||||||
[screen-id]
|
[screen-id]
|
||||||
(let [state (get @state/floating-screens-state screen-id)]
|
(screen-state-open? (get @state/floating-screens-state screen-id)))
|
||||||
(or (= state shell.constants/open-screen-with-slide-animation)
|
|
||||||
(= state shell.constants/open-screen-with-shell-animation)
|
(defn open-floating-screens
|
||||||
(= state shell.constants/open-screen-without-animation))))
|
[]
|
||||||
|
(reduce (fn [acc [screen-id state]]
|
||||||
|
(let [open? (screen-state-open? state)]
|
||||||
|
(if open? (assoc acc screen-id true) acc)))
|
||||||
|
{}
|
||||||
|
@state/floating-screens-state))
|
||||||
|
|
||||||
;;; Navigation
|
;;; Navigation
|
||||||
(defn shell-navigation?
|
(defn shell-navigation?
|
||||||
[view-id]
|
[view-id]
|
||||||
(when-not config/shell-navigation-disabled?
|
(when-not config/shell-navigation-disabled?
|
||||||
(#{:chat :community-overview} view-id)))
|
(some #{view-id} shell.constants/floating-screens)))
|
||||||
|
|
||||||
(defn calculate-view-id
|
(defn calculate-view-id
|
||||||
[]
|
[]
|
||||||
|
(let [screens (open-floating-screens)]
|
||||||
(cond
|
(cond
|
||||||
(floating-screen-open? shell.constants/chat-screen)
|
(get screens shell.constants/chat-screen)
|
||||||
shell.constants/chat-screen
|
shell.constants/chat-screen
|
||||||
(floating-screen-open? shell.constants/community-screen)
|
(get screens shell.constants/community-screen)
|
||||||
shell.constants/community-screen
|
shell.constants/community-screen
|
||||||
:else (or @state/selected-stack-id :shell)))
|
(get screens shell.constants/discover-communities-screen)
|
||||||
|
shell.constants/discover-communities-screen
|
||||||
|
:else (or @state/selected-stack-id :shell))))
|
||||||
|
|
||||||
(defn update-view-id
|
(defn update-view-id
|
||||||
[view-id]
|
[view-id]
|
||||||
|
|
|
@ -9,7 +9,6 @@
|
||||||
[status-im2.contexts.shell.jump-to.components.floating-screens.view :as floating-screens]
|
[status-im2.contexts.shell.jump-to.components.floating-screens.view :as floating-screens]
|
||||||
[status-im2.contexts.shell.jump-to.components.home-stack.view :as home-stack]
|
[status-im2.contexts.shell.jump-to.components.home-stack.view :as home-stack]
|
||||||
[status-im2.contexts.shell.jump-to.components.jump-to-screen.view :as jump-to-screen]
|
[status-im2.contexts.shell.jump-to.components.jump-to-screen.view :as jump-to-screen]
|
||||||
[status-im2.contexts.shell.jump-to.constants :as shell.constants]
|
|
||||||
[status-im2.contexts.shell.jump-to.shared-values :as shared-values]
|
[status-im2.contexts.shell.jump-to.shared-values :as shared-values]
|
||||||
[status-im2.contexts.shell.jump-to.utils :as utils]
|
[status-im2.contexts.shell.jump-to.utils :as utils]
|
||||||
[status-im2.navigation.state :as navigation.state]
|
[status-im2.navigation.state :as navigation.state]
|
||||||
|
@ -19,12 +18,12 @@
|
||||||
(defn navigate-back-handler
|
(defn navigate-back-handler
|
||||||
[]
|
[]
|
||||||
(let [chat-screen-open? (and config/shell-navigation-disabled?
|
(let [chat-screen-open? (and config/shell-navigation-disabled?
|
||||||
(= (get @re-frame.db/app-db :view-id) :chat))]
|
(= (get @re-frame.db/app-db :view-id) :chat))
|
||||||
|
open-floating-screens (utils/open-floating-screens)]
|
||||||
(if (and (not @navigation.state/curr-modal)
|
(if (and (not @navigation.state/curr-modal)
|
||||||
(or
|
(or
|
||||||
chat-screen-open?
|
chat-screen-open?
|
||||||
(utils/floating-screen-open? shell.constants/community-screen)
|
(seq open-floating-screens)))
|
||||||
(utils/floating-screen-open? shell.constants/chat-screen)))
|
|
||||||
(do
|
(do
|
||||||
(when chat-screen-open? (rf/dispatch [:chat/close]))
|
(when chat-screen-open? (rf/dispatch [:chat/close]))
|
||||||
(rf/dispatch [:navigate-back])
|
(rf/dispatch [:navigate-back])
|
||||||
|
|
|
@ -69,8 +69,8 @@
|
||||||
(.screenLeft ^js floating-screen-worklets screen-state screen-width switcher-card-left-position))
|
(.screenLeft ^js floating-screen-worklets screen-state screen-width switcher-card-left-position))
|
||||||
|
|
||||||
(defn floating-screen-top
|
(defn floating-screen-top
|
||||||
[screen-state switcher-card-top-position]
|
[screen-state screen-height switcher-card-top-position]
|
||||||
(.screenTop ^js floating-screen-worklets screen-state switcher-card-top-position))
|
(.screenTop ^js floating-screen-worklets screen-state screen-height switcher-card-top-position))
|
||||||
|
|
||||||
(defn floating-screen-width
|
(defn floating-screen-width
|
||||||
[screen-state screen-width switcher-card-size]
|
[screen-state screen-width switcher-card-size]
|
||||||
|
|
Loading…
Reference in New Issue