diff options
| -rw-r--r-- | __e2e__/flows/feed-reorder.yml | 82 | ||||
| -rw-r--r-- | src/view/com/feeds/FeedSourceCard.tsx | 4 | ||||
| -rw-r--r-- | src/view/screens/SavedFeeds.tsx | 64 |
3 files changed, 121 insertions, 29 deletions
diff --git a/__e2e__/flows/feed-reorder.yml b/__e2e__/flows/feed-reorder.yml new file mode 100644 index 000000000..4b96a201c --- /dev/null +++ b/__e2e__/flows/feed-reorder.yml @@ -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" diff --git a/src/view/com/feeds/FeedSourceCard.tsx b/src/view/com/feeds/FeedSourceCard.tsx index bb536bccd..9bf6ba6b6 100644 --- a/src/view/com/feeds/FeedSourceCard.tsx +++ b/src/view/com/feeds/FeedSourceCard.tsx @@ -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> ) : ( diff --git a/src/view/screens/SavedFeeds.tsx b/src/view/screens/SavedFeeds.tsx index d50f9f74d..a3aee19dc 100644 --- a/src/view/screens/SavedFeeds.tsx +++ b/src/view/screens/SavedFeeds.tsx @@ -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, }, |