zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Make feeds easier to reorder (#3998)

Browse source 
* 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>
This commit is contained in:
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
Download patch file Download diff file Expand all files Collapse all files

4
src/view/com/feeds/FeedSourceCard.tsx
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>
) : (

64
src/view/screens/SavedFeeds.tsx
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,
},