mirror of
https://github.com/Novaloop-AG/element-x-ios.git
synced 2026-11-02 12:07:55 +00:00
Allow emotes in the menu to scroll if their size overflows the container (#2780)
This commit is contained in:
Mauro
GitHub
@@ -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)
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:8a388d86979e8d51df6d2ddcf375edab9cd588e568dd3db8408eb3306e86a941
|
||||
size 147617
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:0ae30b3ff2726a57ccd497ad37525bcafafb0c264371f0356454259a89a3b7e0
|
||||
size 147308
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:6ea3f6b0e1a784d00458ba1c7cab1b19d9eacca6f96071a9443f16e6df1e8bbe
|
||||
size 162209
|
||||
@@ -1,3 +0,0 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:0b3cea06a5f1eebfd14df2dba18a39be3240d7e357383d1993b416ee0eecc8a3
|
||||
size 165356
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:5972bea0c547c645dbb17adfaf8a0088b104624fa33ce364cb7bf02a8dabdd56
|
||||
size 165078
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:ca8610b52c724efe20b297959ca948d5dd86b6a28537b3c04188c9a156de37fc
|
||||
size 181743
|
||||
@@ -1,3 +0,0 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:5477c2ecae338a04d35489f02793688b1f497ffd91eeb12937ae3a1acfa0cf36
|
||||
size 94928
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:2a6fda8d28f79dca8ea6376a500d2efd95dd82a2f0dd7b822062d7afcce49c97
|
||||
size 94163
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:00c43663a92dc2edcc95025b668c5c862679762103596aa4fca0053034cba064
|
||||
size 103164
|
||||
@@ -1,3 +0,0 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:f467b2dcdc5d6b2835a4da3177ab3db28a934f0ed2a078002202a11766bed887
|
||||
size 109995
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:6417fa4b4c302bd91c30bd1e1fbf41dda7bd9d9daf7578344df51670e00a855c
|
||||
size 109302
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:6350123c47ec044d1ada486b04d84c5deebe6c9234e405f682795138fbd277b0
|
||||
size 119436
|
||||
@@ -0,0 +1 @@
|
||||
If button shapes are enabled, emojis are now displayed properly in the menu.
|
||||
Reference in New Issue
Block a user