From 99b28095327abc89df7cfd5bef59e71a4205a69b Mon Sep 17 00:00:00 2001 From: Parvesh Monu Date: Sat, 1 Oct 2022 02:55:41 +0530 Subject: [PATCH] Implementation of Top Nav Component (#14094) --- .../images/icons/activity-center20@2x.png | Bin 0 -> 806 bytes .../images/icons/activity-center20@3x.png | Bin 0 -> 1220 bytes resources/images/icons/qr-code20@2x.png | Bin 625 -> 913 bytes resources/images/icons/qr-code20@3x.png | Bin 904 -> 1443 bytes resources/images/icons/scan20@2x.png | Bin 0 -> 720 bytes resources/images/icons/scan20@3x.png | Bin 0 -> 1055 bytes resources/images/icons/search20@2x.png | Bin 521 -> 888 bytes resources/images/icons/search20@3x.png | Bin 677 -> 1218 bytes src/quo2/components/buttons/button.cljs | 4 +- src/quo2/components/navigation/top_nav.cljs | 98 ++++++++++++++++++ src/quo2/screens/main.cljs | 6 +- src/quo2/screens/navigation/top_nav.cljs | 51 +++++++++ 12 files changed, 156 insertions(+), 3 deletions(-) create mode 100644 resources/images/icons/activity-center20@2x.png create mode 100644 resources/images/icons/activity-center20@3x.png create mode 100644 resources/images/icons/scan20@2x.png create mode 100644 resources/images/icons/scan20@3x.png create mode 100644 src/quo2/components/navigation/top_nav.cljs create mode 100644 src/quo2/screens/navigation/top_nav.cljs diff --git a/resources/images/icons/activity-center20@2x.png b/resources/images/icons/activity-center20@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..7982e001fa58362229e3a4e2291d1d3bdba202ad GIT binary patch literal 806 zcmV+>1KIqEP)K~#7F?U+Gs z+CUVB|FJQlN5AP>ujM;0SPnvh1#~>?-XEk{dKVL0EQ4PEc2(Qg@xGv^9$H z^gV0>X|WlP-DbllA;RU)UP31XB)rf75)W$Al8$37L%~BE&qpx z!X#_Y<&pYK(r#N4CVoZ&Po&>oxB0Zfk{Hg~mje5VZ{lMlaEa*dX*J>imQVz^S+^Rz-}sx;?1jyg&uGsHx4wqB?;t^xYxxFu#T+bs*T9x?|$A zS0JZ14c+H9hZse`5~Tw6op77-c8|y2=d)K}TD7F;3zUQ&a-25h{jn`Lmd#O_^p?eT z+B=e`!#vx}YKE)i1)^_BPg51L?Am0IT_jbGOAjo3>Z&8mpJ#2I%q0#HZD)^BRpM4- z(^xUww`o^~c$66>48x3BNGJjwk{c7dTGkI9YSRUlitic}vxc60M(y}BDuClE2^?WabaphvVCUbtl!-{=P3OCvF1I7FuWWUM8&|Xg_^y|Gcvl9aP5}2 zk!|2*Efe$){5L$=>hH>_{9R*DmN22zs}D|vI(hXGa3SF!`aoqp<=9nu*5?pK6O4bV z*$9?c3rthtd+a&k$t7#ng(cP%HJ47mXkseG2Ar$^w$M`wBf~P{m`Yy1F?G86xrow> kP(29Mr%JNUfddcCZxFBqq-JwfF#rGn07*qoM6N<$g1VD!Z2$lO literal 0 HcmV?d00001 diff --git a/resources/images/icons/activity-center20@3x.png b/resources/images/icons/activity-center20@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..495df07bbc5a11055c7db5d8323e46003e5dcea8 GIT binary patch literal 1220 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 diff --git a/resources/images/icons/qr-code20@3x.png b/resources/images/icons/qr-code20@3x.png index 0e9706811b35626decde8673432d00a19a13546f..d5e67cd80ca2453d09c99339ce9e9f36486bb7df 100644 GIT binary patch delta 1375 zcmV-l1)%zf2crv+ReuFINkli<|5Xbkx55d+*#-#F$Nf%hM9mphb+0_vw?f?P@Kp{CE{AMHp z$HVgexVyc*JpoiyR8&+{RICb?r?O?))ZMp3HhOCS~YX)t?%9Zz6$$M zGJBYY*)9053%q$1cLUx%bCG4*SE)k=AHi?Qjo}Ulb^;nO;9dM}Pj9Uc@bCcJHC(2B zl}y0_1Qv@71b=Fb=U%-44NPl?p6rMB1~6;c_EikXB+Faof!WKqFO%8BtHiWy8^G`3 z(6y&UE{FP&=Q<7)WUU1=@L%E}@5rS-Ii*7=h{lj!B}txp*4u?xbHVq|S_?*x?ZnGK zJB&-Yn7?-Dp#b-mCIqa^iIBPA~bN_bm&vUp(G=GLPzl3{(JIl8(li9-t7`XQF z**!)@U5apYpt=xwHURD}+kX6+3_i8ZL*|eco9m#Iqad&!en@J}|7~AIYd<`}eP-R< zrXjQs`S+}D0PyXtd-eUQ>_^F&;;}FVvvoi_oa{iIJ2XF=aC4^f=9gi=qT&-I*Bo92 zxF)wa7=L?o%^oP)abZp&pDo9BPl~z6RsV05;CcY|uk!^Uq*%jF&Ctqd}P@ zKq0~O*73n!LSsTk*ejTu`s-&XWS_+Pr;GQ#3=@5|b`jCJPaZHTI*w-{lA(m02{%W1 zmW^z&A;m;%3l_&9lT(an_8|wDk2-I{`?ikgMSo&3);=-r{!;8LS_M_qyOkdbJ0^7+C8n+ z!+#BP8wG$JDH{CiUOo2^weG}w=TdJr%ttizXT6P$w6Q$q#PWz0_OH*%^mOKKN#urQ zZ_HtGH2-|3g(Kkjfwl9hVLh46?+vJ7DwRdQyhX9HYJZxFwPpLsVngUN9_wWuE@P<} z*%f@rN#V|9FipK+w#nYdH+?G3c%V}U_J1e60Q!u!eO%1#c|&3ItLVL`8yot4ouigy z(a;LNf3cnneB~$v1)hi3bvzY_Kf%79U&|>MuAKdZ5!C#iYo99-R2N_NiEIP*(w-@m zrcFwj@=}?LBF)M7OlEDIV{erbdw$JhP6+c#{rR&@nhqQSN46bY$oIS}4#)MNx_?|u zr-+UD2uwmVr#1N}QY7V$HqlW9VDv<9-wnw#Dxb!}ucNlm**y#Ae+W7|^w6?X#74cy z`WFTv7NjXf{sl81scBuUbvU6>cgs@xGf!Vd9TGNfgfFA5))VV??NrThq=`-vD-P2A zw)#R!Jl^Jg%w1imwrSn2o0~%%{#ajf zYOSWZ&BosKC|bXaSR%)N@yI=6ykXc|&{0#a!u!5SJ>t~q>9S&{_VifJ<{?=$ z?YhL~L3U7i#ftXiK!_f{jPF_&k{EBNu}E~B{9=iM34kYE3NYA$1OPcG5Lgk@85AH} zbTP3+sT2=2%z(z8KaGWP__`*%AKpivSctCErbP`sN9gJfi-;9%TyrosJ_!8=1r@TLYe>o002ovPDHLkV1kHwwDAA{ delta 832 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 diff --git a/resources/images/icons/search20@3x.png b/resources/images/icons/search20@3x.png index df0c874586dcf48568a6d3a0fe3741d9793c187b..9a009820d04c88976d1b4ecdcd3e44506fa41951 100644 GIT binary patch delta 1148 zcmV-?1cUpf1;PoCReuCmNkli<|5Xb)qLLMlQ?HgAvWE<{MGEWeuOJ})E z73K*-b?HPuf$S%UT&0XvrZU~7q@Tc0BF%WxX=9nR0`cYgr5L8yWNEn{7Z4c?jX-)yI%PoJY7;bZ;4p8Ts$$FNLo!C%PTv0k`v z0Y&9c$@WK~dVh0rT^pXfON(0XKrg&Q_$Us}y67Hiuud$MjXhj`f2scdJqp$Nrgoz6 zQq97PW7qrg7;uy*PK&_}@0OT_?=7{C@6=)KHaJBHrBQfE(L zfl7jTUloYnWJ`IT&S{Z(8^8kVL`TqHoBl%?r%GiC8h>79OYDkexGiooztFi5hp<3t z!MxAr_gLFvmvEaAwjSq-2cEqD0}LrGSmfp{FHlX0T{2U_l>0zt40;ShN(tt0F>76R zx2VyGXwfg+XCzal`t_5s)TfkS2O{H29RD_H-6cu|w5RLL>P%LC1OrM5)`k6X{sgVz z<~&IZVSm6z!Mqja-MJ0xE=gkQ%!(~N`S1a1Qo_QKpMHuVjQ7H-B=LB93|D>Bq=ew? zRz$0H>w@!pGOZ~RHQ6Y5nW^}Y&`k>d)YvFE$w7Ts(AK0-6K8V;C)c>}(K1QGAX5^c zCL0CE=uNYo#{;xaPH=RBnv^;oZp(ZBq%)8jTYvthY=$k0M^YX9r_LUtCS@0`qwM2s zh?a0L&mUSQFrZ{;sgKjo|f@ z=_H=(-8!e$a&P&}2{+;0JdVSQw`hPQhL3+smyxwcQF!qh22{#vZOdIw@eEQQZzO4+ zEPqs-PRd%>WU*RODbkAI?q^H%Vql3i?66vFl1_pJDhcMa3w7O?Xuh^tB{l|L*gBF{ zPQ=q3`h(^(a!GSZ0m+Dy<~{FDKuP#Yp`Vn#biAFP9mK!#WBz^W>nqoj)b6>_{AFt0 zJVfEUS1Uv_bXBVNT<><@_3pghB%HnChJUv+qMS1e{qDNDNxSBvjV{wDp>`m0nZ;c5 z0l6nmJVe76YSDo$W98cA7dS?!7q0u_x(Ldqr5pZI%Uz#hvA40l@P#AQo#qk?T?L$vW6ZW9}G z`lCzYh3YS!^FJ2fiG6&^uzS;CM)MEH1Narvb=6otQ}0y^NPf@}#cAss}iAat-!2c!Z> z2kBs!4xj=|1<(OVco{shyl8Ff%Dd>BIX~p_>*#rXWhfL1g+if_i!Y=_tX5WMJ2{@L znvRa1%IebU(dzjF-CJGlt~ojkt%2u}y5HSn@whI#VZ70haepBZQ^)Xc+U`3EV#I=$;=bGW6ux23)nXP%BjSoR~*Dlg@$gFFj71I&I zt$jfzg!Ge)5H>wWg&vImBB^Fn2|R0qGKPMw3+Y$|o@Y?Ruko7n)bx9l3KfdMK?gVE z`ypz@1inU|XMeo%7M;M~eQ5mkj{QIZzdH+h2>rlD^?_>RsKaa(9@C}8E8n5djaMGM zCXX?Ei$0B49uvO45@UGu%@dN;@JSJ4_=)8)`klrYK1Uyal4?kZa6-#cERWg`>>$io z;jxp}Kd)@iqxQ;M6sYKjcN)u;(C^L_O62%FT$6GBFn{Q#U4+aD0LO-WDV`jwLon^4 zmBbS=aX~uME5c^~lbM>~q`7c7XACFz-}IBr)P!Hmwa^vuTP@CL%+~5Grl)SE)$HF2 zX=uNn{iMM;?RqMEu64mq$e^Jg2&p1W+ZXn=;eEL?EVO$&3~4sR4GT8ysMx;++Lar- zmwX&98dPR7t?^UKo4P->IJvRi5Rajq3`57Wj_H&b7TV3=U~7?XI{R=)zrzj5Li pQ2kV01cpy!wooV(3WdUv@dBpFaHJ)2Tzdcj002ovPDHLkV1gi8Eb9OO 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}]])