ehealthsolutions/element-x-ios
3
0
Fork 0
mirror of https://github.com/Novaloop-AG/element-x-ios.git synced 2026-11-03 16:10:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add expand/collapse UI for reactions (#1249)

Browse Source 
* Add expand/collapse UI for reactions

- Adds a CollapsibleFlowLayout for controlling the layout
- Adds tests for  this layout and some mocks for testing layouts generally
- Improves the rendering of the reaction buttons which were not pixel perfect
- Adds the UI for the expand collapse buttons including the count of hidden items in the collapsed state.

* Add comment for reactionsCollapsed binding.

* Remove Flow and simplify implementation

- Remove SwiftUI-Flow
- Add strings by importing from Localyse
- Remove count on expand button as requires GeometryReader and can cause loops
- Don't use GeometryReader for hiding reactions with opacity(just put them way off screen for now)
- Fix unit and UI tests

* Address PR comments

- use synthesized inits
- use rows rather than lines for naming flow layout
- other naming improvements
- reactions were already rendered in another ui test, removing my test on favour of those and updating the screenshots for those.
This commit is contained in:
David Langley
2023-07-10 16:13:58 +01:00
committed by GitHub
parent c453cc0680
commit 2cec1858ff
29 changed files with 610 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ElementX/Sources/Services/Timeline/Fixtures/RoomTimelineItemFixtures.swift
+5 -15
View File
@@ -66,21 +66,11 @@ enum RoomTimelineItemFixtures {
isEditable: true,
sender: .init(id: "", displayName: "Bob"),
content: .init(body: "New home office set up!"),
properties: RoomTimelineItemProperties(reactions: [
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),
ReadReceipt(userID: "charlie", formattedTimestamp: nil),
ReadReceipt(userID: "dan", formattedTimestamp: nil)])),
properties: RoomTimelineItemProperties(reactions: AggregatedReaction.mockReactions,
orderedReadReceipts: [ReadReceipt(userID: "alice", formattedTimestamp: nil),
ReadReceipt(userID: "bob", formattedTimestamp: nil),
ReadReceipt(userID: "charlie", formattedTimestamp: nil),
ReadReceipt(userID: "dan", formattedTimestamp: nil)])),
TextRoomTimelineItem(id: UUID().uuidString,
timestamp: "5 PM",
isOutgoing: false,
ElementX/Sources/Services/Timeline/TimelineItems/RoomTimelineItemFactory.swift
+6 -2
View File
@@ -323,8 +323,12 @@ struct RoomTimelineItemFactory: RoomTimelineItemFactoryProtocol {
private func aggregateReactions(_ reactions: [Reaction]) -> [AggregatedReaction] {
reactions.map { reaction in
AggregatedReaction(accountOwnerID: userID, key: reaction.key, senders: reaction.senders)
}.sorted { a, b in
a.count > b.count
}
.sorted { a, b in
// Sort by count and then by key for a consistence experience.
// Otherwise emojis can switch around. We can replace
// with timestamp as a secondary sort when it is available.
(a.count, a.key) > (b.count, b.key)
}
}