From 423df6c22d698bdaa904df9f42ffc9db51bb0357 Mon Sep 17 00:00:00 2001 From: budowski Date: Mon, 24 Jul 2023 18:05:05 -0600 Subject: [PATCH 1/5] #591 - Android UI update for photo count in my obs list (#712) --- src/components/SharedComponents/PhotoCount.js | 19 +++++++++++++++---- .../SharedComponents/Typography/Body3Bold.js | 13 +++++++++++++ src/components/SharedComponents/index.js | 1 + 3 files changed, 29 insertions(+), 4 deletions(-) create mode 100644 src/components/SharedComponents/Typography/Body3Bold.js diff --git a/src/components/SharedComponents/PhotoCount.js b/src/components/SharedComponents/PhotoCount.js index 32d9ce0c5..ba84f02f8 100644 --- a/src/components/SharedComponents/PhotoCount.js +++ b/src/components/SharedComponents/PhotoCount.js @@ -1,9 +1,10 @@ // @flow import { useIsFocused } from "@react-navigation/native"; -import { Body3 } from "components/SharedComponents"; +import { Body3, Body3Bold } from "components/SharedComponents"; import { View } from "components/styledComponents"; import * as React from "react"; +import { Platform } from "react-native"; import { useTheme } from "react-native-paper"; import Svg, { ForeignObject, Path } from "react-native-svg"; import { dropShadow } from "styles/global"; @@ -34,6 +35,10 @@ const PhotoCount = ( { count, size, shadow }: Props ): React.Node => { photoCount = 99; } + const TextComponent = Platform.OS === "ios" + ? Body3 + : Body3Bold; + return ( { clipRule="evenodd" fillRule="nonzero" /> - - + + {photoCount} - + diff --git a/src/components/SharedComponents/Typography/Body3Bold.js b/src/components/SharedComponents/Typography/Body3Bold.js new file mode 100644 index 000000000..47db5b591 --- /dev/null +++ b/src/components/SharedComponents/Typography/Body3Bold.js @@ -0,0 +1,13 @@ +// @flow + +import type { Node } from "react"; +import React from "react"; + +import INatText from "./INatText"; + +const Body3Bold = ( props: any ): Node => ( + // eslint-disable-next-line react/jsx-props-no-spreading + +); + +export default Body3Bold; diff --git a/src/components/SharedComponents/index.js b/src/components/SharedComponents/index.js index 5a27c5fc6..0b68b8754 100644 --- a/src/components/SharedComponents/index.js +++ b/src/components/SharedComponents/index.js @@ -33,6 +33,7 @@ export { default as TaxonResult } from "./TaxonResult"; export { default as Body1 } from "./Typography/Body1"; export { default as Body2 } from "./Typography/Body2"; export { default as Body3 } from "./Typography/Body3"; +export { default as Body3Bold } from "./Typography/Body3Bold"; export { default as Body4 } from "./Typography/Body4"; export { default as Heading1 } from "./Typography/Heading1"; export { default as Heading2 } from "./Typography/Heading2"; From 6d61cec5fe27b4eccb4449ff1c99359b7a6297a2 Mon Sep 17 00:00:00 2001 From: budowski Date: Mon, 24 Jul 2023 18:05:36 -0600 Subject: [PATCH 2/5] #579 - font weights fixes for obs list (#703) --- src/components/SharedComponents/DisplayTaxonName.js | 10 +++++----- .../SharedComponents/Typography/Body1Bold.js | 13 +++++++++++++ src/components/SharedComponents/index.js | 1 + 3 files changed, 19 insertions(+), 5 deletions(-) create mode 100644 src/components/SharedComponents/Typography/Body1Bold.js diff --git a/src/components/SharedComponents/DisplayTaxonName.js b/src/components/SharedComponents/DisplayTaxonName.js index 10d5b9ae5..c9c26c95a 100644 --- a/src/components/SharedComponents/DisplayTaxonName.js +++ b/src/components/SharedComponents/DisplayTaxonName.js @@ -1,6 +1,6 @@ // @flow import classNames from "classnames"; -import { Body1, Body3, Body4 } from "components/SharedComponents"; +import { Body1Bold, Body3, Body4 } from "components/SharedComponents"; import { View } from "components/styledComponents"; import type { Node } from "react"; import React from "react"; @@ -53,9 +53,9 @@ const DisplayTaxonName = ( { if ( !taxon ) { return ( - + {t( "unknown" )} - + ); } @@ -80,7 +80,7 @@ const DisplayTaxonName = ( { : ""; const text = piece + spaceChar; const TextComponent = scientificNameFirst || !commonName - ? Body1 + ? Body1Bold : Body3; return ( isItalics @@ -102,7 +102,7 @@ const DisplayTaxonName = ( { } const TopTextComponent = !small - ? Body1 + ? Body1Bold : Body3; const BottomTextComponent = !small ? Body3 diff --git a/src/components/SharedComponents/Typography/Body1Bold.js b/src/components/SharedComponents/Typography/Body1Bold.js new file mode 100644 index 000000000..97d36ad2b --- /dev/null +++ b/src/components/SharedComponents/Typography/Body1Bold.js @@ -0,0 +1,13 @@ +// @flow + +import type { Node } from "react"; +import React from "react"; + +import INatText from "./INatText"; + +const Body1Bold = ( props: any ): Node => ( + // eslint-disable-next-line react/jsx-props-no-spreading + +); + +export default Body1Bold; diff --git a/src/components/SharedComponents/index.js b/src/components/SharedComponents/index.js index 0b68b8754..8c7466462 100644 --- a/src/components/SharedComponents/index.js +++ b/src/components/SharedComponents/index.js @@ -31,6 +31,7 @@ export { default as StickyToolbar } from "./StickyToolbar"; export { default as Tabs } from "./Tabs/Tabs"; export { default as TaxonResult } from "./TaxonResult"; export { default as Body1 } from "./Typography/Body1"; +export { default as Body1Bold } from "./Typography/Body1Bold"; export { default as Body2 } from "./Typography/Body2"; export { default as Body3 } from "./Typography/Body3"; export { default as Body3Bold } from "./Typography/Body3Bold"; From f62ec5c1b7d064956147386ebcf2f3175a74970a Mon Sep 17 00:00:00 2001 From: budowski Date: Mon, 24 Jul 2023 18:20:40 -0600 Subject: [PATCH 3/5] #634 - my observations header is jittery on Android when slow scrolling (#711) --- src/components/MyObservations/MyObservations.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/MyObservations/MyObservations.js b/src/components/MyObservations/MyObservations.js index 8f067f524..c4f655559 100644 --- a/src/components/MyObservations/MyObservations.js +++ b/src/components/MyObservations/MyObservations.js @@ -91,14 +91,19 @@ const MyObservations = ( { // basing collapsible sticky header code off the example in this article // https://medium.com/swlh/making-a-collapsible-sticky-header-animations-with-react-native-6ad7763875c3 const scrollY = useRef( new Animated.Value( 0 ) ); + + // On Android, the scroll view offset is a double (not an integer), and interpolation shouldn't be + // one-to-one, which causes a jittery header while slow scrolling (see issue #634). + // See here as well: https://stackoverflow.com/a/60898411/1233767 const scrollYClamped = diffClamp( scrollY.current, 0, - heightAboveToolbar + heightAboveToolbar * 2 ); + // Same as comment above (see here: https://stackoverflow.com/a/60898411/1233767) const offsetForHeader = scrollYClamped.interpolate( { - inputRange: [0, heightAboveToolbar], + inputRange: [0, heightAboveToolbar * 2], // $FlowIgnore outputRange: [0, -heightAboveToolbar] } ); From df5b4132fa827ad113f660ccee97a43f18c1bfa7 Mon Sep 17 00:00:00 2001 From: Amanda Bullington <35536439+albullington@users.noreply.github.com> Date: Tue, 25 Jul 2023 10:38:06 -0700 Subject: [PATCH 4/5] Location picker improvements (#692) * Improvements & bug fixes for location picker; closes #628 * Styling changes * Refactor location picker to use container and get tests passing --- .../LocationPicker/CrosshairCircle.js | 12 +- src/components/LocationPicker/Footer.js | 15 +- .../LocationPicker/LoadingIndicator.js | 14 + .../LocationPicker/LocationPicker.js | 268 ++++++++---------- .../LocationPicker/LocationPickerContainer.js | 261 +++++++++++++++++ .../LocationPicker/LocationSearch.js | 39 ++- src/components/LocationPicker/WarningText.js | 38 +-- .../SharedComponents/Buttons/CloseButton.js | 4 +- src/components/SharedComponents/SearchBar.js | 12 +- src/i18n/l10n/en.ftl | 3 +- src/i18n/l10n/en.ftl.json | 1 + src/i18n/strings.ftl | 3 +- src/navigation/BottomTabNavigator/index.js | 9 +- .../LocationPicker/LocationPicker.test.js | 135 ++++----- 14 files changed, 519 insertions(+), 295 deletions(-) create mode 100644 src/components/LocationPicker/LoadingIndicator.js create mode 100644 src/components/LocationPicker/LocationPickerContainer.js diff --git a/src/components/LocationPicker/CrosshairCircle.js b/src/components/LocationPicker/CrosshairCircle.js index 959d17bc4..bee6df471 100644 --- a/src/components/LocationPicker/CrosshairCircle.js +++ b/src/components/LocationPicker/CrosshairCircle.js @@ -7,18 +7,19 @@ import type { Node } from "react"; import React from "react"; import { useTheme } from "react-native-paper"; +import WarningText from "./WarningText"; + type Props = { accuracyTest: string, - containerStyle: Object + getShadow: Function }; -const CrosshairCircle = ( { accuracyTest, containerStyle }: Props ): Node => { +const CrosshairCircle = ( { accuracyTest, getShadow }: Props ): Node => { const theme = useTheme( ); return ( { /> )} + + + ); }; diff --git a/src/components/LocationPicker/Footer.js b/src/components/LocationPicker/Footer.js index e66cd3e9d..3d6228871 100644 --- a/src/components/LocationPicker/Footer.js +++ b/src/components/LocationPicker/Footer.js @@ -1,14 +1,11 @@ // @flow import { useNavigation } from "@react-navigation/native"; -import { - Button, StickyToolbar -} from "components/SharedComponents"; +import { Button } from "components/SharedComponents"; +import { View } from "components/styledComponents"; import { ObsEditContext } from "providers/contexts"; import type { Node } from "react"; -import React, { - useContext -} from "react"; +import React, { useContext } from "react"; import useTranslation from "sharedHooks/useTranslation"; type Props = { @@ -24,9 +21,9 @@ const Footer = ( { keysToUpdate, goBackOnSave }: Props ): Node => { } = useContext( ObsEditContext ); return ( - +