From 9b7cb23f3052e690db1c68e25f29f6920c125fb3 Mon Sep 17 00:00:00 2001 From: Parvesh Monu Date: Mon, 21 Mar 2022 03:02:45 +0530 Subject: [PATCH] inital code --- resources/images/icons/messages-new@2x.png | Bin 0 -> 813 bytes resources/images/icons/messages-new@3x.png | Bin 0 -> 1178 bytes resources/images/icons/wallet-new@2x.png | Bin 0 -> 735 bytes resources/images/icons/wallet-new@3x.png | Bin 0 -> 1052 bytes src/quo/react_native.cljs | 5 + src/quo2/foundations/colors.cljs | 19 +++- src/quo2/screens/main.cljs | 2 +- src/status_im/events.cljs | 4 +- src/status_im/navigation2.cljs | 27 +++++ src/status_im/navigation2/core.cljs | 45 +++++++++ src/status_im/navigation2/home_stack.cljs | 27 +++++ src/status_im/navigation2/roots.cljs | 9 ++ src/status_im/navigation2/screens.cljs | 6 ++ src/status_im/subs.cljs | 13 ++- src/status_im/switcher/animation.cljs | 45 +++++++++ src/status_im/switcher/bottom_tabs.cljs | 31 ++++++ src/status_im/switcher/constants.cljs | 21 ++++ src/status_im/switcher/styles.cljs | 93 ++++++++++++++++++ src/status_im/switcher/switcher.cljs | 36 +++++++ .../ui/screens/profile/user/views.cljs | 2 +- src/status_im/ui/screens/screens.cljs | 3 + 21 files changed, 383 insertions(+), 5 deletions(-) create mode 100644 resources/images/icons/messages-new@2x.png create mode 100644 resources/images/icons/messages-new@3x.png create mode 100644 resources/images/icons/wallet-new@2x.png create mode 100644 resources/images/icons/wallet-new@3x.png create mode 100644 src/status_im/navigation2.cljs create mode 100644 src/status_im/navigation2/core.cljs create mode 100644 src/status_im/navigation2/home_stack.cljs create mode 100644 src/status_im/navigation2/roots.cljs create mode 100644 src/status_im/navigation2/screens.cljs create mode 100644 src/status_im/switcher/animation.cljs create mode 100644 src/status_im/switcher/bottom_tabs.cljs create mode 100644 src/status_im/switcher/constants.cljs create mode 100644 src/status_im/switcher/styles.cljs create mode 100644 src/status_im/switcher/switcher.cljs diff --git a/resources/images/icons/messages-new@2x.png b/resources/images/icons/messages-new@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..dc88d8dfd4dabdec61d8f818a6843388bff0b403 GIT binary patch literal 813 zcmV+|1JeA7P)Vi|K~#7F?V5{m z;~)@*|I4@lT?M9tQwOGlqyy_JNC|QWN(atWaMyuy6*yNxlnRm#eCz=6f>8u|I+=Vk zJ0oF0yUQY0VBm{o`G#>3N^&J@bDf#;M#-y^XC;s3{$h|yDkU#Uj*;@DWN+FoMggtJ zaiCBiTlAz)2uWz~iI(3fR2t||v1CSaoWjb7+U%74!bH%6?-2H4t>hLu_PZb>3ezUk zSA}*Xdn1$_5LSGH{s`#N426}zNC=$AI^7RZ+$V2&hQL5XpyNq~*z{RpL?besD_>%I zO7EEm^mLd%VdqfZ;u}#Rkz!~EBjAUVOla$b4qZCJ)$V!TK)seA>rz>jcLTK z-eY-cB#eTDYq7xcNF>aKJ=|6HQsATDyiojPjxQVq;u5Q&VfHhk4&_;Q=9-el@1aTp z?oj23<2X=a5MGgM zObm|!IrYo{9zud$rx>sVZ_d8L2ZtN*VZ08uEwc(0BK{Rh%&`s-opbaCr}yj&;xo`W z)&aoXce)N$$j~qUp2L6~EjbzwAsUtkrg&-YyST^n@Q`ls&ekLiO`lPini>fy{u7q} z8siAKPTh1hkQixKU?lc%9U6uIL4Av5@F(v!r7_=1EHOX5Kk9Acq_~>^e_txe`_gMX z_Z-+^;Jy@}12yJl2Uq!CZ$kdw<Lt+BQRESgBFZ&Ih(RLxA*Oj`Z@1*mGRiG@CYd=7Llm1ci&(tZQ zC!FQRh~3d>ygqWcXU9HNzfkfQ1IciT`wiarMuFi+t<-*tg(=V;5+R|F6YHQsjQv*w r8ZA=Fo(J2}vuDR76kgBx;*;&Njlnp{Bh&Qk{NH&N!NH(xLL7NHeOb}-RlL?$okn#%D1fD>EgpuO! z9Gx5p$kNr*MF;_K;=~Due8F*{G+mVbmPzuz+cdr5NQ@~E3lOF0I{zD?E{YBoXq%_U zG;I(NahjHC+NbH=QrhQv&fqB=84K7IMVEGInj`C`lV?m}B%y9$8JivyBMW;nJf3|e zLFOw-zFnB{1rFxTsf%AF$QtPj6!qE*^U?!?$BJOF&gV13KMIs5`^Yx zaxPNT@Z(ENz!Z^{fel($&KQm$=v(Iw(?i$g*f$B5;a2fUoC2LlTofnfP20)Ro$wHIes`Suasz|A1IdG=`J5Mo$D^>% zXfCVjKbGDYHemB$aKh`(=4Y)ubbXOuC{lUAXb9b^ey7*J9%g z?Iak+WFFuNB*H$9p#Qz5+QmpX;b==wMnJ0D2aC~-q}wtHg+FZvmQ;mKE$ovf z(0oT)wN|qjNuVcTpF(&@w^cQPq&14g%zstgALzF}c@DSqy_I4Ai7Wef`w0dtQSa+( zgae^ozfRLSF=RuWAq*7ibz7n%zaXnj@E^92YTY_thzRl}e+R!sQjqJ^3*F)cpZ!RR zo;e1vf-F)D|5(65kI+5v_igYnI&Ym1#82ySb3?pX?2H5<_WS%exA$a z6w1;eS+AxQTxyv>z2i2$A|8S?`J zF5a#-f=A7Lx&%XzuY^GeV-td1p^A^2T){D8e?N$j`A_kQ95OtQJ!+dL_PiI2v~Fo^ sfvRw~_zrpTXkpxYd^GSACr*UJUoZt_Z2ldd1poj507*qoM6N<$g8wfbo&W#< literal 0 HcmV?d00001 diff --git a/resources/images/icons/wallet-new@2x.png b/resources/images/icons/wallet-new@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..7b9d408ad4c873caa681b25b0c4bb5667594fce2 GIT binary patch literal 735 zcmV<50wDc~P)LAl|_41Z^isH;6kyy@`_v+)Q9PL9#)@MUb2%kPx=O@5SGH z_aNkC-N6Ck04`j3-+aJ$DkI94pKTi<4QOCt}! z4QMLlW_slsXF}nNsQ*J5 z6lyz$mh9JwJo7aUu*K;i)S;Cs)c8$Y5Pgl5e586Tvi16QK1kzhPidITKF%XUczWb7v&ib^^l zdtD)sk`CO9I-#D#qbcdYEt=~+pSVUlQFIF zcVoivSAlkwPzdEbMsja|h5z$m5IF+>MV*irjd~;q^#;dfyAzk9&AaTfLd=1t6!Ji` z@F`Sio~#tk2ZhLF!w%FGri+ R1#bWV002ovPDHLkV1f~rOQHY( literal 0 HcmV?d00001 diff --git a/resources/images/icons/wallet-new@3x.png b/resources/images/icons/wallet-new@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..e154e4ed3aec2eec0ab9b6999b800f9f63b9550a GIT binary patch literal 1052 zcmV+%1mpXOP)tQ+<{32b}A65An8Dt3X)VHr30q|sRKI|2v=ac0)-vKL_U@;aTpHs z%fl9R5BXK0o0Z9|B3`FH^ftE#kj8Lveqw zKdId^AR>ZI?J>3eNNtzeitM4iDwc5zqnYIuFsa=E`#^0+OK)nEgW}YFP@i8CvK;Vq zWH_I@a-8_{&xR}))|F4n@CDELDW>|#Y*PEmu*o^ckd;@wrK-#eJaI#{%U&^FVycDe zERvx-88->HF(74>vTAjZx*0l9rv8%fkTPp^x#L7E(-9}9Or+LzGL(l^=xE_4q1Gy0 ztk4s32sx(?se_g}T6vLng9XzeqJtM{uk{_%V?(i?k$cj)a^bad%u-KGJJt+~w4@{F znACk+ccIqTGSstgX+tC7bkZwdi_KH68@oV)q>jqEx*?_|se8i2P~UlVJI`|N$J8G3 z1Lw+3T@u1UD)^1;jcYiK4^#-GsoivlB4$`bm?hoYY8S^}&Kq3NRG{Ashs9qP=!L*% z&X0!hu=wpCz7WW#2Ms|?xj0hpHPtVfh?>+8vOor194W6&?HBdPkaJvhLKA_;N<=Xw zh&Z3{*fcpKTr}^ocy70aDv+V*JqgXisudv%;yUc1-rW$ue*^cR=t)8nz zn|cl<%-UdRF!ii86t~K;1=Ax^jx`!Gi6|<&VS2dp@?zIbE|hT6Vl!eo#B^K(wdCzB z!CSSsN2wQ0VG*ZvPqgJYhL$W#Ze$4;i(aRbr>@I(_E^HhqSvKW?r||pV=F>gSasft zAjFg}qZ9QPjF*V&%`7)~BBpx1VJ?(mc*J95uxvwhnHxRWHXG_h?G?>7tVxSBp}3*$ z89!W5+)$TqE;iJcPljZBS@313->5cbyW^F-drb~Fl@;N`u@^!oZXi|F8MCxd`YdLAM%%gB!BUi2WDnwW@ct)4*UZe Wv6Rw3hX&370000js {:stack {:children + [{:component + {:name comp + :id comp + :options {:topBar {:visible false}}}}]}}))) + +(defn close-modal [_]) + +(defn close-all-modals [] + (.dismissAllModals Navigation)) + +(defn navigate [comp] + (.push Navigation + (name :home-stack) + (clj->js {:component {:id comp + :name comp}}))) + +(re-frame/reg-fx + :init-root-fx-nav2 + (fn [new-root-id] + (.setRoot Navigation (clj->js (get (roots/roots) new-root-id))))) + +(re-frame/reg-fx + :change-tab-fx-nav2 + (fn [tab-id] + (.mergeOptions Navigation "quo2-tabs-stack" (clj->js {:bottomTabs {:currentTabId tab-id}})))) + +(re-frame/reg-fx :open-modal-fx2 open-modal) + +(re-frame/reg-fx :close-modal-fx2 close-modal) + +(re-frame/reg-fx :navigate-to-fx-nav2 navigate) diff --git a/src/status_im/navigation2/home_stack.cljs b/src/status_im/navigation2/home_stack.cljs new file mode 100644 index 000000000000..4c669f0dfbfb --- /dev/null +++ b/src/status_im/navigation2/home_stack.cljs @@ -0,0 +1,27 @@ +(ns status-im.navigation2.home-stack + (:require [quo.react-native :as rn] + [quo2.screens.main :as quo2.preview] + [status-im.switcher.switcher :as switcher] + [status-im.ui.screens.home.views :as home] + [status-im.switcher.constants :as switcher-constants] + [status-im.ui.screens.browser.empty-tab.views :as empty-tab] + [status-im.ui.screens.wallet.accounts.views :as wallet.accounts] + [status-im.switcher.bottom-tabs :as bottom-tabs])) + +;; TODO(parvesh) - improve stack changing performance (load all stacks at once) +(defn stack-view [] + (let [{:keys [width height]} (switcher-constants/dimensions)] + ;; bottom-tabs-height (switcher-constants/bottom-tabs-height)] + [rn/view {:style {:width width + :height (- height 80)}} ;; TODO(parvesh) - add height for ios + (case @bottom-tabs/selected-tab-id + :chats-stack [quo2.preview/main-screen] + :communities-stack [home/home] + :wallet-stack [wallet.accounts/accounts-overview] + :browser-stack [empty-tab/empty-tab])])) + +(defn home [] + [:<> + [stack-view] + [bottom-tabs/bottom-tabs] + [switcher/switcher]]) diff --git a/src/status_im/navigation2/roots.cljs b/src/status_im/navigation2/roots.cljs new file mode 100644 index 000000000000..3ad0ca5f305e --- /dev/null +++ b/src/status_im/navigation2/roots.cljs @@ -0,0 +1,9 @@ +(ns status-im.navigation2.roots) + +(defn roots [] + {:quo2-tabs-stack + {:root + {:stack {:id :home-stack + :children [{:component {:name :home-stack + :id :home-stack + :options {:topBar {:visible false}}}}]}}}}) diff --git a/src/status_im/navigation2/screens.cljs b/src/status_im/navigation2/screens.cljs new file mode 100644 index 000000000000..726916dbbb4d --- /dev/null +++ b/src/status_im/navigation2/screens.cljs @@ -0,0 +1,6 @@ +(ns status-im.navigation2.screens + (:require [status-im.navigation2.home-stack :as home-stack])) + +(def screens [{:name :home-stack + :insets {:top false} + :component home-stack/home}]) diff --git a/src/status_im/subs.cljs b/src/status_im/subs.cljs index 6b23adb647c6..0aa36e2e145f 100644 --- a/src/status_im/subs.cljs +++ b/src/status_im/subs.cljs @@ -87,6 +87,7 @@ (reg-root-key-sub :home-items-show-number :home-items-show-number) (reg-root-key-sub :waku/v2-peer-stats :peer-stats) (reg-root-key-sub :visibility-status-updates :visibility-status-updates) +(reg-root-key-sub :navigation2-stacks :navigation2/navigation2-stacks) ;;NOTE this one is not related to ethereum network ;; it is about cellular network/ wifi network @@ -2955,4 +2956,14 @@ :bookmarks/active :<- [:bookmarks] (fn [bookmarks] - (into {} (remove #(:removed (second %)) bookmarks)))) \ No newline at end of file + (into {} (remove #(:removed (second %)) bookmarks)))) + + +;; NAVIGATION2 + + +(re-frame/reg-sub + :navigation2/switcher-cards + :<- [:navigation2/navigation2-stacks] + (fn [_] + {:chats-stack {:type :root}})) diff --git a/src/status_im/switcher/animation.cljs b/src/status_im/switcher/animation.cljs new file mode 100644 index 000000000000..f58a5537ce2a --- /dev/null +++ b/src/status_im/switcher/animation.cljs @@ -0,0 +1,45 @@ +(ns status-im.switcher.animation + (:require [quo.react-native :as rn] + [reagent.core :as reagent] + [status-im.switcher.constants :as constants] + [status-im.ui.components.animation :as anim])) + +(def bottom-tabs-opacity (anim/create-value 1)) +(def switcher-button-opacity (anim/create-value 1)) +(def switcher-close-button-icon-opacity (anim/create-value 0)) +(def switcher-close-button-background-opacity (anim/create-value 0)) +(def bottom-tabs-position (anim/create-value 0)) +(def switcher-screen-radius (reagent/atom 1)) +(def layout-animation #js {:duration 300 + :create #js {:type (:ease-in-ease-out rn/layout-animation-types) + :property (:scale-xy rn/layout-animation-properties)} + :update #js {:type (:ease-in-ease-out rn/layout-animation-types) + :property (:scale-xy rn/layout-animation-properties)} + :delete #js {:type (:ease-in-ease-out rn/layout-animation-types) + :property (:scale-xy rn/layout-animation-properties)}}) + +(defn animate-layout [show?] + (let [{:keys [width height]} (constants/dimensions) + target-radius (- (max width height) + constants/switcher-button-radius)] + (rn/configure-next layout-animation) + (reset! switcher-screen-radius (if show? target-radius 1)) + (reagent/flush))) + +(defn timing-animation [property toValue] + (anim/timing property {:toValue toValue + :duration 300 + :useNativeDriver true})) + +(defn animate-components [show?] + (anim/start + (anim/parallel + [(timing-animation bottom-tabs-opacity (if show? 0 1)) + (timing-animation switcher-button-opacity (if show? 0 1)) + (timing-animation switcher-close-button-icon-opacity (if show? 1 0)) + (timing-animation switcher-close-button-background-opacity (if show? 0.2 0)) + (timing-animation bottom-tabs-position (if show? (constants/bottom-tabs-height) 0))]))) + +(defn animate [show?] + (animate-layout show?) + (animate-components show?)) diff --git a/src/status_im/switcher/bottom_tabs.cljs b/src/status_im/switcher/bottom_tabs.cljs new file mode 100644 index 000000000000..62f266438eed --- /dev/null +++ b/src/status_im/switcher/bottom_tabs.cljs @@ -0,0 +1,31 @@ +(ns status-im.switcher.bottom-tabs + (:require [quo.react-native :as rn] + [reagent.core :as reagent] + [status-im.switcher.styles :as styles] + [status-im.utils.handlers :refer [>evt]] + [status-im.ui.components.icons.icons :as icons])) + +(def selected-tab-id (reagent/atom :chats-stack)) + +(defn bottom-tab-pressed [tab-id] + (when-not (= tab-id @selected-tab-id) + (reset! selected-tab-id tab-id) + (>evt [:navigate-change-tab-nav2 tab-id]))) + +;; TODO(parvesh) - reimplement tab with counter, once design is complete +(defn bottom-tab [icon tab-id] + [rn/touchable-opacity {:style {:padding 15} + :active-opacity 1 + :on-press #(bottom-tab-pressed tab-id)} + [icons/icon icon (styles/bottom-tab-icon + (if (= tab-id @selected-tab-id) + :bottom-tabs-selected-tab + :bottom-tabs-non-selected-tab))]]) + +(defn bottom-tabs [] + [rn/animated-view {:style (styles/bottom-tabs)} + [bottom-tab :main-icons/messages-new :chats-stack] + [bottom-tab :main-icons/communities :communities-stack] + [rn/view {:width 10}] + [bottom-tab :main-icons/wallet-new :wallet-stack] + [bottom-tab :main-icons/browser :browser-stack]]) diff --git a/src/status_im/switcher/constants.cljs b/src/status_im/switcher/constants.cljs new file mode 100644 index 000000000000..bb9b75434844 --- /dev/null +++ b/src/status_im/switcher/constants.cljs @@ -0,0 +1,21 @@ +(ns status-im.switcher.constants + (:require [status-im.utils.handlers :refer [ + [switcher-screen] + [switcher-button]]) diff --git a/src/status_im/ui/screens/profile/user/views.cljs b/src/status_im/ui/screens/profile/user/views.cljs index 62c52f023580..372c554f8630 100644 --- a/src/status_im/ui/screens/profile/user/views.cljs +++ b/src/status_im/ui/screens/profile/user/views.cljs @@ -122,7 +122,7 @@ :title "Quo2.0 Preview" :accessibility-label :appearance-settings-button :chevron true - :on-press #(re-frame/dispatch [:navigate-to :quo2-preview])}]) + :on-press #(re-frame/dispatch [:init-root-nav2 :quo2-tabs-stack])}]) [quo/list-item {:icon :main-icons/appearance :title (i18n/label :t/appearance) diff --git a/src/status_im/ui/screens/screens.cljs b/src/status_im/ui/screens/screens.cljs index 7f9f700e1b13..f0d20a33d3f6 100644 --- a/src/status_im/ui/screens/screens.cljs +++ b/src/status_im/ui/screens/screens.cljs @@ -121,6 +121,7 @@ [status-im.ui.screens.wallet.recipient.views :as recipient] [status-im.ui.screens.wallet.send.views :as wallet.send] [quo2.screens.main :as quo2.preview] + [status-im.navigation2.screens :as navigation2.screens] [status-im.utils.config :as config])) (def components @@ -911,5 +912,7 @@ quo.preview/main-screens) (when config/quo-preview-enabled? quo2.preview/screens) + (when config/quo-preview-enabled? + navigation2.screens/screens) (when config/quo-preview-enabled? quo2.preview/main-screens)))