From 36fe4bf37f91ea5c68116a48924c43371e0b8f4a Mon Sep 17 00:00:00 2001 From: Marcos Hernandez Date: Wed, 10 Apr 2024 19:36:22 -0700 Subject: [PATCH] [updated preview card]\n[updated preview and content card emojis/reactions] --- package-lock.json | 39 ++++++++++++++++ package.json | 3 ++ src/components/ContentCard/ContentCard.tsx | 31 +++++++------ src/components/ContentCard/styles.ts | 22 ++++++--- src/components/PreviewCard/PreviewCard.tsx | 42 +++++++++++++++--- .../PreviewCard/savedStoriesIcon.png | Bin 0 -> 1052 bytes src/components/PreviewCard/styles.ts | 30 +++++++++++-- 7 files changed, 138 insertions(+), 29 deletions(-) create mode 100644 src/components/PreviewCard/savedStoriesIcon.png diff --git a/package-lock.json b/package-lock.json index ca07deb9..f83fb7da 100644 --- a/package-lock.json +++ b/package-lock.json @@ -38,10 +38,13 @@ "expo-status-bar": "~1.6.0", "html-entities": "^2.4.0", "react": "18.2.0", + "react-apple-emojis": "^2.2.1", "react-native": "0.72.10", "react-native-dom-parser": "^1.5.3", "react-native-element-dropdown": "^2.10.0", "react-native-elements": "^3.4.3", + "react-native-emoji": "^1.8.0", + "react-native-emojicon": "^1.0.0", "react-native-gesture-handler": "~2.12.0", "react-native-htmlview": "^0.16.0", "react-native-ionicons": "^4.6.5", @@ -14217,6 +14220,11 @@ "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz", "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==" }, + "node_modules/lodash.toarray": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/lodash.toarray/-/lodash.toarray-4.4.0.tgz", + "integrity": "sha512-QyffEA3i5dma5q2490+SgCvDN0pXLmRGSyAANuVi0HQ01Pkfr9fuoKQW8wm1wGBnJITs/mS7wQvS6VshUEBFCw==" + }, "node_modules/log-symbols": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz", @@ -15502,6 +15510,14 @@ "node": ">=10.5.0" } }, + "node_modules/node-emoji": { + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.10.0.tgz", + "integrity": "sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==", + "dependencies": { + "lodash.toarray": "^4.4.0" + } + }, "node_modules/node-fetch": { "version": "2.7.0", "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz", @@ -16664,6 +16680,16 @@ "node": ">=0.10.0" } }, + "node_modules/react-apple-emojis": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/react-apple-emojis/-/react-apple-emojis-2.2.1.tgz", + "integrity": "sha512-tgq/+GUR6WsBkkkl0EYgVbaU803IF8GoELcG83cfircrEiyiiIbHqpBXIHyD8YIOecAGgN2ucEG6U/REDR7jvQ==", + "peerDependencies": { + "prop-types": "*", + "react": ">=16.x", + "react-dom": ">=16.x" + } + }, "node_modules/react-devtools-core": { "version": "4.28.0", "resolved": "https://registry.npmjs.org/react-devtools-core/-/react-devtools-core-4.28.0.tgz", @@ -16853,6 +16879,19 @@ "react-native-vector-icons": ">7.0.0" } }, + "node_modules/react-native-emoji": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/react-native-emoji/-/react-native-emoji-1.8.0.tgz", + "integrity": "sha512-VunKOtYes6eymyWwE7QS3mhmNXksTt2AN92PcGRtmDKLDPjuKrwd5tcJckFUekAK3H+6AMpwYy30CsiCJrDdFQ==", + "dependencies": { + "node-emoji": "1.10.0" + } + }, + "node_modules/react-native-emojicon": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/react-native-emojicon/-/react-native-emojicon-1.0.0.tgz", + "integrity": "sha512-rK6/7EIf/yNgkB24ujpV8zmmZylbQV+oq4F7YopZ9aSfNKmVKKFmqGOPahPo6OW8b1Dg5dm8caybgfpM2GP4Nw==" + }, "node_modules/react-native-gesture-handler": { "version": "2.12.1", "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.12.1.tgz", diff --git a/package.json b/package.json index 7ba5f154..ed0b39df 100644 --- a/package.json +++ b/package.json @@ -42,10 +42,13 @@ "expo-status-bar": "~1.6.0", "html-entities": "^2.4.0", "react": "18.2.0", + "react-apple-emojis": "^2.2.1", "react-native": "0.72.10", "react-native-dom-parser": "^1.5.3", "react-native-element-dropdown": "^2.10.0", "react-native-elements": "^3.4.3", + "react-native-emoji": "^1.8.0", + "react-native-emojicon": "^1.0.0", "react-native-gesture-handler": "~2.12.0", "react-native-htmlview": "^0.16.0", "react-native-ionicons": "^4.6.5", diff --git a/src/components/ContentCard/ContentCard.tsx b/src/components/ContentCard/ContentCard.tsx index 4301cb9f..6232591b 100644 --- a/src/components/ContentCard/ContentCard.tsx +++ b/src/components/ContentCard/ContentCard.tsx @@ -9,6 +9,7 @@ import { import styles from './styles'; import globalStyles from '../../styles/globalStyles'; +import Emoji from 'react-native-emoji'; type ContentCardProps = { title: string; @@ -63,18 +64,22 @@ function ContentCard({ onPress={() => null} style={{ flexDirection: 'row' }} > - - - + + + + + + + + + + {/* heart, clap, muscle, cry, ??? */} 14{/*change number to work*/} @@ -84,7 +89,7 @@ function ContentCard({ saveStory()}> diff --git a/src/components/ContentCard/styles.ts b/src/components/ContentCard/styles.ts index d4458704..ad4a5aa2 100644 --- a/src/components/ContentCard/styles.ts +++ b/src/components/ContentCard/styles.ts @@ -50,18 +50,26 @@ const styles = StyleSheet.create({ color: colors.grey, }, reactionNumber: { - marginLeft: 15, - marginTop: 10, + marginLeft: 10, + marginTop: 16, }, reactions: { - width: 20, - height: 20, - borderRadius: 20 / 2, + width: 30, + height: 30, + borderRadius: 30 / 2, borderWidth: 1, - backgroundColor: '#89CFF0', //different per emoji reaction + backgroundColor: 'transparent', //different per emoji reaction borderColor: 'white', marginTop: 10, - marginRight: -10, + marginRight: -5, // -10 + overflow: 'hidden', + justifyContent: 'center', + paddingLeft: 3, + }, + saveStoryImage: { + width: 30, + height: 30, + marginTop: 10, }, buttons: { flexDirection: 'row', diff --git a/src/components/PreviewCard/PreviewCard.tsx b/src/components/PreviewCard/PreviewCard.tsx index 8272b57b..6b1c9272 100644 --- a/src/components/PreviewCard/PreviewCard.tsx +++ b/src/components/PreviewCard/PreviewCard.tsx @@ -4,8 +4,10 @@ import { Image, Pressable, Text, + TouchableOpacity, View, } from 'react-native'; +import Emoji from 'react-native-emoji'; import styles from './styles'; import globalStyles from '../../styles/globalStyles'; @@ -32,6 +34,10 @@ function PreviewCard({ tags, pressFunction, }: PreviewCardProps) { + const saveStory = () => { + console.log("testing '+' icon does something for story " + title); + }; + return ( @@ -39,11 +45,17 @@ function PreviewCard({ {title} + saveStory()}> + + @@ -64,6 +76,28 @@ function PreviewCard({ + + null} + style={{ flexDirection: 'row' }} + > + + + + + + + + + + {/* heart, clap, muscle, cry, ??? */} + + + 14{/*change number to work*/} + + + + {(tags?.length ?? 0) > 0 && ( @@ -72,12 +106,10 @@ function PreviewCard({ )} - - - + {' '} - + {(tags?.length ?? 1) - 1} more tags + + {(tags?.length ?? 1) - 1} diff --git a/src/components/PreviewCard/savedStoriesIcon.png b/src/components/PreviewCard/savedStoriesIcon.png new file mode 100644 index 0000000000000000000000000000000000000000..65b2ea6e4dd47e1c590ef1cbe5d7afc29d8fcca7 GIT binary patch literal 1052 zcmV+%1mpXOP)Px#L}ge>W=%~1DgXcg2mk?xX#fNO00031000^Q000001E2u_0{{R30RRC20H6W@ z1ONa40RR91JfH&r1ONa40RR91JOBUy0E^%0TmS$AhDk(0RA>e5n@@7uFciimr$e`7 zhCjm&P7v1VhMpkVWYbNP6Eryi^aM>$(8;zeN=^{ENH^V(6Qo@wfn;E^B&pr+b1h;E2p>P%^ zpbQq?-QDePZEbx)!+h{wlCB94d0Rp7Dd53i@ClWUJ+Q82S)K8Cd|s(k*x2~g@AvBv zl1CH3Rpd;qVzKz~->L8O;o+ePUuKrbW`fVi zqM-RzouJ&`-(P#ciMQ+o$~yrUE$teUld(|NMSdNuoR(_(yQfn;M+^dj^sVI7We(n$i%k7S&sd<5^duoYdS(=jKw9*6>g(U-yqNOC) z$t;{?>qU`$<1GA2r@nU*mXIMN=))V14f=4r*LT@(7=xLG;_HeuMsDMM!AIJIj+ z-`aK91W&7fuzLz$U`I&ND}KE^SwwMKU=uto54IuPy_rRDh0p@0&C}8Xm)bw*$iH1o zujaJQW@&S55sxI9h2znyIlX2UHpdq6NTS^USeB<1wpTUrpfqe!iaLA_ZvBkld~lhZ zpF%t`^;e5_9bT5F6}DG3@u235?{~1Uza|=*>cZb3SXT?YEKe(JugVe5m2@KfhX)Ho z@W>Wszd=xStsT;;;yUxe!J7-$vX1B$+n4|4^{FA9&C=_%S$Gv%UgtA13$IiA zt9W*1;ZQ8bmrI=+zT z9%pIy_a(shlL!-0X8zg|h$sEc;L`8BK;WetRm=0VB}580$ppr4fxLNn~&jVDeU zEM9H+KsFT*Zf$RGk1(8%JPkB`<2~{0FeYC?Y7t~69vrU$oKh3CHY3NAPD{&z$sM_P z-@%0@)71V7V0ptG@80a)V&HhGRB|UaHZVDHrOD-TdyttEaD%eK!k;1k#DG)4tbieX zh|K@q4~vtSMgTu5m&+Z$@H4>bCc$B4&fHZTbyaS1&QS@A_V9h}K0ZF4)oQg-P~N|w WSfpXwp?D_%0000