From f37f92795b6bb3dbcc3812ba40cd5acc1992595d Mon Sep 17 00:00:00 2001 From: Angie Date: Wed, 27 Mar 2024 16:21:56 -0700 Subject: [PATCH] 1221 explore screen icons (#1308) * Identifiers and Observers icons * Add icons to explore bottomsheet --- .../app/src/main/assets/fonts/INatIcon.ttf | Bin 27704 -> 28136 bytes android/link-assets-manifest.json | 2 +- assets/fonts/INatIcon.ttf | Bin 27704 -> 28136 bytes ios/Podfile.lock | 4 +- .../project.pbxproj | 13 +- ios/link-assets-manifest.json | 2 +- src/components/Explore/Explore.js | 9 +- .../SharedComponents/INatIcon/glyphmap.json | 92 +++++------ .../SharedComponents/RadioButtonRow.js | 26 +++- .../Sheets/RadioButtonSheet.js | 3 +- src/images/icons/identifiers.svg | 7 + src/images/icons/observers.svg | 5 + .../__snapshots__/CustomTabBar.test.js.snap | 6 +- .../IdentificationsCount.test.js.snap | 144 +++++++++--------- .../__snapshots__/InlineUser.test.js.snap | 4 +- .../__snapshots__/ObsGridItem.test.js.snap | 2 +- .../__snapshots__/TaxonResult.test.js.snap | 2 +- 17 files changed, 182 insertions(+), 139 deletions(-) create mode 100644 src/images/icons/identifiers.svg create mode 100644 src/images/icons/observers.svg diff --git a/android/app/src/main/assets/fonts/INatIcon.ttf b/android/app/src/main/assets/fonts/INatIcon.ttf index 50c95fa2d49c6dd2a569e4630f2be2e9d480573d..7f84059b89d15de1ca85d77fa9097260a858605f 100644 GIT binary patch delta 828 zcmX9+T}YE*6h7yBzn}d%=bYPI({I0@bDOrl&8>){TBJ~@)Qtt9Q)gD{KBt96Bos-8 zg!0`)bWzY%L?xq$h=}N-9|$kHkOJup=;<5IX-&I?bpZAVK)Q5d=-j}AgHO5uEN+0KiNSoXzw7?(eU$r!kRGG}r{NW{ zpA$lZ!{ZZ|^BW(j-U{LMP@ymP>#an-IYs=};oO9VGgw6&)dSy1ZaCkmcoKgB@@)W| zQ!9*(uO;Ts0i5Uo5UK=WE8B2Xug7`RN(-o-8EN7!650vp+1^HVvl3t&*rrw1CTgn!Uv2?B9Wqum{VV&)3P3IR3N&_> zITEe3EJOw8YJpM+P}bUifTml`)5ksax9XQ=yL?!_Aiwijd>4Hm{Hp(y|6afn=nT9J z`hruzrO=_!Oz2tI8g2`ZhhK%)l!$UbDJr)b_BVWrcq7*%3ys?w??ye*VoZ%)i@k^~ z#(nW)@f)Sz<~utlxs454h6C%s4ch=R=~OcYtmtsMtXz%5l~i_NDxFEYoNA`5)H-xj zqPP{y@g#*GN>y9@UYpJ8iMnt`v|6Mj@@Ozt+8C#DoQj;S()7AQrWCK=Ymfp7uP7SL z-4+L9O^6POi6ZOfFv@XJ;BNb7KxY&2^R4)pAI-?_femU=1SA;!JR# zaSJTQ1W|OEHsjxIR>ayW(bz7CwUQ`j6v-%uWxHLj&I-(CV}jhuCz-&rL`TO~CI~Fa zw`Q~1-v1=MW2yGYf}MWVkNgskqgX7x85m-w{`|=J$$^vk;+U?U`eHH`ddKp`v*ecS Hr$hJ;SG2RP delta 425 zcmaEHn{met#tF*xGZ+{cdl(oP5|VQh3(~|{YZw@qS1>TJr={mqrfsWof5^bV{egiY z{6I!(VoJoC1x`S<4}jP#11P{$z}O6A?*U?!jNFonM(+RDfabjc;ypR}$%%(bZm9wF z3jpOG&wD@djUi+HWI4u-jCq?cFsd<5wqp{R%*SjpIf{vAavl@MfcL*7WfLH>|}i9(CQ3q=LR1jR#2Y)WNH*OYCPrzl@h zVNwZGnV_;ql}pu0wLrB`b(iWBwH|dP^%V7M8WI`}8gDd{G){TBJ~@)Qtt9Q)gD{KBt96Bos-8 zg!0`)bWzY%L?xq$h=}N-9|$kHkOJup=;<5IX-&I?bpZAVK)Q5d=-j}AgHO5uEN+0KiNSoXzw7?(eU$r!kRGG}r{NW{ zpA$lZ!{ZZ|^BW(j-U{LMP@ymP>#an-IYs=};oO9VGgw6&)dSy1ZaCkmcoKgB@@)W| zQ!9*(uO;Ts0i5Uo5UK=WE8B2Xug7`RN(-o-8EN7!650vp+1^HVvl3t&*rrw1CTgn!Uv2?B9Wqum{VV&)3P3IR3N&_> zITEe3EJOw8YJpM+P}bUifTml`)5ksax9XQ=yL?!_Aiwijd>4Hm{Hp(y|6afn=nT9J z`hruzrO=_!Oz2tI8g2`ZhhK%)l!$UbDJr)b_BVWrcq7*%3ys?w??ye*VoZ%)i@k^~ z#(nW)@f)Sz<~utlxs454h6C%s4ch=R=~OcYtmtsMtXz%5l~i_NDxFEYoNA`5)H-xj zqPP{y@g#*GN>y9@UYpJ8iMnt`v|6Mj@@Ozt+8C#DoQj;S()7AQrWCK=Ymfp7uP7SL z-4+L9O^6POi6ZOfFv@XJ;BNb7KxY&2^R4)pAI-?_femU=1SA;!JR# zaSJTQ1W|OEHsjxIR>ayW(bz7CwUQ`j6v-%uWxHLj&I-(CV}jhuCz-&rL`TO~CI~Fa zw`Q~1-v1=MW2yGYf}MWVkNgskqgX7x85m-w{`|=J$$^vk;+U?U`eHH`ddKp`v*ecS Hr$hJ;SG2RP delta 425 zcmaEHn{met#tF*xGZ+{cdl(oP5|VQh3(~|{YZw@qS1>TJr={mqrfsWof5^bV{egiY z{6I!(VoJoC1x`S<4}jP#11P{$z}O6A?*U?!jNFonM(+RDfabjc;ypR}$%%(bZm9wF z3jpOG&wD@djUi+HWI4u-jCq?cFsd<5wqp{R%*SjpIf{vAavl@MfcL*7WfLH>|}i9(CQ3q=LR1jR#2Y)WNH*OYCPrzl@h zVNwZGnV_;ql}pu0wLrB`b(iWBwH|dP^%V7M8WI`}8gDd{G getShadowStyle( { elevation: 6 } ); -// TODO: observers and identifiers icons need replacement const exploreViewIcon = { observations: "binoculars", species: "leaf", - observers: "person", - identifiers: "person" + observers: "observers", + identifiers: "identifiers" }; type Props = { @@ -106,24 +105,28 @@ const Explore = ( { label: t( "Species" ), text: t( "Organisms-that-are-identified-to-species" ), buttonText: t( "EXPLORE-SPECIES" ), + icon: "species", value: "species" }, observations: { label: t( "Observations" ), text: t( "Individual-encounters-with-organisms" ), buttonText: t( "EXPLORE-OBSERVATIONS" ), + icon: "observations", value: "observations" }, observers: { label: t( "Observers" ), text: t( "iNaturalist-users-who-have-observed" ), buttonText: t( "EXPLORE-OBSERVERS" ), + icon: "observers", value: "observers" }, identifiers: { label: t( "Identifiers" ), text: t( "iNaturalist-users-who-have-left-an-identification" ), buttonText: t( "EXPLORE-IDENTIFIERS" ), + icon: "identifiers", value: "identifiers" } }; diff --git a/src/components/SharedComponents/INatIcon/glyphmap.json b/src/components/SharedComponents/INatIcon/glyphmap.json index 38ed1c9cd..31e2c18b6 100644 --- a/src/components/SharedComponents/INatIcon/glyphmap.json +++ b/src/components/SharedComponents/INatIcon/glyphmap.json @@ -64,49 +64,51 @@ "iconic-reptilia": 61759, "iconic-unknown": 61760, "id-agree": 61761, - "inaturalist": 61762, - "info-circle-outline": 61763, - "kebab-menu": 61764, - "label-outline": 61765, - "label": 61766, - "laptop": 61767, - "layers": 61768, - "leaf": 61769, - "list-square": 61770, - "location-crosshairs": 61771, - "magnifying-glass": 61772, - "map-layers": 61773, - "map-marker-outline": 61774, - "map": 61775, - "microphone-circle": 61776, - "microphone": 61777, - "noevidence": 61778, - "notifications-bell": 61779, - "pause-circle": 61780, - "pause": 61781, - "pencil-outline": 61782, - "pencil": 61783, - "person": 61784, - "photos-outline": 61785, - "photos": 61786, - "play-circle": 61787, - "play": 61788, - "plus-bold": 61789, - "plus": 61790, - "pot-outline": 61791, - "rotate-exclamation": 61792, - "rotate-right": 61793, - "rotate": 61794, - "share": 61795, - "sliders": 61796, - "sound-bold-outline": 61797, - "sound-outline": 61798, - "sounds": 61799, - "sparkly-label": 61800, - "star-bold-outline": 61801, - "star": 61802, - "stop": 61803, - "trash-outline": 61804, - "trash": 61805, - "triangle-exclamation": 61806 + "identifiers": 61762, + "inaturalist": 61763, + "info-circle-outline": 61764, + "kebab-menu": 61765, + "label-outline": 61766, + "label": 61767, + "laptop": 61768, + "layers": 61769, + "leaf": 61770, + "list-square": 61771, + "location-crosshairs": 61772, + "magnifying-glass": 61773, + "map-layers": 61774, + "map-marker-outline": 61775, + "map": 61776, + "microphone-circle": 61777, + "microphone": 61778, + "noevidence": 61779, + "notifications-bell": 61780, + "observers": 61781, + "pause-circle": 61782, + "pause": 61783, + "pencil-outline": 61784, + "pencil": 61785, + "person": 61786, + "photos-outline": 61787, + "photos": 61788, + "play-circle": 61789, + "play": 61790, + "plus-bold": 61791, + "plus": 61792, + "pot-outline": 61793, + "rotate-exclamation": 61794, + "rotate-right": 61795, + "rotate": 61796, + "share": 61797, + "sliders": 61798, + "sound-bold-outline": 61799, + "sound-outline": 61800, + "sounds": 61801, + "sparkly-label": 61802, + "star-bold-outline": 61803, + "star": 61804, + "stop": 61805, + "trash-outline": 61806, + "trash": 61807, + "triangle-exclamation": 61808 } \ No newline at end of file diff --git a/src/components/SharedComponents/RadioButtonRow.js b/src/components/SharedComponents/RadioButtonRow.js index 064029bf0..85d07104d 100644 --- a/src/components/SharedComponents/RadioButtonRow.js +++ b/src/components/SharedComponents/RadioButtonRow.js @@ -1,13 +1,19 @@ // @flow import classnames from "classnames"; -import { List2 } from "components/SharedComponents"; +import { + Body1, + INatIcon, + List2 +} from "components/SharedComponents"; +import { View } from "components/styledComponents"; import type { Node } from "react"; -import React from "react"; +import React, { useMemo } from "react"; import { Platform } from "react-native"; import { RadioButton, useTheme } from "react-native-paper"; type Props = { value: string, + icon: string, checked: boolean, onPress: Function, label: string, @@ -16,7 +22,7 @@ type Props = { } const RadioButtonRow = ( { - value, checked, onPress, label, description, style + value, icon, checked, onPress, label, description, style }: Props ): Node => { const theme = useTheme( ); @@ -32,6 +38,18 @@ const RadioButtonRow = ( { textAlignVertical: "center" }; + const iconLabel = useMemo( () => ( + + {label} + + + ), [label, icon, theme.colors.secondary] ); + + const labelComponent = useMemo( () => { + if ( icon ) return iconLabel; + return label; + }, [icon, iconLabel, label] ); + return ( ( setChecked( radioValues[radioRow].value )} label={radioValues[radioRow].label} diff --git a/src/images/icons/identifiers.svg b/src/images/icons/identifiers.svg new file mode 100644 index 000000000..e2f8db59f --- /dev/null +++ b/src/images/icons/identifiers.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/images/icons/observers.svg b/src/images/icons/observers.svg new file mode 100644 index 000000000..46c6de310 --- /dev/null +++ b/src/images/icons/observers.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/tests/unit/components/BottomTabNavigator/__snapshots__/CustomTabBar.test.js.snap b/tests/unit/components/BottomTabNavigator/__snapshots__/CustomTabBar.test.js.snap index f601d0245..6f5f0c4dd 100644 --- a/tests/unit/components/BottomTabNavigator/__snapshots__/CustomTabBar.test.js.snap +++ b/tests/unit/components/BottomTabNavigator/__snapshots__/CustomTabBar.test.js.snap @@ -399,7 +399,7 @@ exports[`CustomTabBar should render correctly 1`] = ` ] } > -  +  @@ -491,7 +491,7 @@ exports[`CustomTabBar should render correctly 1`] = ` ] } > -  +  @@ -582,7 +582,7 @@ exports[`CustomTabBar should render correctly 1`] = ` ] } > -  +  diff --git a/tests/unit/components/SharedComponents/ActivityCount/__snapshots__/IdentificationsCount.test.js.snap b/tests/unit/components/SharedComponents/ActivityCount/__snapshots__/IdentificationsCount.test.js.snap index df70c07f8..2c227e8d2 100644 --- a/tests/unit/components/SharedComponents/ActivityCount/__snapshots__/IdentificationsCount.test.js.snap +++ b/tests/unit/components/SharedComponents/ActivityCount/__snapshots__/IdentificationsCount.test.js.snap @@ -1,77 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`IdentificationsCount renders default reliably 1`] = ` - - -  - - - 1 - - -`; - -exports[`IdentificationsCount renders filled reliably 1`] = ` `; +exports[`IdentificationsCount renders filled reliably 1`] = ` + + +  + + + 1 + + +`; + exports[`IdentificationsCount renders white reliably 1`] = ` -  +  -  +  -  +  -  +  -  + 