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
GitHub
parent
95514e3af7
commit
0776cd99e5
|
|
@ -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"
|
||||
|
|
@ -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>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -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]} />
|
||||
</Pressable>
|
||||
</View>
|
||||
) : null}
|
||||
{feed.type === 'timeline' ? (
|
||||
<FollowingFeedCard />
|
||||
) : (
|
||||
<FeedSourceCard
|
||||
key={feedUri}
|
||||
feedUri={feedUri}
|
||||
style={styles.noTopBorder}
|
||||
showSaveBtn
|
||||
showMinimalPlaceholder
|
||||
<FontAwesomeIcon
|
||||
icon="arrow-down"
|
||||
size={14}
|
||||
style={[pal.textLight]}
|
||||
/>
|
||||
)}
|
||||
</Pressable>
|
||||
</>
|
||||
) : null}
|
||||
<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,
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue