forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
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>
authored by
Paul Frazee
Eric Bailey
and committed by
GitHub
0776cd99
95514e3a
+121
-29
+82
__e2e__/flows/feed-reorder.yml
+82
__e2e__/flows/feed-reorder.yml
···
1
+
appId: xyz.blueskyweb.app
2
+
---
3
+
- runScript:
4
+
file: ../setupServer.js
5
+
env:
6
+
SERVER_PATH: ?users&follows&posts&feeds
7
+
- runFlow:
8
+
file: ../setupApp.yml
9
+
- tapOn:
10
+
id: "e2eSignInAlice"
11
+
12
+
# Pin alice's feed
13
+
- tapOn:
14
+
id: "bottomBarProfileBtn"
15
+
- swipe:
16
+
from:
17
+
id: "profilePager-selector"
18
+
direction: LEFT
19
+
- tapOn:
20
+
id: "profilePager-selector-4"
21
+
- tapOn:
22
+
id: "feed-alice-favs"
23
+
- tapOn: "Pin to Home"
24
+
- tapOn:
25
+
id: "bottomBarHomeBtn"
26
+
- assertNotVisible: "Feeds ✨"
27
+
- assertVisible:
28
+
id: "homeScreenFeedTabs-selector-0"
29
+
text: "Following"
30
+
- assertVisible:
31
+
id: "homeScreenFeedTabs-selector-1"
32
+
text: "alice-favs"
33
+
34
+
# Set alice-favs first
35
+
- tapOn:
36
+
id: "viewHeaderDrawerBtn"
37
+
- tapOn:
38
+
id: "menuItemButton-Feeds"
39
+
- tapOn: "Edit Saved Feeds"
40
+
- tapOn:
41
+
label: "Tap on down arrow"
42
+
point: "79%,23%"
43
+
- tapOn:
44
+
id: "bottomBarHomeBtn"
45
+
- assertVisible:
46
+
id: "homeScreenFeedTabs-selector-0"
47
+
text: "alice-favs"
48
+
- assertVisible:
49
+
id: "homeScreenFeedTabs-selector-1"
50
+
text: "Following"
51
+
52
+
# Set following first
53
+
- tapOn:
54
+
id: "viewHeaderDrawerBtn"
55
+
- tapOn:
56
+
id: "menuItemButton-Feeds"
57
+
- tapOn:
58
+
label: "Tap on down arrow"
59
+
point: "79%,23%"
60
+
- tapOn:
61
+
id: "bottomBarHomeBtn"
62
+
- assertVisible:
63
+
id: "homeScreenFeedTabs-selector-0"
64
+
text: "Following"
65
+
- assertVisible:
66
+
id: "homeScreenFeedTabs-selector-1"
67
+
text: "alice-favs"
68
+
69
+
# Remove following
70
+
- tapOn:
71
+
id: "viewHeaderDrawerBtn"
72
+
- tapOn:
73
+
id: "menuItemButton-Feeds"
74
+
- tapOn:
75
+
label: "Tap on unpin"
76
+
point: "91%,23%"
77
+
- tapOn:
78
+
id: "bottomBarHomeBtn"
79
+
- assertVisible:
80
+
id: "homeScreenFeedTabs-selector-0"
81
+
text: "alice-favs"
82
+
- assertNotVisible: "Following"
+2
-2
src/view/com/feeds/FeedSourceCard.tsx
+2
-2
src/view/com/feeds/FeedSourceCard.tsx
···
211
211
<UserAvatar type="algo" size={36} avatar={feed.avatar} />
212
212
</View>
213
213
<View style={[styles.headerTextContainer]}>
214
-
<Text style={[pal.text, s.bold]} numberOfLines={3}>
214
+
<Text style={[pal.text, s.bold]} numberOfLines={1}>
215
215
{feed.displayName}
216
216
</Text>
217
-
<Text style={[pal.textLight]} numberOfLines={3}>
217
+
<Text style={[pal.textLight]} numberOfLines={1}>
218
218
{feed.type === 'feed' ? (
219
219
<Trans>Feed by {sanitizeHandle(feed.creatorHandle, '@')}</Trans>
220
220
) : (
+37
-27
src/view/screens/SavedFeeds.tsx
+37
-27
src/view/screens/SavedFeeds.tsx
···
292
292
293
293
return (
294
294
<View style={[styles.itemContainer, pal.border]}>
295
+
{feed.type === 'timeline' ? (
296
+
<FollowingFeedCard />
297
+
) : (
298
+
<FeedSourceCard
299
+
key={feedUri}
300
+
feedUri={feedUri}
301
+
style={[styles.noTopBorder, isPinned && {paddingRight: 8}]}
302
+
showMinimalPlaceholder
303
+
showSaveBtn={!isPinned}
304
+
/>
305
+
)}
295
306
{isPinned ? (
296
-
<View style={styles.webArrowButtonsContainer}>
307
+
<>
297
308
<Pressable
298
309
disabled={isUpdatePending}
299
310
accessibilityRole="button"
300
311
onPress={onPressUp}
301
312
hitSlop={HITSLOP_TOP}
302
313
style={state => ({
314
+
backgroundColor: pal.viewLight.backgroundColor,
315
+
paddingHorizontal: 12,
316
+
paddingVertical: 10,
317
+
borderRadius: 4,
318
+
marginRight: 8,
303
319
opacity:
304
-
state.hovered || state.focused || isUpdatePending ? 0.5 : 1,
320
+
state.hovered || state.pressed || isUpdatePending ? 0.5 : 1,
305
321
})}>
306
322
<FontAwesomeIcon
307
323
icon="arrow-up"
308
-
size={12}
309
-
style={[pal.text, styles.webArrowUpButton]}
324
+
size={14}
325
+
style={[pal.textLight]}
310
326
/>
311
327
</Pressable>
312
328
<Pressable
···
315
331
onPress={onPressDown}
316
332
hitSlop={HITSLOP_BOTTOM}
317
333
style={state => ({
334
+
backgroundColor: pal.viewLight.backgroundColor,
335
+
paddingHorizontal: 12,
336
+
paddingVertical: 10,
337
+
borderRadius: 4,
338
+
marginRight: 8,
318
339
opacity:
319
-
state.hovered || state.focused || isUpdatePending ? 0.5 : 1,
340
+
state.hovered || state.pressed || isUpdatePending ? 0.5 : 1,
320
341
})}>
321
-
<FontAwesomeIcon icon="arrow-down" size={12} style={[pal.text]} />
342
+
<FontAwesomeIcon
343
+
icon="arrow-down"
344
+
size={14}
345
+
style={[pal.textLight]}
346
+
/>
322
347
</Pressable>
323
-
</View>
348
+
</>
324
349
) : null}
325
-
{feed.type === 'timeline' ? (
326
-
<FollowingFeedCard />
327
-
) : (
328
-
<FeedSourceCard
329
-
key={feedUri}
330
-
feedUri={feedUri}
331
-
style={styles.noTopBorder}
332
-
showSaveBtn
333
-
showMinimalPlaceholder
334
-
/>
335
-
)}
336
350
<View style={{paddingRight: 16}}>
337
351
<Pressable
338
352
disabled={isUpdatePending}
···
340
354
hitSlop={10}
341
355
onPress={onTogglePinned}
342
356
style={state => ({
357
+
backgroundColor: pal.viewLight.backgroundColor,
358
+
paddingHorizontal: 12,
359
+
paddingVertical: 10,
360
+
borderRadius: 4,
343
361
opacity:
344
362
state.hovered || state.focused || isUpdatePending ? 0.5 : 1,
345
363
})}>
346
364
<FontAwesomeIcon
347
365
icon="thumb-tack"
348
-
size={20}
366
+
size={14}
349
367
color={isPinned ? colors.blue3 : pal.colors.icon}
350
368
/>
351
369
</Pressable>
···
423
441
flexDirection: 'row',
424
442
alignItems: 'center',
425
443
borderBottomWidth: 1,
426
-
},
427
-
webArrowButtonsContainer: {
428
-
paddingLeft: 16,
429
-
flexDirection: 'column',
430
-
justifyContent: 'space-around',
431
-
},
432
-
webArrowUpButton: {
433
-
marginBottom: 10,
434
444
},
435
445
noTopBorder: {
436
446
borderTopWidth: 0,