diff --git a/resources/images/icons/browser24@2x.png b/resources/images/icons/browser24@2x.png new file mode 100644 index 0000000000..52d2cfdf92 Binary files /dev/null and b/resources/images/icons/browser24@2x.png differ diff --git a/resources/images/icons/browser24@3x.png b/resources/images/icons/browser24@3x.png new file mode 100644 index 0000000000..bd47bccaac Binary files /dev/null and b/resources/images/icons/browser24@3x.png differ diff --git a/resources/images/icons/communities24@2x.png b/resources/images/icons/communities24@2x.png new file mode 100644 index 0000000000..bf630d553b Binary files /dev/null and b/resources/images/icons/communities24@2x.png differ diff --git a/resources/images/icons/communities24@3x.png b/resources/images/icons/communities24@3x.png new file mode 100644 index 0000000000..df34db70a4 Binary files /dev/null and b/resources/images/icons/communities24@3x.png differ diff --git a/resources/images/icons/messages24@2x.png b/resources/images/icons/messages24@2x.png new file mode 100644 index 0000000000..e92ef4202e Binary files /dev/null and b/resources/images/icons/messages24@2x.png differ diff --git a/resources/images/icons/messages24@3x.png b/resources/images/icons/messages24@3x.png new file mode 100644 index 0000000000..a8daabb666 Binary files /dev/null and b/resources/images/icons/messages24@3x.png differ diff --git a/resources/images/icons/wallet24@2x.png b/resources/images/icons/wallet24@2x.png new file mode 100644 index 0000000000..7b9d408ad4 Binary files /dev/null and b/resources/images/icons/wallet24@2x.png differ diff --git a/resources/images/icons/wallet24@3x.png b/resources/images/icons/wallet24@3x.png new file mode 100644 index 0000000000..e154e4ed3a Binary files /dev/null and b/resources/images/icons/wallet24@3x.png differ diff --git a/src/quo/previews/preview.cljs b/src/quo/previews/preview.cljs index d449a118cc..82582c6c84 100644 --- a/src/quo/previews/preview.cljs +++ b/src/quo/previews/preview.cljs @@ -39,6 +39,13 @@ (def label-style {:flex 0.4 :padding-right 8}) +(defn label-view [state label] + [rn/view {:style label-style} + [quo/text + (when-let [label-color (:preview-label-color @state)] + {:style {:color label-color}}) + label]]) + (defn modal-container [] {:flex 1 :justify-content :center @@ -56,8 +63,7 @@ [{:keys [label key state]}] (let [state* (reagent/cursor state [key])] [rn/view {:style container} - [rn/view {:style label-style} - [quo/text label]] + [label-view state label] [rn/view {:style {:flex-direction :row :flex 0.6 :border-radius 4 @@ -80,8 +86,7 @@ [{:keys [label key state]}] (let [state* (reagent/cursor state [key])] [rn/view {:style container} - [rn/view {:style label-style} - [quo/text label]] + [label-view state label] [rn/view {:style {:flex 0.6}} [quo/text-input {:value @state* :show-cancel false @@ -102,8 +107,7 @@ (let [state* (reagent/cursor state [key]) selected (value-for-key @state* options)] [rn/view {:style container} - [rn/view {:style label-style} - [quo/text label]] + [label-view state label] [rn/view {:style {:flex 0.6}} [rn/modal {:visible @open :on-request-close #(reset! open false) diff --git a/src/quo2/components/counter/counter.cljs b/src/quo2/components/counter/counter.cljs index b2839f31ea..4b93ff3981 100644 --- a/src/quo2/components/counter/counter.cljs +++ b/src/quo2/components/counter/counter.cljs @@ -19,7 +19,7 @@ "type: default, secondary, grey outline: true, false value: integer" - [{:keys [type outline override-text-color override-bg-color]} value] + [{:keys [type outline override-text-color override-bg-color style]} value] (let [type (or type :default) text-color (or override-text-color (if (or @@ -39,11 +39,13 @@ 1 16 2 20 28)] - [rn/view {:style (cond-> {:align-items :center - :justify-content :center - :border-radius 6 - :width width - :height 16} + [rn/view {:style (cond-> (merge + {:align-items :center + :justify-content :center + :border-radius 6 + :width width + :height 16} + style) outline (merge {:border-width 1 :border-color (get-color (or type :default))}) diff --git a/src/quo2/components/navigation/bottom_nav_tab.cljs b/src/quo2/components/navigation/bottom_nav_tab.cljs new file mode 100644 index 0000000000..b9ab3d70de --- /dev/null +++ b/src/quo2/components/navigation/bottom_nav_tab.cljs @@ -0,0 +1,71 @@ +(ns quo2.components.navigation.bottom-nav-tab + (:require [quo.react-native :as rn] + [reagent.core :as reagent] + [quo2.foundations.colors :as colors] + [quo2.components.icon :as icon] + [quo2.components.counter.counter :as counter])) + +(defn toggle-background-color [background-color press-out? pass-through?] + (let [color (cond + press-out? nil + pass-through? colors/white-opa-5 + :else colors/neutral-70)] + (reset! background-color color))) + +(defn bottom-nav-tab + "[bottom-nav-tab opts] + opts + {:icon :main-icons2/communities + :selected? true/false + :new-notifications? true/false + :notification-indicator :unread-dot/:counter + :counter-label number + :on-press bottom-tab on-press function + :pass-through? true/false + " + [_] + (let [background-color (reagent/atom nil)] + (fn [{:keys [icon selected? new-notifications? notification-indicator counter-label on-press pass-through?]}] + [rn/touchable-without-feedback + {:on-press on-press + :on-press-in #(toggle-background-color background-color false pass-through?) + :on-press-out #(toggle-background-color background-color true pass-through?)} + [rn/view {:style {:width 90 + :height 40 + :background-color @background-color + :border-radius 10}} + [rn/hole-view {:style {:padding-left 33 + :padding-top 8} + :key new-notifications? ;; Key is required to force removal of holes + :holes (cond + (not new-notifications?) ;; No new notifications, remove holes + [] + + (= notification-indicator :unread-dot) + [{:x 50 :y 5 :width 10 :height 10 :borderRadius 5}] + + :else + [{:x 47 :y 1 :width 18 :height 18 :borderRadius 7}])} + [icon/icon + icon + {:size 24 + :color (cond + selected? colors/white + pass-through? colors/white-opa-40 + :else colors/neutral-50)}]] + (when new-notifications? + (if (= notification-indicator :counter) + [counter/counter {:outline false + :override-text-color colors/white + :override-bg-color colors/primary-50 + :style {:position :absolute + :left 48 + :top 2}} + counter-label] + [rn/view {:style {:width 8 + :height 8 + :border-radius 4 + :top 6 + :left 51 + :position :absolute + :background-color colors/primary-50}}]))]]))) diff --git a/src/quo2/components/switcher/styles.cljs b/src/quo2/components/switcher/styles.cljs index 4e9004816d..b542167420 100644 --- a/src/quo2/components/switcher/styles.cljs +++ b/src/quo2/components/switcher/styles.cljs @@ -48,13 +48,13 @@ :weight :medium :style (subtitle)}) -(defn content-container [notification?] +(defn content-container [new-notifications?] {:position :absolute - :max-width (if notification? 108 136) + :max-width (if new-notifications? 108 136) :flex-shrink 1 :bottom 12 :margin-left 12 - :margin-right (if notification? 8 12)}) + :margin-right (if new-notifications? 8 12)}) (defn notification-container [] {:position :absolute diff --git a/src/quo2/components/switcher/switcher_cards.cljs b/src/quo2/components/switcher/switcher_cards.cljs index e067f20f56..c2024db4b0 100644 --- a/src/quo2/components/switcher/switcher_cards.cljs +++ b/src/quo2/components/switcher/switcher_cards.cljs @@ -15,8 +15,8 @@ ;; Supporting Components -(defn content-container [{:keys [content-type data notification? color-50]}] - [rn/view {:style (styles/content-container notification?)} +(defn content-container [{:keys [content-type data new-notifications? color-50]}] + [rn/view {:style (styles/content-container new-notifications?)} (case content-type :text [text/text (styles/last-message-text-props) data] :photo [preview-list/preview-list {:type :photo @@ -46,18 +46,18 @@ (:audio :community :link :code) ;; Components not available [:<>])]) -(defn notification-container [{:keys [notification-type counter-label color-60]}] +(defn notification-container [{:keys [notification-indicator counter-label color-60]}] [rn/view {:style (styles/notification-container)} - (if (= notification-type :counter) + (if (= notification-indicator :counter) [counter/counter {:outline false :override-text-color colors/white :override-bg-color color-60} counter-label] [rn/view {:style (styles/unread-dot color-60)}])]) -(defn bottom-container [{:keys [notification?] :as content}] +(defn bottom-container [{:keys [new-notifications?] :as content}] [:<> [content-container content] - (when notification? + (when new-notifications? [notification-container content])]) (defn avatar [avatar-params type customization-color] diff --git a/src/quo2/screens/main.cljs b/src/quo2/screens/main.cljs index d53cc2e9cd..f0dfcc11d8 100644 --- a/src/quo2/screens/main.cljs +++ b/src/quo2/screens/main.cljs @@ -28,6 +28,7 @@ [quo2.screens.notifications.activity-logs :as activity-logs] [quo2.screens.reactions.react :as react] [quo2.screens.switcher.switcher-cards :as switcher-cards] + [quo2.screens.navigation.bottom-nav-tab :as bottom-nav-tab] [quo2.screens.tabs.account-selector :as account-selector] [quo2.screens.tabs.segmented-tab :as segmented] [quo2.screens.tabs.tabs :as tabs] @@ -94,6 +95,9 @@ :messages [{:name :gap :insets {:top false} :component messages-gap/preview-messages-gap}] + :navigation [{:name :bottom-nav-tab + :insets {:top false} + :component bottom-nav-tab/preview-bottom-nav-tab}] :notifications [{:name :activity-logs :insets {:top false} :component activity-logs/preview-activity-logs}] @@ -184,4 +188,4 @@ (def main-screens [{:name :quo2-preview :insets {:top false} - :component main-screen}]) \ No newline at end of file + :component main-screen}]) diff --git a/src/quo2/screens/navigation/bottom_nav_tab.cljs b/src/quo2/screens/navigation/bottom_nav_tab.cljs new file mode 100644 index 0000000000..1315f58f4b --- /dev/null +++ b/src/quo2/screens/navigation/bottom_nav_tab.cljs @@ -0,0 +1,61 @@ +(ns quo2.screens.navigation.bottom-nav-tab + (:require [quo.react-native :as rn] + [quo.previews.preview :as preview] + [reagent.core :as reagent] + [quo2.components.navigation.bottom-nav-tab :as quo2] + [quo2.foundations.colors :as colors])) + +(def descriptor [{:label "Type" + :key :icon + :type :select + :options [{:key :main-icons2/communities + :value "Communities"} + {:key :main-icons2/messages + :value "Messages"} + {:key :main-icons2/wallet + :value "Wallet"} + {:key :main-icons2/browser + :value "Browser"}]} + {:label "Selected?" + :key :selected? + :type :boolean} + {:label "Pass through?" + :key :pass-through? + :type :boolean} + {:label "New Notifications?" + :key :new-notifications? + :type :boolean} + {:label "Notification Indicator" + :key :notification-indicator + :type :select + :options [{:key :counter + :value :counter} + {:key :unread-dot + :value :unread-dot}]} + {:label "Counter Label" + :key :counter-label + :type :text}]) + +(defn cool-preview [] + (let [state (reagent/atom {:icon :main-icons2/communities + :selected? true + :pass-through? true + :new-notifications? true + :notification-indicator :counter + :counter-label 8 + :preview-label-color colors/white})] + (fn [] + [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [rn/view {:padding-bottom 150} + [preview/customizer state descriptor] + [rn/view {:padding-vertical 60 + :align-items :center} + [quo2/bottom-nav-tab @state (:value @state)]]]]))) + +(defn preview-bottom-nav-tab [] + [rn/view {:background-color colors/neutral-100 + :flex 1} + [rn/flat-list {:flex 1 + :keyboardShouldPersistTaps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/quo2/screens/switcher/switcher_cards.cljs b/src/quo2/screens/switcher/switcher_cards.cljs index 3d3a836c4b..667e7568d9 100644 --- a/src/quo2/screens/switcher/switcher_cards.cljs +++ b/src/quo2/screens/switcher/switcher_cards.cljs @@ -6,7 +6,7 @@ [status-im.react-native.resources :as resources] [quo2.components.switcher.switcher-cards :as switcher-cards])) -(def descriptor [{:label "Type:" +(def descriptor [{:label "Type" :key :type :type :select :options [{:key :communities-discover @@ -28,19 +28,19 @@ {:label "Title" :key :title :type :text} - {:label "Notification?:" - :key :notification? + {:label "New Notifications?" + :key :new-notifications? :type :boolean} - {:label "Banner?:" + {:label "Banner?" :key :banner? :type :boolean} - {:label "Notification Type" - :key :notification-type + {:label "Notification Indicator" + :key :notification-indicator :type :select :options [{:key :counter :value :counter} - {:key :unread - :value :unread}]} + {:key :unread-dot + :value :unread-dot}]} {:label "Counter Label" :key :counter-label :type :text} @@ -109,11 +109,11 @@ (merge data {:banner (when (:banner? data) banner) - :content {:notification? (:notification? data) - :notification-type (:notification-type data) - :counter-label (:counter-label data) - :content-type (:content-type data) - :data (get-mock-content data)}} + :content {:new-notifications? (:new-notifications? data) + :notification-indicator (:notification-indicator data) + :counter-label (:counter-label data) + :content-type (:content-type data) + :data (get-mock-content data)}} (case (:type data) :messaging {:avatar-params {:full-name (:title data)}} :group-messaging {} @@ -121,15 +121,16 @@ {}))) (defn cool-preview [] - (let [state (reagent/atom {:type :group-messaging - :title "Alisher Yakupov" - :customization-color :turquoise - :notification? true - :banner? false - :notification-type :counter - :counter-label 2 - :content-type :text - :last-message "This is fantastic! Ethereum"})] + (let [state (reagent/atom {:type :group-messaging + :title "Alisher Yakupov" + :customization-color :turquoise + :new-notifications? true + :banner? false + :notification-indicator :counter + :counter-label 2 + :content-type :text + :last-message "This is fantastic! Ethereum" + :preview-label-color colors/white})] (fn [] [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [rn/view {:padding-bottom 150} @@ -139,7 +140,7 @@ [switcher-cards/card (:type @state) (get-mock-data @state)]]]]))) (defn preview-switcher-cards [] - [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-100) + [rn/view {:background-color colors/neutral-100 :flex 1} [rn/flat-list {:flex 1 :keyboardShouldPersistTaps :always