From ca98539d9894a913d4c52e150cb742127c8b45b4 Mon Sep 17 00:00:00 2001 From: Brian Sztamfater Date: Thu, 7 Jul 2022 11:22:15 -0300 Subject: [PATCH] Revert "Base implementation for chat redesign" This reverts commit ec3b4c032de6b166f2d64d428d41a36d180ae779. Signed-off-by: Brian Sztamfater --- ios/Podfile.lock | 8 +- resources/images/icons/emojis@2x.png | Bin 1014 -> 0 bytes resources/images/icons/emojis@3x.png | Bin 1652 -> 0 bytes resources/images/icons/notification2@2x.png | Bin 498 -> 0 bytes resources/images/icons/notification2@3x.png | Bin 659 -> 0 bytes resources/images/icons/qr2@2x.png | Bin 569 -> 0 bytes resources/images/icons/qr2@3x.png | Bin 819 -> 0 bytes resources/images/icons/scan2@2x.png | Bin 463 -> 0 bytes resources/images/icons/scan2@3x.png | Bin 605 -> 0 bytes resources/images/icons/scan@2x.png | Bin 773 -> 0 bytes resources/images/icons/scan@3x.png | Bin 1059 -> 0 bytes resources/images/icons/search2@2x.png | Bin 851 -> 0 bytes resources/images/icons/search2@3x.png | Bin 1110 -> 0 bytes resources/images/icons/tiny_group2@2x.png | Bin 909 -> 0 bytes resources/images/icons/tiny_group2@3x.png | Bin 1287 -> 0 bytes src/quo2/foundations/colors.cljs | 14 - src/quo2/foundations/typography.cljs | 2 +- .../ui/components/chat_icon/screen.cljs | 29 - .../ui/components/chat_icon/styles.cljs | 2 +- src/status_im/ui/components/plus_button.cljs | 38 +- .../ui/components/search_input/view.cljs | 48 +- src/status_im/ui/components/topbar.cljs | 14 +- src/status_im/ui/components/typography.cljs | 3 +- .../ui/screens/chat/message/audio.cljs | 16 +- .../ui/screens/chat/message/audio_old.cljs | 238 ------ .../ui/screens/chat/message/datemark.cljs | 4 +- .../ui/screens/chat/message/datemark_old.cljs | 12 - .../ui/screens/chat/message/message.cljs | 199 ++--- .../ui/screens/chat/message/message_old.cljs | 702 ------------------ .../screens/chat/message/pinned_message.cljs | 2 +- .../ui/screens/chat/message/styles.cljs | 4 +- .../ui/screens/chat/pinned_messages.cljs | 2 +- .../ui/screens/chat/styles/message/audio.cljs | 22 +- .../chat/styles/message/audio_old.cljs | 47 -- .../screens/chat/styles/message/datemark.cljs | 21 +- .../chat/styles/message/datemark_old.cljs | 11 - .../screens/chat/styles/message/message.cljs | 233 +++--- .../chat/styles/message/message_old.cljs | 467 ------------ src/status_im/ui/screens/chat/utils.cljs | 16 +- src/status_im/ui/screens/chat/views.cljs | 218 +----- .../ui/screens/communities/community.cljs | 2 +- .../screens/communities/create_category.cljs | 2 +- .../communities/reorder_categories.cljs | 2 +- .../ui/screens/currency_settings/views.cljs | 2 +- src/status_im/ui/screens/ens/views.cljs | 2 +- src/status_im/ui/screens/group/views.cljs | 4 +- src/status_im/ui/screens/home/styles.cljs | 9 +- src/status_im/ui/screens/home/views.cljs | 165 +--- .../ui/screens/home/views/inner_item.cljs | 93 +-- .../ui/screens/profile/group_chat/views.cljs | 2 +- .../profile/visibility_status/styles.cljs | 11 +- .../profile/visibility_status/utils.cljs | 55 +- src/status_im/ui/screens/screens.cljs | 4 +- src/status_im/ui/screens/status/views.cljs | 2 +- .../ui/screens/wallet/recipient/views.cljs | 2 +- .../ui/screens/wallet/settings/views.cljs | 2 +- .../ui/screens/wallet/swap/views.cljs | 2 +- 57 files changed, 374 insertions(+), 2359 deletions(-) delete mode 100644 resources/images/icons/emojis@2x.png delete mode 100644 resources/images/icons/emojis@3x.png delete mode 100644 resources/images/icons/notification2@2x.png delete mode 100644 resources/images/icons/notification2@3x.png delete mode 100644 resources/images/icons/qr2@2x.png delete mode 100644 resources/images/icons/qr2@3x.png delete mode 100644 resources/images/icons/scan2@2x.png delete mode 100644 resources/images/icons/scan2@3x.png delete mode 100644 resources/images/icons/scan@2x.png delete mode 100644 resources/images/icons/scan@3x.png delete mode 100644 resources/images/icons/search2@2x.png delete mode 100644 resources/images/icons/search2@3x.png delete mode 100644 resources/images/icons/tiny_group2@2x.png delete mode 100644 resources/images/icons/tiny_group2@3x.png delete mode 100644 src/status_im/ui/screens/chat/message/audio_old.cljs delete mode 100644 src/status_im/ui/screens/chat/message/datemark_old.cljs delete mode 100644 src/status_im/ui/screens/chat/message/message_old.cljs delete mode 100644 src/status_im/ui/screens/chat/styles/message/audio_old.cljs delete mode 100644 src/status_im/ui/screens/chat/styles/message/datemark_old.cljs delete mode 100644 src/status_im/ui/screens/chat/styles/message/message_old.cljs diff --git a/ios/Podfile.lock b/ios/Podfile.lock index b3d4c457c8..11c28f5505 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -2,7 +2,7 @@ PODS: - boost-for-react-native (1.63.0) - BVLinearGradient (2.5.6): - React - - CryptoSwift (1.5.1) + - CryptoSwift (1.4.3) - DoubleConversion (1.1.6) - FBLazyVector (0.63.4) - FBReactNativeSpec (0.63.4): @@ -631,12 +631,12 @@ CHECKOUT OPTIONS: SPEC CHECKSUMS: boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c BVLinearGradient: e3aad03778a456d77928f594a649e96995f1c872 - CryptoSwift: c4f2debceb38bf44c80659afe009f71e23e4a082 + CryptoSwift: a0799ee936271bd2253a006f1e4523df21845000 DoubleConversion: cde416483dac037923206447da6e1454df403714 FBLazyVector: 3bb422f41b18121b71783a905c10e58606f7dc3e FBReactNativeSpec: f2c97f2529dd79c083355182cc158c9f98f4bd6e Folly: b73c3869541e86821df3c387eb0af5f65addfab4 - glog: 502275bc0747df92346edbab1f40dacde2ec86d4 + glog: 2d7c14bbcd0c3139c6258f813895cb61d7860fcc HMSegmentedControl: 34c1f54d822d8308e7b24f5d901ec674dfa31352 Keycard: 07f1b4d4fadcf1218084cb3e1bb3a8bac3870c5a libwebp: 98a37e597e40bfdb4c911fc98f2c53d0b12d05fc @@ -707,4 +707,4 @@ SPEC CHECKSUMS: PODFILE CHECKSUM: 1a5b8878f89edd08eb4d37898a3a8721a7bb3388 -COCOAPODS: 1.11.3 +COCOAPODS: 1.11.0 diff --git a/resources/images/icons/emojis@2x.png b/resources/images/icons/emojis@2x.png deleted file mode 100644 index 021fb6218a24dbf14aad8f0493322309ec98c3b6..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1014 zcmV z+b|S9z3Aw_E0-<1=L8;~Qw30h9DastW;P)|U60=NO$4cG}_zc;i<18IUJ-g|aR z9LH&65+sE9q^L<_KY!18{@$|z-tor4pbdf`;3*G9#)cfkSN)Y>>?i(2iJx3S9LMlX zJc}UT>hH6ReZ$+ZVV6h%Tcr2D=HLh?f5b1VGG~SfGgu>u01siN7m^7~|8P?i3Q8r)hcu|Kb~HjgP^Q_xjgEl@vzFH&Y{hsEfzhqF%)7P+3aof`XgQ#JcTu&Hq@RRw#J#9MG}08&|J|a zf~5S*d&bzJVhrOEQ`%fhW0O@YoWh0LP<#4>n7?aulwCaaNk4?O1VKw>GJTl?Zt&fT zX(7HqEwZp;!ysUeIh=qT)vELB~r@Ms6qj}?@$B$3O5xSj}H~cX{@5yD3@)O zRVnDq3ZcH6gQ?|3;>~RaP;|$P5)f#9P`^ zOcH=;#T-|eA@6a91dho#dx{?s2*E~0;4`^DNi6A86(>r6Y3FCYw{DuquXyMy|V^o%FQL z7J!`A_aQH`H(nzxb;M}av_iKrxn@TnYPC^7kCuO_a~3Hri&aM-*m7SS^#Nv{=tHygPl5el k9*QsJ_ZA13?|Ae055}LHyz83G!vFvP07*qoM6N<$f^<01MgRZ+ diff --git a/resources/images/icons/emojis@3x.png b/resources/images/icons/emojis@3x.png deleted file mode 100644 index 0847aaf3150aac25a66c9b9c34d8fb3bd9c7903c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1652 zcmV-)28;QLP)wf+E{WQP|E3B}>0|J8uVr|W8yGEnSSkM8% zUI<_ofUxjKt!W#4cfmkh02Ajz@R9GkHvDidU_q##uw_~1PjgQ&wu?mCPyqrbfH64s zJbzF(`PvAZ8?7!%dVn9hP$Q81q3`?sx`@wD7}eI`=6hU`S4B-H>g(V~C-$zbqX~5p zpNnwg@vnOU=e_uzOu-HSjyZ#oXL=)W97o!Uwt;7M0s$Qk@DdbSLaGkH`~LXy5GtZF zVYAtKkN@@|BNRBe+CwBbP!cQxYK>_c`$E7=2COYQ{Ul_RVmi#Ydu@72PN6S5PAaUxmm(xf?*fRrp_LsYNMBF|15 z+aF(V6DR>gx8Y>ZCM_`v;C;XP6YdDX&l{URS|_dS#$Nx%e_6Kz_vSC1 zF|-I9%`J2y;9cTnM79Ta3ZjegiOuW zSCSRx1(H3C4@~4?Nr3X4B}lKgJ{9%Jx6*Vh7-oVXTI2178mKae;owt|r5Qds~>8oQ`#y5E}Oh?1(b zfoYleGpfNcNlu^gn zDpXpW#-Auj4oi-VjEtSj+R0T~q`VdZOHY`Ily@lP-l3Fm7@@>FN9B*Dh5(+BG0kC$ zobYh#OMFk{1=VTH!aF8L{#?kIaQ`M-DMlP%# zhRN+@b$^6D>NC*6q}(ZlcvH0E;q3sl8)eF^>AYLf>Jo~}rLtsqg@QC0rGOi4+`kDj52!HUNK);=qhm568U#;q)aBn{IM~|PN zLOh?nWYFb}b-*&^Dcm8_D;vqehW_~S9n_6X@#>COnrhUU-*2`?WyYv-<$-RgsVNgB8`Swi(|OIVObGn>gdht~#y zA9=nztV}$gXmqdS`=xe*KhYKDKx7$%gPb$A=8I|I;P-uZd^LcIsORb-){&8PVf|-z zbM_WgMzOT69tt?}1MlstP&z?70vjY7kP)&$x(hZso;tj$EseQ2z!9gQzDdY#=-8+1M zZCS>WF)%YTEl-eP;bg+qQ#&2;02EFKr?b1;cq-WKgasZeBgLOoePfp5}* z!FUXmy(rOm^r8<-3r>Y+@K}=a9_hroF|gl+Yaku1MLP9Bn}cu-9O`5&79&Y9Pztqg zFbB0MrUvHhQY?F?26b~rAq%5|)he08lPJ+XZHW3s#zr6_ ob^PY>VJN0V3*|GInVEa>2eZkv5&D(QZ~y=R07*qoM6N<$f^rbleEP)X;e1uZ2YldY%IF{?=~76uQr}+JTqf1soKWb#>c=ob;lTH z=APRU^(DSy23)N^5}v4xN4{?V?6`s*xn5%%+W+!G9OL$_yYKjpJ&44 zg+K8t;m48-Q;Z?%Yn>p?TUUa7~(NxR?9p3 z-AHU(ag8k#k}awszNNUvnTg1P9MBW(hy6)7Bevhr^CGq@0*y&n_OVCwG(-}!hEp;G z8k6uWm4rulM^8f}G5^C2>HKB_vTt0X$DlV}AEcU~0CLHwA|W}8(HKKZa!kD^ks93@ z(ly3&-8IS#{)M(www~*2wjI5O%559cSzIZD$|B#2X>Mg{=_$ts1^W~i8E8#{226Gf zQ(6$XC=hdcm{RaC_LhX@eD|K|)M9(^T>KZqxmAbiVtYf|Xlbr=__#-|@@d9D6!^M? z9O8r`LtaUrNYFJJ{EtCW$DV*>$Gq}jXa@nRLpzU#_SJ}nq9_UlHT{v1 zOW?B4T=Bgtai8T2EwfEpPT_6|^`#pPhOklDkr}>;cWJ}0#LpyHR7mx5scV$n4CgOx t?U`=Bo7X=G`P)OX24>B{+nD~lBW5?#!N0EFve@Ky8|HA|PXtb#zY7<)% zN6)y@#KMlH*k{s5(K!D)9T+zs7?-L)agQ{PBgQ_P*x7iI>K|}BXtp%_ypo7gXYlIW zat5~p?}JDT7D&VCR}iL^Gh~o2-Y57MGd*~IC4CeUk1e!0^&)1`5~2uPt#vovwAu||6NI-${?pZZIXK&8QFXE@5o?siTEyDLT;`> zcV{P=ob`-QT1vFVweIz4#Lew(TVahQo8)ONJ^dxR>6Vz|{YfSjx-;k6Hr9-?Z8aOG zn7$5}8!}m81eyumdC6z=)wY%Jr}==$e+_2Rt;vILfaE^t9`MQ99_{O|od62{6w@qj z5KnQ1`1%9R000000NkvXX Hu0mjfMoa*I diff --git a/resources/images/icons/qr2@3x.png b/resources/images/icons/qr2@3x.png deleted file mode 100644 index c90bf31918eb64b3f2a116463897e4bbfe18ddc8..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 819 zcmV-31I+x1P)>c!?%+%XKm{OSd$5(Yypk2$xzlfE zC-K*_p0%<*5+IRCBoc|lQoMm58y#8mNh9Z0I)3SRY(CeZ@5L7#KXv@^40Fw41^Qkb z0t#Zs-GcgFnDh#H@?1@97SQkU4&!8&P^IG@GWPi27TflDnpwYx#IXI;Okot{92{D6 z==XSwaR~7s;l7yqJtQ@}B!s#Kso6H&&sWrGAH>=Xf7kKR+Gk9EMj(=uUXu6BKEedn zZa6w?H~fRy_Zt&fdmC1$)4J_$DjnZ2fwdd1bbLZYBq?1X9+hxkO#L2`8n&lid&t?3 zXw9MT&5N2mNV$tpAhn==5DMWFbje&*U0MGhX^AJ1xNUsf@DgM?w$1kvb(;-ls$uhT z*`YtyEfHt*L^=x8hP#+Gt4WIhA!Itv815>}u^i!$j%SDdGvY1{4Pt8Y0rEbwfdA-+ z;5Iv(X;bhLa7#ah?z|v!H;rGVN?@Cwf`W{C-7!f=NyHZOy}TDYz7L> z8P6R0=9)3HEebQ3KEuDpY}4m~^9XXYEecmOO^i5oj%TRT+8Eq+_H)xdE+e>XP#8yn z?;R$yvqZbU-E84b-J^9Zx3n{anQc+IWGIemJF9E)qTPz>)6iH=B__L&H-1ODWwz!6ks)+*pLR=xxCybk( z&8)%H+!J`yt|)P%lLy0Q;KoBSG~RYWSjqITOOEjcfDGXfuCxF!b%}>icT3c4n}Ns) xan^|m{9hg(QUB$kLIAIB5igNQBoc`g@fQW`UYE;H@Bsh-002ovPDHLkV1fhAclH1P diff --git a/resources/images/icons/scan2@2x.png b/resources/images/icons/scan2@2x.png deleted file mode 100644 index a6e9105e043d2ba67ada363647764cc5422d5562..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 463 zcmV;=0WkiFP)?mLztEoY!0w1tVjN$Njmp$e1@E|Q{j5hADuS9FFQ^96*hzJ zkZ?NPy>Jhuft@co0yI-5s21j?TilO9xAx~j3YAJF58vxQhlxt(g+c%T002ovPDHLk FV1kqY!R7z} diff --git a/resources/images/icons/scan2@3x.png b/resources/images/icons/scan2@3x.png deleted file mode 100644 index 7d666a00104f08b83377fc09cdf66aa7c0430df4..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 605 zcmV-j0;2tiP)9&o*t4AQY`{jK@DmvMrdOvao3{G+4!EIjrTMK0qY<6B1cPZV%hSoWo2 zr;k0El|E?Y7zNxF9{b&(?p0Bdj4zL*Vph1)xez?~T*HLA3)8^1laBMiwz1c6+p|7y zKCn&5c){QG9?TZ~7QWN~vCxG)b_gsVI7o?fO7!!|5zrp}8%AoXcbUB{7_&7A=@Gg) zsmJ3A0c42Sl2z0Uu940fk*7-V_Og|xhxR8evpJ5YqEgvyl!4K3o zjF?Lv%=hMoknxI0lYE35U)19J;vrDC<~!0;Jx48O5tv90xAj^D+!dC6smJ31SKOdN r4b!S?ix7Y5p}=ju+cU-(W31&Dl#&0PS;C!`00000NkvXXu0mjf=9UPO diff --git a/resources/images/icons/scan@2x.png b/resources/images/icons/scan@2x.png deleted file mode 100644 index f15a22cd902730f8779c0df79f2b8e5c98c7724c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 773 zcmV+g1N!`lP)X}&hN(L=LuMjb zNO9ti#2+1+7z6pucr05V@5!>B-h04-e;iWOz-TyKU!ubxA8*$A6d%Qp?`OFKSa!z* z>uvhcxJK$JDaPYHR}Xk}=k$R_pmdP^!`Ngmtxx5-J zx31n{*93A-Lphdnh1QkUbHU$$&r4O(XSGkD^s6wri}`$x13M!0W=yNqkwn_42>fPx zuJ20)_4%td#tT#lLXP>(<$wldRK_r`k)JtEq-Wd3_Hp!G7a~ww~868{&UVPF~PMpP327!!nx7sKfDM_jgKDb+V zr7{XCcdK}bRUkeN8k6>3V&NNP|jj#y*V@bC<&EWc)KnybiO7JZDPW} z{b>JzyLt4eAI8M@oe#x5g5dos5y006B2}@i{Ygm4GFkt}`@J&&9*@UUAP^j>RBKJGUfaFsIu^SR|xsTMaW1D>Kkx`9Jq3^r=GA)4RI+K>-$;kWvT&H zq!C(Z6o)Z>f&_h$VRXI4sGB~f~z25Q4~qWEu&HJ(7c#Y58g!KTqV zhN)Y%5=9rPqSkWbEJIpI(>n01J*D%QIvr*R>+0^h zlQcE9u#_S;4iND;x6U%G4dEzJx@IypcWI5Q(XXQgKIbT@4r2uxKAP-oV>mhqbaUOh z{|Lj7m&r&;(`06IIJ)G7P!JM(0^_ooX{S{tyu)S3J6vSwbatC&V|Ex}a^lc|K7yiv z(4KxqH{E=*G1n8(bD?eKNV~`5DJ7HhFkjRS1F;7sgZ9@UtuzONKfg}L-x->XWnVhq zFcyfAZbshoi7L7d7v@y-3?|F#_?ni_lFKVQIK+KAQxt&=!Y#%SV*Sb%D=ehLMFW6M$PCY$sd4}@1xBK)0J z+3^mS9h<|GjkdO=CFK%KkBQkF?oR8#Mj>u5d6T3QQBMQ5d+GD&SE*#~Z$e}sw_*i| z7bZJf3wL7QH0aZOxQmTJwGBrBzGVQe3X&x8U zYRBM!t(9hi;5spOSX=)--Pv*VuJA;`iEA2H>0LL`k}dPx>^%;34ndq`Ne~Bi){t%I d@pwF?;V&xZS77g_vycD)002ovPDHLkV1kyH=VSl? diff --git a/resources/images/icons/search2@2x.png b/resources/images/icons/search2@2x.png deleted file mode 100644 index 5bf3dbfd94666ef027c9f67c981b01eb90da2dcc..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 851 zcmV-Z1FZasP)B*+LbhuOh#wMqg{C)NB6a7fdT~z#6lng+TC8IjB-_CQ3>A7Fn4e4-UK`qd z!(NA)P4(LacY#Hpeh!iKkO4*nPtQJeq?A2sR&>S-2v0)xukCj>QbLQMvf6iST5LiD z?&gqV0qOAz2~o8mYqV&C+o7?}471}j)=VTw(qhM^59zGRlCs$XM7mN@~kYf(YtxS$K zY?`=<$I=I_Nb*`I-H%-uAkxKQ*DCk4(q<&DMb`U^WpYi3^uDgEt>{0jX5iX6=9gK@ z#d5Cft1cy6N!yBX1lhfQaC1B%BRHwxCz!u#LwDXzf?QVUQBz$9Ibi8h`9pP^YL7(h zBuFj@$Z__KksCyiEZ`$jXGUU~k*Wyif$&=4^E(cS1n(O=3C>`xN&qEE6*(czS`ikU zdZ9%RkQ?MGwpo_x%-Bg#6;a1u67onl)LE&eus5>u` z;8tPn@NtEd;JK`9{FSKivyj!D8%a>P;8JycJ($MT%WFaDF0dX8Sd(KjQ4f;(7-B6{ zT{`Gr>TaL}2a^jD%_VhRhXE4nAQKYn0$ZaKV94==cw!a$unSf&aXX zKg*>7LXw|ji5||jE1Aw!eHnzl8>jE=?>piA-nfz7YpMj``Ab z>SwVvfFa2e4De_4bM*AE!HQ(8PK75CLmjf`EmeY7B-Nbd+@bsIu=$T{!q#PLA3cB3 z@_vtov0^0i#XYQi1Ras2yuG+0Y--6&1k=KV4d|mUFzufE2Yr-)GQsbgUt9-Pi-guu02V*N zr2XCh+<``<1-s3o^$Nr>eQiJiEPRB~hOXr1_Nd=S6Y050QWYj8fJQ~E?1o6s67ZRK-R%2IVyrGPp=f^w{LN@WTBf@C4Fi7R-J&e%E!mkKmm4R;;_h zV}K-?1v~c)ifHQ$4TI$?+R-sMEl83{Fo%ob*|maLxC70w#mCIe1<y!R#jD%el<7j;|%67Q4o2 zCkm1(m?EHhxJ?(oM#<0$`xS0;j*Wt(3Z9aoi1r9+=U;$9xDgZ-ieab!z%G1pUC4|n zSEThE$grfRxiX(JkQq~|V6w`?Xxm;v=~xjXWe2seLZk|&I#a|*(cNvJWGInX3%9xA ziGpNG4=D%!hfoEwg7NBUNxnFql5!kCarP<-lF4Y18|a4HV>m8Kf=fWLu0ABl8d_e& zdiLnfYj;;XyYaA=YuJz=lVC2A#}e`y-T5XoLrZx(9@feh>@)k}Nh~+zg4-_Dq@f8n zh?hM?#xRjiT5{F2$aryyr*ZdZJw@|HbuC$AbxW>Di!Qn!ZgWCjMYZQjWG``&ig(qIugUp-lTz)ha4jh(Gj_isoaCyLku47M~2%9v1Ip%&;xtemg#pve1mg zR?A}1w_BiG6-g7$iTs!>F@0r=pX%mRh?d$+TQbx0lh4Fok?*{Y_S-8QqSEm?65(Ly zemO^0w1Vx@#O;xy^v7fzdD~`pRtvX(#D5?o`q6KQs}`;0l?VE8mu!KC8Bzq-rPAxg zvIt70Xss``%(p@7L0#^{(= zv-#@H#^Cp5FSUgH$N5d0Vn27|$1 cFg!y312xsam)w8KhyVZp07*qoM6N<$g4aV5rT_o{ diff --git a/resources/images/icons/tiny_group2@2x.png b/resources/images/icons/tiny_group2@2x.png deleted file mode 100644 index b00fcb767e0478c25cd39157a35a64473154d4ee..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 909 zcmV;819JR{P)k(|N-i6BwV2su0f_wat7j7pPK)Uk>ZED6CdE-0IErN|O71y{xtJ4Qt;%YiumNJwtX z;k!nzSeD_3$mT?3S}S}<2^Qu6mlwtP4c(OzQM;S|ei{n)2HpNa7Jv3mmXK+}-BzxI zY9nI|kjOqRYXD<}B%n&*+dFIoDRqmDLqPu|nGVzPb`lt)7)tA%D!pK78L}6s*)&Nx zd14~2MC;ulk~PzaRGxTgBZ6vrkMA9$0xGv+28F??QF5M>0Y>pPu8PtSZ228~gql5n zvy2x_#_(h0P=l~=juX#o#uqYR!311{m|FGm5JR4f173L7iw>w{{jr1=CyEl;d$iu2 z-Yn-Rw`l_Y!0ZHE1dB_wfd)@Tn->zLeoaUS?MQ*}eJ^THZx(ZuM>GNLj48TQQeVXK z*6N!2C;0(+;x1PR4W+e|tEEl1Y!fp*Qzh8(o~#FR4WQ1~{d1V|4ue-+RKTYH+SQO@ z_D}D=4PJJN{P1&R$&scBsd>P~>P)VfyqF4s*f2M*s+^I@nm2;jp62tYrdLuc|7*rH zCJZPWzhx+n=dC;!CX7hi^6Z$NI}50-I@yEcA`rHr%y=G`V$n?gP4u1duHq4!{@$rB z9CR6QB2sTynJL8r_~~X!aw-R8izeIvS5Q6#(pb-wqJf_52Xh+{4;`|;N)IR~pY4j{ jQZzWLFYSug_$T-c17T1$jm{EC00000NkvXXu0mjf)Bl(f diff --git a/resources/images/icons/tiny_group2@3x.png b/resources/images/icons/tiny_group2@3x.png deleted file mode 100644 index 883657d87e199245a05a7c1be10587e3b9276d86..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1287 zcmV+i1^D`jP)o!R!i73-WydU$a|t#QiXGcq%59b zohOKR15@Eu1dc^j)NpddA(O?w+sP03AAX=+NO7V9*j{*Xwbx#}=@A z5~PzX##RwTF9nGCZ0fB{^Zd)#V-B(}B5OYRY#6{T(aM0w$7e@UN)K;)=0#bEhMfL5 z{d%T8kCkWOD}td|^C21%LQ8OHh)3?XC#d`sN|Yzi7vaEtlGR=~`k33|%D?=r4=vHi zfY04;#(44c=csUqm!)Bfheo*9Bf)1V9BMK>&a8$1)53uksBHlGJoJ zE8d6CrccIXm@>6zW3a1hO%6U;iaT60LJoX?QRBXzun^=X+b2C%1&(b#*s z%;e#4B^aFN9)2K3&=5^x;I4ANq}?tPq_2|3MT{)X7O>&-+*l9t8fct_lHZY)pPJ5u zDjBe#vCHUaV1WEHyF=xiEHF*LcMe|E)cBWKQfTQ@E}X=Su zU53&o=a64RSd9&^>k49uoTW-7ZuE+Ua4st@6PDRv?QZx!;JgksHNK^Xko0KQn z93SFhTu>fhC4fI{%ZD0gAv~x&+Eu2cNdqVY9g}SCDbr~L3xvd-KNvRl{hK9QBB9fK zWP$Y{OREVBm2U*bOC_CVaz6R=;{ZBz=GU1I?GPXxndmh9;>GK?Wi*;0 zy@=NQbekbt4>IaLpz>F6d*ulOo$;L z4w$WIfg96?kj^;Q=i|4bS=e) zS#?X1iy$|Scy3NrJrKg~5i0k0E2V8aALuNf)l5OGb`Ts4z7eZVnYAEqQfmQm_IVEq zU&Pt~)*Iz87(lHJ_8=Wlo%<{72zt)O$}aAs`j?A7XX45C!13QEb xQTV-~uNwb9U~e4bq`&Q@egb#s(BVIVe*pO=<$m*ZY;^zt002ovPDHLkV1l8~S ^js @input-ref (.focus)) - :icon-opts {:color (quo2.colors/theme-colors quo2.colors/neutral-50 quo2.colors/white)}} - :on-focus #(do - (when on-focus - (on-focus search-filter)) - (reset! search-active? true)) - :on-blur #(do - (when on-blur - (on-blur)) - (reset! search-active? false)) - :on-change (fn [e] - (let [^js native-event (.-nativeEvent ^js e) - text (.-text native-event)] - (when on-change - (on-change text))))}]))) - -(defn search-input-old [{:keys [search-active?]}] (let [input-ref (atom nil) search-active? (or search-active? (reagent/atom nil))] (fn [{:keys [on-focus on-change on-blur on-cancel search-filter auto-focus]}] @@ -82,4 +38,4 @@ (let [^js native-event (.-nativeEvent ^js e) text (.-text native-event)] (when on-change - (on-change text))))}]))) \ No newline at end of file + (on-change text))))}]))) diff --git a/src/status_im/ui/components/topbar.cljs b/src/status_im/ui/components/topbar.cljs index 4f290872da..5ca8bdd975 100644 --- a/src/status_im/ui/components/topbar.cljs +++ b/src/status_im/ui/components/topbar.cljs @@ -1,7 +1,6 @@ (ns status-im.ui.components.topbar (:require [re-frame.core :as re-frame] - [quo.core :as quo] - [quo2.foundations.colors :as quo2.colors])) + [quo.core :as quo])) (def default-button-width 48) @@ -21,9 +20,7 @@ label (assoc :label label))) -(defn topbar [{:keys [navigation use-insets right-accessories modal? content border-bottom? new-ui?] ;; remove new-ui? key, temp fix - :or {border-bottom? true - new-ui? false} +(defn topbar [{:keys [navigation use-insets right-accessories modal? content] :as props}] (let [navigation (if (= navigation :none) nil @@ -34,10 +31,7 @@ :title-component content :insets (when use-insets insets) :left-width (when navigation - default-button-width) - :border-bottom border-bottom?} + default-button-width)} props (when (seq right-accessories) - {:right-accessories right-accessories}) - (when new-ui? - {:background (quo2.colors/theme-colors quo2.colors/white quo2.colors/divider-dark)}))])])) + {:right-accessories right-accessories}))])])) diff --git a/src/status_im/ui/components/typography.cljs b/src/status_im/ui/components/typography.cljs index 6b984fdff1..891bf32bc2 100644 --- a/src/status_im/ui/components/typography.cljs +++ b/src/status_im/ui/components/typography.cljs @@ -5,8 +5,7 @@ (defn default-style [] {:color colors/black :font-weight "400" - :font-size 15 - :line-height 20}) + :font-size 15}) (def typography-styles {:header {:font-weight "700" diff --git a/src/status_im/ui/screens/chat/message/audio.cljs b/src/status_im/ui/screens/chat/message/audio.cljs index 46b8658edf..286cf39988 100644 --- a/src/status_im/ui/screens/chat/message/audio.cljs +++ b/src/status_im/ui/screens/chat/message/audio.cljs @@ -171,16 +171,16 @@ (update-state params)) #(update-state (merge params {:error (:message %)})))))) -(defn- play-pause-button [state-ref on-press] - (let [color colors/blue] +(defn- play-pause-button [state-ref outgoing on-press] + (let [color (if outgoing colors/blue colors/white-persist)] (if (= (:general @state-ref) :preparing) - [react/view {:style (style/play-pause-container true)} + [react/view {:style (style/play-pause-container outgoing true)} [react/small-loading-indicator color]] [react/touchable-highlight {:on-press on-press} [icons/icon (case (:general @state-ref) :playing :main-icons/pause :main-icons/play) - {:container-style (style/play-pause-container false) + {:container-style (style/play-pause-container outgoing false) :accessibility-label :play-pause-audio-message-button :color color}]]))) @@ -193,7 +193,7 @@ :message-id @current-player-message-id})) nil) -(defview message-content [{:keys [audio audio-duration-ms message-id]}] +(defview message-content [{:keys [audio audio-duration-ms message-id outgoing]}] (letsubs [state (reagent/atom nil) progress (reagent/atom 0) progress-anim (anim/create-value 0) @@ -218,9 +218,9 @@ :margin-bottom 16}} (:error-msg @state)] [react/view (style/container width) [react/view style/play-pause-slider-container - [play-pause-button state #(play-pause base-params audio)] + [play-pause-button state outgoing #(play-pause base-params audio)] [react/view style/slider-container - [slider/animated-slider (merge (style/slider) + [slider/animated-slider (merge (style/slider outgoing) {:minimum-value 0 :maximum-value (:duration @state) :value progress-anim @@ -229,7 +229,7 @@ :on-sliding-complete #(seek (merge base-params {:slider-new-state-seeking? false}) % true nil)})]]] [react/view style/times-container - [react/text {:style (style/timestamp)} + [react/text {:style (style/timestamp outgoing)} (let [time (cond (or (:slider-seeking @state) (> (:seek-to-ms @state) 0)) (:seek-to-ms @state) (#{:playing :paused :seeking} (:general @state)) @progress diff --git a/src/status_im/ui/screens/chat/message/audio_old.cljs b/src/status_im/ui/screens/chat/message/audio_old.cljs deleted file mode 100644 index a0612a5762..0000000000 --- a/src/status_im/ui/screens/chat/message/audio_old.cljs +++ /dev/null @@ -1,238 +0,0 @@ -(ns status-im.ui.screens.chat.message.audio-old - (:require-macros [status-im.utils.views :refer [defview letsubs]]) - (:require [status-im.utils.utils :as utils] - [reagent.core :as reagent] - [goog.string :as gstring] - [status-im.audio.core :as audio] - [status-im.utils.fx :as fx] - [status-im.ui.screens.chat.styles.message.audio-old :as style] - [status-im.ui.components.animation :as anim] - [quo.design-system.colors :as colors] - [status-im.ui.components.icons.icons :as icons] - [status-im.ui.components.react :as react] - [status-im.ui.components.slider :as slider] - ["react-native-blob-util" :default ReactNativeBlobUtil] - [status-im.utils.platform :as platform] - [taoensso.timbre :as log])) - -(defonce player-ref (atom nil)) -(defonce current-player-message-id (atom nil)) -(defonce current-active-state-ref-ref (atom nil)) -(defonce progress-timer (atom nil)) - -(defn start-stop-progress-timer [{:keys [state-ref progress-ref progress-anim]} start?] - (when @progress-timer - (utils/clear-interval @progress-timer) - (when-not start? - (reset! progress-timer nil))) - (when start? - (when @progress-timer - (utils/clear-interval @progress-timer)) - (reset! progress-timer (utils/set-interval - #(when (and @state-ref (not (:slider-seeking @state-ref))) - (let [ct (audio/get-player-current-time @player-ref)] - (reset! progress-ref ct) - (when ct - (anim/start (anim/timing progress-anim {:toValue @progress-ref - :duration 100 - :easing (.-linear ^js anim/easing) - :useNativeDriver true}))))) - 100)))) - -(defn update-state [{:keys [state-ref progress-ref progress-anim message-id seek-to-ms audio-duration-ms slider-new-state-seeking? unloaded? error]}] - (let [player-state (audio/get-state @player-ref) - slider-seeking (if (some? slider-new-state-seeking?) - slider-new-state-seeking? - (:slider-seeking @state-ref)) - general (cond - (some? error) :error - (or unloaded? (not= message-id @current-player-message-id)) :not-loaded - slider-seeking (:general @state-ref) ; persist player state at the time user started sliding - (= player-state audio/PLAYING) :playing - (= player-state audio/PAUSED) :paused - (= player-state audio/SEEKING) :seeking - (= player-state audio/PREPARED) :ready-to-play - :else :preparing) - new-state {:general general - :error-msg error - :duration (cond (not (#{:preparing :not-loaded :error} general)) - (audio/get-player-duration @player-ref) - - audio-duration-ms audio-duration-ms - - :else (:duration @state-ref)) - :progress-ref (or progress-ref (:progress-ref @state-ref)) - :progress-anim (or progress-anim (:progress-anim @state-ref)) - :slider-seeking slider-seeking - - ; persist seek-to-ms while seeking or audio is not loaded - :seek-to-ms (when (or - slider-seeking - (#{:preparing :not-loaded :error} general)) - (or seek-to-ms (:seek-to-ms @state-ref)))}] - ; update state if needed - (when (not= @state-ref new-state) - (reset! state-ref new-state)) - - ; update progress UI on slider release - (when (and (some? slider-new-state-seeking?) (not slider-new-state-seeking?) (some? seek-to-ms)) - (reset! (:progress-ref new-state) seek-to-ms)) - - ; update progres anim value to follow the slider - (when (and slider-seeking (some? seek-to-ms)) - (anim/set-value (:progress-anim new-state) seek-to-ms)) - - ; on unload, reset values - (when unloaded? - (reset! (:progress-ref new-state) 0) - (anim/set-value (:progress-anim new-state) 0)))) - -(defn destroy-player [{:keys [message-id reloading?]}] - (when (and @player-ref (or reloading? - (= message-id @current-player-message-id))) - (audio/destroy-player @player-ref) - (reset! player-ref nil) - (when @current-active-state-ref-ref - (update-state {:state-ref @current-active-state-ref-ref :unloaded? true})) - (reset! current-player-message-id nil) - (reset! current-active-state-ref-ref nil))) - -(defonce last-seek (atom (js/Date.now))) - -(defn seek [{:keys [message-id] :as params} value immediate? on-success] - (when (and @player-ref (= message-id @current-player-message-id)) - (let [now (js/Date.now)] - (when (or immediate? (> (- now @last-seek) 200)) - (reset! last-seek (js/Date.now)) - (audio/seek-player - @player-ref - value - #(do - (update-state params) - (when on-success (on-success))) - #(update-state (merge params {:error (:message %)})))))) - (update-state (merge params {:seek-to-ms value}))) - -(defn download-audio-http [base64-uri on-success] - (-> (.config ReactNativeBlobUtil (clj->js {:trusty platform/ios?})) - (.fetch "GET" (str base64-uri)) - (.then #(on-success (.base64 ^js %))) - (.catch #(log/error "could not fetch audio")))) - -(defn reload-player [{:keys [message-id state-ref] :as params} audio-url on-success] - ;; to avoid reloading player while is initializing, - ;; we go ahead only if there is no player or - ;; if it is already prepared - (when (or (nil? @player-ref) (audio/can-play? @player-ref)) - (when @player-ref - (destroy-player (merge params {:reloading? true}))) - (download-audio-http - audio-url - (fn [base64-data] - (reset! player-ref (audio/new-player - (str "data:audio/acc;base64," base64-data) - {:autoDestroy false - :continuesToPlayInBackground false} - #(seek params 0 true nil))) - (audio/prepare-player - @player-ref - #(when on-success (on-success)) - #(update-state (merge params {:error (:message %)}))) - (reset! current-player-message-id message-id) - (reset! current-active-state-ref-ref state-ref) - (update-state params))))) - -(defn play-pause [{:keys [message-id state-ref] :as params} audio] - (if (not= message-id @current-player-message-id) - ;; player has audio from another message, we need to reload - (reload-player params - audio - ;; on-success: audio is loaded, do we have an existing value to seek to? - #(if-some [seek-time (:seek-to-ms @state-ref)] - ;; check seek time against real audio duration and play - (let [checked-seek-time (min (audio/get-player-duration @player-ref) seek-time)] - (seek params - checked-seek-time - true - (fn [] (play-pause params audio)))) - - ;; nothing to seek to, play - (play-pause params audio))) - - ;; loaded audio corresponds to current message we can play - (when @player-ref - (audio/toggle-playpause-player - @player-ref - #(do - (start-stop-progress-timer params true) - (update-state params)) - #(do - (start-stop-progress-timer params false) - (update-state params)) - #(update-state (merge params {:error (:message %)})))))) - -(defn- play-pause-button [state-ref outgoing on-press] - (let [color (if outgoing colors/blue colors/white-persist)] - (if (= (:general @state-ref) :preparing) - [react/view {:style (style/play-pause-container outgoing true)} - [react/small-loading-indicator color]] - [react/touchable-highlight {:on-press on-press} - [icons/icon (case (:general @state-ref) - :playing :main-icons/pause - :main-icons/play) - {:container-style (style/play-pause-container outgoing false) - :accessibility-label :play-pause-audio-message-button - :color color}]]))) - -(fx/defn on-background - {:events [:audio-message/on-background]} - [_] - (when (and @current-active-state-ref-ref - @@current-active-state-ref-ref) - (update-state {:state-ref @current-active-state-ref-ref - :message-id @current-player-message-id})) - nil) - -(defview message-content [{:keys [audio audio-duration-ms message-id outgoing]}] - (letsubs [state (reagent/atom nil) - progress (reagent/atom 0) - progress-anim (anim/create-value 0) - width [:dimensions/window-width]] - {:component-did-mount (fn [] - (update-state {:state-ref state - :audio-duration-ms audio-duration-ms - :message-id message-id - :unloaded? true - :progress-ref progress - :progress-anim progress-anim})) - :component-will-unmount (fn [] - (destroy-player {:state-ref state :message-id message-id}) - (when (= @current-player-message-id message-id) - (reset! current-active-state-ref-ref nil) - (reset! current-player-message-id nil)) - (reset! state nil))} - - (let [base-params {:state-ref state :message-id message-id :progress-ref progress :progress-anim progress-anim}] - (if (= (:general @state) :error) - [react/text {:style {:typography :main-medium - :margin-bottom 16}} (:error-msg @state)] - [react/view (style/container width) - [react/view style/play-pause-slider-container - [play-pause-button state outgoing #(play-pause base-params audio)] - [react/view style/slider-container - [slider/animated-slider (merge (style/slider outgoing) - {:minimum-value 0 - :maximum-value (:duration @state) - :value progress-anim - :on-value-change #(seek base-params % false nil) - :on-sliding-start #(seek (merge base-params {:slider-new-state-seeking? true}) % true nil) - :on-sliding-complete #(seek (merge base-params {:slider-new-state-seeking? false}) % true nil)})]]] - - [react/view style/times-container - [react/text {:style (style/timestamp outgoing)} - (let [time (cond - (or (:slider-seeking @state) (> (:seek-to-ms @state) 0)) (:seek-to-ms @state) - (#{:playing :paused :seeking} (:general @state)) @progress - :else (:duration @state)) - s (quot time 1000)] - (gstring/format "%02d:%02d" (quot s 60) (mod s 60)))]]])))) diff --git a/src/status_im/ui/screens/chat/message/datemark.cljs b/src/status_im/ui/screens/chat/message/datemark.cljs index ff8034aa73..f919e863b9 100644 --- a/src/status_im/ui/screens/chat/message/datemark.cljs +++ b/src/status_im/ui/screens/chat/message/datemark.cljs @@ -8,7 +8,5 @@ {:on-press (fn [_] (react/dismiss-keyboard!))} [react/view style/datemark-mobile - [react/text {:style (style/datemark-text)} - (string/capitalize value)] - [react/view (style/divider)]]]) + (string/capitalize value)]]]) diff --git a/src/status_im/ui/screens/chat/message/datemark_old.cljs b/src/status_im/ui/screens/chat/message/datemark_old.cljs deleted file mode 100644 index 4d8e206897..0000000000 --- a/src/status_im/ui/screens/chat/message/datemark_old.cljs +++ /dev/null @@ -1,12 +0,0 @@ -(ns status-im.ui.screens.chat.message.datemark-old - (:require [status-im.ui.components.react :as react] - [clojure.string :as string] - [status-im.ui.screens.chat.styles.message.datemark-old :as style])) - -(defn chat-datemark [value] - [react/touchable-without-feedback - {:on-press (fn [_] - (react/dismiss-keyboard!))} - [react/view style/datemark-mobile - [react/text {:style (style/datemark-text)} - (string/capitalize value)]]]) \ No newline at end of file diff --git a/src/status_im/ui/screens/chat/message/message.cljs b/src/status_im/ui/screens/chat/message/message.cljs index 2b02dc588d..82b46ea4eb 100644 --- a/src/status_im/ui/screens/chat/message/message.cljs +++ b/src/status_im/ui/screens/chat/message/message.cljs @@ -73,13 +73,13 @@ :height 12 :color (if pinned colors/gray colors/white) :accessibility-label (name outgoing-status)}]) - (when edited-at [react/text {:style (style/message-status-text)} edited-at-text])])) + (when edited-at [react/text {:style (style/message-status-text (and outgoing (not pinned)))} edited-at-text])])) (defn message-timestamp - [{:keys [timestamp-str in-popover?]} show-timestamp?] + [{:keys [timestamp-str in-popover?] :as message} show-timestamp?] (when-not in-popover? ;; We keep track if showing this message in a list in pin-limit-popover (let [anim-opacity (animation/create-value 0)] - [react/animated-view {:style (style/message-timestamp-wrapper) :opacity anim-opacity} + [react/animated-view {:style (style/message-timestamp-wrapper message) :opacity anim-opacity} (when @show-timestamp? (message-timestamp-anim anim-opacity show-timestamp?)) [react/text {:style (style/message-timestamp-text) @@ -87,16 +87,16 @@ timestamp-str]]))) (defview quoted-message - [_ {:keys [from parsed-text image]} current-public-key public? pinned] + [_ {:keys [from parsed-text image]} outgoing current-public-key public? pinned] (letsubs [contact-name [:contacts/contact-name-by-identity from]] - [react/view {:style (style/quoted-message-container)} + [react/view {:style (style/quoted-message-container (and outgoing (not pinned)))} [react/view {:style style/quoted-message-author-container} [chat.utils/format-reply-author from contact-name current-public-key - (partial style/quoted-message-author (not pinned)) - false]] + (partial style/quoted-message-author (and outgoing (not pinned))) + (and outgoing (not pinned))]] (if (and image ;; Disabling images for public-chats (not public?)) @@ -105,11 +105,11 @@ :background-color :black :border-radius 4} :source {:uri image}}] - [react/text {:style (style/quoted-message-text) + [react/text {:style (style/quoted-message-text (and outgoing (not pinned))) :number-of-lines 5} (components.reply/get-quoted-text-with-mentions parsed-text)])])) -(defn render-inline [message-text content-type acc {:keys [type literal destination]}] +(defn render-inline [message-text outgoing pinned content-type acc {:keys [type literal destination]}] (case type "" (conj acc literal) @@ -121,22 +121,22 @@ literal]) "emph" - (conj acc [react/text-class (style/emph-style) literal]) + (conj acc [react/text-class (style/emph-style (and outgoing (not pinned))) literal]) "strong" - (conj acc [react/text-class (style/strong-style) literal]) + (conj acc [react/text-class (style/strong-style (and outgoing (not pinned))) literal]) "strong-emph" - (conj acc [quo/text (style/strong-emph-style) literal]) + (conj acc [quo/text (style/strong-emph-style (and outgoing (not pinned))) literal]) "del" - (conj acc [react/text-class (style/strikethrough-style) literal]) + (conj acc [react/text-class (style/strikethrough-style (and outgoing (not pinned))) literal]) "link" (conj acc [react/text-class {:style - {:color colors/blue + {:color (if (and outgoing (not pinned)) colors/white-persist colors/blue) :text-decoration-line :underline} :on-press #(when (and (security/safe-link? destination) @@ -149,13 +149,14 @@ (conj acc [react/text-class {:style {:color (cond (= content-type constants/content-type-system-text) colors/black + (and outgoing (not pinned)) colors/mention-outgoing :else colors/mention-incoming)} :on-press (when-not (= content-type constants/content-type-system-text) #(re-frame/dispatch [:chat.ui/show-profile literal]))} [mention-element literal]]) "status-tag" (conj acc [react/text-class - {:style {:color colors/blue + {:style {:color (if (and outgoing (not pinned)) colors/white-persist colors/blue) :text-decoration-line :underline} :on-press #(re-frame/dispatch @@ -165,19 +166,19 @@ (conj acc literal))) -(defn render-block [{:keys [content content-type in-popover?]} acc +(defn render-block [{:keys [content outgoing content-type pinned in-popover?]} acc {:keys [type ^js literal children]}] (case type "paragraph" (conj acc (reduce - (fn [acc e] (render-inline (:text content) content-type acc e)) - [react/text-class (style/text-style content-type in-popover?)] + (fn [acc e] (render-inline (:text content) outgoing pinned content-type acc e)) + [react/text-class (style/text-style (and outgoing (not pinned)) content-type in-popover?)] children)) "blockquote" - (conj acc [react/view (style/blockquote-style) - [react/text-class (style/blockquote-text-style) + (conj acc [react/view (style/blockquote-style (and outgoing (not pinned))) + [react/text-class (style/blockquote-text-style (and outgoing (not pinned))) (.substring literal 0 (.-length literal))]]) "codeblock" @@ -192,10 +193,10 @@ (defn render-parsed-text [message tree] (reduce (fn [acc e] (render-block message acc e)) [:<>] tree)) -(defn render-parsed-text-with-message-status [{:keys [edited-at in-popover?] :as message} tree] +(defn render-parsed-text-with-message-status [{:keys [outgoing edited-at in-popover?] :as message} tree] (let [elements (render-parsed-text message tree) message-status [react/text {:style (style/message-status-placeholder)} - (str (if (not in-popover?) " " " ") (when (and (not in-popover?) edited-at) edited-at-text))] + (str (if (and outgoing (not in-popover?)) " " " ") (when (and (not in-popover?) edited-at) edited-at-text))] last-element (peek elements)] ;; Using `nth` here as slightly faster than `first`, roughly 30% ;; It's worth considering pure js structures for this code path as @@ -207,10 +208,10 @@ (conj elements message-status)))) (defn unknown-content-type - [{:keys [content-type content] :as message}] + [{:keys [outgoing content-type content] :as message}] [react/view (style/message-view message) [react/text - {:style {:color colors/white-persist}} + {:style {:color (if outgoing colors/white-persist colors/black)}} (if (seq (:text content)) (:text content) (str "Unhandled content-type " content-type))]]) @@ -241,8 +242,8 @@ (def pin-icon-height 15) -(defn pinned-by-indicator [display-photo? pinned-by] - [react/view {:style (style/pin-indicator display-photo?) +(defn pinned-by-indicator [outgoing display-photo? pinned-by] + [react/view {:style (style/pin-indicator outgoing display-photo?) :accessibility-label :pinned-by} [react/view {:style (style/pinned-by-text-icon-container)} [react/view {:style (style/pin-icon-container)} @@ -308,39 +309,33 @@ (defn message-content-wrapper "Author, userpic and delivery wrapper" - [{:keys [last-in-group? + [{:keys [first-in-group? display-photo? display-username? identicon - from in-popover? timestamp-str] + from outgoing in-popover?] :as message} content {:keys [modal close-modal]}] [react/view {:style (style/message-wrapper message) :pointer-events :box-none :accessibility-label :chat-item} - [react/view {:style (style/message-body) + [react/view {:style (style/message-body message) :pointer-events :box-none} - [react/view (style/message-author-userpic) - (when last-in-group? - [react/touchable-highlight {:on-press #(do (when modal (close-modal)) - (re-frame/dispatch [:chat.ui/show-profile from]))} - [photos/member-photo from identicon]])] - [react/view {:style (style/message-author-wrapper)} - (when last-in-group? - [react/view {:style {:flex-direction :row}} - [react/touchable-opacity {:style style/message-author-touchable - :disabled in-popover? - :on-press #(do (when modal (close-modal)) - (re-frame/dispatch [:chat.ui/show-profile from]))} - [message-author-name from {:modal modal}]] - [react/text - {:style (merge - {:padding-left 5} - (style/message-timestamp-text)) - :accessibility-label :message-timestamp} - timestamp-str]]) + (when display-photo? + [react/view (style/message-author-userpic outgoing) + (when first-in-group? + [react/touchable-highlight {:on-press #(do (when modal (close-modal)) + (re-frame/dispatch [:chat.ui/show-profile from]))} + [photos/member-photo from identicon]])]) + [react/view {:style (style/message-author-wrapper outgoing display-photo? in-popover?)} + (when display-username? + [react/touchable-opacity {:style style/message-author-touchable + :disabled in-popover? + :on-press #(do (when modal (close-modal)) + (re-frame/dispatch [:chat.ui/show-profile from]))} + [message-author-name from {:modal modal}]]) ;;MESSAGE CONTENT content - [link-preview/link-preview-wrapper (:links (:content message)) false false]]] + [link-preview/link-preview-wrapper (:links (:content message)) outgoing false]]] ; delivery status - [react/view (style/delivery-status) + [react/view (style/delivery-status outgoing) [message-delivery-status message]]]) (def image-max-width 260) @@ -358,13 +353,13 @@ (swap! dimensions assoc :loaded true))))) (defn message-content-image - [{:keys [content in-popover?] :as message} + [{:keys [content outgoing in-popover?] :as message} {:keys [on-long-press]}] (let [dimensions (reagent/atom {:width image-max-width :height image-max-height :loaded false}) visible (reagent/atom false) uri (:image content)] (fn [] - (let [style-opts {:outgoing false + (let [style-opts {:outgoing outgoing :opacity (if (:loaded @dimensions) 1 0) :width (:width @dimensions) :height (:height @dimensions)}] @@ -410,6 +405,9 @@ [react/view (style/message-view-content) [render-parsed-text message (:parsed-text content)]]]]]) +(def message-height-px 200) +(def max-message-height-px 150) + (defn pin-message [{:keys [chat-id pinned] :as message}] (let [pinned-messages @(re-frame/subscribe [:chats/pinned chat-id])] (if (and (not pinned) (> (count pinned-messages) 2)) @@ -445,31 +443,62 @@ :label (i18n/label :t/delete) :id :delete}])))) -(defn collapsible-text-message [_ _] +(defn collapsible-text-message [{:keys [mentioned]} _] (let [collapsed? (reagent/atom false) + collapsible? (reagent/atom false) show-timestamp? (reagent/atom false)] - (fn [{:keys [content current-public-key public? pinned in-popover?] :as message} on-long-press modal] - [react/touchable-highlight - (when-not modal - {:on-press (fn [_] - (react/dismiss-keyboard!) - (reset! show-timestamp? true)) - :delay-long-press 100 - :on-long-press (fn [] - (if @collapsed? - (do (reset! collapsed? false) - (js/setTimeout #(on-long-press-fn on-long-press message content) 200)) - (on-long-press-fn on-long-press message content))) - :disabled in-popover?}) - [react/view style/message-view-wrapper - [message-timestamp message show-timestamp?] - [react/view {:style (style/message-view message)} - [react/view {:style (style/message-view-content)} - (let [response-to (:response-to content)] - [react/view - (when (and (seq response-to) (:quoted-message message)) - [quoted-message response-to (:quoted-message message) current-public-key public? pinned]) - [render-parsed-text-with-message-status message (:parsed-text content)]])]]]]))) + (fn [{:keys [content outgoing current-public-key public? pinned in-popover?] :as message} on-long-press modal] + (let [max-height (when-not (or outgoing modal) + (if @collapsible? + (if @collapsed? message-height-px nil) + message-height-px))] + [react/touchable-highlight + (when-not modal + {:on-press (fn [_] + (react/dismiss-keyboard!) + (reset! show-timestamp? true)) + :delay-long-press 100 + :on-long-press (fn [] + (if @collapsed? + (do (reset! collapsed? false) + (js/setTimeout #(on-long-press-fn on-long-press message content) 200)) + (on-long-press-fn on-long-press message content))) + :disabled in-popover?}) + [react/view (style/message-view-wrapper outgoing) + [message-timestamp message show-timestamp?] + [react/view {:style (style/message-view message)} + [react/view {:style (style/message-view-content) + :max-height max-height} + (let [response-to (:response-to content)] + [react/view {:on-layout + #(when (and (> (.-nativeEvent.layout.height ^js %) max-message-height-px) + (not @collapsible?) + (not outgoing) + (not modal)) + (reset! collapsed? true) + (reset! collapsible? true))} + (when (and (seq response-to) (:quoted-message message)) + [quoted-message response-to (:quoted-message message) outgoing current-public-key public? pinned]) + [render-parsed-text-with-message-status message (:parsed-text content)]]) + (when-not @collapsible? [message-status message]) + (when (and @collapsible? (not modal)) + (if @collapsed? + (let [color (if pinned colors/pin-background (if mentioned colors/mentioned-background colors/blue-light))] + [react/touchable-highlight + {:on-press #(swap! collapsed? not) + :style {:position :absolute :bottom 0 :left 0 :right 0 :height 72}} + [react/linear-gradient {:colors [(str color "00") color] + :start {:x 0 :y 0} :end {:x 0 :y 0.9}} + [react/view {:height 72 :align-self :center :justify-content :flex-end + :padding-bottom 10} + [react/view (style/collapse-button) + [icons/icon :main-icons/dropdown + {:color colors/white}]]]]]) + [react/touchable-highlight {:on-press #(swap! collapsed? not) + :style {:align-self :center :margin 5}} + [react/view (style/collapse-button) + [icons/icon :main-icons/dropdown-up + {:color colors/white}]]]))]]]])))) (defmethod ->message constants/content-type-text [message {:keys [on-long-press modal] :as reaction-picker}] @@ -482,12 +511,12 @@ [community-content message]) (defmethod ->message constants/content-type-status - [{:keys [content content-type] :as message}] + [{:keys [content content-type pinned] :as message}] [message-content-wrapper message [react/view style/status-container [react/text {:style (style/status-text)} (reduce - (fn [acc e] (render-inline (:text content) content-type acc e)) + (fn [acc e] (render-inline (:text content) false pinned content-type acc e)) [react/text-class {:style (style/status-text)}] (-> content :parsed-text peek :children))]]]) @@ -515,11 +544,11 @@ :label (i18n/label :t/sharing-copy-to-clipboard)}] (when message-pin-enabled [{:on-press #(pin-message message) :label (if pinned (i18n/label :t/unpin) (i18n/label :t/pin))}]))))}) - [react/view style/message-view-wrapper + [react/view (style/message-view-wrapper outgoing) [message-timestamp message show-timestamp?] [react/view (style/message-view message) [react/view {:style (style/message-view-content)} - [react/view {:style (style/style-message-text)} + [react/view {:style (style/style-message-text outgoing)} (when (and (seq response-to) (:quoted-message message)) [quoted-message response-to (:quoted-message message) outgoing current-public-key public? pinned]) [react/text {:style (style/emoji-message message)} @@ -595,7 +624,7 @@ []))) :on-press (fn [] (reset! show-timestamp? true))}) - [react/view style/message-view-wrapper + [react/view (style/message-view-wrapper (:outgoing message)) [message-timestamp message show-timestamp?] [react/view {:style (style/message-view message) :accessibility-label :audio-message} [react/view {:style (style/message-view-content)} @@ -630,8 +659,8 @@ constants/contact-request-message-state-declined [contact-request-status-declined])]) (defmethod ->message constants/content-type-contact-request - [message _] - [react/view {:style (style/content-type-contact-request)} + [{:keys [outgoing] :as message} _] + [react/view {:style (style/content-type-contact-request outgoing)} [react/image {:source (resources/get-image :hand-wave) :style {:width 112 :height 97}}] @@ -649,7 +678,7 @@ [message-content-wrapper message [unknown-content-type message]]) -(defn chat-message [{:keys [display-photo? pinned pinned-by] :as message} space-keeper] +(defn chat-message [{:keys [outgoing display-photo? pinned pinned-by] :as message} space-keeper] [:<> [reactions/with-reaction-picker {:message message @@ -669,5 +698,5 @@ :emoji-reaction-id emoji-reaction-id}])) :render ->message}] (when pinned - [react/view {:style (style/pin-indicator-container)} - [pinned-by-indicator display-photo? pinned-by]])]) + [react/view {:style (style/pin-indicator-container outgoing)} + [pinned-by-indicator outgoing display-photo? pinned-by]])]) diff --git a/src/status_im/ui/screens/chat/message/message_old.cljs b/src/status_im/ui/screens/chat/message/message_old.cljs deleted file mode 100644 index b0e1582db6..0000000000 --- a/src/status_im/ui/screens/chat/message/message_old.cljs +++ /dev/null @@ -1,702 +0,0 @@ -(ns status-im.ui.screens.chat.message.message-old - (:require [re-frame.core :as re-frame] - [status-im.constants :as constants] - [status-im.i18n.i18n :as i18n] - [status-im.react-native.resources :as resources] - [quo.design-system.colors :as colors] - [status-im.ui.components.icons.icons :as icons] - [status-im.ui.components.react :as react] - [status-im.ui.screens.chat.message.audio-old :as message.audio] - [status-im.chat.models.reactions :as models.reactions] - [status-im.ui.screens.chat.message.command :as message.command] - [status-im.ui.screens.chat.photos :as photos] - [status-im.ui.screens.chat.sheets :as sheets] - [status-im.ui.screens.chat.message.gap :as message.gap] - [status-im.ui.screens.chat.styles.message.message-old :as style] - [status-im.ui.screens.chat.utils :as chat.utils] - [status-im.utils.security :as security] - [status-im.ui.screens.chat.message.reactions :as reactions] - [status-im.ui.screens.chat.image.preview.views :as preview] - [quo.core :as quo] - [status-im.utils.config :as config] - [reagent.core :as reagent] - [status-im.ui.screens.chat.components.reply :as components.reply] - [status-im.ui.screens.chat.message.link-preview :as link-preview] - [status-im.ui.screens.communities.icon :as communities.icon] - [status-im.ui.components.animation :as animation] - [status-im.chat.models.images :as images] - [status-im.chat.models.pin-message :as models.pin-message] - [status-im.ui.components.fast-image :as fast-image]) - (:require-macros [status-im.utils.views :refer [defview letsubs]])) - -(defn message-timestamp-anim - [anim-opacity show-timestamp?] - (animation/start - (animation/anim-sequence - [(animation/timing - anim-opacity - {:toValue 1 - :duration 100 - :easing (.-ease ^js animation/easing) - :useNativeDriver true}) - (animation/timing - anim-opacity - {:toValue 0 - :delay 2000 - :duration 100 - :easing (.-ease ^js animation/easing) - :useNativeDriver true})]) #(reset! show-timestamp? false))) - -(defview mention-element [from] - (letsubs [contact-name [:contacts/contact-name-by-identity from]] - contact-name)) - -(def edited-at-text (str " ⌫ " (i18n/label :t/edited))) - -(defn message-status [{:keys [outgoing content outgoing-status pinned edited-at in-popover?]}] - (when-not in-popover? ;; We keep track if showing this message in a list in pin-limit-popover - [react/view - {:align-self :flex-end - :position :absolute - :bottom 9 ; 6 Bubble bottom, 3 message baseline - (if (:rtl? content) :left :right) 0 - :flex-direction :row - :align-items :flex-end} - (when outgoing - [icons/icon (case outgoing-status - :sending :tiny-icons/tiny-pending - :sent :tiny-icons/tiny-sent - :not-sent :tiny-icons/tiny-warning - :delivered :tiny-icons/tiny-delivered - :tiny-icons/tiny-pending) - {:width 16 - :height 12 - :color (if pinned colors/gray colors/white) - :accessibility-label (name outgoing-status)}]) - (when edited-at [react/text {:style (style/message-status-text (and outgoing (not pinned)))} edited-at-text])])) - -(defn message-timestamp - [{:keys [timestamp-str in-popover?] :as message} show-timestamp?] - (when-not in-popover? ;; We keep track if showing this message in a list in pin-limit-popover - (let [anim-opacity (animation/create-value 0)] - [react/animated-view {:style (style/message-timestamp-wrapper message) :opacity anim-opacity} - (when @show-timestamp? (message-timestamp-anim anim-opacity show-timestamp?)) - [react/text - {:style (style/message-timestamp-text) - :accessibility-label :message-timestamp} - timestamp-str]]))) - -(defview quoted-message - [_ {:keys [from parsed-text image]} outgoing current-public-key public? pinned] - (letsubs [contact-name [:contacts/contact-name-by-identity from]] - [react/view {:style (style/quoted-message-container (and outgoing (not pinned)))} - [react/view {:style style/quoted-message-author-container} - [chat.utils/format-reply-author - from - contact-name - current-public-key - (partial style/quoted-message-author (and outgoing (not pinned))) - (and outgoing (not pinned))]] - (if (and image - ;; Disabling images for public-chats - (not public?)) - [fast-image/fast-image {:style {:width 56 - :height 56 - :background-color :black - :border-radius 4} - :source {:uri image}}] - [react/text {:style (style/quoted-message-text (and outgoing (not pinned))) - :number-of-lines 5} - (components.reply/get-quoted-text-with-mentions parsed-text)])])) - -(defn render-inline [message-text outgoing pinned content-type acc {:keys [type literal destination]}] - (case type - "" - (conj acc literal) - - "code" - (conj acc [quo/text {:max-font-size-multiplier react/max-font-size-multiplier - :style (style/inline-code-style) - :monospace true} - literal]) - - "emph" - (conj acc [react/text-class (style/emph-style (and outgoing (not pinned))) literal]) - - "strong" - (conj acc [react/text-class (style/strong-style (and outgoing (not pinned))) literal]) - - "strong-emph" - (conj acc [quo/text (style/strong-emph-style (and outgoing (not pinned))) literal]) - - "del" - (conj acc [react/text-class (style/strikethrough-style (and outgoing (not pinned))) literal]) - - "link" - (conj acc - [react/text-class - {:style - {:color (if (and outgoing (not pinned)) colors/white-persist colors/blue) - :text-decoration-line :underline} - :on-press - #(when (and (security/safe-link? destination) - (security/safe-link-text? message-text)) - (re-frame/dispatch - [:browser.ui/message-link-pressed destination]))} - destination]) - - "mention" - (conj acc [react/text-class - {:style {:color (cond - (= content-type constants/content-type-system-text) colors/black - (and outgoing (not pinned)) colors/mention-outgoing - :else colors/mention-incoming)} - :on-press (when-not (= content-type constants/content-type-system-text) - #(re-frame/dispatch [:chat.ui/show-profile literal]))} - [mention-element literal]]) - "status-tag" - (conj acc [react/text-class - {:style {:color (if (and outgoing (not pinned)) colors/white-persist colors/blue) - :text-decoration-line :underline} - :on-press - #(re-frame/dispatch - [:chat.ui/start-public-chat literal])} - "#" - literal]) - - (conj acc literal))) - -(defn render-block [{:keys [content outgoing content-type pinned in-popover?]} acc - {:keys [type ^js literal children]}] - (case type - - "paragraph" - (conj acc (reduce - (fn [acc e] (render-inline (:text content) outgoing pinned content-type acc e)) - [react/text-class (style/text-style (and outgoing (not pinned)) content-type in-popover?)] - children)) - - "blockquote" - (conj acc [react/view (style/blockquote-style (and outgoing (not pinned))) - [react/text-class (style/blockquote-text-style (and outgoing (not pinned))) - (.substring literal 0 (.-length literal))]]) - - "codeblock" - (conj acc [react/view {:style style/codeblock-style} - [quo/text {:max-font-size-multiplier react/max-font-size-multiplier - :style style/codeblock-text-style - :monospace true} - (.substring literal 0 (dec (.-length literal)))]]) - - acc)) - -(defn render-parsed-text [message tree] - (reduce (fn [acc e] (render-block message acc e)) [:<>] tree)) - -(defn render-parsed-text-with-message-status [{:keys [outgoing edited-at in-popover?] :as message} tree] - (let [elements (render-parsed-text message tree) - message-status [react/text {:style (style/message-status-placeholder)} - (str (if (and outgoing (not in-popover?)) " " " ") (when (and (not in-popover?) edited-at) edited-at-text))] - last-element (peek elements)] - ;; Using `nth` here as slightly faster than `first`, roughly 30% - ;; It's worth considering pure js structures for this code path as - ;; it's perfomance critical - (if (= react/text-class (nth last-element 0)) - ;; Append message status to last text - (conj (pop elements) (conj last-element message-status)) - ;; Append message status to new block - (conj elements message-status)))) - -(defn unknown-content-type - [{:keys [outgoing content-type content] :as message}] - [react/view (style/message-view message) - [react/text - {:style {:color (if outgoing colors/white-persist colors/black)}} - (if (seq (:text content)) - (:text content) - (str "Unhandled content-type " content-type))]]) - -(defn message-not-sent-text - [chat-id message-id] - [react/touchable-highlight - {:on-press - (fn [] - (re-frame/dispatch - [:bottom-sheet/show-sheet - {:content (sheets/options chat-id message-id) - :content-height 200}]) - (react/dismiss-keyboard!))} - [react/view style/not-sent-view - [react/text {:style style/not-sent-text} - (i18n/label :t/status-not-sent-tap)] - [react/view style/not-sent-icon - [icons/icon :main-icons/warning {:color colors/red}]]]]) - -(defn pin-author-name [pinned-by] - (let [user-contact @(re-frame/subscribe [:multiaccount/contact]) - contact-names @(re-frame/subscribe [:contacts/contact-two-names-by-identity pinned-by])] - ;; We append empty spaces to the name as a workaround to make one-line and multi-line label components show correctly - (str " " (if (= pinned-by (user-contact :public-key)) (i18n/label :t/You) (first contact-names))))) - -(def pin-icon-width 9) - -(def pin-icon-height 15) - -(defn pinned-by-indicator [outgoing display-photo? pinned-by] - [react/view {:style (style/pin-indicator outgoing display-photo?) - :accessibility-label :pinned-by} - [react/view {:style (style/pinned-by-text-icon-container)} - [react/view {:style (style/pin-icon-container)} - [icons/icon :main-icons/pin {:color colors/gray - :height pin-icon-height - :width pin-icon-width - :background-color :red}]] - [quo/text {:weight :regular - :size :small - :color :main - :style (style/pinned-by-text)} - (i18n/label :t/pinned-by)]] - [quo/text {:weight :medium - :size :small - :color :main - :style (style/pin-author-text)} - (pin-author-name pinned-by)]]) - -(defn message-delivery-status - [{:keys [chat-id message-id outgoing-status message-type]}] - (when (and (not= constants/message-type-private-group-system-message message-type) - (= outgoing-status :not-sent)) - [message-not-sent-text chat-id message-id])) - -(defview message-author-name [from opts] - (letsubs [contact-with-names [:contacts/contact-by-identity from]] - (chat.utils/format-author contact-with-names opts))) - -(defview message-my-name [opts] - (letsubs [contact-with-names [:multiaccount/contact]] - (chat.utils/format-author contact-with-names opts))) - -(defview community-content [{:keys [community-id] :as message}] - (letsubs [{:keys [name description verified] :as community} [:communities/community community-id] - communities-enabled? [:communities/enabled?]] - (when (and communities-enabled? community) - [react/view {:style (assoc (style/message-wrapper message) - :margin-vertical 10 - :margin-left 8 - :width 271)} - (when verified - [react/view (style/community-verified) - [react/text {:style {:font-size 13 - :color colors/blue}} (i18n/label :t/communities-verified)]]) - [react/view (style/community-message verified) - [react/view {:width 62 - :padding-left 14} - (if (= community-id constants/status-community-id) - [react/image {:source (resources/get-image :status-logo) - :style {:width 40 - :height 40}}] - [communities.icon/community-icon community])] - [react/view {:padding-right 14 :flex 1} - [react/text {:style {:font-weight "700" :font-size 17}} - name] - [react/text description]]] - [react/view (style/community-view-button) - [react/touchable-highlight {:on-press #(re-frame/dispatch [:navigate-to - :community - {:community-id (:id community)}])} - [react/text {:style {:text-align :center - :color colors/blue}} (i18n/label :t/view)]]]]))) - -(defn message-content-wrapper - "Author, userpic and delivery wrapper" - [{:keys [first-in-group? display-photo? display-username? - identicon - from outgoing in-popover?] - :as message} content {:keys [modal close-modal]}] - [react/view {:style (style/message-wrapper message) - :pointer-events :box-none - :accessibility-label :chat-item} - [react/view {:style (style/message-body message) - :pointer-events :box-none} - (when display-photo? - [react/view (style/message-author-userpic outgoing) - (when first-in-group? - [react/touchable-highlight {:on-press #(do (when modal (close-modal)) - (re-frame/dispatch [:chat.ui/show-profile from]))} - [photos/member-photo from identicon]])]) - [react/view {:style (style/message-author-wrapper outgoing display-photo? in-popover?)} - (when display-username? - [react/touchable-opacity {:style style/message-author-touchable - :disabled in-popover? - :on-press #(do (when modal (close-modal)) - (re-frame/dispatch [:chat.ui/show-profile from]))} - [message-author-name from {:modal modal}]]) - ;;MESSAGE CONTENT - content - [link-preview/link-preview-wrapper (:links (:content message)) outgoing false]]] - ; delivery status - [react/view (style/delivery-status outgoing) - [message-delivery-status message]]]) - -(def image-max-width 260) -(def image-max-height 192) - -(defn image-set-size [dimensions] - (fn [evt] - (let [width (.-width (.-nativeEvent evt)) - height (.-height (.-nativeEvent evt))] - (if (< width height) - ;; if width less than the height we reduce width proportionally to height - (let [k (/ height image-max-height)] - (when (not= (/ width k) (first @dimensions)) - (reset! dimensions {:width (/ width k) :height image-max-height :loaded true}))) - (swap! dimensions assoc :loaded true))))) - -(defn message-content-image - [{:keys [content outgoing in-popover?] :as message} - {:keys [on-long-press]}] - (let [dimensions (reagent/atom {:width image-max-width :height image-max-height :loaded false}) - visible (reagent/atom false) - uri (:image content)] - (fn [] - (let [style-opts {:outgoing outgoing - :opacity (if (:loaded @dimensions) 1 0) - :width (:width @dimensions) - :height (:height @dimensions)}] - [:<> - [preview/preview-image {:message message - :visible @visible - :on-close #(do (reset! visible false) - (reagent/flush))}] - [react/touchable-highlight {:on-press (fn [] - (reset! visible true) - (react/dismiss-keyboard!)) - :on-long-press on-long-press - :disabled in-popover?} - [react/view {:style (style/image-message style-opts) - :accessibility-label :image-message} - (when (or (:error @dimensions) (not (:loaded @dimensions))) - [react/view - (merge (dissoc style-opts :opacity) - {:flex 1 :align-items :center :justify-content :center :position :absolute}) - (if (:error @dimensions) - [icons/icon :main-icons/cancel] - [react/activity-indicator {:animating true}])]) - [fast-image/fast-image {:style (dissoc style-opts :outgoing) - :on-load (image-set-size dimensions) - :on-error #(swap! dimensions assoc :error true) - :source {:uri uri}}] - [react/view {:style (style/image-message-border style-opts)}]]]])))) - -(defmulti ->message :content-type) - -(defmethod ->message constants/content-type-command - [message] - [message.command/command-content message-content-wrapper message]) - -(defmethod ->message constants/content-type-gap - [message] - [message.gap/gap message]) - -(defmethod ->message constants/content-type-system-text [{:keys [content] :as message}] - [react/view {:accessibility-label :chat-item} - [react/view (style/system-message-body message) - [react/view (style/message-view message) - [react/view (style/message-view-content) - [render-parsed-text message (:parsed-text content)]]]]]) - -(def message-height-px 200) -(def max-message-height-px 150) - -(defn pin-message [{:keys [chat-id pinned] :as message}] - (let [pinned-messages @(re-frame/subscribe [:chats/pinned chat-id])] - (if (and (not pinned) (> (count pinned-messages) 2)) - (do - (js/setTimeout (fn [] (re-frame/dispatch [:dismiss-keyboard])) 500) - (re-frame/dispatch [:show-popover {:view :pin-limit - :message message - :prevent-closing? true}])) - (re-frame/dispatch [::models.pin-message/send-pin-message (assoc message :pinned (not pinned))])))) - -(defn on-long-press-fn [on-long-press {:keys [pinned message-pin-enabled outgoing edit-enabled show-input?] :as message} content] - (on-long-press - (concat - (when (and outgoing edit-enabled) - [{:on-press #(re-frame/dispatch [:chat.ui/edit-message message]) - :label (i18n/label :t/edit) - :id :edit}]) - (when show-input? - [{:on-press #(re-frame/dispatch [:chat.ui/reply-to-message message]) - :label (i18n/label :t/message-reply) - :id :reply}]) - [{:on-press #(react/copy-to-clipboard - (components.reply/get-quoted-text-with-mentions - (get content :parsed-text))) - :label (i18n/label :t/sharing-copy-to-clipboard) - :id :copy}] - (when message-pin-enabled - [{:on-press #(pin-message message) - :label (if pinned (i18n/label :t/unpin) (i18n/label :t/pin)) - :id (if pinned :unpin :pin)}]) - (when (and outgoing config/delete-message-enabled?) - [{:on-press #(re-frame/dispatch [:chat.ui/soft-delete-message message]) - :label (i18n/label :t/delete) - :id :delete}])))) - -(defn collapsible-text-message [{:keys [mentioned]} _] - (let [collapsed? (reagent/atom false) - collapsible? (reagent/atom false) - show-timestamp? (reagent/atom false)] - (fn [{:keys [content outgoing current-public-key public? pinned in-popover?] :as message} on-long-press modal] - (let [max-height (when-not (or outgoing modal) - (if @collapsible? - (if @collapsed? message-height-px nil) - message-height-px))] - [react/touchable-highlight - (when-not modal - {:on-press (fn [_] - (react/dismiss-keyboard!) - (reset! show-timestamp? true)) - :delay-long-press 100 - :on-long-press (fn [] - (if @collapsed? - (do (reset! collapsed? false) - (js/setTimeout #(on-long-press-fn on-long-press message content) 200)) - (on-long-press-fn on-long-press message content))) - :disabled in-popover?}) - [react/view (style/message-view-wrapper outgoing) - [message-timestamp message show-timestamp?] - [react/view {:style (style/message-view message)} - [react/view {:style (style/message-view-content) - :max-height max-height} - (let [response-to (:response-to content)] - [react/view {:on-layout - #(when (and (> (.-nativeEvent.layout.height ^js %) max-message-height-px) - (not @collapsible?) - (not outgoing) - (not modal)) - (reset! collapsed? true) - (reset! collapsible? true))} - (when (and (seq response-to) (:quoted-message message)) - [quoted-message response-to (:quoted-message message) outgoing current-public-key public? pinned]) - [render-parsed-text-with-message-status message (:parsed-text content)]]) - (when-not @collapsible? [message-status message]) - (when (and @collapsible? (not modal)) - (if @collapsed? - (let [color (if pinned colors/pin-background (if mentioned colors/mentioned-background colors/blue-light))] - [react/touchable-highlight - {:on-press #(swap! collapsed? not) - :style {:position :absolute :bottom 0 :left 0 :right 0 :height 72}} - [react/linear-gradient {:colors [(str color "00") color] - :start {:x 0 :y 0} :end {:x 0 :y 0.9}} - [react/view {:height 72 :align-self :center :justify-content :flex-end - :padding-bottom 10} - [react/view (style/collapse-button) - [icons/icon :main-icons/dropdown - {:color colors/white}]]]]]) - [react/touchable-highlight {:on-press #(swap! collapsed? not) - :style {:align-self :center :margin 5}} - [react/view (style/collapse-button) - [icons/icon :main-icons/dropdown-up - {:color colors/white}]]]))]]]])))) - -(defmethod ->message constants/content-type-text - [message {:keys [on-long-press modal] :as reaction-picker}] - [message-content-wrapper message - [collapsible-text-message message on-long-press modal] - reaction-picker]) - -(defmethod ->message constants/content-type-community - [message] - [community-content message]) - -(defmethod ->message constants/content-type-status - [{:keys [content content-type pinned] :as message}] - [message-content-wrapper message - [react/view style/status-container - [react/text {:style (style/status-text)} - (reduce - (fn [acc e] (render-inline (:text content) false pinned content-type acc e)) - [react/text-class {:style (style/status-text)}] - (-> content :parsed-text peek :children))]]]) - -(defmethod ->message constants/content-type-emoji [] - (let [show-timestamp? (reagent/atom false)] - (fn [{:keys [content current-public-key outgoing public? pinned in-popover? message-pin-enabled] :as message} - {:keys [on-long-press modal] - :as reaction-picker}] - (let [response-to (:response-to content)] - [message-content-wrapper message - [react/touchable-highlight (when-not modal - {:disabled in-popover? - :on-press (fn [] - (react/dismiss-keyboard!) - (reset! show-timestamp? true)) - :delay-long-press 100 - :on-long-press (fn [] - (on-long-press - (concat - [{:on-press #(re-frame/dispatch [:chat.ui/reply-to-message message]) - :id :reply - :label (i18n/label :t/message-reply)} - {:on-press #(react/copy-to-clipboard (get content :text)) - :id :copy - :label (i18n/label :t/sharing-copy-to-clipboard)}] - (when message-pin-enabled [{:on-press #(pin-message message) - :label (if pinned (i18n/label :t/unpin) (i18n/label :t/pin))}]))))}) - [react/view (style/message-view-wrapper outgoing) - [message-timestamp message show-timestamp?] - [react/view (style/message-view message) - [react/view {:style (style/message-view-content)} - [react/view {:style (style/style-message-text outgoing)} - (when (and (seq response-to) (:quoted-message message)) - [quoted-message response-to (:quoted-message message) outgoing current-public-key public? pinned]) - [react/text {:style (style/emoji-message message)} - (:text content)]] - [message-status message]]]]] - reaction-picker])))) - -(defmethod ->message constants/content-type-sticker - [{:keys [content from outgoing in-popover?] - :as message} - {:keys [on-long-press modal] - :as reaction-picker}] - (let [pack (get-in content [:sticker :pack])] - [message-content-wrapper message - [react/touchable-highlight (when-not modal - {:disabled in-popover? - :accessibility-label :sticker-message - :on-press (fn [_] - (when pack - (re-frame/dispatch [:stickers/open-sticker-pack (str pack)])) - (react/dismiss-keyboard!)) - :delay-long-press 100 - :on-long-press (fn [] - (on-long-press - (when-not outgoing - [{:on-press #(when pack - (re-frame/dispatch [:chat.ui/show-profile from])) - :label (i18n/label :t/view-details)}])))}) - [fast-image/fast-image {:style {:margin 10 :width 140 :height 140} - :source {:uri (str (-> content :sticker :url) "&download=true")}}]] - reaction-picker])) - -(defmethod ->message constants/content-type-image - [{:keys [content in-popover? outgoing] :as message} - {:keys [on-long-press modal] - :as reaction-picker}] - [message-content-wrapper message - [message-content-image message - {:modal modal - :disabled in-popover? - :delay-long-press 100 - :on-long-press (fn [] - (on-long-press - (concat [{:on-press #(re-frame/dispatch [:chat.ui/reply-to-message message]) - :id :reply - :label (i18n/label :t/message-reply)} - {:on-press #(re-frame/dispatch [:chat.ui/save-image-to-gallery (:image content)]) - :id :save - :label (i18n/label :t/save)} - {:on-press #(images/download-image-http - (get-in message [:content :image]) preview/share) - :id :share - :label (i18n/label :t/share)}] - (when (and outgoing config/delete-message-enabled?) - [{:on-press #(re-frame/dispatch [:chat.ui/soft-delete-message message]) - :label (i18n/label :t/delete) - :id :delete}]))))}] - reaction-picker]) - -(defmethod ->message constants/content-type-audio [] - (let [show-timestamp? (reagent/atom false)] - (fn [{:keys [outgoing] :as message} - {:keys [on-long-press modal] - :as reaction-picker}] - [message-content-wrapper message - [react/touchable-highlight - (when-not modal - {:on-long-press - (fn [] (on-long-press (if (and outgoing config/delete-message-enabled?) - [{:on-press #(re-frame/dispatch [:chat.ui/soft-delete-message message]) - :label (i18n/label :t/delete) - :id :delete}] - []))) - :on-press (fn [] - (reset! show-timestamp? true))}) - [react/view (style/message-view-wrapper (:outgoing message)) - [message-timestamp message show-timestamp?] - [react/view {:style (style/message-view message) :accessibility-label :audio-message} - [react/view {:style (style/message-view-content)} - [message.audio/message-content message] [message-status message]]]]] - reaction-picker]))) - -(defn contact-request-status-pending [] - [react/view {:style {:flex-direction :row}} - [quo/text {:style {:margin-right 5.27} - :weight :medium - :color :secondary} - (i18n/label :t/contact-request-pending)] - [react/activity-indicator {:animating true - :size :small - :color colors/gray}]]) - -(defn contact-request-status-accepted [] - [quo/text {:style {:color colors/green} - :weight :medium} - (i18n/label :t/contact-request-accepted)]) - -(defn contact-request-status-declined [] - [quo/text {:style {:color colors/red} - :weight :medium} - (i18n/label :t/contact-request-declined)]) - -(defn contact-request-status-label [state] - [react/view {:style (style/contact-request-status-label state)} - (case state - constants/contact-request-message-state-pending [contact-request-status-pending] - constants/contact-request-message-state-accepted [contact-request-status-accepted] - constants/contact-request-message-state-declined [contact-request-status-declined])]) - -(defmethod ->message constants/content-type-contact-request - [{:keys [outgoing] :as message} _] - [react/view {:style (style/content-type-contact-request outgoing)} - [react/image {:source (resources/get-image :hand-wave) - :style {:width 112 - :height 97}}] - [quo/text {:style {:margin-top 6} - :weight :bold - :size :large} - (i18n/label :t/contact-request)] - [react/view {:style {:padding-horizontal 16}} - [quo/text {:style {:margin-top 2 - :margin-bottom 14}} - (get-in message [:content :text])]] - [contact-request-status-label (:contact-request-state message)]]) - -(defmethod ->message :default [message] - [message-content-wrapper message - [unknown-content-type message]]) - -(defn chat-message [{:keys [outgoing display-photo? pinned pinned-by] :as message} space-keeper] - [:<> - [reactions/with-reaction-picker - {:message message - :reactions @(re-frame/subscribe [:chats/message-reactions (:message-id message) (:chat-id message)]) - :picker-on-open (fn [] - (space-keeper true)) - :picker-on-close (fn [] - (space-keeper false)) - :send-emoji (fn [{:keys [emoji-id]}] - (re-frame/dispatch [::models.reactions/send-emoji-reaction - {:message-id (:message-id message) - :emoji-id emoji-id}])) - :retract-emoji (fn [{:keys [emoji-id emoji-reaction-id]}] - (re-frame/dispatch [::models.reactions/send-emoji-reaction-retraction - {:message-id (:message-id message) - :emoji-id emoji-id - :emoji-reaction-id emoji-reaction-id}])) - :render ->message}] - (when pinned - [react/view {:style (style/pin-indicator-container outgoing)} - [pinned-by-indicator outgoing display-photo? pinned-by]])]) \ No newline at end of file diff --git a/src/status_im/ui/screens/chat/message/pinned_message.cljs b/src/status_im/ui/screens/chat/message/pinned_message.cljs index 0ac0505dd3..c412fba853 100644 --- a/src/status_im/ui/screens/chat/message/pinned_message.cljs +++ b/src/status_im/ui/screens/chat/message/pinned_message.cljs @@ -8,7 +8,7 @@ [status-im.chat.models.pin-message :as models.pin-message] [status-im.ui.components.list.views :as list] [status-im.utils.handlers :refer [ (update (default-text-style) :style - assoc :text-decoration-line :line-through))) + assoc :text-decoration-line :line-through) + outgoing + (update :style assoc :color colors/white-persist))) (def code-block-background "#2E386B") @@ -321,8 +366,10 @@ assoc :border-left-color colors/white-transparent-70-persist)) -(defn blockquote-style [] - (default-blockquote-style)) +(defn blockquote-style [outgoing] + (if outgoing + (outgoing-blockquote-style) + (default-blockquote-style))) (defn default-blockquote-text-style [] (update (default-text-style) :style @@ -336,16 +383,20 @@ assoc :color colors/white-transparent-70-persist)) -(defn blockquote-text-style [] - (outgoing-blockquote-text-style) - (default-blockquote-text-style)) +(defn blockquote-text-style [outgoing] + (if outgoing + (outgoing-blockquote-text-style) + (default-blockquote-text-style))) (defn image-message - [{:keys [width height]}] - {:overflow :hidden - :border-radius 8 - :width width - :height height}) + [{:keys [outgoing width height]}] + {:overflow :hidden + :border-top-left-radius 16 + :border-top-right-radius 16 + :border-bottom-left-radius (if outgoing 16 4) + :border-bottom-right-radius (if outgoing 4 16) + :width width + :height height}) (defn image-message-border [opts] (merge (image-message opts) @@ -402,7 +453,7 @@ :padding-vertical 10 :padding-horizontal 16}) -(defn content-type-contact-request [] +(defn content-type-contact-request [outgoing] {:width 168 :min-height 224.71 :border-radius 8 @@ -411,6 +462,6 @@ :align-items :center :padding-bottom 10 :margin-vertical 4 - :align-self :flex-start - :margin-right 0 - :margin-left 8}) + :align-self (if outgoing :flex-end :flex-start) + :margin-right (if outgoing 8 0) + :margin-left (if outgoing 0 8)}) diff --git a/src/status_im/ui/screens/chat/styles/message/message_old.cljs b/src/status_im/ui/screens/chat/styles/message/message_old.cljs deleted file mode 100644 index 5d1e9a0988..0000000000 --- a/src/status_im/ui/screens/chat/styles/message/message_old.cljs +++ /dev/null @@ -1,467 +0,0 @@ -(ns status-im.ui.screens.chat.styles.message.message-old - (:require [status-im.constants :as constants] - [quo.design-system.colors :as colors] - [status-im.ui.components.react :as react] - [status-im.ui.screens.chat.styles.photos :as photos] - [status-im.ui.components.typography :as typography])) - -(defn style-message-text - [outgoing] - {:color (if outgoing colors/white-persist colors/text)}) - -(defn system-message-body - [_] - {:margin-top 4 - :margin-left 8 - :margin-right 8 - :align-self :center - :align-items :center}) - -(defn message-body - [{:keys [outgoing]}] - (let [align (if outgoing :flex-end :flex-start) - direction (if outgoing :row-reverse :row)] - {:flex-direction direction - :margin-top 4 - :align-self align - :align-items align})) - -(def message-timestamp - {:font-size 10}) - -(defn message-status-placeholder - [] - (merge message-timestamp {:opacity 0 :color "rgba(0,0,0,0)"})) - -(defn message-timestamp-wrapper [{:keys [last-in-group? outgoing group-chat]}] - {:justify-content :center - (if outgoing :margin-right :margin-left) 12 ;; horizontal margin is only required at the adjust side of the message. - :margin-top (if (and last-in-group? - (or outgoing - (not group-chat))) - 16 - 0) ;; Add gap between message groups - :opacity 0}) - -(defn message-timestamp-text [] - (merge message-timestamp - {:color colors/gray - :text-align :center})) - -(defn message-status-text [outgoing] - {:font-size 10 - :line-height 10 - :color (if outgoing - colors/white-transparent-70-persist - colors/gray)}) - -(defn audio-message-timestamp-text - [outgoing] - (merge message-timestamp - {:line-height 10 - :color (if outgoing - colors/white-transparent-70-persist - colors/gray)})) - -(defn message-wrapper [{:keys [outgoing in-popover?]}] - (if (and outgoing (not in-popover?)) - {:margin-left 96} - {:margin-right 96})) - -(defn message-author-wrapper - [outgoing display-photo? in-popover?] - (let [align (if (and outgoing (not in-popover?)) :flex-end :flex-start)] - (merge {:flex-direction :column - :flex-shrink 1 - :align-items align} - (if (and outgoing (not in-popover?)) - {:margin-right 8} - (when-not display-photo? - {:margin-left 8}))))) - -(defn delivery-status [outgoing] - (if outgoing - {:align-self :flex-end - :padding-right 8} - {:align-self :flex-start - :padding-left 8})) - -(defn pin-indicator [outgoing display-photo?] - (merge - {:flex-direction :row - :border-top-left-radius (if outgoing 12 4) - :border-top-right-radius (if outgoing 4 12) - :border-bottom-left-radius 12 - :border-bottom-right-radius 12 - :padding-left 8 - :padding-right 10 - :padding-vertical 5 - :background-color colors/gray-lighter - :justify-content :center - :max-width "80%"} - (if outgoing - {:align-self :flex-end - :align-items :flex-end} - {:align-self :flex-start - :align-items :flex-start}) - (when display-photo? - {:margin-left 44}))) - -(defn pin-indicator-container [outgoing] - (merge - {:margin-top 2 - :align-items :center - :justify-content :center} - (if outgoing - {:align-self :flex-end - :align-items :flex-end - :padding-right 8} - {:align-self :flex-start - :align-items :flex-start - :padding-left 8}))) - -(defn pinned-by-text-icon-container [] - {:flex-direction :row - :align-items :flex-start - :top 5 - :left 8 - :position :absolute}) - -(defn pin-icon-container [] - {:flex-direction :row - :margin-top 1}) - -(defn pin-author-text [] - {:margin-left 2 - :margin-right 12 - :padding-right 0 - :left 12 - :flex-direction :row - :flex-shrink 1 - :align-self :flex-start - :overflow :hidden}) - -(defn pinned-by-text [] - {:margin-left 5}) - -(def message-author-touchable - {:margin-left 12 - :flex-direction :row}) - -(defn message-author-userpic [outgoing] - (merge - {:width (+ 16 photos/default-size) ;; 16 is for the padding - :align-self :flex-end} - (if outgoing - {:padding-left 8} - {:padding-horizontal 8 - :padding-right 8}))) - -(def delivery-text - {:color colors/gray - :margin-top 2 - :font-size 12}) - -(def not-sent-view - {:flex-direction :row - :margin-bottom 2 - :padding-top 2}) - -(def not-sent-text - (assoc delivery-text - :color colors/red - :text-align :right - :padding-top 4)) - -(def not-sent-icon - {:padding-top 3 - :padding-left 3}) - -(defn emoji-message - [{:keys [incoming-group outgoing]}] - {:font-size 28 - :line-height 34 ;TODO: Smaller crops the icon on the top - :margin-right (if outgoing 18 0) ;; Margin to display outgoing message status - :margin-top (if incoming-group 4 0)}) - -(defn collapse-button [] - {:height 24 :width 24 :background-color colors/blue - :border-radius 12 :align-items :center :justify-content :center - :elevation 4 - :shadow-opacity 1 - :shadow-radius 16 - :shadow-color (:shadow-01 @colors/theme) - :shadow-offset {:width 0 :height 4}}) - -(defn message-view-wrapper [outgoing] - {:align-self :flex-end - :flex-direction (if outgoing :row :row-reverse)}) - -(defn message-view - [{:keys [content-type outgoing group-chat last-in-group? mentioned pinned]}] - (merge - {:border-top-left-radius 16 - :border-top-right-radius 16 - :border-bottom-right-radius 16 - :border-bottom-left-radius 16 - :padding-top 6 - :padding-horizontal 12 - :border-radius 8 - :margin-top (if (and last-in-group? - (or outgoing - (not group-chat))) - 16 - 0)} - (if outgoing - {:border-bottom-right-radius 4} - {:border-bottom-left-radius 4}) - - (cond - pinned {:background-color colors/pin-background} - (= content-type constants/content-type-system-text) nil - outgoing {:background-color colors/blue} - mentioned {:background-color colors/mentioned-background - :border-color colors/mentioned-border - :border-width 1} - :else {:background-color colors/blue-light}) - - (when (= content-type constants/content-type-emoji) - {:flex-direction :row}))) - -(defn message-view-content [] - {:padding-bottom 6 - :overflow :hidden}) - -(def status-container - {:padding-horizontal 5}) - -(defn status-text [] - {:margin-top 9 - :font-size 14 - :color colors/gray}) - -(defn message-author-name [chosen?] - {:font-size (if chosen? 13 12) - :font-weight (if chosen? "500" "400") - :padding-top 6 - :padding-left 12 - :text-align-vertical :center}) - -(defn quoted-message-container [outgoing] - {:margin-bottom 6 - :padding-bottom 6 - :border-bottom-color (if outgoing - colors/white-transparent-10 - colors/black-transparent) - :border-bottom-width 2 - :border-bottom-left-radius 2 - :border-bottom-right-radius 2}) - -(def quoted-message-author-container - {:flex-direction :row - :align-items :center - :justify-content :flex-start}) - -(defn quoted-message-author [outgoing chosen?] - (assoc (message-author-name chosen?) - :padding-bottom 6 - :padding-top 0 - :padding-left 0 - :line-height 18 - :font-weight "500" - :color (if outgoing - colors/white-transparent-70-persist - colors/gray))) - -(defn quoted-message-text [outgoing] - {:font-size 14 - :color (if outgoing - colors/white-transparent-70-persist - colors/gray)}) - -;; Markdown styles - -(defn default-text-style [] - {:max-font-size-multiplier react/max-font-size-multiplier - :style (assoc (typography/default-style) - :line-height 22)}) - -(defn outgoing-text-style [] - (update (default-text-style) :style - assoc :color colors/white-persist)) - -(defn system-text-style [] - (update (default-text-style) :style assoc - :color colors/gray - :line-height 20 - :font-size 14 - :text-align :center - :font-weight "400")) - -(defn text-style [outgoing content-type in-popover?] - (merge - (when in-popover? {:number-of-lines 2}) - (cond - (= content-type constants/content-type-system-text) (system-text-style) - outgoing (outgoing-text-style) - :else (default-text-style)))) - -(defn emph-text-style [] - (update (default-text-style) :style - assoc :font-style :italic)) - -(defn outgoing-emph-text-style [] - (update (emph-text-style) :style - assoc :color colors/white-persist)) - -(defn emph-style [outgoing] - (if outgoing - (outgoing-emph-text-style) - (emph-text-style))) - -(defn strong-text-style [] - (update (default-text-style) :style - assoc :font-weight "700")) - -(defn outgoing-strong-text-style [] - (update (strong-text-style) :style - assoc :color colors/white-persist)) - -(defn strong-style [outgoing] - (if outgoing - (outgoing-strong-text-style) - (strong-text-style))) - -(defn strong-emph-style [outgoing] - (update (strong-style outgoing) :style - assoc :font-style :italic)) - -(defn strikethrough-style [outgoing] - (cond-> (update (default-text-style) :style - assoc :text-decoration-line :line-through) - outgoing - (update :style assoc :color colors/white-persist))) - -(def code-block-background "#2E386B") - -(defn inline-code-style [] - {:color colors/white-persist - :background-color code-block-background}) - -(def codeblock-style - {:padding 10 - :background-color code-block-background - :border-radius 4}) - -(def codeblock-text-style - {:color colors/white-persist}) - -(defn default-blockquote-style [] - {:style {:border-left-width 2 - :padding-left 3 - :border-left-color colors/gray-transparent-40}}) - -(defn outgoing-blockquote-style [] - (update (default-blockquote-style) :style - assoc - :border-left-color colors/white-transparent-70-persist)) - -(defn blockquote-style [outgoing] - (if outgoing - (outgoing-blockquote-style) - (default-blockquote-style))) - -(defn default-blockquote-text-style [] - (update (default-text-style) :style - assoc - :line-height 19 - :font-size 14 - :color colors/black-transparent-50)) - -(defn outgoing-blockquote-text-style [] - (update (default-blockquote-text-style) :style - assoc - :color colors/white-transparent-70-persist)) - -(defn blockquote-text-style [outgoing] - (if outgoing - (outgoing-blockquote-text-style) - (default-blockquote-text-style))) - -(defn image-message - [{:keys [outgoing width height]}] - {:overflow :hidden - :border-top-left-radius 16 - :border-top-right-radius 16 - :border-bottom-left-radius (if outgoing 16 4) - :border-bottom-right-radius (if outgoing 4 16) - :width width - :height height}) - -(defn image-message-border [opts] - (merge (image-message opts) - {:opacity (:opacity opts) - :border-width 1 - :top 0 - :left 0 - :position :absolute - :background-color :transparent - :border-color colors/black-transparent})) - -(defn community-verified [] - {:border-right-width 1 - :border-left-width 1 - :border-top-width 1 - :border-left-color colors/gray-lighter - :border-right-color colors/gray-lighter - :border-top-left-radius 10 - :border-top-right-radius 10 - :padding-vertical 8 - :padding-horizontal 15 - :border-top-color colors/gray-lighter}) - -(defn community-message [verified] - {:flex-direction :row - :padding-vertical 12 - :border-top-left-radius (when-not verified 10) - :border-top-right-radius (when-not verified 10) - :border-right-width 1 - :border-left-width 1 - :border-top-width 1 - :border-color colors/gray-lighter}) - -(defn community-view-button [] - {:border-width 1 - :padding-vertical 8 - :border-bottom-left-radius 10 - :border-bottom-right-radius 10 - :border-color colors/gray-lighter}) - -(defn contact-request-status-label [state] - {:width 136 - :border-radius 8 - :flex 1 - :justify-content :center - :align-items :center - :background-color (when (= :retry state) - colors/blue-light) - :border-width 1 - :border-color (case state - constants/contact-request-message-state-accepted colors/green-transparent-10 - constants/contact-request-message-state-declined colors/red-light - constants/contact-request-message-state-pending colors/gray-lighter) - :padding-vertical 10 - :padding-horizontal 16}) - -(defn content-type-contact-request [outgoing] - {:width 168 - :min-height 224.71 - :border-radius 8 - :border-width 1 - :border-color colors/gray-lighter - :align-items :center - :padding-bottom 10 - :margin-vertical 4 - :align-self (if outgoing :flex-end :flex-start) - :margin-right (if outgoing 8 0) - :margin-left (if outgoing 0 8)}) \ No newline at end of file diff --git a/src/status_im/ui/screens/chat/utils.cljs b/src/status_im/ui/screens/chat/utils.cljs index 8a68bda390..10c7cf9acc 100644 --- a/src/status_im/ui/screens/chat/utils.cljs +++ b/src/status_im/ui/screens/chat/utils.cljs @@ -14,23 +14,21 @@ [first-name second-name] (multiaccounts/contact-two-names contact false)] (if (or nickname ens-name) [react/nested-text {:number-of-lines 2 - :style {:color (if modal colors/white-persist colors/black) + :style {:color (if modal colors/white-persist colors/blue) :font-size (if profile? 15 13) :line-height (if profile? 22 18) - :letter-spacing -0.2 - :font-weight "600"}} + :font-weight "500"}} (subs first-name 0 81) (when you? - [{:style {:color colors/black-light :font-weight "500" :font-size 13}} + [{:style {:color colors/gray :font-weight "400" :font-size 13}} (str " " (i18n/label :t/You))]) (when nickname - [{:style {:color colors/black-light :font-weight "500"}} + [{:style {:color colors/gray :font-weight "400"}} (str " " (subs second-name 0 81))])] - [react/text {:style {:color (if modal colors/white-persist colors/black) - :font-size (if profile? 15 13) + [react/text {:style {:color (if modal colors/white-persist colors/gray) + :font-size (if profile? 15 12) :line-height (if profile? 22 18) - :font-weight "600" - :letter-spacing -0.2}} + :font-weight "400"}} first-name])))) (defn format-reply-author [from username current-public-key style outgoing] diff --git a/src/status_im/ui/screens/chat/views.cljs b/src/status_im/ui/screens/chat/views.cljs index 444ccd39ae..420f6d1708 100644 --- a/src/status_im/ui/screens/chat/views.cljs +++ b/src/status_im/ui/screens/chat/views.cljs @@ -16,7 +16,6 @@ [quo.react-native :as rn] [status-im.ui.screens.chat.audio-message.views :as audio-message] [quo.react :as quo.react] - [status-im.ui.screens.chat.message.message-old :as message-old] [status-im.ui.screens.chat.message.message :as message] [status-im.ui.screens.chat.stickers.views :as stickers] [status-im.ui.screens.chat.styles.main :as style] @@ -28,7 +27,6 @@ [status-im.ui.screens.chat.message.gap :as gap] [status-im.ui.screens.chat.components.accessory :as accessory] [status-im.ui.screens.chat.components.input :as components] - [status-im.ui.screens.chat.message.datemark-old :as message-datemark-old] [status-im.ui.screens.chat.message.datemark :as message-datemark] [status-im.ui.components.toolbar :as toolbar] [quo.core :as quo] @@ -36,12 +34,10 @@ [status-im.constants :as constants] [status-im.utils.platform :as platform] [status-im.utils.utils :as utils] + [status-im.ui.screens.chat.sheets :as sheets] [status-im.utils.debounce :as debounce] [status-im.navigation.state :as navigation.state] - [status-im.react-native.resources :as resources] - [status-im.ui.components.topbar :as topbar] - [quo2.foundations.colors :as quo2.colors] - [quo2.components.button :as quo2.button])) + [status-im.react-native.resources :as resources])) (defn invitation-requests [chat-id admins] (let [current-pk @(re-frame/subscribe [:multiaccount/public-key]) @@ -57,18 +53,6 @@ (i18n/label :t/group-membership-request)]]]))))) (defn add-contact-bar [public-key] - (when-not (or @(re-frame/subscribe [:contacts/contact-added? public-key]) - @(re-frame/subscribe [:contacts/contact-blocked? public-key])) - [react/touchable-highlight - {:on-press - #(re-frame/dispatch [:contact.ui/add-to-contact-pressed public-key]) - :accessibility-label :add-to-contacts-button} - [react/view {:style (merge (style/add-contact) {:background-color (quo2.colors/theme-colors quo2.colors/white quo2.colors/divider-dark)})} - [icons/icon :main-icons/add - {:color colors/blue}] - [react/i18n-text {:style style/add-contact-text :key :add-to-contacts}]]])) - -(defn add-contact-bar-old [public-key] (when-not (or @(re-frame/subscribe [:contacts/contact-added? public-key]) @(re-frame/subscribe [:contacts/contact-blocked? public-key])) [react/touchable-highlight @@ -302,29 +286,6 @@ [react/view {:style (when platform/android? {:scaleY -1})} [chat.group/group-chat-footer chat-id invitation-admin]])) -(defn render-fn-old [{:keys [outgoing type] :as message} - idx - _ - {:keys [group-chat public? community? current-public-key space-keeper - chat-id show-input? message-pin-enabled edit-enabled in-pinned-view?]}] - [react/view {:style (when (and platform/android? (not in-pinned-view?)) {:scaleY -1})} - (if (= type :datemark) - [message-datemark-old/chat-datemark (:value message)] - (if (= type :gap) - [gap/gap message idx messages-list-ref false chat-id] - ; message content - [message-old/chat-message - (assoc message - :incoming-group (and group-chat (not outgoing)) - :group-chat group-chat - :public? public? - :community? community? - :current-public-key current-public-key - :show-input? show-input? - :message-pin-enabled message-pin-enabled - :edit-enabled edit-enabled) - space-keeper]))]) - (defn render-fn [{:keys [outgoing type] :as message} idx _ @@ -381,57 +342,6 @@ :edit-enabled edit-enabled :in-pinned-view? in-pinned-view?})) -(defn messages-view-old [{:keys [chat - bottom-space - pan-responder - mutual-contact-requests-enabled? - space-keeper - show-input?]}] - (let [{:keys [group-chat chat-type chat-id public? community-id admins]} chat - - messages @(re-frame/subscribe [:chats/raw-chat-messages-stream chat-id]) - one-to-one? (= chat-type constants/one-to-one-chat-type) - contact-added? (when one-to-one? @(re-frame/subscribe [:contacts/contact-added? chat-id])) - should-send-contact-request? - (and - mutual-contact-requests-enabled? - one-to-one? - (not contact-added?))] - - ;;do not use anonymous functions for handlers - [list/flat-list - (merge - pan-responder - {:key-fn list-key-fn - :ref list-ref - :header [list-header chat] - :footer [list-footer chat] - :data (when-not should-send-contact-request? - messages) - :render-data (get-render-data {:group-chat group-chat - :chat-id chat-id - :public? public? - :community-id community-id - :admins admins - :space-keeper space-keeper - :show-input? show-input? - :edit-enabled true - :in-pinned-view? false}) - :render-fn render-fn-old - :on-viewable-items-changed on-viewable-items-changed - :on-end-reached list-on-end-reached - :on-scroll-to-index-failed identity ;;don't remove this - :content-container-style {:padding-top (+ bottom-space 16) - :padding-bottom 16} - :scroll-indicator-insets {:top bottom-space} ;;ios only - :keyboard-dismiss-mode :interactive - :keyboard-should-persist-taps :handled - :onMomentumScrollBegin state/start-scrolling - :onMomentumScrollEnd state/stop-scrolling - ;;TODO https://github.com/facebook/react-native/issues/30034 - :inverted (when platform/ios? true) - :style (when platform/android? {:scaleY -1})})])) - (defn messages-view [{:keys [chat bottom-space pan-responder @@ -483,29 +393,13 @@ :inverted (when platform/ios? true) :style (when platform/android? {:scaleY -1})})])) -(defn back-button [] - [quo2.button/button {:type :grey - :size 32 - :width 32 - :accessibility-label "back-button" - :on-press #(re-frame/dispatch [:navigate-back])} - [icons/icon :main-icons/arrow-left {:color (quo2.colors/theme-colors quo2.colors/black quo2.colors/white)}]]) - -(defn search-button [] - [quo2.button/button {:type :grey - :size 32 - :width 32 - :accessibility-label "search-button"} - [icons/icon :main-icons/search {:color (quo2.colors/theme-colors quo2.colors/black quo2.colors/white)}]]) - (defn topbar-content [] (let [window-width @(re-frame/subscribe [:dimensions/window-width]) {:keys [group-chat chat-id] :as chat-info} @(re-frame/subscribe [:chats/current-chat])] - [react/view {:flex-direction :row :align-items :center :height 56} - [react/touchable-highlight {:on-press #(when-not group-chat - (debounce/dispatch-and-chill [:chat.ui/show-profile chat-id] 1000)) - :style {:flex 1 :margin-left 12 :width (- window-width 120)}} - [toolbar-content/toolbar-content-view-inner chat-info]]])) + [react/touchable-highlight {:on-press #(when-not group-chat + (debounce/dispatch-and-chill [:chat.ui/show-profile chat-id] 1000)) + :style {:flex 1 :width (- window-width 120)}} + [toolbar-content/toolbar-content-view-inner chat-info]])) (defn navigate-back-handler [] (when (and (not @navigation.state/curr-modal) (= (get @re-frame.db/app-db :view-id) :chat)) @@ -513,69 +407,25 @@ (re-frame/dispatch [:close-chat]) (re-frame/dispatch [:navigate-back]))) -(defn chat-render-old [] - (let [bottom-space (reagent/atom 0) - panel-space (reagent/atom 52) - active-panel (reagent/atom nil) - position-y (animated/value 0) - pan-state (animated/value 0) - text-input-ref (quo.react/create-ref) - on-update #(when-not (zero? %) (reset! panel-space %)) - pan-responder (accessory/create-pan-responder position-y pan-state) - space-keeper (get-space-keeper-ios bottom-space panel-space active-panel text-input-ref) - set-active-panel (get-set-active-panel active-panel) - on-close #(set-active-panel nil)] - (fn [] - (let [{:keys [chat-id show-input? group-chat admins invitation-admin] :as chat} - ;;we want to react only on these fields, do not use full chat map here - @(re-frame/subscribe [:chats/current-chat-chat-view]) - mutual-contact-requests-enabled? @(re-frame/subscribe [:mutual-contact-requests/enabled?]) - max-bottom-space (max @bottom-space @panel-space)] - [:<> - [topbar/topbar {:navigation :none - :left-component [react/view {:flex-direction :row :margin-left 16} - [back-button]] - :title-component [topbar-content] - :right-component [react/view {:flex-direction :row :margin-right 16} - [search-button]] - :border-bottom false}] - [connectivity/loading-indicator] - (when chat-id - (if group-chat - [invitation-requests chat-id admins] - (when-not mutual-contact-requests-enabled? [add-contact-bar-old chat-id]))) - ;;MESSAGES LIST - [messages-view-old {:chat chat - :bottom-space max-bottom-space - :pan-responder pan-responder - :mutual-contact-requests-enabled? mutual-contact-requests-enabled? - :space-keeper space-keeper - :show-input? show-input?}] - (when (and group-chat invitation-admin) - [accessory/view {:y position-y - :on-update-inset on-update} - [invitation-bar chat-id]]) - [components/autocomplete-mentions text-input-ref max-bottom-space] - (when show-input? - ;; NOTE: this only accepts two children - [accessory/view {:y position-y - :pan-state pan-state - :has-panel (boolean @active-panel) - :on-close on-close - :on-update-inset on-update} - [react/view - [edit/edit-message-auto-focus-wrapper text-input-ref] - [reply/reply-message-auto-focus-wrapper text-input-ref] - ;; We set the key so we can force a re-render as - ;; it does not rely on ratom but just atoms - ^{:key (str @components/chat-input-key "chat-input")} - [components/chat-toolbar - {:chat-id chat-id - :active-panel @active-panel - :set-active-panel set-active-panel - :text-input-ref text-input-ref}] - [contact-request/contact-request-message-auto-focus-wrapper text-input-ref]] - [bottom-sheet @active-panel]])])))) +(defn topbar [] + ;;we don't use topbar component, because we want chat view as simple (fast) as possible + [react/view {:height 56} + [react/touchable-highlight {:on-press-in navigate-back-handler + :accessibility-label :back-button + :style {:height 56 :width 40 :align-items :center :justify-content :center + :padding-left 16}} + [icons/icon :main-icons/arrow-left {:color colors/black}]] + [react/view {:flex 1 :left 52 :right 52 :top 0 :bottom 0 :position :absolute} + [topbar-content]] + [react/touchable-highlight {:on-press-in #(re-frame/dispatch [:bottom-sheet/show-sheet + {:content (fn [] + [sheets/current-chat-actions]) + :height 256}]) + :accessibility-label :chat-menu-button + :style {:right 0 :top 0 :bottom 0 :position :absolute + :height 56 :width 40 :align-items :center :justify-content :center + :padding-right 16}} + [icons/icon :main-icons/more {:color colors/black}]]]) (defn chat-render [] (let [bottom-space (reagent/atom 0) @@ -596,15 +446,7 @@ mutual-contact-requests-enabled? @(re-frame/subscribe [:mutual-contact-requests/enabled?]) max-bottom-space (max @bottom-space @panel-space)] [:<> - ;; It is better to not use topbar component because of performance - [topbar/topbar {:navigation :none - :left-component [react/view {:flex-direction :row :margin-left 16} - [back-button]] - :title-component [topbar-content] - :right-component [react/view {:flex-direction :row :margin-right 16} - [search-button]] - :border-bottom false - :new-ui? true}] + [topbar] [connectivity/loading-indicator] (when chat-id (if group-chat @@ -643,14 +485,6 @@ [contact-request/contact-request-message-auto-focus-wrapper text-input-ref]] [bottom-sheet @active-panel]])])))) -(defn chat-old [] - (reagent/create-class - {:component-did-mount (fn [] - (react/hw-back-remove-listener navigate-back-handler) - (react/hw-back-add-listener navigate-back-handler)) - :component-will-unmount (fn [] (react/hw-back-remove-listener navigate-back-handler)) - :reagent-render chat-render-old})) - (defn chat [] (reagent/create-class {:component-did-mount (fn [] diff --git a/src/status_im/ui/screens/communities/community.cljs b/src/status_im/ui/screens/communities/community.cljs index bcfca9467e..4447b44ff7 100644 --- a/src/status_im/ui/screens/communities/community.cljs +++ b/src/status_im/ui/screens/communities/community.cljs @@ -148,7 +148,7 @@ text]]) (defn community-chat-item [{:keys [chat-id] :as home-item} _ _ _] - [inner-item/home-list-item-old + [inner-item/home-list-item ;; We want communities to behave as public chats when it comes to ;; unread indicator (assoc home-item :public? true) diff --git a/src/status_im/ui/screens/communities/create_category.cljs b/src/status_im/ui/screens/communities/create_category.cljs index 937ecc6cd1..f1538915e6 100644 --- a/src/status_im/ui/screens/communities/create_category.cljs +++ b/src/status_im/ui/screens/communities/create_category.cljs @@ -27,7 +27,7 @@ [quo/checkbox {:value selected :on-change on-change}]] [react/view {:flex 1} - [inner-item/home-list-item-old + [inner-item/home-list-item (assoc home-item :public? true) {:on-press on-change}]]])) diff --git a/src/status_im/ui/screens/communities/reorder_categories.cljs b/src/status_im/ui/screens/communities/reorder_categories.cljs index db847a135c..1d89387cad 100644 --- a/src/status_im/ui/screens/communities/reorder_categories.cljs +++ b/src/status_im/ui/screens/communities/reorder_categories.cljs @@ -54,7 +54,7 @@ :on-press #(show-delete-chat-confirmation community-id chat-id)} [icons/icon :main-icons/delete-circle {:no-color true}]] [rn/view {:flex 1} - [inner-item/home-list-item-old (assoc home-item :edit? true) {:active-opacity 1}]] + [inner-item/home-list-item (assoc home-item :edit? true) {:active-opacity 1}]] [rn/touchable-opacity {:on-long-press drag :delay-long-press 100 :accessibility-label :chat-drag-handle diff --git a/src/status_im/ui/screens/currency_settings/views.cljs b/src/status_im/ui/screens/currency_settings/views.cljs index 67148a7038..3c85dc742a 100644 --- a/src/status_im/ui/screens/currency_settings/views.cljs +++ b/src/status_im/ui/screens/currency_settings/views.cljs @@ -31,7 +31,7 @@ [react/view {:flex 1} [react/view {:padding-horizontal 16 :padding-vertical 10} - [search-input/search-input-old + [search-input/search-input {:search-active? search-active? :search-filter search-filter :on-cancel #(re-frame/dispatch [:search/currency-filter-changed nil]) diff --git a/src/status_im/ui/screens/ens/views.cljs b/src/status_im/ui/screens/ens/views.cljs index 33f8398c7f..b8e6469f0b 100644 --- a/src/status_im/ui/screens/ens/views.cljs +++ b/src/status_im/ui/screens/ens/views.cljs @@ -17,7 +17,7 @@ [status-im.ui.components.topbar :as topbar] [status-im.ui.screens.chat.utils :as chat.utils] [status-im.ui.components.toolbar :as toolbar] - [status-im.ui.screens.chat.message.message-old :as message] + [status-im.ui.screens.chat.message.message :as message] [status-im.ui.screens.chat.photos :as photos] [status-im.ui.screens.profile.components.views :as profile.components] [status-im.utils.debounce :as debounce] diff --git a/src/status_im/ui/screens/group/views.cljs b/src/status_im/ui/screens/group/views.cljs index fc8b7dab89..acdbc65258 100644 --- a/src/status_im/ui/screens/group/views.cljs +++ b/src/status_im/ui/screens/group/views.cljs @@ -149,8 +149,8 @@ (fn [{:keys [contacts no-contacts-label toggle-fn allow-new-users?]}] [react/view {:style {:flex 1}} [react/view {:style (styles/search-container)} - [search/search-input-old {:on-cancel #(reset! search-value nil) - :on-change #(reset! search-value %)}]] + [search/search-input {:on-cancel #(reset! search-value nil) + :on-change #(reset! search-value %)}]] [react/view {:style {:flex 1 :padding-vertical 8}} (if (seq contacts) diff --git a/src/status_im/ui/screens/home/styles.cljs b/src/status_im/ui/screens/home/styles.cljs index 8d298931af..dd35a4e233 100644 --- a/src/status_im/ui/screens/home/styles.cljs +++ b/src/status_im/ui/screens/home/styles.cljs @@ -9,10 +9,11 @@ (def public-unread {:background-color colors/blue - :border-radius 5 - :margin-right 16 - :width 10 - :height 10}) + :border-radius 6 + :margin-right 5 + :margin-bottom 5 + :width 12 + :height 12}) (def datetime-text {:color colors/text-gray diff --git a/src/status_im/ui/screens/home/views.cljs b/src/status_im/ui/screens/home/views.cljs index 7cc1865caf..1103e028e8 100644 --- a/src/status_im/ui/screens/home/views.cljs +++ b/src/status_im/ui/screens/home/views.cljs @@ -23,13 +23,7 @@ [status-im.ui.screens.chat.sheets :as sheets] [status-im.ui.components.tabbar.core :as tabbar] [status-im.ui.components.invite.views :as invite] - [status-im.utils.config :as config] - [quo2.components.text :as quo2.text] - [status-im.qr-scanner.core :as qr-scanner] - [status-im.ui.components.chat-icon.screen :as chat-icon.screen] - [status-im.ui.components.chat-icon.styles :as chat-icon.styles] - [quo2.foundations.colors :as quo2.colors] - [quo2.components.button :as quo2.button]) + [status-im.utils.config :as config]) (:require-macros [status-im.utils.views :as views])) (defn home-tooltip-view [] @@ -76,26 +70,6 @@ (re-frame/dispatch [:set-in [:contacts/new-identity :state] :searching]) (debounce/debounce-and-dispatch [:new-chat/set-new-identity text] 300))}]]) -(defn search-input-wrapper-old [search-filter chats-empty] - [react/view {:padding-horizontal 16 - :padding-vertical 10} - [search-input/search-input-old - {:search-active? search-active? - :search-filter search-filter - :on-cancel #(re-frame/dispatch [:search/home-filter-changed nil]) - :on-blur (fn [] - (when chats-empty - (re-frame/dispatch [:search/home-filter-changed nil])) - (re-frame/dispatch [::new-chat/clear-new-identity])) - :on-focus (fn [search-filter] - (when-not search-filter - (re-frame/dispatch [:search/home-filter-changed ""]) - (re-frame/dispatch [::new-chat/clear-new-identity]))) - :on-change (fn [text] - (re-frame/dispatch [:search/home-filter-changed text]) - (re-frame/dispatch [:set-in [:contacts/new-identity :state] :searching]) - (debounce/debounce-and-dispatch [:new-chat/set-new-identity text] 300))}]]) - (defn start-suggestion [search-value] (let [{:keys [state ens-name public-key]} @(re-frame/subscribe [:contacts/new-identity]) @@ -139,23 +113,6 @@ [sheets/actions home-item])}])}] [communities.views/community-home-list-item home-item])) -(defn render-fn-old [{:keys [chat-id] :as home-item}] - ;; We use `chat-id` to distinguish communities from chats - (if chat-id - [inner-item/home-list-item-old - home-item - {:on-press (fn [] - (re-frame/dispatch [:dismiss-keyboard]) - (if (and @config/new-ui-enabled? platform/android?) - (re-frame/dispatch [:chat.ui/navigate-to-chat-nav2 chat-id]) - (re-frame/dispatch [:chat.ui/navigate-to-chat chat-id])) - (re-frame/dispatch [:search/home-filter-changed nil]) - (re-frame/dispatch [:accept-all-activity-center-notifications-from-chat chat-id])) - :on-long-press #(re-frame/dispatch [:bottom-sheet/show-sheet - {:content (fn [] - [sheets/actions home-item])}])}] - [communities.views/community-home-list-item home-item])) - (defn chat-list-key-fn [item] (or (:chat-id item) (:id item))) @@ -187,31 +144,6 @@ [home-tooltip-view] [react/view {:height 68}])}]))) -(views/defview communities-and-chats-old [] - (views/letsubs [{:keys [items search-filter]} [:home-items] - hide-home-tooltip? [:hide-home-tooltip?]] - (if (and (empty? items) - (empty? search-filter) - hide-home-tooltip? - (not @search-active?)) - [welcome-blank-page] - [list/flat-list - {:key-fn chat-list-key-fn - :getItemLayout get-item-layout - :on-end-reached #(re-frame/dispatch [:chat.ui/show-more-chats]) - :keyboard-should-persist-taps :always - :data items - :render-fn render-fn-old - :header [:<> - (when (or (seq items) @search-active? (seq search-filter)) - [search-input-wrapper-old search-filter (empty? items)]) - (when (and (empty? items) - (or @search-active? (seq search-filter))) - [start-suggestion search-filter])] - :footer (if (and (not hide-home-tooltip?) (not @search-active?)) - [home-tooltip-view] - [react/view {:height 68}])}]))) - (views/defview chats-list [] (views/letsubs [loading? [:chats/loading?]] [:<> @@ -221,15 +153,6 @@ [react/activity-indicator {:animating true}]] [communities-and-chats])])) -(views/defview chats-list-old [] - (views/letsubs [loading? [:chats/loading?]] - [:<> - [connectivity/loading-indicator] - (if loading? - [react/view {:flex 1 :align-items :center :justify-content :center} - [react/activity-indicator {:animating true}]] - [communities-and-chats-old])])) - (views/defview plus-button [] (views/letsubs [logging-in? [:multiaccounts/login]] [components.plus-button/plus-button @@ -238,33 +161,7 @@ :loading logging-in? :accessibility-label :new-chat-button}])) -(views/defview plus-button-old [] - (views/letsubs [logging-in? [:multiaccounts/login]] - [components.plus-button/plus-button-old - {:on-press (when-not logging-in? - #(re-frame/dispatch [:bottom-sheet/show-sheet :add-new {}])) - :loading logging-in? - :accessibility-label :new-chat-button}])) - (views/defview notifications-button [] - (views/letsubs [notif-count [:activity.center/notifications-count]] - [react/view - [quo2.button/button {:type :grey - :size 32 - :width 32 - :style {:margin-left 12} - :accessibility-label :notifications-button - :on-press #(do - (re-frame/dispatch [:mark-all-activity-center-notifications-as-read]) - (re-frame/dispatch [:navigate-to :notifications-center]))} - [icons/icon :main-icons/notification2 {:color (quo2.colors/theme-colors quo2.colors/black quo2.colors/white)}]] - (when (pos? notif-count) - [react/view {:style (merge (styles/counter-public-container) {:top 5 :right 5}) - :pointer-events :none} - [react/view {:style styles/counter-public - :accessibility-label :notifications-unread-badge}]])])) - -(views/defview notifications-button-old [] (views/letsubs [notif-count [:activity.center/notifications-count]] [react/view [quo/button {:type :icon @@ -281,66 +178,14 @@ [react/view {:style styles/counter-public :accessibility-label :notifications-unread-badge}]])])) -(defn qr-button [] - [quo2.button/button {:type :grey - :accessibility-label "qr-button" - :size 32 - :width 32 - :style {:margin-left 12} - :on-press #(do - (re-frame/dispatch [::qr-scanner/scan-code - {:handler ::qr-scanner/on-scan-success}]))} - [icons/icon :main-icons/qr2 {:color (quo2.colors/theme-colors quo2.colors/black quo2.colors/white)}]]) - -(defn scan-button [] - [quo2.button/button {:type :grey - :size 32 - :width 32 - :accessibility-label "scan-button" - :on-press #(do - (re-frame/dispatch [::qr-scanner/scan-code - {:handler ::qr-scanner/on-scan-success}]))} - [icons/icon :main-icons/scan2 {:color (quo2.colors/theme-colors quo2.colors/black quo2.colors/white)}]]) - -(views/defview profile-button [] - (views/letsubs [{:keys [public-key preferred-name emoji]} [:multiaccount]] - [react/view - [chat-icon.screen/emoji-chat-icon-view public-key false preferred-name emoji - {:size 28 - :chat-icon chat-icon.styles/chat-icon-chat-list}]])) - (defn home [] - [react/keyboard-avoiding-view {:style {:flex 1 :background-color (quo2.colors/theme-colors quo2.colors/primary-10 quo2.colors/switcher-background)} - :ignore-offset true} - [topbar/topbar {:navigation :none - :use-insets true - :background (quo2.colors/theme-colors quo2.colors/primary-10 quo2.colors/switcher-background) - :left-component [react/view {:flex-direction :row :margin-left 16} - [profile-button]] - :right-component [react/view {:flex-direction :row :margin-right 16} - [scan-button] - [qr-button] - [notifications-button]] - :border-bottom false}] - [react/view {:flex-direction :row - :justify-content :space-between - :align-items :center - :margin-horizontal 16 - :margin-top 15 - :margin-bottom 8} - [quo2.text/text {:size :heading-1 :weight :semi-bold} "Messages"] - [plus-button]] - [chats-list] - [tabbar/tabs-counts-subscriptions]]) - -(defn home-old [] [react/keyboard-avoiding-view {:style {:flex 1} :ignore-offset true} [topbar/topbar {:title (i18n/label :t/chat) :navigation :none :right-component [react/view {:flex-direction :row :margin-right 16} [connectivity/connectivity-button] - [notifications-button-old]]}] - [chats-list-old] - [plus-button-old] - [tabbar/tabs-counts-subscriptions]]) \ No newline at end of file + [notifications-button]]}] + [chats-list] + [plus-button] + [tabbar/tabs-counts-subscriptions]]) diff --git a/src/status_im/ui/screens/home/views/inner_item.cljs b/src/status_im/ui/screens/home/views/inner_item.cljs index ce4467f474..a5eb011d21 100644 --- a/src/status_im/ui/screens/home/views/inner_item.cljs +++ b/src/status_im/ui/screens/home/views/inner_item.cljs @@ -12,10 +12,7 @@ [status-im.ui.components.icons.icons :as icons] [status-im.utils.core :as utils] [status-im.utils.datetime :as time] - [status-im.ui.components.chat-icon.styles :as chat-icon.styles] - [quo2.components.text :as quo2.text] - [status-im.utils.utils :as utils.utils] - [quo2.foundations.colors :as quo2.colors])) + [status-im.ui.components.chat-icon.styles :as chat-icon.styles])) (defn preview-label [label-key label-fn] [react/text {:style styles/last-message-text @@ -119,22 +116,6 @@ (defn unviewed-indicator [{:keys [unviewed-mentions-count unviewed-messages-count public?]}] - (when (pos? unviewed-messages-count) - [react/view {:position :absolute :right 16} - (cond - (and public? (not (pos? unviewed-mentions-count))) - [react/view {:style styles/public-unread - :accessibility-label :unviewed-messages-public}] - - (and public? (pos? unviewed-mentions-count)) - [badge/message-counter unviewed-mentions-count] - - :else - [badge/message-counter unviewed-messages-count])])) - -(defn unviewed-indicator-old [{:keys [unviewed-mentions-count - unviewed-messages-count - public?]}] (when (pos? unviewed-messages-count) [react/view {:position :absolute :right 16 :bottom 12} (cond @@ -170,23 +151,6 @@ [icons/icon :main-icons/tiny-new-contact (icon-style)])) (defn chat-item-title [chat-id muted group-chat chat-name edit?] - [quo2.text/text {:weight :semi-bold - :color (when muted :secondary) - :accessibility-label :chat-name-text - :ellipsize-mode :tail - :number-of-lines 1 - :style {:position :absolute - :left 72 - :top 10 - :right (if edit? 50 90)}} - (if group-chat - (utils/truncate-str chat-name 30) - ;; This looks a bit odd, but I would like only to subscribe - ;; if it's a one-to-one. If wrapped in a component styling - ;; won't be applied correctly. - (first @(re-frame/subscribe [:contacts/contact-two-names-by-identity chat-id])))]) - -(defn chat-item-title-old [chat-id muted group-chat chat-name edit?] [quo/text {:weight :medium :color (when muted :secondary) :accessibility-label :chat-name-text @@ -204,59 +168,12 @@ (first @(re-frame/subscribe [:contacts/contact-two-names-by-identity chat-id])))]) (defn home-list-item [home-item opts] - (let [{:keys [chat-id chat-name color group-chat muted emoji highlight edit? public? unviewed-messages-count contacts]} home-item - background-color (when highlight (colors/get-color :interactive-02))] - [react/touchable-opacity (merge {:style {:height 64 :background-color background-color}} opts) - [:<> - (when (pos? unviewed-messages-count) - [react/view {:position :absolute :top 2 :left 8 :right 8 :bottom 2 :border-radius 16 :background-color quo2.colors/primary-50-opa-5}]) - [chat-icon.screen/emoji-chat-icon-view chat-id group-chat chat-name emoji - {:container (assoc chat-icon.styles/container-chat-list - :top 12 :left 20 :position :absolute) - :size 32 - :chat-icon chat-icon.styles/chat-icon-chat-list - :default-chat-icon (chat-icon.styles/default-chat-icon-chat-list color) - :default-chat-icon-text (if (string/blank? emoji) - (chat-icon.styles/default-chat-icon-text 40) - (chat-icon.styles/emoji-chat-icon-text 40))}] - [chat-item-title chat-id muted group-chat chat-name edit?] - (when-not edit? - [react/view {:height "100%" :justify-content :center} - [unviewed-indicator home-item]]) - [react/view {:position :absolute :left 72 :top 32 :right 80} - (if public? - [quo2.text/text {:color :secondary - :number-of-lines 1 - :ellipsize-mode :middle - :weight :medium - :style {:color (quo2.colors/theme-colors quo2.colors/neutral-50 quo2.colors/neutral-40)}} - "Public"] - (if group-chat [react/view {:flex-direction :row - :flex 1 - :padding-right 16 - :align-items :center} - [icons/icon :main-icons/tiny-group2 - {:width 16 - :height 16 - :no-color true - :container-style {:width 16 - :height 16 - :margin-right 4}}] - [quo2.text/text {:weight :medium - :style {:color (quo2.colors/theme-colors quo2.colors/neutral-50 quo2.colors/neutral-40)}} (i18n/label :t/members-count {:count (count contacts)})]] [quo2.text/text {:monospace true - :weight :medium - :style {:color (quo2.colors/theme-colors quo2.colors/neutral-50 quo2.colors/neutral-40)} - :number-of-lines 1 - :ellipsize-mode :middle} - (utils.utils/get-shortened-address chat-id)]))]]])) - -(defn home-list-item-old [home-item opts] (let [{:keys [chat-id chat-name color group-chat public? timestamp last-message muted emoji highlight edit?]} home-item background-color (when highlight (colors/get-color :interactive-02))] [react/touchable-opacity (merge {:style {:height 64 :background-color background-color}} opts) [:<> [chat-item-icon muted (and group-chat (not public?)) (and group-chat public?)] - [chat-icon.screen/emoji-chat-icon-view-old chat-id group-chat chat-name emoji + [chat-icon.screen/emoji-chat-icon-view chat-id group-chat chat-name emoji {:container (assoc chat-icon.styles/container-chat-list :top 12 :left 16 :position :absolute) :size 40 @@ -265,7 +182,7 @@ :default-chat-icon-text (if (string/blank? emoji) (chat-icon.styles/default-chat-icon-text 40) (chat-icon.styles/emoji-chat-icon-text 40))}] - [chat-item-title-old chat-id muted group-chat chat-name edit?] + [chat-item-title chat-id muted group-chat chat-name edit?] (when-not edit? [:<> [react/text {:style styles/datetime-text @@ -275,5 +192,5 @@ (memo-timestamp (if (pos? (:whisper-timestamp last-message)) (:whisper-timestamp last-message) timestamp))] - [unviewed-indicator-old home-item]]) - [message-content-text (select-keys last-message [:content :content-type :community-id]) true]]])) \ No newline at end of file + [unviewed-indicator home-item]]) + [message-content-text (select-keys last-message [:content :content-type :community-id]) true]]])) diff --git a/src/status_im/ui/screens/profile/group_chat/views.cljs b/src/status_im/ui/screens/profile/group_chat/views.cljs index a627346d34..3fbfde88f4 100644 --- a/src/status_im/ui/screens/profile/group_chat/views.cljs +++ b/src/status_im/ui/screens/profile/group_chat/views.cljs @@ -13,7 +13,7 @@ [status-im.ui.screens.profile.components.styles :as profile.components.styles] [status-im.ui.components.topbar :as topbar] [status-im.ui.components.common.common :as components.common] - [status-im.ui.screens.chat.message.message-old :as message] + [status-im.ui.screens.chat.message.message :as message] [status-im.ui.screens.chat.photos :as photos] [status-im.ui.screens.chat.utils :as chat.utils] [status-im.utils.debounce :as debounce]) diff --git a/src/status_im/ui/screens/profile/visibility_status/styles.cljs b/src/status_im/ui/screens/profile/visibility_status/styles.cljs index fc9bb49ac7..4143286087 100644 --- a/src/status_im/ui/screens/profile/visibility_status/styles.cljs +++ b/src/status_im/ui/screens/profile/visibility_status/styles.cljs @@ -1,6 +1,5 @@ (ns status-im.ui.screens.profile.visibility-status.styles - (:require [quo.design-system.colors :as colors] - [quo2.foundations.colors :as quo2.colors])) + (:require [quo.design-system.colors :as colors])) (defn visibility-status-button-container [] {:background-color (:interactive-02 @colors/theme) @@ -15,14 +14,6 @@ :padding-right 12}) (defn visibility-status-dot [dot-color size] - {:background-color dot-color - :width size - :height size - :border-radius (/ size 2) - :border-width 3.5 - :border-color (quo2.colors/theme-colors quo2.colors/white quo2.colors/neutral-90)}) - -(defn visibility-status-dot-old [dot-color size] {:background-color dot-color :width size :height size diff --git a/src/status_im/ui/screens/profile/visibility_status/utils.cljs b/src/status_im/ui/screens/profile/visibility_status/utils.cljs index 3cc0415544..db1abbc79e 100644 --- a/src/status_im/ui/screens/profile/visibility_status/utils.cljs +++ b/src/status_im/ui/screens/profile/visibility_status/utils.cljs @@ -5,8 +5,7 @@ [status-im.utils.handlers :refer [