Add expand/collapse UI for reactions (#1249)

* 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
@@ -50,7 +50,15 @@ extension AggregatedReaction {
AggregatedReaction(accountOwnerID: alice, key: "🚀", senders: [alice] + mockIds(3)),
AggregatedReaction(accountOwnerID: alice, key: "😇", senders: mockIds(2)),
AggregatedReaction(accountOwnerID: alice, key: "🤭", senders: [alice] + mockIds(8)),
AggregatedReaction(accountOwnerID: alice, key: "🫤", senders: mockIds(10))
AggregatedReaction(accountOwnerID: alice, key: "🫤", senders: mockIds(10)),
AggregatedReaction(accountOwnerID: alice, key: "🐶", senders: mockIds(1)),
AggregatedReaction(accountOwnerID: alice, key: "🐱", senders: mockIds(1)),
AggregatedReaction(accountOwnerID: alice, key: "🐭", senders: mockIds(1)),
AggregatedReaction(accountOwnerID: alice, key: "🐹", senders: mockIds(1)),
AggregatedReaction(accountOwnerID: alice, key: "🐰", senders: mockIds(1)),
AggregatedReaction(accountOwnerID: alice, key: "🦊", senders: mockIds(1)),
AggregatedReaction(accountOwnerID: alice, key: "🐻", senders: mockIds(1)),
AggregatedReaction(accountOwnerID: alice, key: "🐼", senders: mockIds(1))
]
}
}