From 697aa1c394426c41836fd8188d55c0b9e7cb3484 Mon Sep 17 00:00:00 2001 From: Matias Grote <44204622+mattgle@users.noreply.github.com> Date: Tue, 3 Jan 2023 16:23:16 -0300 Subject: [PATCH] Add profile ui to quo_preview (#14652) Add profile ui to quo_preview (#14652) --- resources/images/icons2/20x20/keycard@2x.png | Bin 878 -> 1079 bytes resources/images/icons2/20x20/keycard@3x.png | Bin 1268 -> 1477 bytes src/quo2/components/avatars/user_avatar.cljs | 2 +- src/quo2/components/buttons/button.cljs | 3 +- .../profile/profile_card/style.cljs | 40 ++++++++ .../components/profile/profile_card/view.cljs | 64 ++++++++++++ src/quo2/core.cljs | 4 + src/status_im2/contexts/quo_preview/main.cljs | 6 +- .../contexts/quo_preview/preview.cljs | 1 + .../quo_preview/profile/profile_card.cljs | 94 ++++++++++++++++++ 10 files changed, 211 insertions(+), 3 deletions(-) create mode 100644 src/quo2/components/profile/profile_card/style.cljs create mode 100644 src/quo2/components/profile/profile_card/view.cljs create mode 100644 src/status_im2/contexts/quo_preview/profile/profile_card.cljs diff --git a/resources/images/icons2/20x20/keycard@2x.png b/resources/images/icons2/20x20/keycard@2x.png index a1af87178da3285597986a26310ded6bcc9e0750..b392d7b7dccbf8a70a75aba9f3ce5004fd561a98 100644 GIT binary patch delta 1007 zcmV1R)5S%L_t(|0qt1LQq({Y{w4_$peV;G4_Yi3Zr;QvaJg|4j-FVa zfPDkt3B;Q>;R(Q_r-dgFo`7HhdSg(;0NEY8H;D=C=4TTuJ@8efl9}}Me3|L)=?-v@ zd;D7nl!PrEr;TfALdbk+%k`A&q67va$fN|?%kYp+leww!3Nj!56IoM`5a5!nja=KO=8rCp8otf#)Yr~q3& zA)RI`Tvgf)YkxY+Ce18m5A1QaxtTx_nx6W)+fPnPM;i9X+>kx~+_WEizNb{0PTxCM zmi=&FbRCUXs7-x8KA{Xo-vb%5pD{p0|RD~z>}39%PGNLx-n!=MCdGk=`;S-ZF2(ke9&d*!yqkmJL8 z$==x=0Wo9Csl_zy8lC;t}yf^6t@IF%= ztR(W3>G%s}&+t1Tm;@yPM2g9=CkrBPG^!*RcYjWhHn~aUobD6ZqNl!8a+E>@JLn9M z-v0?P>*U32sE9&NViYQjdPdD>XEf1=_1So*7pdwNUwke(^Ce1y% zB9KR~(}?w;rJH=h^p_Ng6l=)Epag?7T!bV=VSLIqKOL}D=eA>6;0-B z**^ra&TjGFikw8lpU#StnMD&9I8+Fo5xF^PQUKQTmMxXl7W@PH#eMpe^YXk-;R!3uuyMJFdqQ7c1Ng|N5Y>UlF~TODRyH)x15F_kuiES~Ln6YY7Zz)A|X<(9JH90b4~-Ih@7KYz4<`4YfCn&@9%*+r!l z+>pHw^mB{`piM`2`sS$Q++sSi``JJY6OUXAxbk5x`No2!0~q~yrBUIyPzKnc%fVt} zb8@H0`>0Dt_72H~)?@D}PUz1$&g3cvM$8hGkH=Jh+w*9jdY+w{IhNoTFh_W+eMIZ(gPa*%jn~ zc`BhexIpt` zCejo8V_t-d^H?ib7Y8+w#2;*`w39f|H!f;YOTm`x_J8kzGY3MYjZ-n;&4Ash9$%s& zwOmYZcNTy2(-Dg2u$57Lk7`6^mzt|VwH>|d*JSFjV1`r_?6Hy@0#r~}vSKL(E%><> z2p~=;`iGl*){)z^#&Bye|58j*jZ!WauvT_aaUu?@?IJQ2v$0~ntZdcu+Hn53u4fm#+#=#OH=J#a-Tw% zZumqfEc#`a$I@~jH&2LOf_r7;&{)&Nn~E^4kbl*Ki@$n&oGr6_(^LqzhRL>bGkp6> zuoseTC*6;V)|6`8$vP*YbsliJPYE94?{Ps(hd>4h=I*9E*pK3P5RX&IPq}kEL=y^z zO7=!H`4Ej@K4yi$GB!#woBVd2cIT8V^D2s;HdaH^iTo5`_I{#&ek;4E*1z9KZB;bS jhaRKtf>g3*%}eGVp%oaAD+zbO00000NkvXXu0mjff;)-> diff --git a/resources/images/icons2/20x20/keycard@3x.png b/resources/images/icons2/20x20/keycard@3x.png index d0bf37bf6968d866d098a1faa19512b16bd813cf..e972a36b3ce75832f6132f21e829c1f30f6f755b 100644 GIT binary patch delta 1409 zcmV-{1%CSU3B?PLReuFqNklt3s!JK0q1!f{qZxd$+ZM~eh@fF_Fzru2XqCRTX7VI zC`oC-3x2TL#PHY2W@-y3OptDtHS=a3Y>kvdx49_4*76f`6?pwUNbdsW5J95 z0}@;GS&GcoA~Uaj{ z`7PalL+TE0c}s_b`1G~zb&Lcrc+30rap|`-6m|O1$$z()6G{BON6*0b|LUsOy+{4p z)}?LIOBAS5B)?zv2pSuQ>v8l~IP2W2aoSnU105$CqDQXKF?9vs5BxrcZ{&bUfsLNy zxT|x%3r%P!cr3T+Cf!+LIl!^clUTNl*40C1pDhPzXVG7I!^c6BC<-|!c9ds%qBk#w|`TJSJRHaisrMD5|JHeBAU$dpx9>1(L-CXI_A3%o_s(9 zFH3ObYg-XqWLknDkUo*yJaqjV{aJ7U4l-n#TYqvNJ@^x7-8(Fu+>{nP4W1qr+sQBE zj=P0MS8k_p0$9dCuv>bP;L-aW*RQ@QM;hbJaJ0`W9kiz2Uh%OQcg99h)n~~v%1-oc z2-b%JR>6d6*w|Bt9Zn#)zjz)ht87d{JJX^BLdb23xXz5@l`%Lg+q|NHcId*PDDFHh zT7QiQ&!dwsVd;5BG+~JZ&1cPGDjLwQZHEmvZx@cItm_%(fEANw22sdK#+EYHj%D1i zWeaP98A>uJs~W7)JME17USu^YwEEHUOUwytCOzU}g0bcK_YdSC#VICdU6?c01?!MU z@FXbo;j~wExrn)O!56bC4sP=N_Bmvt?WZ%CsnVP7A{iXJR`4$N{Z5D1X-q zp^3I&^`a^I+NIG+&~$JYg$kygX;Xj;ifs!)iv$-Y=M6Y5RDeLTRl>B@VqX`UXbYzK z>Y>upuE38kCKsw{V}H`M^Ad2exKE1$2hhZ5xpYhwWA{8dn#;s}1g%r;6>HvRl@g;U zO+iJOx3c*?{04Jk(SNwD7WjFh0e=IGmP-fm`_~KJr!7cPlJeh;hIjYfkk)Tuk$i1h z{3!S33wkF;7G@-vX?nM5BHw5uTk*)DH~%#)RtHV*^TQ;rHW%hGx8dFSp8ou<_>Blb zxpxwu8r`qrO)b2i3SF008U}E~B`k!d%OWf=rVp2fJ%J`K(YD8Jo|)UGmUuu+5GJIJ@DYw$irEKQp zzmI8Up(V14hP-Z@EqF~zR3dqbm#48D4@8e1uty~y?Zl#{rlzK*<|E=iR)#&*z5L3x P00000NkvXXu0mjfNXWVD delta 1199 zcmV;g1W^0M3-k$)ReuDDNkl^wo8t(`27ol+y8Ur743@qTpIe5^*C;(zI6+ED72Ko04 zp|;A1wicXpfZNkySKIARlcEHwv$ey%8*^X z?!h6ee0`6q`!tu_|0v&V!GeZOW}mO`GO)dDs(KR2H^0I$!|=rGKCIQ^|LR;kzT#XLzO=*Jz;1 z+N}~XMhCcJR?zHHJ<{VuM=y9_h_T=}XSZbh{YB=(vPdcP3hXFb7u7Z`Z!DN>r;|;I zpW~XKy7aTx-X;t&7EJTu?euj7PvDw}5oP9Im07bFV=NfChpypV;F|E^=jM7Rg0ob; zz_5F_D1ZI#(t`i5SP1s6c#~iQGp?JB4S&Ic;X?3oPzzpmYQf9SS0}g$$0WXLkPBDu zXlDARCq8L5U>F^JkbnIKhd6EF8+>D*#A=t&_GB+TYrf=@d*rZd9P2W0h%>>7a~@q- zqRZH9=xuS>!fF>Kpw-#+M{l!oucGY{eS*456L8g@iJA~ctdZCMGG^_Em?N6 zQREJqzQ=6W?Z$Pp5FA?yUTCvnSys6ayd0DktYbjMIh06WX*<0v=k&d7+39x&rF)N! z4U6 zcbEV!7L+~A`v_D?3hGTm{UETwn-MuiuqE@KGbDUfVTG}X8aj_ z4g`i63)U@$?1T9Q*5MYwq{!c4)4#>o*lGT0VL?G{{7f<4M>-GYK(T4sb+I4QY1Cp* zB8n=)kV*pLIz~)k(_dgniwAA`r)4OGFfFsjzuSos_j1YB0r8SY9$GK*D=8f-)_>vC zsw0YeoVdWv{pkTt32iFQk348}3pFu1nO;6B!Nzv(J&zCz9e*lws72559!72Y6FYiv z#0;mwl^tsNk3@8IJY%$VO=+>3(o4%oia|2^nokK8pbw_qTjVHWB}WgF!!Fo&*xG%) z`ZAfe=27Y4(n&Y(P{( (count %) (count @state*))) diff --git a/src/status_im2/contexts/quo_preview/profile/profile_card.cljs b/src/status_im2/contexts/quo_preview/profile/profile_card.cljs new file mode 100644 index 0000000000..463e8f3bbf --- /dev/null +++ b/src/status_im2/contexts/quo_preview/profile/profile_card.cljs @@ -0,0 +1,94 @@ +(ns status-im2.contexts.quo-preview.profile.profile-card + (:require [quo2.foundations.colors :as colors] + [react-native.core :as rn] + [reagent.core :as reagent] + [quo2.core :as quo] + [status-im.react-native.resources :as resources] + [status-im2.contexts.quo-preview.preview :as preview])) + +(def descriptor + [{:label "Show: Sign in to this profile?" + :key :show-sign-profile? + :type :boolean} + {:label "Show: Is from key card?" + :key :key-card? + :type :boolean} + {:label "Show: Emoji hash?" + :key :show-emoji-hash? + :type :boolean} + {:label "Customization Color" + :key :customization-color + :type :select + :options [{:key :primary + :value "Primary"} + {:key :purple + :value "Purple"} + {:key :indigo + :value "Indigo"} + {:key :turquoise + :value "Turquoise"} + {:key :blue + :value "Blue"} + {:key :green + :value "Green"} + {:key :yellow + :value "Yellow"} + {:key :orange + :value "Orange"} + {:key :red + :value "Red"} + {:key :pink + :value "Pink"} + {:key :brown + :value "Brown"} + {:key :beige + :value "Beige"}]} + {:label "Name" + :key :name + :type :text} + {:label "Hash" + :key :hash + :type :text} + {:label "Emoji hash" + :key :emoji-hash + :type :text} + {:label "Sign button label" + :key :sign-label + :type :text}]) + +(defn cool-preview + [] + (let [state (reagent/atom {:show-sign-profile? true + :key-card? true + :name "Matt Grote" + :sign-label "Sign in to this profile" + :on-press-dots nil + :on-press-sign nil + :customization-color :turquoise + :profile-picture (resources/get-mock-image :user-picture-male5) + :show-emoji-hash? true + :hash "zQ3k83euenmcikw7474hfu73t5N" + :emoji-hash "πŸ˜„πŸ˜‚πŸ«£πŸ‘πŸ˜‡πŸ€’πŸ˜»πŸ₯·πŸ»πŸ¦ΈπŸ»β€β™€οΈπŸ¦ΈπŸ»πŸ¦ΈπŸ»β€β™‚οΈπŸ¦ΉπŸ»β€β™€οΈπŸ§‘πŸ»β€πŸŽ„πŸŽ…πŸ»"})] + (fn [] + [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [rn/view {:padding-bottom 150} + [rn/view {:flex 1} + [preview/customizer state descriptor]] + [rn/view + {:padding-vertical 60 + :flex-direction :row + :margin-horizontal 20 + :justify-content :center} + [quo/profile-card @state]]]]))) + +(defn preview-profile-card + [] + [rn/view + {:background-color (colors/theme-colors colors/white + colors/neutral-90) + :flex 1} + [rn/flat-list + {:flex 1 + :keyboardShouldPersistTaps :always + :header [cool-preview] + :key-fn str}]])