Reaction summary and flow layout for reactions (#1158)

* Add reaction summary view

* Add avatars and display names and flowlayout for reactions

- Add avatars to summary view
- Add display names to summary view
- Add flow layout to reaction buttons as per designs(long press on  scolling buttons is difficult to achieve so prioritised this).

* Add and use SwiftUI-Flow for reaction layout.

* Correct Swift-Flow inclusion via xcodegen

* Remove own FlowLayout implementation and Fix unit tests

* Improve naming and correct spacing on summary view as per design.

* Fix safe area insets on summary view bottom sheet

* Scroll to selected reaction in the case that it is offscreen when the sheet is displayed.

* Add more reactions to UITests to ensure the new flow layout is displayed(wraps on to second line).

* Fix snapshot image.

* Address review comments.

* Use onLongPressGesture for reactions also to fix double actions bug and for consistency.

* Respect RTL languages.

* Fix unit test.
This commit is contained in:
David Langley
2023-06-29 10:53:44 +01:00
committed by GitHub
parent 3f6bfbcc14
commit 98cec5672c
20 changed files with 359 additions and 53 deletions
@@ -34,7 +34,7 @@ enum RoomTimelineItemFixtures {
sender: .init(id: "", displayName: "Helena"),
content: .init(body: "Let’s get lunch soon! New salad place opened up 🥗. When are y’all free? 🤗"),
properties: RoomTimelineItemProperties(reactions: [
AggregatedReaction(key: "🙌", count: 1, isHighlighted: true)
AggregatedReaction(accountOwnerID: "me", key: "🙌", senders: ["me"])
])),
TextRoomTimelineItem(id: UUID().uuidString,
timestamp: "10:11 AM",
@@ -43,8 +43,8 @@ enum RoomTimelineItemFixtures {
sender: .init(id: "", displayName: "Helena"),
content: .init(body: "I can be around on Wednesday. How about some 🌮 instead? Like https://www.tortilla.co.uk/"),
properties: RoomTimelineItemProperties(reactions: [
AggregatedReaction(key: "🙏", count: 1, isHighlighted: false),
AggregatedReaction(key: "🙌", count: 2, isHighlighted: true)
AggregatedReaction(accountOwnerID: "me", key: "🙏", senders: ["helena"]),
AggregatedReaction(accountOwnerID: "me", key: "🙌", senders: ["me", "helena", "jacob"])
])),
SeparatorRoomTimelineItem(id: "Today", text: "Today"),
TextRoomTimelineItem(id: UUID().uuidString,
@@ -67,8 +67,15 @@ enum RoomTimelineItemFixtures {
sender: .init(id: "", displayName: "Bob"),
content: .init(body: "New home office set up!"),
properties: RoomTimelineItemProperties(reactions: [
AggregatedReaction(key: "🙏", count: 1, isHighlighted: false),
AggregatedReaction(key: "😁", count: 3, isHighlighted: false)
AggregatedReaction(accountOwnerID: "me", key: "🙏", senders: ["helena"]),
AggregatedReaction(accountOwnerID: "me", key: "🙌", senders: ["me", "helena", "jacob", "bob", "alice", "charlie", "dan", "erin"]),
AggregatedReaction(accountOwnerID: "me", key: "👌", senders: ["helena"]),
AggregatedReaction(accountOwnerID: "me", key: "🥳", senders: ["bob"]),
AggregatedReaction(accountOwnerID: "me", key: "🍾", senders: ["charlie"]),
AggregatedReaction(accountOwnerID: "me", key: "🎈", senders: ["helena"]),
AggregatedReaction(accountOwnerID: "me", key: "👏", senders: ["helena"]),
AggregatedReaction(accountOwnerID: "me", key: "🎉", senders: ["helena"])
],
orderedReadReceipts: [ReadReceipt(userID: "alice", formattedTimestamp: nil),
ReadReceipt(userID: "bob", formattedTimestamp: nil),