Make feeds easier to reorder (#3998)

* Make feeds easier to reorder

* Add reorder e2e test

* Tweak feed card to only allow one line (#4002)

---------

Co-authored-by: Eric Bailey <git@esb.lol>
zio/stable
Paul Frazee 2024-05-13 15:56:48 -07:00 committed by GitHub
parent 95514e3af7
commit 0776cd99e5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 121 additions and 29 deletions

View File

@ -0,0 +1,82 @@
appId: xyz.blueskyweb.app
---
- runScript:
file: ../setupServer.js
env:
SERVER_PATH: ?users&follows&posts&feeds
- runFlow:
file: ../setupApp.yml
- tapOn:
id: "e2eSignInAlice"
# Pin alice's feed
- tapOn:
id: "bottomBarProfileBtn"
- swipe:
from:
id: "profilePager-selector"
direction: LEFT
- tapOn:
id: "profilePager-selector-4"
- tapOn:
id: "feed-alice-favs"
- tapOn: "Pin to Home"
- tapOn:
id: "bottomBarHomeBtn"
- assertNotVisible: "Feeds ✨"
- assertVisible:
id: "homeScreenFeedTabs-selector-0"
text: "Following"
- assertVisible:
id: "homeScreenFeedTabs-selector-1"
text: "alice-favs"
# Set alice-favs first
- tapOn:
id: "viewHeaderDrawerBtn"
- tapOn:
id: "menuItemButton-Feeds"
- tapOn: "Edit Saved Feeds"
- tapOn:
label: "Tap on down arrow"
point: "79%,23%"
- tapOn:
id: "bottomBarHomeBtn"
- assertVisible:
id: "homeScreenFeedTabs-selector-0"
text: "alice-favs"
- assertVisible:
id: "homeScreenFeedTabs-selector-1"
text: "Following"
# Set following first
- tapOn:
id: "viewHeaderDrawerBtn"
- tapOn:
id: "menuItemButton-Feeds"
- tapOn:
label: "Tap on down arrow"
point: "79%,23%"
- tapOn:
id: "bottomBarHomeBtn"
- assertVisible:
id: "homeScreenFeedTabs-selector-0"
text: "Following"
- assertVisible:
id: "homeScreenFeedTabs-selector-1"
text: "alice-favs"
# Remove following
- tapOn:
id: "viewHeaderDrawerBtn"
- tapOn:
id: "menuItemButton-Feeds"
- tapOn:
label: "Tap on unpin"
point: "91%,23%"
- tapOn:
id: "bottomBarHomeBtn"
- assertVisible:
id: "homeScreenFeedTabs-selector-0"
text: "alice-favs"
- assertNotVisible: "Following"

View File

@ -211,10 +211,10 @@ export function FeedSourceCardLoaded({
<UserAvatar type="algo" size={36} avatar={feed.avatar} />
</View>
<View style={[styles.headerTextContainer]}>
<Text style={[pal.text, s.bold]} numberOfLines={3}>
<Text style={[pal.text, s.bold]} numberOfLines={1}>
{feed.displayName}
</Text>
<Text style={[pal.textLight]} numberOfLines={3}>
<Text style={[pal.textLight]} numberOfLines={1}>
{feed.type === 'feed' ? (
<Trans>Feed by {sanitizeHandle(feed.creatorHandle, '@')}</Trans>
) : (

View File

@ -292,21 +292,37 @@ function ListItem({
return (
<View style={[styles.itemContainer, pal.border]}>
{feed.type === 'timeline' ? (
<FollowingFeedCard />
) : (
<FeedSourceCard
key={feedUri}
feedUri={feedUri}
style={[styles.noTopBorder, isPinned && {paddingRight: 8}]}
showMinimalPlaceholder
showSaveBtn={!isPinned}
/>
)}
{isPinned ? (
<View style={styles.webArrowButtonsContainer}>
<>
<Pressable
disabled={isUpdatePending}
accessibilityRole="button"
onPress={onPressUp}
hitSlop={HITSLOP_TOP}
style={state => ({
backgroundColor: pal.viewLight.backgroundColor,
paddingHorizontal: 12,
paddingVertical: 10,
borderRadius: 4,
marginRight: 8,
opacity:
state.hovered || state.focused || isUpdatePending ? 0.5 : 1,
state.hovered || state.pressed || isUpdatePending ? 0.5 : 1,
})}>
<FontAwesomeIcon
icon="arrow-up"
size={12}
style={[pal.text, styles.webArrowUpButton]}
size={14}
style={[pal.textLight]}
/>
</Pressable>
<Pressable
@ -315,24 +331,22 @@ function ListItem({
onPress={onPressDown}
hitSlop={HITSLOP_BOTTOM}
style={state => ({
backgroundColor: pal.viewLight.backgroundColor,
paddingHorizontal: 12,
paddingVertical: 10,
borderRadius: 4,
marginRight: 8,
opacity:
state.hovered || state.focused || isUpdatePending ? 0.5 : 1,
state.hovered || state.pressed || isUpdatePending ? 0.5 : 1,
})}>
<FontAwesomeIcon icon="arrow-down" size={12} style={[pal.text]} />
<FontAwesomeIcon
icon="arrow-down"
size={14}
style={[pal.textLight]}
/>
</Pressable>
</View>
</>
) : null}
{feed.type === 'timeline' ? (
<FollowingFeedCard />
) : (
<FeedSourceCard
key={feedUri}
feedUri={feedUri}
style={styles.noTopBorder}
showSaveBtn
showMinimalPlaceholder
/>
)}
<View style={{paddingRight: 16}}>
<Pressable
disabled={isUpdatePending}
@ -340,12 +354,16 @@ function ListItem({
hitSlop={10}
onPress={onTogglePinned}
style={state => ({
backgroundColor: pal.viewLight.backgroundColor,
paddingHorizontal: 12,
paddingVertical: 10,
borderRadius: 4,
opacity:
state.hovered || state.focused || isUpdatePending ? 0.5 : 1,
})}>
<FontAwesomeIcon
icon="thumb-tack"
size={20}
size={14}
color={isPinned ? colors.blue3 : pal.colors.icon}
/>
</Pressable>
@ -424,14 +442,6 @@ const styles = StyleSheet.create({
alignItems: 'center',
borderBottomWidth: 1,
},
webArrowButtonsContainer: {
paddingLeft: 16,
flexDirection: 'column',
justifyContent: 'space-around',
},
webArrowUpButton: {
marginBottom: 10,
},
noTopBorder: {
borderTopWidth: 0,
},