From 20ac0eb2c7f19f7afe698168dc3461ea6d1d4edc Mon Sep 17 00:00:00 2001 From: Parvesh Monu Date: Wed, 28 Sep 2022 01:27:06 +0530 Subject: [PATCH] Implemention of quo2 bottom-nav-tab (#14077) --- resources/images/icons/browser24@2x.png | Bin 0 -> 888 bytes resources/images/icons/browser24@3x.png | Bin 0 -> 1291 bytes resources/images/icons/communities24@2x.png | Bin 0 -> 939 bytes resources/images/icons/communities24@3x.png | Bin 0 -> 1385 bytes resources/images/icons/messages24@2x.png | Bin 0 -> 815 bytes resources/images/icons/messages24@3x.png | Bin 0 -> 1179 bytes resources/images/icons/wallet24@2x.png | Bin 0 -> 735 bytes resources/images/icons/wallet24@3x.png | Bin 0 -> 1052 bytes src/quo/previews/preview.cljs | 16 ++-- src/quo2/components/counter/counter.cljs | 14 ++-- .../components/navigation/bottom_nav_tab.cljs | 71 ++++++++++++++++++ src/quo2/components/switcher/styles.cljs | 6 +- .../components/switcher/switcher_cards.cljs | 12 +-- src/quo2/screens/main.cljs | 6 +- .../screens/navigation/bottom_nav_tab.cljs | 61 +++++++++++++++ src/quo2/screens/switcher/switcher_cards.cljs | 47 ++++++------ 16 files changed, 188 insertions(+), 45 deletions(-) create mode 100644 resources/images/icons/browser24@2x.png create mode 100644 resources/images/icons/browser24@3x.png create mode 100644 resources/images/icons/communities24@2x.png create mode 100644 resources/images/icons/communities24@3x.png create mode 100644 resources/images/icons/messages24@2x.png create mode 100644 resources/images/icons/messages24@3x.png create mode 100644 resources/images/icons/wallet24@2x.png create mode 100644 resources/images/icons/wallet24@3x.png create mode 100644 src/quo2/components/navigation/bottom_nav_tab.cljs create mode 100644 src/quo2/screens/navigation/bottom_nav_tab.cljs diff --git a/resources/images/icons/browser24@2x.png b/resources/images/icons/browser24@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..52d2cfdf92f1b56e61fd2067a172032dc28747a0 GIT binary patch literal 888 zcmV-;1Bd*HP))0ZZloXN}q9-DM*QwHDNEJ(Iq{4ez`RIH0N`7G_^uP}YN3m0Kk0JNx&`#9m zo{+8vaVL`zN}dole1miZhS?0Il|Uv0&U0P=UShaU6&XWdAtIo7l_@ql8)S5%#JTZ1 ztk2FH^9hLo^B>qt7;o{NXuzaisvrY?I!VU8qtwyuHFAEAGGGUZ8e`AD<9bMpZP`+8 za=mVm7yCA@F{H>2^RwH5F$)r7j|I~34ShtsZkk&hBpA;^i}72QiXa#o6UqY7QTw}t zZ$YO)dNulkp#R?K{}SsYJjE60bcmPAkH*2R(J8z>8-jlSp4(8TI}p5#;1+rfrpspO z8ADy7-3`-e)(WSC>(w*p*az0~+uZ*;(cc{>*3YMR+QK%9h+?Wzjh|}&X8Lau$8m!y zY@-NWWGd!HwDS6=a2m6~a<~z79sYxb6wJXxa3bnIFR3%#+eQ((2;LIPi75AZiH&n| z{KmO>blL)RrId)4M(3S#jk5y58>hF88&9D-pk7vwpeu#xUm4L=tib!r%ZF>cI|HYg za~nEo1UqT1a;jBP@^!r#xx2EYZ54Q$#OA7%yZmH5vb(CO~t~lSjPSrpq z(hy+QP6yCuK^wKpWN3^QPgEtFnQXyeWsc~mPw{u68Lh`0wBf;M_<>mp2(YN?3 z%pR9xj|>6SQ|O;a@3B66oUdrfDJ*c=!(BgZ4p`}gTL0!0d~-;wbi8g62p^ZUST=}6 z_(0$Z8I8Au&hOn9-WIf35g3k1x`-}Til%(zt1-NNMda_gAhe~jTXEW|bm}8tt>iB* zM2!#dnKcI+49^0`8GXjnAj5aIHU8DWZe;8(Ok=+tYtiX7w^91y)9@cC)VDcK0O9Na O0000TZ5uShG@3ND$1?*&;nmLyl__Aut@3V-lysBog-}XttZKb5a(k z!z9uT0+Gi)zzp0WVm*?ER`3*!jHyJZ`*96fdBX8wIs|D(3A-D@+GM~V0A>S%lBRNaZkwYg$$P8LRQLM8-P7K*0tT3JVUa(63WW$}#gdbiC z+wP#pcN(Ny6T5@F9#+ARdtuupERdAd&hbboEu}aQ!4gevVrS0>?MTxY7x07NIZ~bk z$F*dFGc1Nl2oqB9G`9-QeU&0@rRoG%Lc3RRCv@;01ixMcYgmJ%p;SQ+3ELjwMz>a` zX~V{c_x&$tn5KdrN%-&3x1klN61I(I5D7mB@#x7~Xw$Xb55l$zIwT)nWT{OCX$1;3 zG)UN{&7faXJJ<-MCDhOeF-)DY5lB087;0#Q7^XwsP3>?d9CV0QAQHBva0ctz9a8nb zoQ?glg`gwVGZ;ftJJ@89_BJEcGZ;g{w#ndyyjs;=m9Q5=BE%WYyRKyj zcf&gNl!eB8{pquV=dk67O4Fh~k(Qj$ST|?1fetdXZA~dOu!TE&=!9TDT<45z$c1B; zE)8T*D%`TevO<`U0%tYd+D95@8@NGeI?oO*A%sMZ*ZtbVgRP+ddP9xKR6Bjju0IhuPnvfQ8Nlz9%g!r`^>ZmpbGJXbhO=o8#t3(sr& zhD5oB|4gFBV!T})4T9Zk+y9*~5)*u_WL%hb;EfCs9y{lJj_h=Rk zwd-P5%q`Fm7N}cXq`}`<0A9^~g5Rp{i4!N%=MRuh(b#5>5*+{l002ovPDHLkV1h_@ BPxAl( literal 0 HcmV?d00001 diff --git a/resources/images/icons/communities24@2x.png b/resources/images/icons/communities24@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..bf630d553becbdbbc13ac06f2f5a3ffa819034a7 GIT binary patch literal 939 zcmV;c162HpP)m$?GyAS!_ltPVm4b_b*b=zzNl%vF$d09S#p1Ji-i!JYOjhDDa-mFxgN@@96T z0e$Ry+SOV(z!&a|Z+I*yV@qQTW6$>Q!hUx&_S@JA4+3(mGPX0;82c-*7Cphcft+3& zJ3!{J&pKRo1>bQSXk#1ucMKos!{lV!1af%A+NH6dxB)ccYIpW~+LZ!KSr2M9u0DVG zSv#N+R-9Db8+%8el#?(w0a9>_UQriE^iKc6B{Uui8vQBZh6#m8f$8vu&|G+hKfX&$ zgF>IYw4?l}os9s6%pODMcZersXfAEX(yny~C;u!2XhF9C(W0s0qOC(Qhi50CFpT%c zelEc|*;~j8SL5`ZL}1}rxQ0ArUJ+OOfc^+BoH=XEM4&<5c4~wbC#ToQC}gSlfpq5= zo^gD90U0I}*gA{93C1XdYlA`>CJ|5=KGu%KJe}X2XPi`V7uf{dq@}hR8RIK#IkkZ! zn}8d?MNvI(DQXOc55p`gL&}^DaA=15C_jEQc#Wb*BHOtM@5jtKVP6k+!>K-7QRPtvc@{S z!${&Uoq-F1Qz|mw8?M!l!F>=U+aU4&pfR4nJIKOEL9RaaZ87bL{g1W4IUduS$XpfV z>esj?n{?H<|^&>LgKt3h(eP-?0HY?VS5hZZZPRIa%L&Ke_?Bsm$rPKC>ncEMD7aq;p zF`^=n!zn*;&ut}U0IAmkH+Q~9CVc;DpwMq^fzJnp%{yjzTls~1;UAc~RyJiPcozTw N002ovPDHLkV1m~5p+o=x literal 0 HcmV?d00001 diff --git a/resources/images/icons/communities24@3x.png b/resources/images/icons/communities24@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..df34db70a49ae09fc2e0cdcd644a775957b75936 GIT binary patch literal 1385 zcmV-v1(y1WP)g=|&ZD*f5d+F?}!P?Gl z_`wiCt~-0+(7~@6tmd5~qKJny|@jjq#jtpsuh5UlHb>e4-5ToTxy5u`EpQEhX_R2()$#a-BVOb~SU1 z1X&q&|MHWu6l-MPE$h(dXAhjn5L+5ja-t<-OiYfpsz7pr&CJQPhopAm*yBosM`4 z3gpl`(-JpZy+u0WDJW2jeuW)jNT;8epOrS0!Ba?}8oe{2?l0oZ#hX$|Y>%gaK#n{! zmZN++GKUC%PXU3nPK5?#N7-~_On=)$JhEYaB1jU*PgJ@IsAFzei8zit#3r-R0y*@n zz9o#QfSgO5>exnXG8-*WO?szl%865v=hjD*KrTaNbBjtxJdSW-`dc1NVxPXTMekTh zCvq+-dur^0^tU}O2jx8(1ahQ%PdiaZ>}=(*W%&*BPhve81oEVLPmO-^vFjYqasb|9 z^Gr_$f!c&h9C`;Hh@)m+m?y%9tS3<*Pn!3%6Xj#lhexJ`kvcbo<4F|gDWL+7-Wf+Y zk4%e`lCOCZ1aic8P>#{OCuV5P-3Cd`*E|UVdGs-Ep++ADjxcI;VI)ZB$k#jx0yRqE z-wov)dZ)|{A1Sr49O8*Q&kOXcWLZu~Vaai43`C;;B0Ol|$?j)4tshUNN98<6UIA zkl5pxp2}nBA6Hw_5_3Pb_+yD7SCQq0Y$xi7S?636{vC(uLR7>}?^@@!*s0J@+A?zv zu|Aa@TZ8dJ+$x1F3$j)z7qV7qNE29CdP*{$5!++CHw2)i7n_ALsl%%xG9HYW6Q_UQ zTKbaoC`r4LOBHHf7ZO;vqUf1JD_Z~k{M@!y?r8C^JO!zMFvZo;>l(L`8TkiJkR?l$@_e^PYP$@zHS1($c$9 zwpmjGZ5gn`j+A$!ZTrstBokwS9N}oQ!xwDC=6pRHW!sL7SUhOIuz&0Yuh>6_)I7*4 zu23o49?6JBpgFXRI3(lN#0@F$lx-mbFJckM1@5zYPpY_m9pkpG?VA|i585lo+;RAP zT-$f4Y?G7rEOU`icB+o7;!Kg_i<`{AkF3N!@5^(Fc+V1^e1BP`v=w_B r_JiS=4TbWWO#H)2!THRYGuincKREzvybNg;00000NkvXXu0mjf=E#pi literal 0 HcmV?d00001 diff --git a/resources/images/icons/messages24@2x.png b/resources/images/icons/messages24@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..e92ef4202ec6dcd438e2f1e2efca9c97a3222dfe GIT binary patch literal 815 zcmV+~1JL}5P)nu~K~#7F?V5{m z;~)@*|I4@lT?M9tQwOGlqyy_JNC|caP6y6aaMyuy6*yNxlnRm#eCz=6f>8wM~}#%RHjX+ zuN~Tr%tk0VAguTb`3UII426}zKnR@2I^FkC+^1}LhCok5pyN@7*z~!>fJPKJSAK)> z*?7-9Ak$&~gq=cpi*LjZiBx?%7yv(QJ6_XRaw({2r<# z;0{%ZIF3Cf2H~|?+8?f1C9W`8`H0J*f!4|Lrt5+gF4=X8^7ojA1}DXZE#wC9m(?rc ziHYGMAg7)gz(Yu|>l6d#;LX`r_~38@K8)AFwq+KfLc}kjMCyAWcg}Rq(HorB*%!oT zpku82A^5)2b*Msty!?9#14^{yXgq{ySRR<-8*|^qJ;sNJbc1)cCTVDLMqzAfB&7IH znEz{xBj7r9)zv^^pk0B1*u!;b6#fVGE#|?Wyz7+4d@FH->B;`6w~dqHZUp>&sU+`9 zukqA#V2hsnQhW~7n3gSE<+D~ozV34CsUrzJCz6IVg3$Q`DKC(SAOEB*8ByarEjVD9 ztrv*_x7Q`oavOTkHS&-c!7)3;Deag2hR$fa5YX?Hx~1==^M^&CER<_MK!20|QS#5! z*+5S?%Z(AcqtSSMlyJ|EeW-q=J36CNH&NzNH&N!NH(xLL7NHeOps&(lL?YekaCNu3BCdW0t4}L zj*btQ59!s_ix2`ha^y&deBiK{Bz?*K=83nz4@r9AK=dh)2rx_1>GpTVz9=q4poeX` zP12eP5hZDnq~|2P21?J{W1cZmBr@iN6~&b{NjfKOrh}(XVKkvG2~0>2ib%uWcy2Gg z5|jE$yj{-B_zOGpmQ=^DV$w?b$v}{d-{4ovt0Y|{=^OPCk?i&uKIgi|U)0Vpq@i79 zs8@u|tRWSv>f9R+=uHvjUXz(;*I3GhlK*D(jHSHhLPv}bSCr?ekIMRoWni_H!%!Yg zor^RpIr)MCm?CK&#GqaIjOYl1yLPS^9^*C*(KB^~;a*0h3$XverLqIEeg(Umuh57!mAu}v6s)f*ph0BC+BSG7h_WYI%% z%($9bqe|Bfbk6v(=uuRQGo}|kd9<7CNZatE;{d11x;fL~Mp;*@b!ZA3rh|Bqmsx*O zc8-({*X*8C)y2{+OX?#-yKCMytL(AVx@u?bPPmOZzjmCOa)HO)f#yNlc+Ml!<5pSc zHI`NMpW2te0z-`;p|Y&S2+AI}e^5Z!E^uldd|*RQOZ1fsa7%n)fcy=c)~S z1Tst)ZJ;d9FBGq0TA#24n4J`X*TTqi<=qek=k61{tY_%^$2K|!1Vca5F^fEQVHF;so zexyauIW1VCixe?F=5){^To3%m)_FAO6@5Vf?v(=@#zWZzs@537-@x{bYmQ|r@5#_+ zdMp?Zb98Zn&9PiCUjLb+iz7{|)!f89WA&dox;Q~QyM}uHBeh~VY!^WCu*5yCHpf$Lo6qcC3!kBX+oLQ`7SEy6HfZ-RvMh!7i2xZY>GJ~v zUA$fGh4h-6Gzr0=UkN86Oh^o2g~~o|aze-S{rwOa{ha*XGG;!zLVB%b$3PxF@g t7O03ci|^=@M>FGo=BLAl|_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/wallet24@3x.png b/resources/images/icons/wallet24@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&370000 {: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