Show both defaults and frequent emojis in the timeline item menu, make the list scrollable (#3534)

This commit is contained in:
Stefan Ceriu
2024-11-19 21:53:57 +02:00
committed by GitHub
parent bce3b3a385
commit 51227fffe3
42 changed files with 121 additions and 114 deletions
@@ -11,6 +11,7 @@ import SwiftUI
struct TimelineItemMenu: View {
@EnvironmentObject private var context: TimelineViewModel.Context
@Environment(\.dismiss) private var dismiss
@Environment(\.horizontalSizeClass) private var horizontalSizeClass
@State private var reactionsFrame = CGRect.zero
@@ -109,31 +110,43 @@ struct TimelineItemMenu: View {
}
private var reactionsSection: some View {
ScrollView(.horizontal) {
HStack(alignment: .center, spacing: 8) {
ForEach(actions.reactions, id: \.key) {
reactionButton(for: $0.key)
}
Button {
dismiss()
// Otherwise we get errors that a sheet is already presented
DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
context.send(viewAction: .displayEmojiPicker(itemID: item.id))
HStack(spacing: 8) {
ScrollView(.horizontal) {
HStack(alignment: .center, spacing: 8) {
ForEach(actions.reactions, id: \.key) {
reactionButton(for: $0.key)
}
} label: {
CompoundIcon(\.reactionAdd, size: .medium, relativeTo: .compound.headingLG)
.foregroundColor(.compound.iconSecondary)
.padding(10)
}
.accessibilityLabel(L10n.actionReact)
.padding(.horizontal)
.frame(minWidth: reactionsFrame.width, maxWidth: .infinity, alignment: .center)
}
.padding(.horizontal)
.frame(minWidth: reactionsFrame.width, maxWidth: .infinity, alignment: .center)
.scrollIndicators(.hidden)
.scrollBounceBehavior(.basedOnSize, axes: .horizontal)
.readFrame($reactionsFrame)
.overlay {
if horizontalSizeClass == .compact {
LinearGradient(stops: [.init(color: .clear, location: 0.0),
.init(color: .clear, location: 0.9),
.init(color: .compound.bgCanvasDefault, location: 1.0)],
startPoint: .leading,
endPoint: .trailing)
.allowsHitTesting(false)
}
}
Button {
dismiss()
// Otherwise we get errors that a sheet is already presented
DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
context.send(viewAction: .displayEmojiPicker(itemID: item.id))
}
} label: {
CompoundIcon(\.reactionAdd, size: .medium, relativeTo: .compound.headingLG)
.foregroundColor(.compound.iconSecondary)
.padding(10)
}
.accessibilityLabel(L10n.actionReact)
}
.scrollIndicators(.hidden)
.scrollBounceBehavior(.basedOnSize, axes: .horizontal)
.readFrame($reactionsFrame)
}
private func reactionButton(for emoji: String) -> some View {