From 22f92677fa3e7b02c7eafb9fedca918ae40a2d67 Mon Sep 17 00:00:00 2001 From: Brian Sztamfater Date: Thu, 7 Jul 2022 13:07:37 -0300 Subject: [PATCH] Base chat dedesign Signed-off-by: Brian Sztamfater --- ios/Podfile.lock | 21 +- resources/images/icons/emojis@2x.png | Bin 0 -> 1014 bytes resources/images/icons/emojis@3x.png | Bin 0 -> 1652 bytes resources/images/icons/notification2@2x.png | Bin 0 -> 498 bytes resources/images/icons/notification2@3x.png | Bin 0 -> 659 bytes resources/images/icons/qr2@2x.png | Bin 0 -> 569 bytes resources/images/icons/qr2@3x.png | Bin 0 -> 819 bytes resources/images/icons/scan2@2x.png | Bin 0 -> 463 bytes resources/images/icons/scan2@3x.png | Bin 0 -> 605 bytes resources/images/icons/scan@2x.png | Bin 0 -> 773 bytes resources/images/icons/scan@3x.png | Bin 0 -> 1059 bytes resources/images/icons/search2@2x.png | Bin 0 -> 851 bytes resources/images/icons/search2@3x.png | Bin 0 -> 1110 bytes resources/images/icons/tiny_group2@2x.png | Bin 0 -> 909 bytes resources/images/icons/tiny_group2@3x.png | Bin 0 -> 1287 bytes src/quo2/foundations/colors.cljs | 14 + src/quo2/foundations/typography.cljs | 2 +- .../ui/components/chat_icon/screen.cljs | 37 +- src/status_im/ui/components/plus_button.cljs | 38 +- .../ui/components/search_input/view.cljs | 48 +- src/status_im/ui/components/topbar.cljs | 14 +- .../ui/screens/browser/tabs/views.cljs | 2 +- .../ui/screens/chat/message/audio.cljs | 16 +- .../ui/screens/chat/message/audio_old.cljs | 238 ++++++ .../ui/screens/chat/message/datemark.cljs | 11 +- .../ui/screens/chat/message/datemark_old.cljs | 12 + .../ui/screens/chat/message/message.cljs | 200 +++-- .../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 | 30 +- src/status_im/ui/screens/chat/views.cljs | 205 ++++- .../ui/screens/communities/community.cljs | 4 +- .../screens/communities/create_category.cljs | 2 +- .../ui/screens/communities/members.cljs | 2 +- .../communities/reorder_categories.cljs | 2 +- .../ui/screens/contacts_list/views.cljs | 2 +- .../ui/screens/currency_settings/views.cljs | 2 +- src/status_im/ui/screens/ens/views.cljs | 10 +- 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 | 176 ++++- .../ui/screens/home/views/inner_item.cljs | 96 ++- .../ui/screens/profile/group_chat/views.cljs | 4 +- .../profile/visibility_status/styles.cljs | 15 +- .../profile/visibility_status/utils.cljs | 55 +- .../profile/visibility_status/views.cljs | 8 +- src/status_im/ui/screens/screens.cljs | 2 +- src/status_im/ui/screens/status/views.cljs | 4 +- .../ui/screens/wallet/recipient/views.cljs | 2 +- .../ui/screens/wallet/settings/views.cljs | 2 +- .../ui/screens/wallet/swap/views.cljs | 2 +- translations/en.json | 3 +- 60 files changed, 2414 insertions(+), 391 deletions(-) create mode 100644 resources/images/icons/emojis@2x.png create mode 100644 resources/images/icons/emojis@3x.png create mode 100644 resources/images/icons/notification2@2x.png create mode 100644 resources/images/icons/notification2@3x.png create mode 100644 resources/images/icons/qr2@2x.png create mode 100644 resources/images/icons/qr2@3x.png create mode 100644 resources/images/icons/scan2@2x.png create mode 100644 resources/images/icons/scan2@3x.png create mode 100644 resources/images/icons/scan@2x.png create mode 100644 resources/images/icons/scan@3x.png create mode 100644 resources/images/icons/search2@2x.png create mode 100644 resources/images/icons/search2@3x.png create mode 100644 resources/images/icons/tiny_group2@2x.png create mode 100644 resources/images/icons/tiny_group2@3x.png create mode 100644 src/status_im/ui/screens/chat/message/audio_old.cljs create mode 100644 src/status_im/ui/screens/chat/message/datemark_old.cljs create mode 100644 src/status_im/ui/screens/chat/message/message_old.cljs create mode 100644 src/status_im/ui/screens/chat/styles/message/audio_old.cljs create mode 100644 src/status_im/ui/screens/chat/styles/message/datemark_old.cljs create mode 100644 src/status_im/ui/screens/chat/styles/message/message_old.cljs diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 11c28f5505..affcf7f24c 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.4.3) + - CryptoSwift (1.5.1) - DoubleConversion (1.1.6) - FBLazyVector (0.63.4) - FBReactNativeSpec (0.63.4): @@ -349,7 +349,7 @@ PODS: - React - RNReactNativeHapticFeedback (1.9.0): - React - - RNReanimated (2.1.0): + - RNReanimated (2.3.3): - DoubleConversion - FBLazyVector - FBReactNativeSpec @@ -375,7 +375,6 @@ PODS: - React-RCTNetwork - React-RCTSettings - React-RCTText - - React-RCTVibration - ReactCommon/turbomodule/core - Yoga - RNShare (7.0.1): @@ -468,7 +467,7 @@ DEPENDENCIES: - RNSVG (from `../node_modules/react-native-svg`) - secp256k1 (from `https://github.com/status-im/secp256k1.swift.git`) - SQLCipher (~> 3.0) - - SSZipArchive + - SSZipArchive (= 2.4.3) - TouchID (from `../node_modules/react-native-touch-id`) - Yoga (from `../node_modules/react-native/ReactCommon/yoga`) @@ -631,14 +630,14 @@ CHECKOUT OPTIONS: SPEC CHECKSUMS: boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c BVLinearGradient: e3aad03778a456d77928f594a649e96995f1c872 - CryptoSwift: a0799ee936271bd2253a006f1e4523df21845000 + CryptoSwift: c4f2debceb38bf44c80659afe009f71e23e4a082 DoubleConversion: cde416483dac037923206447da6e1454df403714 FBLazyVector: 3bb422f41b18121b71783a905c10e58606f7dc3e FBReactNativeSpec: f2c97f2529dd79c083355182cc158c9f98f4bd6e Folly: b73c3869541e86821df3c387eb0af5f65addfab4 - glog: 2d7c14bbcd0c3139c6258f813895cb61d7860fcc + glog: 502275bc0747df92346edbab1f40dacde2ec86d4 HMSegmentedControl: 34c1f54d822d8308e7b24f5d901ec674dfa31352 - Keycard: 07f1b4d4fadcf1218084cb3e1bb3a8bac3870c5a + Keycard: ac6df4d91525c3c82635ac24d4ddd9a80aca5fc8 libwebp: 98a37e597e40bfdb4c911fc98f2c53d0b12d05fc Permission-Camera: afad27bf90337684d4a86f3825112d648c8c4d3b Permission-Microphone: 0ffabc3fe1c75cfb260525ee3f529383c9f4368c @@ -666,7 +665,7 @@ SPEC CHECKSUMS: react-native-shake: de052eaa3eadc4a326b8ddd7ac80c06e8d84528c react-native-slider: 12bd76d3d568c9c5500825db54123d44b48e4ad4 react-native-splash-screen: 4312f786b13a81b5169ef346d76d33bc0c6dc457 - react-native-status: 45dbf1302ce3c258b459dfab137cd1c2c68c295d + react-native-status: 21f75d492fd311dc111303da38a7a2b23a8a8466 react-native-status-keycard: 961d01ca190889ddf220206822fd752f8f4f3f7a react-native-webview: 28a8636d97ee641f2ee8f20492d7a6c269c1d703 React-RCTActionSheet: 89a0ca9f4a06c1f93c26067af074ccdce0f40336 @@ -693,7 +692,7 @@ SPEC CHECKSUMS: RNLanguages: 962e562af0d34ab1958d89bcfdb64fafc37c513e RNPermissions: ad71dd4f767ec254f2cd57592fbee02afee75467 RNReactNativeHapticFeedback: 2566b468cc8d0e7bb2f84b23adc0f4614594d071 - RNReanimated: 70f662b5232dd5d19ccff581e919a54ea73df51c + RNReanimated: 69eda0e8790a2ee00de2fff03e89361e9bac749a RNShare: 2dc2fcac3f7321cfd6b60a23ed4bf4d549f86f5f RNSVG: 8ba35cbeb385a52fd960fd28db9d7d18b4c2974f SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d @@ -705,6 +704,6 @@ SPEC CHECKSUMS: TouchID: ba4c656d849cceabc2e4eef722dea5e55959ecf4 Yoga: 4bd86afe9883422a7c4028c00e34790f560923d6 -PODFILE CHECKSUM: 1a5b8878f89edd08eb4d37898a3a8721a7bb3388 +PODFILE CHECKSUM: a1de9468266e7f0b5273acea713782ab759690f1 -COCOAPODS: 1.11.0 +COCOAPODS: 1.11.3 diff --git a/resources/images/icons/emojis@2x.png b/resources/images/icons/emojis@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..021fb6218a24dbf14aad8f0493322309ec98c3b6 GIT binary patch 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+ literal 0 HcmV?d00001 diff --git a/resources/images/icons/emojis@3x.png b/resources/images/icons/emojis@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..0847aaf3150aac25a66c9b9c34d8fb3bd9c7903c GIT binary patch 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 literal 0 HcmV?d00001 diff --git a/resources/images/icons/qr2@3x.png b/resources/images/icons/qr2@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..c90bf31918eb64b3f2a116463897e4bbfe18ddc8 GIT binary patch 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 literal 0 HcmV?d00001 diff --git a/resources/images/icons/scan2@2x.png b/resources/images/icons/scan2@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..a6e9105e043d2ba67ada363647764cc5422d5562 GIT binary patch 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} literal 0 HcmV?d00001 diff --git a/resources/images/icons/scan2@3x.png b/resources/images/icons/scan2@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..7d666a00104f08b83377fc09cdf66aa7c0430df4 GIT binary patch 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 literal 0 HcmV?d00001 diff --git a/resources/images/icons/scan@2x.png b/resources/images/icons/scan@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..f15a22cd902730f8779c0df79f2b8e5c98c7724c GIT binary patch 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? literal 0 HcmV?d00001 diff --git a/resources/images/icons/search2@2x.png b/resources/images/icons/search2@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..5bf3dbfd94666ef027c9f67c981b01eb90da2dcc GIT binary patch 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{ literal 0 HcmV?d00001 diff --git a/resources/images/icons/tiny_group2@2x.png b/resources/images/icons/tiny_group2@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..b00fcb767e0478c25cd39157a35a64473154d4ee GIT binary patch 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 literal 0 HcmV?d00001 diff --git a/resources/images/icons/tiny_group2@3x.png b/resources/images/icons/tiny_group2@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..883657d87e199245a05a7c1be10587e3b9276d86 GIT binary patch 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]}] @@ -38,4 +82,4 @@ (let [^js native-event (.-nativeEvent ^js e) text (.-text native-event)] (when on-change - (on-change text))))}]))) + (on-change text))))}]))) \ No newline at end of file diff --git a/src/status_im/ui/components/topbar.cljs b/src/status_im/ui/components/topbar.cljs index 5ca8bdd975..4f290872da 100644 --- a/src/status_im/ui/components/topbar.cljs +++ b/src/status_im/ui/components/topbar.cljs @@ -1,6 +1,7 @@ (ns status-im.ui.components.topbar (:require [re-frame.core :as re-frame] - [quo.core :as quo])) + [quo.core :as quo] + [quo2.foundations.colors :as quo2.colors])) (def default-button-width 48) @@ -20,7 +21,9 @@ label (assoc :label label))) -(defn topbar [{:keys [navigation use-insets right-accessories modal? content] +(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} :as props}] (let [navigation (if (= navigation :none) nil @@ -31,7 +34,10 @@ :title-component content :insets (when use-insets insets) :left-width (when navigation - default-button-width)} + default-button-width) + :border-bottom border-bottom?} props (when (seq right-accessories) - {:right-accessories right-accessories}))])])) + {:right-accessories right-accessories}) + (when new-ui? + {:background (quo2.colors/theme-colors quo2.colors/white quo2.colors/divider-dark)}))])])) diff --git a/src/status_im/ui/screens/browser/tabs/views.cljs b/src/status_im/ui/screens/browser/tabs/views.cljs index 9b83827e77..b4e2888fda 100644 --- a/src/status_im/ui/screens/browser/tabs/views.cljs +++ b/src/status_im/ui/screens/browser/tabs/views.cljs @@ -71,5 +71,5 @@ :key-fn :browser-id :render-fn list-item}] - [components.plus-button/plus-button + [components.plus-button/plus-button-old {:on-press #(re-frame/dispatch [:browser.ui/open-empty-tab])}]])) \ No newline at end of file diff --git a/src/status_im/ui/screens/chat/message/audio.cljs b/src/status_im/ui/screens/chat/message/audio.cljs index 286cf39988..46b8658edf 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 outgoing on-press] - (let [color (if outgoing colors/blue colors/white-persist)] +(defn- play-pause-button [state-ref on-press] + (let [color colors/blue] (if (= (:general @state-ref) :preparing) - [react/view {:style (style/play-pause-container outgoing true)} + [react/view {:style (style/play-pause-container 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) + {:container-style (style/play-pause-container 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 outgoing]}] +(defview message-content [{:keys [audio audio-duration-ms message-id]}] (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 outgoing #(play-pause base-params audio)] + [play-pause-button state #(play-pause base-params audio)] [react/view style/slider-container - [slider/animated-slider (merge (style/slider outgoing) + [slider/animated-slider (merge (style/slider) {: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 outgoing)} + [react/text {:style (style/timestamp)} (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 new file mode 100644 index 0000000000..a0612a5762 --- /dev/null +++ b/src/status_im/ui/screens/chat/message/audio_old.cljs @@ -0,0 +1,238 @@ +(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 f919e863b9..ca13a92888 100644 --- a/src/status_im/ui/screens/chat/message/datemark.cljs +++ b/src/status_im/ui/screens/chat/message/datemark.cljs @@ -1,12 +1,17 @@ (ns status-im.ui.screens.chat.message.datemark (:require [status-im.ui.components.react :as react] [clojure.string :as string] - [status-im.ui.screens.chat.styles.message.datemark :as style])) + [status-im.ui.screens.chat.styles.message.datemark :as style] + [quo2.components.text :as quo2.text] + [quo2.foundations.colors :as quo2.colors])) (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)]]]) + [quo2.text/text {:weight :medium + :accessibility-label :message-datemark-text + :style {:color quo2.colors/neutral-50}} + (string/capitalize value)] + [react/view (style/divider)]]]) diff --git a/src/status_im/ui/screens/chat/message/datemark_old.cljs b/src/status_im/ui/screens/chat/message/datemark_old.cljs new file mode 100644 index 0000000000..4d8e206897 --- /dev/null +++ b/src/status_im/ui/screens/chat/message/datemark_old.cljs @@ -0,0 +1,12 @@ +(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 82b46ea4eb..9f54bd984f 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 (and outgoing (not pinned)))} edited-at-text])])) + (when edited-at [react/text {:style (style/message-status-text)} edited-at-text])])) (defn message-timestamp - [{:keys [timestamp-str in-popover?] :as message} show-timestamp?] + [{:keys [timestamp-str in-popover?]} 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} + [react/animated-view {:style (style/message-timestamp-wrapper) :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]} outgoing current-public-key public? pinned] + [_ {:keys [from parsed-text image]} 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-container)} [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))]] + (partial style/quoted-message-author (not pinned)) + false]] (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 (and outgoing (not pinned))) + [react/text {:style (style/quoted-message-text) :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]}] +(defn render-inline [message-text 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 (and outgoing (not pinned))) literal]) + (conj acc [react/text-class (style/emph-style) literal]) "strong" - (conj acc [react/text-class (style/strong-style (and outgoing (not pinned))) literal]) + (conj acc [react/text-class (style/strong-style) literal]) "strong-emph" - (conj acc [quo/text (style/strong-emph-style (and outgoing (not pinned))) literal]) + (conj acc [quo/text (style/strong-emph-style) literal]) "del" - (conj acc [react/text-class (style/strikethrough-style (and outgoing (not pinned))) literal]) + (conj acc [react/text-class (style/strikethrough-style) literal]) "link" (conj acc [react/text-class {:style - {:color (if (and outgoing (not pinned)) colors/white-persist colors/blue) + {:color colors/blue :text-decoration-line :underline} :on-press #(when (and (security/safe-link? destination) @@ -149,14 +149,13 @@ (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) + {:style {:color colors/blue :text-decoration-line :underline} :on-press #(re-frame/dispatch @@ -166,19 +165,19 @@ (conj acc literal))) -(defn render-block [{:keys [content outgoing content-type pinned in-popover?]} acc +(defn render-block [{:keys [content content-type 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?)] + (fn [acc e] (render-inline (:text content) content-type acc e)) + [react/text-class (style/text-style 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))) + (conj acc [react/view (style/blockquote-style) + [react/text-class (style/blockquote-text-style) (.substring literal 0 (.-length literal))]]) "codeblock" @@ -193,10 +192,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 [outgoing edited-at in-popover?] :as message} tree] +(defn render-parsed-text-with-message-status [{:keys [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))] + (str (if (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 @@ -208,10 +207,10 @@ (conj elements message-status)))) (defn unknown-content-type - [{:keys [outgoing content-type content] :as message}] + [{:keys [content-type content] :as message}] [react/view (style/message-view message) [react/text - {:style {:color (if outgoing colors/white-persist colors/black)}} + {:style {:color colors/white-persist}} (if (seq (:text content)) (:text content) (str "Unhandled content-type " content-type))]]) @@ -242,8 +241,8 @@ (def pin-icon-height 15) -(defn pinned-by-indicator [outgoing display-photo? pinned-by] - [react/view {:style (style/pin-indicator outgoing display-photo?) +(defn pinned-by-indicator [display-photo? pinned-by] + [react/view {:style (style/pin-indicator display-photo?) :accessibility-label :pinned-by} [react/view {:style (style/pinned-by-text-icon-container)} [react/view {:style (style/pin-icon-container)} @@ -309,33 +308,40 @@ (defn message-content-wrapper "Author, userpic and delivery wrapper" - [{:keys [first-in-group? display-photo? display-username? + [{:keys [last-in-group? identicon - from outgoing in-popover?] + from in-popover? timestamp-str] :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) + [react/view {:style (style/message-body) :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}]]) + [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 :align-items :center}} + [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 + :margin-top 2} + (style/message-timestamp-text)) + :accessibility-label :message-timestamp} + timestamp-str]]) ;;MESSAGE CONTENT content - [link-preview/link-preview-wrapper (:links (:content message)) outgoing false]]] + [link-preview/link-preview-wrapper (:links (:content message)) false false]]] ; delivery status - [react/view (style/delivery-status outgoing) + [react/view (style/delivery-status) [message-delivery-status message]]]) (def image-max-width 260) @@ -353,13 +359,13 @@ (swap! dimensions assoc :loaded true))))) (defn message-content-image - [{:keys [content outgoing in-popover?] :as message} + [{:keys [content 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 + (let [style-opts {:outgoing false :opacity (if (:loaded @dimensions) 1 0) :width (:width @dimensions) :height (:height @dimensions)}] @@ -405,9 +411,6 @@ [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)) @@ -443,62 +446,31 @@ :label (i18n/label :t/delete) :id :delete}])))) -(defn collapsible-text-message [{:keys [mentioned]} _] +(defn collapsible-text-message [_ _] (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}]]]))]]]])))) + (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)]])]]]]))) (defmethod ->message constants/content-type-text [message {:keys [on-long-press modal] :as reaction-picker}] @@ -511,12 +483,12 @@ [community-content message]) (defmethod ->message constants/content-type-status - [{:keys [content content-type pinned] :as message}] + [{:keys [content content-type] :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)) + (fn [acc e] (render-inline (:text content) content-type acc e)) [react/text-class {:style (style/status-text)}] (-> content :parsed-text peek :children))]]]) @@ -544,11 +516,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 outgoing) + [react/view style/message-view-wrapper [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)} + [react/view {:style (style/style-message-text)} (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)} @@ -624,7 +596,7 @@ []))) :on-press (fn [] (reset! show-timestamp? true))}) - [react/view (style/message-view-wrapper (:outgoing message)) + [react/view style/message-view-wrapper [message-timestamp message show-timestamp?] [react/view {:style (style/message-view message) :accessibility-label :audio-message} [react/view {:style (style/message-view-content)} @@ -659,8 +631,8 @@ 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)} + [message _] + [react/view {:style (style/content-type-contact-request)} [react/image {:source (resources/get-image :hand-wave) :style {:width 112 :height 97}}] @@ -678,7 +650,7 @@ [message-content-wrapper message [unknown-content-type message]]) -(defn chat-message [{:keys [outgoing display-photo? pinned pinned-by] :as message} space-keeper] +(defn chat-message [{:keys [display-photo? pinned pinned-by] :as message} space-keeper] [:<> [reactions/with-reaction-picker {:message message @@ -698,5 +670,5 @@ :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]])]) + [react/view {:style (style/pin-indicator-container)} + [pinned-by-indicator 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 new file mode 100644 index 0000000000..feab2f7ae8 --- /dev/null +++ b/src/status_im/ui/screens/chat/message/message_old.cljs @@ -0,0 +1,702 @@ +(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-old contact-with-names opts))) + +(defview message-my-name [opts] + (letsubs [contact-with-names [:multiaccount/contact]] + (chat.utils/format-author-old 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 c412fba853..0ac0505dd3 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) - outgoing - (update :style assoc :color colors/white-persist))) + assoc :text-decoration-line :line-through))) (def code-block-background "#2E386B") @@ -366,10 +321,8 @@ assoc :border-left-color colors/white-transparent-70-persist)) -(defn blockquote-style [outgoing] - (if outgoing - (outgoing-blockquote-style) - (default-blockquote-style))) +(defn blockquote-style [] + (default-blockquote-style)) (defn default-blockquote-text-style [] (update (default-text-style) :style @@ -383,20 +336,16 @@ assoc :color colors/white-transparent-70-persist)) -(defn blockquote-text-style [outgoing] - (if outgoing - (outgoing-blockquote-text-style) - (default-blockquote-text-style))) +(defn blockquote-text-style [] + (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}) + [{:keys [width height]}] + {:overflow :hidden + :border-radius 8 + :width width + :height height}) (defn image-message-border [opts] (merge (image-message opts) @@ -453,7 +402,7 @@ :padding-vertical 10 :padding-horizontal 16}) -(defn content-type-contact-request [outgoing] +(defn content-type-contact-request [] {:width 168 :min-height 224.71 :border-radius 8 @@ -462,6 +411,6 @@ :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)}) + :align-self :flex-start + :margin-right 0 + :margin-left 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 new file mode 100644 index 0000000000..5d1e9a0988 --- /dev/null +++ b/src/status_im/ui/screens/chat/styles/message/message_old.cljs @@ -0,0 +1,467 @@ +(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 10c7cf9acc..e3b45aeeec 100644 --- a/src/status_im/ui/screens/chat/utils.cljs +++ b/src/status_im/ui/screens/chat/utils.cljs @@ -7,8 +7,8 @@ (def ^:private reply-symbol "↪ ") -(defn format-author - ([contact] (format-author contact nil)) +(defn format-author-old + ([contact] (format-author-old contact nil)) ([{:keys [names] :as contact} {:keys [modal profile? you?]}] (let [{:keys [nickname ens-name]} names [first-name second-name] (multiaccounts/contact-two-names contact false)] @@ -31,6 +31,32 @@ :font-weight "400"}} first-name])))) +(defn format-author + ([contact] (format-author contact nil)) + ([{:keys [names] :as contact} {:keys [modal profile? you?]}] + (let [{:keys [nickname ens-name]} names + [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) + :font-size (if profile? 15 13) + :line-height (if profile? 22 18) + :letter-spacing -0.2 + :font-weight "600"}} + (subs first-name 0 81) + (when you? + [{:style {:color colors/black-light :font-weight "500" :font-size 13}} + (str " " (i18n/label :t/You))]) + (when nickname + [{:style {:color colors/black-light :font-weight "500"}} + (str " " (subs second-name 0 81))])] + [react/text {:style {:color (if modal colors/white-persist colors/black) + :font-size (if profile? 15 13) + :line-height (if profile? 22 18) + :font-weight "600" + :letter-spacing -0.2}} + first-name])))) + (defn format-reply-author [from username current-public-key style outgoing] (let [contact-name (str reply-symbol username)] (or (and (= from current-public-key) diff --git a/src/status_im/ui/screens/chat/views.cljs b/src/status_im/ui/screens/chat/views.cljs index 420f6d1708..b074ffa70a 100644 --- a/src/status_im/ui/screens/chat/views.cljs +++ b/src/status_im/ui/screens/chat/views.cljs @@ -16,6 +16,7 @@ [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] @@ -27,6 +28,7 @@ [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] @@ -37,7 +39,10 @@ [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.react-native.resources :as resources] + [status-im.ui.components.topbar :as topbar] + [quo2.foundations.colors :as quo2.colors] + [quo2.components.button :as quo2.button])) (defn invitation-requests [chat-id admins] (let [current-pk @(re-frame/subscribe [:multiaccount/public-key]) @@ -53,6 +58,18 @@ (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 @@ -286,6 +303,29 @@ [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 _ @@ -342,6 +382,57 @@ :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 @@ -393,13 +484,29 @@ :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/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]])) + [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]]])) (defn navigate-back-handler [] (when (and (not @navigation.state/curr-modal) (= (get @re-frame.db/app-db :view-id) :chat)) @@ -407,7 +514,15 @@ (re-frame/dispatch [:close-chat]) (re-frame/dispatch [:navigate-back]))) -(defn topbar [] +(defn topbar-content-old [] + (let [window-width @(re-frame/subscribe [:dimensions/window-width]) + {:keys [group-chat chat-id] :as chat-info} @(re-frame/subscribe [:chats/current-chat])] + [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 topbar-old [] ;;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 @@ -416,7 +531,7 @@ :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]] + [topbar-content-old]] [react/touchable-highlight {:on-press-in #(re-frame/dispatch [:bottom-sheet/show-sheet {:content (fn [] [sheets/current-chat-actions]) @@ -427,6 +542,64 @@ :padding-right 16}} [icons/icon :main-icons/more {:color colors/black}]]]) +(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-old] + [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 chat-render [] (let [bottom-space (reagent/atom 0) panel-space (reagent/atom 52) @@ -446,7 +619,15 @@ mutual-contact-requests-enabled? @(re-frame/subscribe [:mutual-contact-requests/enabled?]) max-bottom-space (max @bottom-space @panel-space)] [:<> - [topbar] + ;; 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}] [connectivity/loading-indicator] (when chat-id (if group-chat @@ -485,6 +666,14 @@ [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 4447b44ff7..2a92048237 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 + [inner-item/home-list-item-old ;; We want communities to behave as public chats when it comes to ;; unread indicator (assoc home-item :public? true) @@ -271,7 +271,7 @@ [community-chat-list id categories false from-chat] [community-channel-preview-list id chats]) (when admin - [components.plus-button/plus-button + [components.plus-button/plus-button-old {:on-press #(>evt [:bottom-sheet/show-sheet {:content (fn [] [community-plus-actions community])}]) diff --git a/src/status_im/ui/screens/communities/create_category.cljs b/src/status_im/ui/screens/communities/create_category.cljs index f1538915e6..937ecc6cd1 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 + [inner-item/home-list-item-old (assoc home-item :public? true) {:on-press on-change}]]])) diff --git a/src/status_im/ui/screens/communities/members.cljs b/src/status_im/ui/screens/communities/members.cljs index 371daa4121..d4f2e235f5 100644 --- a/src/status_im/ui/screens/communities/members.cljs +++ b/src/status_im/ui/screens/communities/members.cljs @@ -51,7 +51,7 @@ {:title first-name :subtitle second-name :accessibility-label :member-item - :icon [chat-icon/profile-photo-plus-dot-view + :icon [chat-icon/profile-photo-plus-dot-view-old {:public-key public-key :photo-path (multiaccounts/displayed-photo member)}] :accessory (when (not= public-key my-public-key) diff --git a/src/status_im/ui/screens/communities/reorder_categories.cljs b/src/status_im/ui/screens/communities/reorder_categories.cljs index 1d89387cad..db847a135c 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 (assoc home-item :edit? true) {:active-opacity 1}]] + [inner-item/home-list-item-old (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/contacts_list/views.cljs b/src/status_im/ui/screens/contacts_list/views.cljs index 3b68804f5f..1851f4eadc 100644 --- a/src/status_im/ui/screens/contacts_list/views.cljs +++ b/src/status_im/ui/screens/contacts_list/views.cljs @@ -15,7 +15,7 @@ [quo/list-item {:title first-name :subtitle second-name - :icon [chat-icon.screen/profile-photo-plus-dot-view + :icon [chat-icon.screen/profile-photo-plus-dot-view-old {:public-key public-key :photo-path (multiaccounts/displayed-photo contact)}] :chevron true diff --git a/src/status_im/ui/screens/currency_settings/views.cljs b/src/status_im/ui/screens/currency_settings/views.cljs index 3c85dc742a..67148a7038 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 + [search-input/search-input-old {: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 b8e6469f0b..e983bf22d0 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 :as message] + [status-im.ui.screens.chat.message.message-old :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] @@ -639,10 +639,10 @@ (views/defview my-name [] (views/letsubs [contact-name [:multiaccount/preferred-name]] (when-not (string/blank? contact-name) - (chat.utils/format-author {:names {:ens-name - (str "@" - (or (stateofus/username contact-name) - contact-name))}})))) + (chat.utils/format-author-old {:names {:ens-name + (str "@" + (or (stateofus/username contact-name) + contact-name))}})))) (views/defview registered [names {:keys [preferred-name] :as account} _ registrations] [react/view {:style {:flex 1}} diff --git a/src/status_im/ui/screens/group/views.cljs b/src/status_im/ui/screens/group/views.cljs index acdbc65258..fc8b7dab89 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 {:on-cancel #(reset! search-value nil) - :on-change #(reset! search-value %)}]] + [search/search-input-old {: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 dd35a4e233..8d298931af 100644 --- a/src/status_im/ui/screens/home/styles.cljs +++ b/src/status_im/ui/screens/home/styles.cljs @@ -9,11 +9,10 @@ (def public-unread {:background-color colors/blue - :border-radius 6 - :margin-right 5 - :margin-bottom 5 - :width 12 - :height 12}) + :border-radius 5 + :margin-right 16 + :width 10 + :height 10}) (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 b0dd4eea18..b03b7744ad 100644 --- a/src/status_im/ui/screens/home/views.cljs +++ b/src/status_im/ui/screens/home/views.cljs @@ -18,13 +18,18 @@ [status-im.add-new.db :as db] [status-im.utils.debounce :as debounce] [status-im.utils.utils :as utils] - [quo.components.safe-area :as safe-area] [status-im.ui.components.topbar :as topbar] [status-im.ui.components.plus-button :as components.plus-button] [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]) + [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]) (:require-macros [status-im.utils.views :as views])) (defn home-tooltip-view [] @@ -71,6 +76,26 @@ (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]) @@ -114,6 +139,23 @@ [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))) @@ -145,6 +187,31 @@ [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?]] [:<> @@ -154,6 +221,15 @@ [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 @@ -162,7 +238,33 @@ :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 @@ -179,19 +281,57 @@ [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 [] - [safe-area/consumer - (fn [insets] - [react/keyboard-avoiding-view {:style {:flex 1 :padding-top (:top insets)} - :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]]}] - [chats-list] - [plus-button] - [tabbar/tabs-counts-subscriptions]])]) + [react/keyboard-avoiding-view {:style {:flex 1 :background-color (quo2.colors/theme-colors quo2.colors/neutral-5 quo2.colors/switcher-background)} + :ignore-offset true} + [topbar/topbar {:navigation :none + :use-insets true + :background (quo2.colors/theme-colors quo2.colors/neutral-5 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} (i18n/label :t/messages)] + [plus-button]] + [chats-list] + [tabbar/tabs-counts-subscriptions]]) (defn home-old [] [react/keyboard-avoiding-view {:style {:flex 1} @@ -200,7 +340,7 @@ :navigation :none :right-component [react/view {:flex-direction :row :margin-right 16} [connectivity/connectivity-button] - [notifications-button]]}] - [chats-list] - [plus-button] - [tabbar/tabs-counts-subscriptions]]) + [notifications-button-old]]}] + [chats-list-old] + [plus-button-old] + [tabbar/tabs-counts-subscriptions]]) \ No newline at end of file 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 a5eb011d21..fd7fd890b8 100644 --- a/src/status_im/ui/screens/home/views/inner_item.cljs +++ b/src/status_im/ui/screens/home/views/inner_item.cljs @@ -12,7 +12,10 @@ [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])) + [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])) (defn preview-label [label-key label-fn] [react/text {:style styles/last-message-text @@ -116,6 +119,22 @@ (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 @@ -151,6 +170,23 @@ [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 @@ -168,12 +204,62 @@ (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)}} + (i18n/label :t/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 chat-id group-chat chat-name emoji + [chat-icon.screen/emoji-chat-icon-view-old chat-id group-chat chat-name emoji {:container (assoc chat-icon.styles/container-chat-list :top 12 :left 16 :position :absolute) :size 40 @@ -182,7 +268,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 chat-id muted group-chat chat-name edit?] + [chat-item-title-old chat-id muted group-chat chat-name edit?] (when-not edit? [:<> [react/text {:style styles/datetime-text @@ -192,5 +278,5 @@ (memo-timestamp (if (pos? (:whisper-timestamp last-message)) (:whisper-timestamp last-message) timestamp))] - [unviewed-indicator home-item]]) - [message-content-text (select-keys last-message [:content :content-type :community-id]) true]]])) + [unviewed-indicator-old home-item]]) + [message-content-text (select-keys last-message [:content :content-type :community-id]) true]]])) \ No newline at end of file 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 3fbfde88f4..4795e1a974 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 :as message] + [status-im.ui.screens.chat.message.message-old :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]) @@ -109,7 +109,7 @@ :content-type constants/content-type-text}] [react/view {:margin-bottom 8 :margin-right 16} [react/view {:padding-left 72} - (chat.utils/format-author contact)] + (chat.utils/format-author-old contact)] [react/view {:flex-direction :row :align-items :flex-end} [react/view {:padding-left 16 :padding-top 4} [photos/photo (multiaccounts/displayed-photo contact) {:size 36}]] 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 4143286087..7beb4b4df1 100644 --- a/src/status_im/ui/screens/profile/visibility_status/styles.cljs +++ b/src/status_im/ui/screens/profile/visibility_status/styles.cljs @@ -1,5 +1,6 @@ (ns status-im.ui.screens.profile.visibility-status.styles - (:require [quo.design-system.colors :as colors])) + (:require [quo.design-system.colors :as colors] + [quo2.foundations.colors :as quo2.colors])) (defn visibility-status-button-container [] {:background-color (:interactive-02 @colors/theme) @@ -14,6 +15,14 @@ :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 @@ -21,8 +30,8 @@ :border-width 1 :border-color colors/white}) -(defn visibility-status-profile-dot [color size border-width margin-left] - (merge (visibility-status-dot color size) +(defn visibility-status-profile-dot-old [color size border-width margin-left] + (merge (visibility-status-dot-old color size) {:margin-right 6 :margin-left margin-left :border-width border-width})) 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 db1abbc79e..3cc0415544 100644 --- a/src/status_im/ui/screens/profile/visibility_status/utils.cljs +++ b/src/status_im/ui/screens/profile/visibility_status/utils.cljs @@ -5,7 +5,8 @@ [status-im.utils.handlers :refer [ (when automatic? - [rn/view {:style (styles/visibility-status-profile-dot + [rn/view {:style (styles/visibility-status-profile-dot-old colors/color-inactive size border-width 6)}]) - [rn/view {:style (styles/visibility-status-profile-dot + [rn/view {:style (styles/visibility-status-profile-dot-old color size border-width margin-left)}]])) (defn visibility-status-button [on-press props] @@ -50,7 +50,7 @@ constants/visibility-status-automatic) constants/visibility-status-automatic) status-type) - {:keys [color title]} (get utils/visibility-status-type-data status-type)] + {:keys [color title]} (get utils/visibility-status-type-data-old status-type)] [rn/touchable-opacity (merge {:on-press on-press @@ -97,7 +97,7 @@ (defn status-option [{:keys [request-close status-type]}] (let [{:keys [color title subtitle]} - (get utils/visibility-status-type-data status-type)] + (get utils/visibility-status-type-data-old status-type)] [rn/touchable-opacity {:style {:padding 6} :accessibility-label :visibility-status-option :on-press #(status-option-pressed diff --git a/src/status_im/ui/screens/screens.cljs b/src/status_im/ui/screens/screens.cljs index 613f26d7ae..b332b2350a 100644 --- a/src/status_im/ui/screens/screens.cljs +++ b/src/status_im/ui/screens/screens.cljs @@ -224,7 +224,7 @@ :hardwareBackButton {:dismissModalOnPress false :popStackOnPress false} :topBar {:visible false}} - :component chat/chat} + :component chat/chat-old} ;Pinned messages {:name :chat-pinned-messages diff --git a/src/status_im/ui/screens/status/views.cljs b/src/status_im/ui/screens/status/views.cljs index daddba0f17..9f8a345be6 100644 --- a/src/status_im/ui/screens/status/views.cljs +++ b/src/status_im/ui/screens/status/views.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.screens.status.views - (:require [status-im.ui.screens.chat.message.message :as message] + (:require [status-im.ui.screens.chat.message.message-old :as message] [status-im.ui.components.react :as react] [quo.design-system.colors :as colors] [status-im.utils.datetime :as datetime] @@ -210,5 +210,5 @@ :on-scroll-to-index-failed #() :header [react/view {:height 8}] :footer [react/view {:height 68}]}])) - [components.plus-button/plus-button + [components.plus-button/plus-button-old {:on-press #(re-frame/dispatch [:open-modal :my-status])}]])) diff --git a/src/status_im/ui/screens/wallet/recipient/views.cljs b/src/status_im/ui/screens/wallet/recipient/views.cljs index b7f2a046bf..ad5ae91b67 100644 --- a/src/status_im/ui/screens/wallet/recipient/views.cljs +++ b/src/status_im/ui/screens/wallet/recipient/views.cljs @@ -43,7 +43,7 @@ (let [search-filter @(re-frame/subscribe [:search/recipient-filter])] [react/view {:padding-horizontal 16 :padding-vertical 10} - [search-input/search-input + [search-input/search-input-old {:search-active? search-active? :search-filter search-filter :on-cancel #(re-frame/dispatch [:search/recipient-filter-changed nil]) diff --git a/src/status_im/ui/screens/wallet/settings/views.cljs b/src/status_im/ui/screens/wallet/settings/views.cljs index 5f1a8ee0b8..010e28175c 100644 --- a/src/status_im/ui/screens/wallet/settings/views.cljs +++ b/src/status_im/ui/screens/wallet/settings/views.cljs @@ -80,7 +80,7 @@ [react/view {:flex 1} [react/view {:padding-horizontal 16 :padding-vertical 10} - [search-input/search-input + [search-input/search-input-old {:search-active? search-active? :search-filter search-filter :on-cancel #(re-frame/dispatch [:search/token-filter-changed nil]) diff --git a/src/status_im/ui/screens/wallet/swap/views.cljs b/src/status_im/ui/screens/wallet/swap/views.cljs index ff7149e380..b523f29d23 100644 --- a/src/status_im/ui/screens/wallet/swap/views.cljs +++ b/src/status_im/ui/screens/wallet/swap/views.cljs @@ -55,7 +55,7 @@ (i18n/label :t/select-token-to-receive)) :modal? true}] - [search-input/search-input + [search-input/search-input-old {:search-active? true}] [react/scroll-view diff --git a/translations/en.json b/translations/en.json index cc57582d36..1e8f0aeb2e 100644 --- a/translations/en.json +++ b/translations/en.json @@ -1756,5 +1756,6 @@ "mutual-contact-requests": "Mutual contact requests", "pending": "Pending", "negative": "Negative", - "positive": "Positive" + "positive": "Positive", + "public": "Public" }