diff --git a/resources/images/icons/activity-center20@2x.png b/resources/images/icons/activity-center20@2x.png new file mode 100644 index 0000000000..7982e001fa Binary files /dev/null and b/resources/images/icons/activity-center20@2x.png differ diff --git a/resources/images/icons/activity-center20@3x.png b/resources/images/icons/activity-center20@3x.png new file mode 100644 index 0000000000..495df07bbc Binary files /dev/null and b/resources/images/icons/activity-center20@3x.png differ diff --git a/resources/images/icons/qr-code20@2x.png b/resources/images/icons/qr-code20@2x.png index d8f3a88859..3ef21fe23f 100644 Binary files a/resources/images/icons/qr-code20@2x.png and b/resources/images/icons/qr-code20@2x.png differ diff --git a/resources/images/icons/qr-code20@3x.png b/resources/images/icons/qr-code20@3x.png index 0e9706811b..d5e67cd80c 100644 Binary files a/resources/images/icons/qr-code20@3x.png and b/resources/images/icons/qr-code20@3x.png differ diff --git a/resources/images/icons/scan20@2x.png b/resources/images/icons/scan20@2x.png new file mode 100644 index 0000000000..820e635458 Binary files /dev/null and b/resources/images/icons/scan20@2x.png differ diff --git a/resources/images/icons/scan20@3x.png b/resources/images/icons/scan20@3x.png new file mode 100644 index 0000000000..cfaa0058d1 Binary files /dev/null and b/resources/images/icons/scan20@3x.png differ diff --git a/resources/images/icons/search20@2x.png b/resources/images/icons/search20@2x.png index 1bd9849c47..0c22208f12 100644 Binary files a/resources/images/icons/search20@2x.png and b/resources/images/icons/search20@2x.png differ diff --git a/resources/images/icons/search20@3x.png b/resources/images/icons/search20@3x.png index df0c874586..9a009820d0 100644 Binary files a/resources/images/icons/search20@3x.png and b/resources/images/icons/search20@3x.png differ diff --git a/src/quo2/components/buttons/button.cljs b/src/quo2/components/buttons/button.cljs index a45b48b45b..596fc7da9a 100644 --- a/src/quo2/components/buttons/button.cljs +++ b/src/quo2/components/buttons/button.cljs @@ -175,7 +175,7 @@ [_ _] (let [pressed (reagent/atom false)] (fn [{:keys [on-press disabled type size before after above width - override-theme + override-theme override-background-color on-long-press accessibility-label icon style] :or {type :primary size 40}} @@ -205,7 +205,7 @@ type size disabled - (get background-color state) + (or override-background-color (get background-color state)) (get border-color state) icon above diff --git a/src/quo2/components/navigation/top_nav.cljs b/src/quo2/components/navigation/top_nav.cljs new file mode 100644 index 0000000000..2698ae5079 --- /dev/null +++ b/src/quo2/components/navigation/top_nav.cljs @@ -0,0 +1,98 @@ +(ns quo2.components.navigation.top-nav + (:require [quo.react-native :as rn] + [quo2.foundations.colors :as colors] + [quo2.components.counter.counter :as counter] + [quo2.components.buttons.button :as quo2.button] + [quo2.components.avatars.user-avatar :as user-avatar])) + +(defn- get-button-common-props [type] + (let [default? (= type :default) + dark? (colors/dark?)] + {:icon true + :size 32 + :style {:margin-left 12} + :type (if default? + (if dark? :grey :dark-grey) + type) + :override-background-color (when (and dark? default?) + colors/neutral-90)})) + +(defn- base-button [icon on-press accessibility-label button-common-props] + [quo2.button/button + (merge + {:on-press on-press + :accessibility-label accessibility-label} + button-common-props) + icon]) + +(defn top-nav + "[top-nav opts] + opts + {:type :default/:blurred/:shell + :new-notifications? true/false + :notification-indicator :unread-dot/:counter + :open-profile fn + :open-search fn + :open-scanner fn + :show-qr fn + :open-activity-center fn + :style override-style + :avatar user-avatar + :counter-label number} + " + [{:keys [type new-notifications? notification-indicator open-profile open-search + open-scanner show-qr open-activity-center style avatar counter-label]}] + (let [button-common-props (get-button-common-props type)] + [rn/view {:style (merge + {:height 56 + :flex 1} + style)} + ;; Left Section + [rn/touchable-without-feedback {:on-press open-profile} + [rn/view {:style {:position :absolute + :left 20 + :top 12}} + [user-avatar/user-avatar + (merge + {:ring? true + :status-indicator? true + :size :small} + avatar)]]] + ;; Right Section + [rn/view {:style {:position :absolute + :right 20 + :top 12 + :flex-direction :row}} + [base-button :main-icons2/search open-search :open-search-button button-common-props] + [base-button :main-icons2/scan open-scanner :open-scanner-button button-common-props] + [base-button :main-icons2/qr-code show-qr :show-qr-button button-common-props] + [rn/view ;; Keep view instead of "[:<>" to make sure relative + ;; position is calculated from this view instead of its parent + [rn/hole-view {: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 37 :y -3 :width 10 :height 10 :borderRadius 5}] + + :else + [{:x 33 :y -7 :width 18 :height 18 :borderRadius 7}])} + [base-button :main-icons2/activity-center open-activity-center + :open-activity-center-button button-common-props]] + (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 34 + :top -6}} + counter-label] + [rn/view {:style {:width 8 + :height 8 + :border-radius 4 + :top -2 + :left 38 + :position :absolute + :background-color colors/primary-50}}]))]]])) diff --git a/src/quo2/screens/main.cljs b/src/quo2/screens/main.cljs index 7817adc890..f9537fcd22 100644 --- a/src/quo2/screens/main.cljs +++ b/src/quo2/screens/main.cljs @@ -30,6 +30,7 @@ [quo2.screens.selectors.disclaimer :as disclaimer] [quo2.screens.selectors.selectors :as selectors] [quo2.screens.switcher.switcher-cards :as switcher-cards] + [quo2.screens.navigation.top-nav :as top-nav] [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] @@ -98,7 +99,10 @@ :component messages-gap/preview-messages-gap}] :navigation [{:name :bottom-nav-tab :insets {:top false} - :component bottom-nav-tab/preview-bottom-nav-tab}] + :component bottom-nav-tab/preview-bottom-nav-tab} + {:name :top-nav + :insets {:top false} + :component top-nav/preview-top-nav}] :notifications [{:name :activity-logs :insets {:top false} :component activity-logs/preview-activity-logs}] diff --git a/src/quo2/screens/navigation/top_nav.cljs b/src/quo2/screens/navigation/top_nav.cljs new file mode 100644 index 0000000000..6a2152b132 --- /dev/null +++ b/src/quo2/screens/navigation/top_nav.cljs @@ -0,0 +1,51 @@ +(ns quo2.screens.navigation.top-nav + (:require [quo.react-native :as rn] + [quo.previews.preview :as preview] + [reagent.core :as reagent] + [quo2.components.navigation.top-nav :as quo2] + [quo2.foundations.colors :as colors])) + +(def descriptor [{:label "Type" + :key :type + :type :select + :options [{:key :default + :value "Default"} + {:key :blur-bg + :value "Blurred BG"} + {:key :shell + :value "Shell"}]} + {:label "New Notifications?" + :key :new-notifications? + :type :boolean} + {:label "Notification Indicator" + :key :notification-indicator + :type :select + :options [{:key :unread-dot + :value :unread-dot} + {:key :counter + :value :counter}]} + {:label "Counter Label" + :key :counter-label + :type :text}]) + +(defn cool-preview [] + (let [state (reagent/atom {:type :default + :new-notifications? true + :notification-indicator :unread-dot + :counter-label 5})] + (fn [] + [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [rn/view {:padding-bottom 150} + [preview/customizer state descriptor] + [rn/view {:padding-vertical 60 + :flex-direction :row + :align-items :center} + [quo2/top-nav @state (:value @state)]]]]))) + +(defn preview-top-nav [] + [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-95) + :flex 1} + [rn/flat-list {:flex 1 + :keyboardShouldPersistTaps :always + :header [cool-preview] + :key-fn str}]])