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.
2026-11-03 06:55:59 +00:00 · 2023-06-29 10:53:44 +01:00
parent 3f6bfbcc14
commit 98cec5672c
20 changed files with 359 additions and 53 deletions
@@ -18,7 +18,6 @@ import SwiftUI

 struct RoomScreen: View {
    @ObservedObject var context: RoomScreenViewModel.Context
-    @State private var showReactionsMenuForItemId = ""
    @State private var dragOver = false
    
    private let attachmentButtonPadding = 10.0
@@ -50,6 +49,10 @@ struct RoomScreen: View {
                        .environmentObject(context)
                }
            }
+            .sheet(item: $context.reactionSummaryInfo) {
+                ReactionsSummaryView(reactions: $0.reactions, members: context.viewState.members, imageProvider: context.imageProvider, selectedReactionKey: $0.selectedKey)
+                    .edgesIgnoringSafeArea([.bottom])
+            }
            .interactiveQuickLook(item: $context.mediaPreviewItem)
            .track(screen: .room)
            .task(id: context.viewState.roomId) {
@@ -20,6 +20,7 @@ import SwiftUI
 struct TimelineItemBubbledStylerView<Content: View>: View {
    @EnvironmentObject private var context: RoomScreenViewModel.Context
    @Environment(\.timelineGroupStyle) private var timelineGroupStyle
+    @Environment(\.layoutDirection) var layoutDirection: LayoutDirection
    
    let timelineItem: EventBasedTimelineItemProtocol
    @ViewBuilder let content: () -> Content
@@ -31,7 +32,12 @@ struct TimelineItemBubbledStylerView<Content: View>: View {

    private var isTextItem: Bool { timelineItem is TextBasedRoomTimelineItem }
    private var isEncryptedOneToOneRoom: Bool { context.viewState.isEncryptedOneToOneRoom }
-
+    
+    var reactionsLayoutDirection: LayoutDirection {
+        guard timelineItem.isOutgoing else { return layoutDirection }
+        return layoutDirection == .leftToRight ? .rightToLeft : .leftToRight
+    }
+    
    var body: some View {
        ZStack(alignment: .trailingFirstTextBaseline) {
            VStack(alignment: alignment, spacing: -12) {
@@ -92,10 +98,12 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
                .accessibilityElement(children: .combine)
            
            if !timelineItem.properties.reactions.isEmpty {
-                TimelineReactionsView(reactions: timelineItem.properties.reactions,
-                                      alignment: alignment) { key in
+                TimelineReactionsView(reactions: timelineItem.properties.reactions) { key in
                    context.send(viewAction: .toggleReaction(key: key, eventID: timelineItem.id))
+                } showReactionSummary: { key in
+                    context.send(viewAction: .reactionSummary(itemID: timelineItem.id, key: key))
                }
+                .environment(\.layoutDirection, reactionsLayoutDirection)
                // Workaround to stop the message long press stealing the touch from the reaction buttons
                .onTapGesture { }
            }
@@ -117,9 +117,10 @@ struct TimelineItemPlainStylerView<Content: View>: View {
            }
            
            if !timelineItem.properties.reactions.isEmpty {
-                TimelineReactionsView(reactions: timelineItem.properties.reactions,
-                                      alignment: .leading) { key in
+                TimelineReactionsView(reactions: timelineItem.properties.reactions) { key in
                    context.send(viewAction: .toggleReaction(key: key, eventID: timelineItem.id))
+                } showReactionSummary: { key in
+                    context.send(viewAction: .reactionSummary(itemID: timelineItem.id, key: key))
                }
                // Workaround to stop the message long press stealing the touch from the reaction buttons
                .onTapGesture { }
@@ -0,0 +1,144 @@
+//
+// Copyright 2023 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import SwiftUI
+
+struct ReactionsSummaryView: View {
+    let reactions: [AggregatedReaction]
+    let members: [String: RoomMemberState]
+    let imageProvider: ImageProviderProtocol?
+    
+    @State var selectedReactionKey: String
+    
+    var selectedReactionIndex: Int {
+        reactions.firstIndex(where: { $0.key == selectedReactionKey }) ?? 0
+    }
+    
+    var body: some View {
+        VStack(alignment: .leading, spacing: 0) {
+            reactionButtons
+            sendersList
+        }
+        .presentationDetents([.medium])
+        .presentationBackground(Color.compound.bgCanvasDefault)
+        .presentationDragIndicator(.visible)
+    }
+    
+    private var reactionButtons: some View {
+        ScrollView(.horizontal, showsIndicators: false) {
+            ScrollViewReader { scrollView in
+                HStack {
+                    ForEach(reactions, id: \.self) { reaction in
+                        ReactionSummaryButton(reaction: reaction, highlighted: selectedReactionKey == reaction.key) { key in
+                            withAnimation(.easeInOut) {
+                                selectedReactionKey = key
+                            }
+                        }
+                        .id(reaction.key)
+                    }
+                }
+                .padding(.leading, 20)
+                .onAppear {
+                    scrollView.scrollTo(selectedReactionKey, anchor: .leading)
+                }
+            }
+        }
+        .padding(.top, 24)
+        .padding(.bottom, 12)
+    }
+    
+    private var sendersList: some View {
+        TabView(selection: $selectedReactionKey) {
+            ForEach(reactions, id: \.self) { reaction in
+                ScrollView {
+                    VStack(alignment: .leading) {
+                        ForEach(reaction.senders, id: \.self) { sender in
+                            ReactionSummarySenderView(sender: sender, member: members[sender], imageProvider: imageProvider)
+                                .padding(.horizontal, 16)
+                        }
+                    }
+                    .frame(maxWidth: .infinity)
+                }
+                .tag(reaction.key)
+            }
+        }
+        .tabViewStyle(.page(indexDisplayMode: .never))
+    }
+}
+
+private struct ReactionSummaryButton: View {
+    let reaction: AggregatedReaction
+    let highlighted: Bool
+    let action: (String) -> Void
+    
+    var body: some View {
+        Button { action(reaction.key) } label: { label }
+    }
+    
+    var label: some View {
+        HStack(spacing: 4) {
+            Text(reaction.key)
+                .font(.compound.headingSM)
+            if reaction.count > 1 {
+                Text(String(reaction.count))
+                    .font(.compound.headingSM)
+                    .foregroundColor(highlighted ? Color.compound.textOnSolidPrimary : Color.compound.textSecondary)
+            }
+        }
+        .padding(.vertical, 6)
+        .padding(.horizontal, 8)
+        .background(highlighted ? Color.compound.bgActionPrimaryRest : .clear, in: Capsule())
+        .accessibilityElement(children: .combine)
+    }
+}
+
+private struct ReactionSummarySenderView: View {
+    var sender: String
+    var member: RoomMemberState?
+    let imageProvider: ImageProviderProtocol?
+    
+    var displayName: String {
+        member?.displayName ?? sender
+    }
+    
+    var body: some View {
+        HStack {
+            LoadableAvatarImage(url: member?.avatarURL,
+                                name: displayName,
+                                contentID: sender,
+                                avatarSize: .user(on: .timeline),
+                                imageProvider: imageProvider)
+            VStack(alignment: .leading) {
+                Text(displayName)
+                    .font(.compound.bodyMDSemibold)
+                Text(sender)
+                    .font(.compound.bodySM)
+                    .foregroundColor(.compound.textSecondary)
+            }
+        }
+        .frame(maxWidth: .infinity, alignment: .leading)
+        .padding(.vertical, 8)
+    }
+}
+
+struct ReactionsSummaryView_Previews: PreviewProvider {
+    static var previews: some View {
+        ReactionsSummaryView(reactions: AggregatedReaction.mockReactions,
+                             members: [:],
+                             imageProvider: MockMediaProvider(),
+                             selectedReactionKey: AggregatedReaction.mockReactions[0].key)
+    }
+}
@@ -14,30 +14,41 @@
 // limitations under the License.
 //

+import Flow
 import SwiftUI

 struct TimelineReactionsView: View {
+    @Environment(\.layoutDirection) var layoutDirection: LayoutDirection
    let reactions: [AggregatedReaction]
-    let alignment: HorizontalAlignment
-    let action: (String) -> Void
+    let toggleReaction: (String) -> Void
+    let showReactionSummary: (String) -> Void
    
    var body: some View {
-        AlignedScrollView(alignment: alignment, showsIndicators: false) {
-            HStack {
-                ForEach(reactions, id: \.self) { reaction in
-                    TimelineReactionButton(reaction: reaction, action: action)
-                }
+        HFlow(itemSpacing: 4, rowSpacing: 4) {
+            ForEach(reactions, id: \.self) { reaction in
+                TimelineReactionButton(reaction: reaction,
+                                       toggleReaction: toggleReaction,
+                                       showReactionSummary: showReactionSummary)
            }
        }
+        .environment(\.layoutDirection, layoutDirection)
    }
 }

 struct TimelineReactionButton: View {
    let reaction: AggregatedReaction
-    let action: (String) -> Void
+    let toggleReaction: (String) -> Void
+    let showReactionSummary: (String) -> Void
+    
+    @State private var didLongPress = false
    
    var body: some View {
-        Button { action(reaction.key) } label: { label }
+        label.onTapGesture {
+            toggleReaction(reaction.key)
+        }
+        .longPressWithFeedback {
+            showReactionSummary(reaction.key)
+        }
    }
    
    var label: some View {
@@ -79,22 +90,13 @@ struct TimelineReactionButton: View {
 struct TimelineReactionView_Previews: PreviewProvider {
    static var previews: some View {
        VStack {
-            TimelineReactionButton(reaction: AggregatedReaction(key: "👍", count: 5, isHighlighted: true)) { _ in }
-            TimelineReactionButton(reaction: AggregatedReaction(key: "👏", count: 1, isHighlighted: false)) { _ in }
-            TimelineReactionButton(reaction: AggregatedReaction(key: "🎉", count: 20, isHighlighted: false)) { _ in }
-            
-            TimelineReactionsView(reactions: [
-                AggregatedReaction(key: "😅", count: 1, isHighlighted: true),
-                AggregatedReaction(key: "🤷‍♂️", count: 1, isHighlighted: false),
-                AggregatedReaction(key: "🎨", count: 6, isHighlighted: true),
-                AggregatedReaction(key: "🎉", count: 8, isHighlighted: false),
-                AggregatedReaction(key: "🤯", count: 15, isHighlighted: true),
-                AggregatedReaction(key: "🫣", count: 1, isHighlighted: false),
-                AggregatedReaction(key: "🚀", count: 3, isHighlighted: true),
-                AggregatedReaction(key: "😇", count: 2, isHighlighted: false),
-                AggregatedReaction(key: "🤭", count: 9, isHighlighted: true),
-                AggregatedReaction(key: "🫤", count: 10, isHighlighted: false)
-            ], alignment: .leading) { _ in }
+            TimelineReactionButton(reaction: AggregatedReaction.mockThumbsUpHighlighted) { _ in } showReactionSummary: { _ in }
+            TimelineReactionButton(reaction: AggregatedReaction.mockClap) { _ in } showReactionSummary: { _ in }
+            TimelineReactionButton(reaction: AggregatedReaction.mockParty) { _ in } showReactionSummary: { _ in }
+            TimelineReactionsView(reactions: AggregatedReaction.mockReactions) { _ in } showReactionSummary: { _ in }
+                .environment(\.layoutDirection, .leftToRight)
+            TimelineReactionsView(reactions: AggregatedReaction.mockReactions) { _ in } showReactionSummary: { _ in }
+                .environment(\.layoutDirection, .rightToLeft)
        }
    }
 }