I’ve a Message View constructed from an avatar and a message bubble, I wish to add a .contextMenu to popup when urgent on the bubble and it ought to spotlight the bubble and avatar. The issue is that the context menu is including a whiteish background coloration between the avatar and bubble, when i wished to be clear.
The way it needs to be
Right here is my code:
struct MessageCellView: View {
@ObservedObject var viewModel: MessageCellViewModel
var physique: some View {
HStack {
HStack(alignment: .backside) {
avatar("avatar")
bubble()
.cornerRadius(17, corners: [.topLeft, .topRight, .bottomRight])
.cornerRadius(5, corners: [.bottomLeft])
}
.contextMenu {
Button {
// Do somethind
} label: {
if viewModel.isUserMuted {
Label("Unmute Person", systemImage: "particular person.fill.checkmark")
} else {
Label("Mute Person", systemImage: "particular person.fill.xmark")
}
}
Spacer()
}
}
}
personal func bubble() -> some View {
VStack(alignment: .main) {
Textual content(" identify ")
.foregroundStyle(Shade.grey900)
.font(.system(measurement: 13, weight: .semibold))
Textual content(" Textual content ")
.font(.system(measurement: 15, weight: .common))
Textual content("9m")
.foregroundStyle(Shade.grey700)
.font(.system(measurement: 12, weight: .common))
}
.body(maxWidth: 250, alignment: .main)
.padding(.horizontal, 10)
.padding(.vertical, 6)
.background(Shade.grey100)
}
personal func avatar(_ picture: String) -> some View {
AsyncImage(url: URL(string: picture)) { section in
change section {
case .empty:
ProgressView()
.padding()
case .success(let picture):
picture.resizable()
.aspectRatio(contentMode: .match)
.body(maxWidth: 40, maxHeight: 40)
.clipShape(Circle())
case .failure:
ProgressView()
.padding()
@unknown default:
ProgressView()
.padding()
}
}
}
}