diff --git a/ElementX/Sources/Screens/RoomScreen/View/TimelineItemMenu.swift b/ElementX/Sources/Screens/RoomScreen/View/TimelineItemMenu.swift index fa6308d02..9266ce024 100644 --- a/ElementX/Sources/Screens/RoomScreen/View/TimelineItemMenu.swift +++ b/ElementX/Sources/Screens/RoomScreen/View/TimelineItemMenu.swift @@ -137,6 +137,8 @@ struct TimelineItemMenu: View { @EnvironmentObject private var context: RoomScreenViewModel.Context @Environment(\.dismiss) private var dismiss + @State private var reactionsFrame = CGRect.zero + let item: EventBasedTimelineItemProtocol let actions: TimelineItemMenuActions private let feedbackGenerator = UIImpactFeedbackGenerator(style: .heavy) @@ -212,28 +214,33 @@ struct TimelineItemMenu: View { } private var reactionsSection: some View { - HStack(alignment: .center, spacing: 8) { - reactionButton(for: "👍️") - reactionButton(for: "👎️") - reactionButton(for: "🔥") - reactionButton(for: "❤️") - reactionButton(for: "👏") - - 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)) + ScrollView(.horizontal) { + HStack(alignment: .center, spacing: 8) { + reactionButton(for: "👍️") + reactionButton(for: "👎️") + reactionButton(for: "🔥") + reactionButton(for: "❤️") + reactionButton(for: "👏") + + 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) } - } label: { - CompoundIcon(\.reactionAdd, size: .medium, relativeTo: .compound.headingLG) - .foregroundColor(.compound.iconSecondary) - .padding(10) + .accessibilityLabel(L10n.actionReact) } - .accessibilityLabel(L10n.actionReact) + .padding(.horizontal) + .frame(minWidth: reactionsFrame.width, maxWidth: .infinity, alignment: .center) } - .padding(.horizontal) - .frame(maxWidth: .infinity, alignment: .center) + .scrollIndicators(.hidden) + .scrollBounceBehavior(.basedOnSize, axes: .horizontal) + .readFrame($reactionsFrame) } private func reactionButton(for emoji: String) -> some View { @@ -243,11 +250,11 @@ struct TimelineItemMenu: View { context.send(viewAction: .toggleReaction(key: emoji, itemID: item.id)) } label: { Text(emoji) - .padding(8) .font(.compound.headingLG) + .padding(8) .background(Circle() .foregroundColor(reactionBackgroundColor(for: emoji))) - Spacer() + .frame(maxWidth: .infinity, alignment: .leading) } } @@ -284,6 +291,15 @@ struct TimelineItemMenu_Previews: PreviewProvider, TestablePreview { static let viewModel = RoomScreenViewModel.mock static var previews: some View { + testView + .previewDisplayName("With button shapes off") + testView + .environment(\._accessibilityShowButtonShapes, true) + .previewDisplayName("With button shapes on") + } + + @ViewBuilder + static var testView: some View { if let item = RoomTimelineItemFixtures.singleMessageChunk.first as? EventBasedTimelineItemProtocol, let actions = TimelineItemMenuActions(actions: [.copy, .edit, .reply(isThread: false), .redact], debugActions: [.viewSource]) { TimelineItemMenu(item: item, actions: actions) diff --git a/PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPad-en-GB.1.png b/PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPad-en-GB.1.png deleted file mode 100644 index b466637f8..000000000 --- a/PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPad-en-GB.1.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:8a388d86979e8d51df6d2ddcf375edab9cd588e568dd3db8408eb3306e86a941 -size 147617 diff --git a/PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPad-en-GB.With-button-shapes-off.png b/PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPad-en-GB.With-button-shapes-off.png new file mode 100644 index 000000000..df1a1bef2 --- /dev/null +++ b/PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPad-en-GB.With-button-shapes-off.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:0ae30b3ff2726a57ccd497ad37525bcafafb0c264371f0356454259a89a3b7e0 +size 147308 diff --git a/PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPad-en-GB.With-button-shapes-on.png b/PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPad-en-GB.With-button-shapes-on.png new file mode 100644 index 000000000..ba065f8eb --- /dev/null +++ b/PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPad-en-GB.With-button-shapes-on.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:6ea3f6b0e1a784d00458ba1c7cab1b19d9eacca6f96071a9443f16e6df1e8bbe +size 162209 diff --git a/PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPad-pseudo.1.png b/PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPad-pseudo.1.png deleted file mode 100644 index 00bbdfb43..000000000 --- a/PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPad-pseudo.1.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:0b3cea06a5f1eebfd14df2dba18a39be3240d7e357383d1993b416ee0eecc8a3 -size 165356 diff --git a/PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPad-pseudo.With-button-shapes-off.png b/PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPad-pseudo.With-button-shapes-off.png new file mode 100644 index 000000000..8e081544f --- /dev/null +++ b/PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPad-pseudo.With-button-shapes-off.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:5972bea0c547c645dbb17adfaf8a0088b104624fa33ce364cb7bf02a8dabdd56 +size 165078 diff --git a/PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPad-pseudo.With-button-shapes-on.png b/PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPad-pseudo.With-button-shapes-on.png new file mode 100644 index 000000000..a02a09f96 --- /dev/null +++ b/PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPad-pseudo.With-button-shapes-on.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ca8610b52c724efe20b297959ca948d5dd86b6a28537b3c04188c9a156de37fc +size 181743 diff --git a/PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPhone-15-en-GB.1.png b/PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPhone-15-en-GB.1.png deleted file mode 100644 index b0fa45c38..000000000 --- a/PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPhone-15-en-GB.1.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:5477c2ecae338a04d35489f02793688b1f497ffd91eeb12937ae3a1acfa0cf36 -size 94928 diff --git a/PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPhone-15-en-GB.With-button-shapes-off.png b/PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPhone-15-en-GB.With-button-shapes-off.png new file mode 100644 index 000000000..5633472f7 --- /dev/null +++ b/PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPhone-15-en-GB.With-button-shapes-off.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:2a6fda8d28f79dca8ea6376a500d2efd95dd82a2f0dd7b822062d7afcce49c97 +size 94163 diff --git a/PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPhone-15-en-GB.With-button-shapes-on.png b/PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPhone-15-en-GB.With-button-shapes-on.png new file mode 100644 index 000000000..0017c528b --- /dev/null +++ b/PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPhone-15-en-GB.With-button-shapes-on.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:00c43663a92dc2edcc95025b668c5c862679762103596aa4fca0053034cba064 +size 103164 diff --git a/PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPhone-15-pseudo.1.png b/PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPhone-15-pseudo.1.png deleted file mode 100644 index a4ef5d0f8..000000000 --- a/PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPhone-15-pseudo.1.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:f467b2dcdc5d6b2835a4da3177ab3db28a934f0ed2a078002202a11766bed887 -size 109995 diff --git a/PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPhone-15-pseudo.With-button-shapes-off.png b/PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPhone-15-pseudo.With-button-shapes-off.png new file mode 100644 index 000000000..1068396c2 --- /dev/null +++ b/PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPhone-15-pseudo.With-button-shapes-off.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:6417fa4b4c302bd91c30bd1e1fbf41dda7bd9d9daf7578344df51670e00a855c +size 109302 diff --git a/PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPhone-15-pseudo.With-button-shapes-on.png b/PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPhone-15-pseudo.With-button-shapes-on.png new file mode 100644 index 000000000..e993c79e3 --- /dev/null +++ b/PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPhone-15-pseudo.With-button-shapes-on.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:6350123c47ec044d1ada486b04d84c5deebe6c9234e405f682795138fbd277b0 +size 119436 diff --git a/changelog.d/2406.bugfix b/changelog.d/2406.bugfix new file mode 100644 index 000000000..ca0a92977 --- /dev/null +++ b/changelog.d/2406.bugfix @@ -0,0 +1 @@ +If button shapes are enabled, emojis are now displayed properly in the menu. \ No newline at end of file