diff --git a/src/quo2/components/bottom_tabs.cljs b/src/quo2/components/bottom_tabs.cljs new file mode 100644 index 000000000000..5a710431b14d --- /dev/null +++ b/src/quo2/components/bottom_tabs.cljs @@ -0,0 +1,59 @@ +(ns quo2.components.bottom-tabs + (:require [quo.theme :as theme] + [quo2.navigation :as quo2-navigation] + [quo.react-native :as rn] + [quo2.components.switcher :as switcher] + [reagent.core :as reagent] + [quo2.foundations.colors :as colors] + [status-im.utils.platform :as platform] + [status-im.ui.components.icons.icons :as icons] + [status-im.utils.handlers :refer [>evt]])) + +(def selected-tab (reagent/atom :quo2-preview)) + +(def themes + {:light {:background-color colors/neutral-70-opa-90 + :non-selected-tab colors/neutral-50 + :selected-tab colors/white} + :dark {:background-color colors/neutral-80-opa-90 + :non-selected-tab colors/neutral-40 + :selected-tab colors/white}}) + +(defn get-color [key] + (get-in themes [(theme/get-theme) key])) + +(defn bottom-tab-pressed [tab] + (when-not (= tab @selected-tab) + (reset! selected-tab tab) + (>evt [::quo2-navigation/quo2-navigate-change-tab tab]))) + +(defn bottom-tab [icon tab] + [rn/touchable-opacity {:style {:padding 15} + :active-opacity 1 + :on-press #(bottom-tab-pressed tab)} + [icons/icon icon {:width 25 + :height 25 + :color (get-color + (if (= tab @selected-tab) + :selected-tab + :non-selected-tab))}]]) + +(defn bottom-tabs [] + [:<> + [rn/view {:style + {:background-color (get-color :background-color) + :flex-direction :row + :flex 1 + :align-items :center + :justify-content :space-around + :height (if platform/android? 60 80) + :position :absolute + :bottom 0 + :right 0 + :left 0}} ;; TODO - use different height for android and ios(Confirm from Design) + [bottom-tab :main-icons/message :quo2-preview] + [bottom-tab :main-icons/browser :browser] + [rn/view {:width 10}] + [bottom-tab :main-icons/wallet :wallet] + [bottom-tab :main-icons/user-profile :profile]] + [switcher/switcher-button]]) diff --git a/src/quo2/components/button.cljs b/src/quo2/components/button.cljs index f96284ad1db9..7ecbd60911fe 100644 --- a/src/quo2/components/button.cljs +++ b/src/quo2/components/button.cljs @@ -141,4 +141,4 @@ children)] (when after [rn/view - [icons/icon after {:color icon-color}]])]])))) \ No newline at end of file + [icons/icon after {:color icon-color}]])]])))) diff --git a/src/quo2/components/switcher.cljs b/src/quo2/components/switcher.cljs new file mode 100644 index 000000000000..396ce91c7e49 --- /dev/null +++ b/src/quo2/components/switcher.cljs @@ -0,0 +1,34 @@ +(ns quo2.components.switcher + (:require [quo.react-native :as rn] + [quo2.navigation :as quo2-navigation] + [status-im.utils.handlers :refer [>evt]] + [quo2.components.button :as button] + [status-im.react-native.resources :as resources])) + +(defn switcher-button [] + [rn/touchable-opacity {:active-opacity 1 + :on-press #(>evt [::quo2-navigation/quo2-open-modal + :quo2-switcher-screen]) + :style {:position :absolute + :bottom 35 + :justify-content :center + :align-items :center + :align-self :center}} + [rn/image {:source (resources/get-image :status-logo) + :style {:width 48 + :height 48}}]]) + +(defn switcher-screen [] + [rn/view {:style {:flex 1 + :background-color "#040B14CC" + :justify-content :center + :align-items :center}} + [rn/view {:style {:position :absolute + :top 100}} + [button/button {:on-press #(>evt [::quo2-navigation/quo2-open-modal :quo2-mock-screen4]) + :size 32} "Open New Screen"]] + [rn/view {:style {:position :absolute + :bottom 50}} + [button/button {:on-press #(>evt [::quo2-navigation/quo2-close-modal + :quo2-switcher-screen]) + :size 32} "Close"]]]) diff --git a/src/quo2/foundations/colors.cljs b/src/quo2/foundations/colors.cljs index e18060d7f6c6..e8ccb891ca06 100644 --- a/src/quo2/foundations/colors.cljs +++ b/src/quo2/foundations/colors.cljs @@ -33,6 +33,13 @@ (def neutral-50-opa-30 (alpha neutral-50 0.3)) (def neutral-50-opa-40 (alpha neutral-50 0.4)) +;;70 with transparency +(def neutral-70-opa-60 (alpha neutral-70 0.6)) +(def neutral-70-opa-70 (alpha neutral-70 0.7)) +(def neutral-70-opa-80 (alpha neutral-70 0.8)) +(def neutral-70-opa-90 (alpha neutral-70 0.9)) +(def neutral-70-opa-95 (alpha neutral-70 0.95)) + ;;80 with transparency (def neutral-80-opa-60 (alpha neutral-80 0.6)) (def neutral-80-opa-70 (alpha neutral-80 0.7)) @@ -173,4 +180,4 @@ (def info-50-opa-10 (alpha info-50 0.1)) (def info-50-opa-20 (alpha info-50 0.2)) (def info-50-opa-30 (alpha info-50 0.3)) -(def info-50-opa-40 (alpha info-50 0.4)) \ No newline at end of file +(def info-50-opa-40 (alpha info-50 0.4)) diff --git a/src/quo2/navigation.cljs b/src/quo2/navigation.cljs new file mode 100644 index 000000000000..430023f25fed --- /dev/null +++ b/src/quo2/navigation.cljs @@ -0,0 +1,22 @@ +(ns quo2.navigation + (:require [status-im.utils.fx :as fx])) + +(fx/defn quo2-init-root + {:events [::quo2-init-root]} + [_ root-id] + {:quo2-init-root-fx root-id}) + +(fx/defn quo2-change-tab + {:events [::quo2-navigate-change-tab]} + [_ tab] + {:quo2-change-tab-fx tab}) + +(fx/defn quo2-open-modal + {:events [::quo2-open-modal]} + [_ modal] + {:quo2-open-modal-fx modal}) + +(fx/defn quo2-close-modal + {:events [::quo2-close-modal]} + [_ modal] + {:quo2-close-modal-fx modal}) diff --git a/src/quo2/navigation/core.cljs b/src/quo2/navigation/core.cljs new file mode 100644 index 000000000000..9d3297b9c652 --- /dev/null +++ b/src/quo2/navigation/core.cljs @@ -0,0 +1,36 @@ +(ns quo2.navigation.core + (:require [re-frame.core :as re-frame] + [quo2.navigation.roots :as roots] + ["react-native-navigation" :refer (Navigation)])) + +(re-frame/reg-fx + :quo2-init-root-fx + (fn [new-root-id] + (.setRoot Navigation (clj->js (get (roots/roots) new-root-id))))) + +(def tab-key-idx {:quo2-preview 0 + :browser 1 + :wallet 2 + :profile 3}) + +(re-frame/reg-fx + :quo2-change-tab-fx + (fn [tab] + (.mergeOptions Navigation "quo2-tabs-stack" (clj->js {:bottomTabs {:currentTabIndex (get tab-key-idx tab)}})))) + +(defn open-modal [comp] + (.showModal Navigation + (clj->js {:stack {:children + [{:component + {:name comp + :id comp + :options {:topBar {:visible false} + :modalPresentationStyle "overCurrentContext" + :layout {:backgroundColor "transparent"}}}}]}}))) + +(defn close-modal [] + (.dismissAllModals Navigation)) + +(re-frame/reg-fx :quo2-open-modal-fx open-modal) + +(re-frame/reg-fx :quo2-close-modal-fx close-modal) diff --git a/src/quo2/navigation/roots.cljs b/src/quo2/navigation/roots.cljs new file mode 100644 index 000000000000..d2ba93fa83ab --- /dev/null +++ b/src/quo2/navigation/roots.cljs @@ -0,0 +1,34 @@ +(ns quo2.navigation.roots + (:require [status-im.navigation.roots :as nav-roots])) + +(defn roots [] + {:quo2-tabs-stack + {:root + {:bottomTabs + {:id :quo2-tabs-stack + :options (merge (nav-roots/default-root) + {:bottomTabs {:titleDisplayMode :alwaysHide + :tabsAttachMode :together + :visible false + :animate false}}) + :children [{:stack {:id :profile-stack + :children [{:component {:name :quo2-preview + :id :quo2-preview + :options {:topBar {:visible false}}}}] + :options {:bottomTab (nav-roots/bottom-tab-general :main-icons/message :home-tab-button)}}} + {:stack {:id :browser-stack + :children [{:component {:name :quo2-mock-screen2 + :id :empty-tab + :options {:topBar {:visible false}}}}] + + :options {:bottomTab (nav-roots/bottom-tab-general :main-icons/browser :dapp-tab-button)}}} + {:stack {:id :wallet-stack + :children [{:component {:name :quo2-mock-screen3 + :id :wallet + :options {:topBar {:visible false}}}}] + :options {:bottomTab (nav-roots/bottom-tab-general :main-icons/wallet :wallet-tab-button)}}} + {:stack {:id :quo2-preview-stack + :children [{:component {:name :quo2-exit-screen + :id :quo2-exit-screen + :options {:topBar {:visible false}}}}] + :options {:bottomTab (nav-roots/bottom-tab-general :main-icons/user-profile :profile-tab-button)}}}]}}}}) diff --git a/src/quo2/screens/main.cljs b/src/quo2/screens/main.cljs index e39dadc60d35..2afe0e75df52 100644 --- a/src/quo2/screens/main.cljs +++ b/src/quo2/screens/main.cljs @@ -6,8 +6,11 @@ [quo2.screens.button :as button] [quo2.screens.text :as text] [quo2.screens.tabs :as tabs] + [quo2.screens.mock :as mock] [quo2.screens.segmented :as segmented] - [quo.core :as quo])) + [quo.core :as quo] + [quo2.components.switcher :as switcher] + [quo2.components.bottom-tabs :as bottom-tabs])) (def screens [{:name :quo2-texts :insets {:top false} @@ -46,18 +49,35 @@ [quo/text "Set dark theme"]]]) (defn main-screen [] - [rn/scroll-view {:flex 1 - :padding-vertical 8 - :padding-horizontal 16 - :background-color (:ui-background @colors/theme)} - [theme-switcher] - [rn/view - (for [{:keys [name]} screens] - ^{:key name} - [rn/touchable-opacity {:on-press #(re-frame/dispatch [:navigate-to name])} - [rn/view {:style {:padding-vertical 8}} - [quo/text (str "Preview " name)]]])]]) + [:<> + [rn/scroll-view {:flex 1 + :padding-vertical 8 + :padding-horizontal 16 + :background-color (:ui-background @colors/theme)} + [theme-switcher] + [rn/view + (for [{:keys [name]} screens] + ^{:key name} + [rn/touchable-opacity {:on-press #(re-frame/dispatch [:navigate-to name])} + [rn/view {:style {:padding-vertical 8}} + [quo/text (str "Preview " name)]]])]] + [bottom-tabs/bottom-tabs]]) (def main-screens [{:name :quo2-preview :insets {:top false} - :component main-screen}]) \ No newline at end of file + :component main-screen} + {:name :quo2-mock-screen2 + :insets {:top false} + :component mock/screen2} + {:name :quo2-mock-screen3 + :insets {:top false} + :component mock/screen3} + {:name :quo2-mock-screen4 + :insets {:top false} + :component mock/screen4} + {:name :quo2-exit-screen + :insets {:top false} + :component mock/exit-screen} + {:name :quo2-switcher-screen + :insets {:top false} + :component switcher/switcher-screen}]) diff --git a/src/quo2/screens/mock.cljs b/src/quo2/screens/mock.cljs new file mode 100644 index 000000000000..fb8299f20213 --- /dev/null +++ b/src/quo2/screens/mock.cljs @@ -0,0 +1,28 @@ +(ns quo2.screens.mock + (:require [quo.react-native :as rn] + [re-frame.core :as re-frame] + [quo2.components.button :as button] + [quo2.components.bottom-tabs :as bottom-tabs])) + +(defn screen2 [] + [:<> + [rn/text {:style {:font-size 40 :align-self :center :margin-top 100}} "Screen 2"] + [bottom-tabs/bottom-tabs]]) + +(defn screen3 [] + [:<> + [rn/text {:style {:font-size 40 :align-self :center :margin-top 100}} "Screen 3"] + [bottom-tabs/bottom-tabs]]) + +(defn screen4 [] + [:<> + [rn/text {:style {:font-size 40 :align-self :center}} "Modal Screen"]]) + +(defn exit-screen [] + [rn/view {:style {:flex 1 + :justify-content :center + :align-items :center}} + [rn/view {:style {:position :absolute + :bottom 150}} + [button/button {:on-press #(re-frame/dispatch [:init-root :chat-stack])} "Exit Quo 2"]] + [bottom-tabs/bottom-tabs]]) diff --git a/src/status_im/events.cljs b/src/status_im/events.cljs index 195c14dfbdab..662630b0a5ed 100644 --- a/src/status_im/events.cljs +++ b/src/status_im/events.cljs @@ -59,6 +59,8 @@ status-im.wallet.choose-recipient.core [status-im.wallet.core :as wallet] status-im.wallet.custom-tokens.core + quo2.navigation.core + quo2.navigation [status-im.navigation.core :as navigation.core] [status-im.multiaccounts.login.core :as login.core] [status-im.signing.core :as signing])) diff --git a/src/status_im/ui/screens/profile/user/views.cljs b/src/status_im/ui/screens/profile/user/views.cljs index 62c52f023580..d71d3be0c220 100644 --- a/src/status_im/ui/screens/profile/user/views.cljs +++ b/src/status_im/ui/screens/profile/user/views.cljs @@ -19,6 +19,7 @@ [status-im.utils.utils :as utils] [status-im.ethereum.stateofus :as stateofus] [quo.design-system.spacing :as spacing] + [quo2.navigation :as quo2-navigation] [status-im.ui.screens.profile.visibility-status.views :as visibility-status]) (:require-macros [status-im.utils.views :as views])) @@ -122,7 +123,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 [::quo2-navigation/quo2-init-root :quo2-tabs-stack])}]) [quo/list-item {:icon :main-icons/appearance :title (i18n/label :t/appearance)