mirror of
https://github.com/Novaloop-AG/element-x-ios.git
synced 2026-11-10 18:28:48 +00:00
Fixes #974 - Replace the timeline item contex menu with a bottom sheet
(+10 squashed commits) [ba1d3160] Update timeline item action menu reaction UI [410315ac] Move away from item bound action meus plus various tweaks following code review [c25cd998] Add emoji reactions to the new timeline item action menu [57001f49] Prevent timeline view layouts from dismissing the action menu [d1e70538] Various UI tweaks [652f4143] Switch to a long press gesture, move the header outside of the scroll view [569a485c] Workaround timeline item action menu presentation state not being stored [80c29567] Add currently selected item information in the TimelineItemMenu [ff7790ec] Fixes #974 - Replace the timeline item contex menu with a bottom sheet [ba1d3160] Rename TimelineItemContextMenu to TimelineIteMenu so that git correctly interprets it
This commit is contained in:
Stefan Ceriu
committed by
Stefan Ceriu
Stefan Ceriu
parent
8ff5c6144c
commit
5a4f73e2b8
@@ -0,0 +1,247 @@
|
||||
//
|
||||
// Copyright 2022 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 TimelineItemMenuActions {
|
||||
let actions: [TimelineItemMenuAction]
|
||||
let debugActions: [TimelineItemMenuAction]
|
||||
|
||||
init?(actions: [TimelineItemMenuAction], debugActions: [TimelineItemMenuAction]) {
|
||||
if actions.isEmpty, debugActions.isEmpty {
|
||||
return nil
|
||||
}
|
||||
|
||||
self.actions = actions
|
||||
self.debugActions = debugActions
|
||||
}
|
||||
}
|
||||
|
||||
enum TimelineItemMenuAction: Identifiable, Hashable {
|
||||
case copy
|
||||
case edit
|
||||
case quote
|
||||
case copyPermalink
|
||||
case redact
|
||||
case reply
|
||||
case viewSource
|
||||
case retryDecryption(sessionID: String)
|
||||
case report
|
||||
|
||||
var id: Self { self }
|
||||
|
||||
var switchToDefaultComposer: Bool {
|
||||
switch self {
|
||||
case .reply, .edit:
|
||||
return false
|
||||
default:
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public struct TimelineItemMenu: View {
|
||||
@EnvironmentObject private var context: RoomScreenViewModel.Context
|
||||
@Environment(\.presentationMode) private var presentationMode
|
||||
|
||||
let item: EventBasedTimelineItemProtocol
|
||||
let actions: TimelineItemMenuActions
|
||||
|
||||
public var body: some View {
|
||||
VStack {
|
||||
header
|
||||
.frame(idealWidth: 300.0)
|
||||
|
||||
Divider()
|
||||
.background(Color.compound.bgSubtlePrimary)
|
||||
|
||||
ScrollView {
|
||||
VStack(alignment: .leading, spacing: 0.0) {
|
||||
reactionsSection
|
||||
.padding(.top, 4.0)
|
||||
.padding(.bottom, 8.0)
|
||||
|
||||
Divider()
|
||||
.background(Color.compound.bgSubtlePrimary)
|
||||
|
||||
viewsForActions(actions.actions)
|
||||
|
||||
Divider()
|
||||
.background(Color.compound.bgSubtlePrimary)
|
||||
|
||||
viewsForActions(actions.debugActions)
|
||||
}
|
||||
}
|
||||
}
|
||||
.presentationDetents([.medium, .large])
|
||||
.presentationDragIndicator(.visible)
|
||||
.tint(.element.accent)
|
||||
}
|
||||
|
||||
private var header: some View {
|
||||
HStack(alignment: .top, spacing: 0.0) {
|
||||
LoadableAvatarImage(url: item.sender.avatarURL,
|
||||
name: item.sender.displayName,
|
||||
contentID: item.sender.id,
|
||||
avatarSize: .user(on: .timeline),
|
||||
imageProvider: context.imageProvider)
|
||||
|
||||
Spacer(minLength: 8.0)
|
||||
|
||||
VStack(alignment: .leading) {
|
||||
Text(item.sender.displayName ?? item.sender.id)
|
||||
.font(.compound.bodySMSemibold)
|
||||
.foregroundColor(.compound.textPrimary)
|
||||
|
||||
Text(item.body.trimmingCharacters(in: .whitespacesAndNewlines))
|
||||
.font(.compound.bodyMD)
|
||||
.foregroundColor(.compound.textSecondary)
|
||||
.lineLimit(1)
|
||||
}
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
|
||||
Spacer(minLength: 16.0)
|
||||
|
||||
Text(item.timestamp)
|
||||
.font(.compound.bodyXS)
|
||||
.foregroundColor(.compound.textSecondary)
|
||||
}
|
||||
.padding(.horizontal)
|
||||
.padding(.top, 32.0)
|
||||
.padding(.bottom, 4.0)
|
||||
}
|
||||
|
||||
private var reactionsSection: some View {
|
||||
HStack(alignment: .center) {
|
||||
reactionButton(for: "👍️")
|
||||
reactionButton(for: "👎️")
|
||||
reactionButton(for: "🔥")
|
||||
reactionButton(for: "❤️")
|
||||
reactionButton(for: "👏")
|
||||
|
||||
Button {
|
||||
presentationMode.wrappedValue.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: {
|
||||
Image(systemName: "plus.circle")
|
||||
.font(.compound.headingLG)
|
||||
}
|
||||
}
|
||||
.padding(.horizontal)
|
||||
.frame(maxWidth: .infinity, alignment: .center)
|
||||
}
|
||||
|
||||
private func reactionButton(for emoji: String) -> some View {
|
||||
Button {
|
||||
presentationMode.wrappedValue.dismiss()
|
||||
context.send(viewAction: .sendReaction(key: emoji, eventID: item.id))
|
||||
} label: {
|
||||
Text(emoji)
|
||||
.padding(8.0)
|
||||
.font(.compound.headingLG)
|
||||
.background(Circle()
|
||||
.foregroundColor(reactionBackgroundColor(for: emoji)))
|
||||
|
||||
Spacer()
|
||||
}
|
||||
}
|
||||
|
||||
private func reactionBackgroundColor(for emoji: String) -> Color {
|
||||
if item.properties.reactions.first(where: { $0.key == emoji }) != nil {
|
||||
return .element.quinaryContent
|
||||
} else {
|
||||
return .clear
|
||||
}
|
||||
}
|
||||
|
||||
private func viewsForActions(_ actions: [TimelineItemMenuAction]) -> some View {
|
||||
ForEach(actions, id: \.self) { action in
|
||||
switch action {
|
||||
case .copy:
|
||||
Button { send(action) } label: {
|
||||
MenuLabel(title: L10n.actionCopy, systemImageName: "doc.on.doc")
|
||||
}
|
||||
case .edit:
|
||||
Button { send(action) } label: {
|
||||
MenuLabel(title: L10n.actionEdit, systemImageName: "pencil.line")
|
||||
}
|
||||
case .quote:
|
||||
Button { send(action) } label: {
|
||||
MenuLabel(title: L10n.actionQuote, systemImageName: "quote.bubble")
|
||||
}
|
||||
case .copyPermalink:
|
||||
Button { send(action) } label: {
|
||||
MenuLabel(title: L10n.commonPermalink, systemImageName: "link")
|
||||
}
|
||||
case .reply:
|
||||
Button { send(action) } label: {
|
||||
MenuLabel(title: L10n.actionReply, systemImageName: "arrowshape.turn.up.left")
|
||||
}
|
||||
case .redact:
|
||||
Button(role: .destructive) { send(action) } label: {
|
||||
MenuLabel(title: L10n.actionRemove, systemImageName: "trash")
|
||||
}
|
||||
case .viewSource:
|
||||
Button { send(action) } label: {
|
||||
MenuLabel(title: L10n.actionViewSource, systemImageName: "doc.text.below.ecg")
|
||||
}
|
||||
case .retryDecryption:
|
||||
Button { send(action) } label: {
|
||||
MenuLabel(title: L10n.actionRetryDecryption, systemImageName: "arrow.down.message")
|
||||
}
|
||||
case .report:
|
||||
Button(role: .destructive) { send(action) } label: {
|
||||
MenuLabel(title: L10n.actionReportContent, systemImageName: "exclamationmark.bubble")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private func send(_ action: TimelineItemMenuAction) {
|
||||
presentationMode.wrappedValue.dismiss()
|
||||
context.send(viewAction: .timelineItemMenuAction(itemID: item.id, action: action))
|
||||
}
|
||||
|
||||
private struct MenuLabel: View {
|
||||
let title: String
|
||||
let systemImageName: String
|
||||
|
||||
var body: some View {
|
||||
Label(title, systemImage: systemImageName)
|
||||
.labelStyle(FixedIconSizeLabelStyle())
|
||||
.multilineTextAlignment(.leading)
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
.padding()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
struct TimelineItemMenu_Previews: PreviewProvider {
|
||||
static let viewModel = RoomScreenViewModel.mock
|
||||
|
||||
static var previews: some View {
|
||||
VStack {
|
||||
if let item = RoomTimelineItemFixtures.singleMessageChunk.first as? EventBasedTimelineItemProtocol,
|
||||
let actions = TimelineItemMenuActions(actions: [.copy, .edit, .reply, .redact], debugActions: [.viewSource]) {
|
||||
TimelineItemMenu(item: item, actions: actions)
|
||||
}
|
||||
}
|
||||
.environmentObject(viewModel.context)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user