Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(ONYX-1380): Activity Item screen spacing #10988

Merged
merged 3 commits into from
Oct 29, 2024
Merged

fix(ONYX-1380): Activity Item screen spacing #10988

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b5ebd1c
fix: Activity Item screen spacing
olerichter00 Oct 22, 2024
80de800
min height
olerichter00 Oct 28, 2024
b00ac65
Update src/app/Scenes/Activity/components/NotificationArtworkList.tsx
olerichter00 Oct 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .secrets.baseline
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1134,5 +1134,5 @@
}
]
},
"generated_at": "2024-10-24T13:23:36Z"
"generated_at": "2024-10-28T12:12:54Z"
}
3 changes: 1 addition & 2 deletions src/app/Components/ArtworkGrids/MasonryInfiniteScrollArtworkGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,6 @@ export const MasonryInfiniteScrollArtworkGrid: React.FC<MasonryInfiniteScrollArt
contentContainerStyle={{
// No paddings are needed for single column grids
paddingHorizontal: getAdjustedNumColumns() === 1 ? 0 : space(2),
paddingBottom: artworks.length === 1 ? 0 : space(6),
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't want to display the extra spacing if there are no more artworks to load because on the Activity screen we display content below the list.

}}
data={artworks}
keyExtractor={(item) => item.id}
Expand All @@ -140,7 +139,7 @@ export const MasonryInfiniteScrollArtworkGrid: React.FC<MasonryInfiniteScrollArt
refreshControl={refreshControl}
renderItem={renderItem}
ListFooterComponent={
<AnimatedMasonryListFooter shouldDisplaySpinner={shouldDisplaySpinner} />
hasMore ? <AnimatedMasonryListFooter shouldDisplaySpinner={shouldDisplaySpinner} /> : null
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't want to display the spinner component when there are no more artworks to be loaded because it creates extra spacing when we display content below the artwork list (e.g., on the Activity screen).

}
onScroll={rest.onScroll}
/>
Expand Down
14 changes: 8 additions & 6 deletions src/app/Scenes/Activity/components/AlertNotification.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
import {
ArrowRightIcon,
Button,
DEFAULT_HIT_SLOP,
Flex,
Text,
Pill,
Screen,
Spacer,
ArrowRightIcon,
Text,
Touchable,
Pill,
DEFAULT_HIT_SLOP,
} from "@artsy/palette-mobile"
import { AlertNotification_notification$key } from "__generated__/AlertNotification_notification.graphql"
import { ActivityErrorScreen } from "app/Scenes/Activity/components/ActivityErrorScreen"
import { NotificationArtworkList } from "app/Scenes/Activity/components/NotificationArtworkList"
import { goBack, navigate } from "app/system/navigation/navigate"
import { FC } from "react"
import { ScrollView, TouchableOpacity } from "react-native"
import { useFragment, graphql } from "react-relay"
import { graphql, useFragment } from "react-relay"

interface AlertNotificationProps {
notification: AlertNotification_notification$key
Expand Down Expand Up @@ -86,7 +86,9 @@ export const AlertNotification: FC<AlertNotificationProps> = ({ notification })

<NotificationArtworkList artworksConnection={artworksConnection} />

<Flex mx={2} mt={1} mb={2}>
<Spacer y={2} />

<Flex mx={2}>
<Button
block
variant="outline"
Expand Down
12 changes: 7 additions & 5 deletions src/app/Scenes/Activity/components/ArtworkPublishedNotification.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import {
ArrowRightIcon,
Flex,
Text,
Screen,
FollowButton,
Screen,
Spacer,
ArrowRightIcon,
Text,
Touchable,
} from "@artsy/palette-mobile"
import { ArtworkPublishedNotificationFollowArtistMutation } from "__generated__/ArtworkPublishedNotificationFollowArtistMutation.graphql"
Expand All @@ -14,7 +14,7 @@ import { NotificationArtworkList } from "app/Scenes/Activity/components/Notifica
import { goBack, navigate } from "app/system/navigation/navigate"
import { FC } from "react"
import { ScrollView } from "react-native"
import { useFragment, graphql, useMutation } from "react-relay"
import { graphql, useFragment, useMutation } from "react-relay"

interface ArtworkPublishedNotificationProps {
notification: ArtworkPublishedNotification_notification$key
Expand Down Expand Up @@ -81,7 +81,9 @@ export const ArtworkPublishedNotification: FC<ArtworkPublishedNotificationProps>

<NotificationArtworkList artworksConnection={artworksConnection} />

<Flex mx={2} mt={1} mb={2}>
<Spacer y={2} />

<Flex mx={2}>
<Touchable onPress={handleViewAllWorksPress}>
<Flex flexDirection="row">
<Text fontWeight="bold">View all works by {artist.name}</Text>
Expand Down
8 changes: 5 additions & 3 deletions src/app/Scenes/Activity/components/NotificationArtworkList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { CommercialButtonsQueryRenderer } from "app/Scenes/Activity/components/N
import { extractNodes } from "app/utils/extractNodes"
import { FC } from "react"
import { ImageBackground } from "react-native"
import { useFragment, graphql } from "react-relay"
import { graphql, useFragment } from "react-relay"

export interface PartnerOffer {
internalID: string
Expand Down Expand Up @@ -36,7 +36,8 @@ export const NotificationArtworkList: FC<NotificationArtworkListProps> = (props)
const color = useColor()

return (
<Flex minHeight={400}>
// Setting the min heiht here because Flashlist needs a container with a valid height.
<Flex minHeight={1}>
<MasonryInfiniteScrollArtworkGrid
animated
artworks={artworks}
Expand All @@ -48,14 +49,15 @@ export const NotificationArtworkList: FC<NotificationArtworkListProps> = (props)
onScroll={scrollHandler}
partnerOffer={partnerOffer}
priceOfferMessage={priceOfferMessage}
style={{ paddingBottom: 120 }}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This bottom padding seems to be unnecessary as well...

/>

{!!showArtworkCommercialButtons && (
<CommercialButtonsQueryRenderer
artworkID={artworks[0].internalID}
partnerOffer={partnerOffer}
/>
)}

{!!note && (
<Flex width="100%" flexDirection="row" p={2}>
<Flex width="100%" flexDirection="row" bg="black5" p={1}>
Expand Down