Tweaks for macOS (#1383)

* Fix constant Create Room button animation on macOS. * Allow right-clicking on timeline items to work again on macOS. * Use inline media upload previews on macOS This comes with the caveat that the previews are no longer interactive.
2026-11-02 21:33:26 +00:00 · 2023-07-24 13:08:50 +01:00
parent de199382de
commit 43dafda3ef
15 changed files with 144 additions and 86 deletions
@@ -39,6 +39,7 @@
 "action_open_with" = "Open with";
 "action_quick_reply" = "Quick reply";
 "action_quote" = "Quote";
+"action_react" = "React";
 "action_remove" = "Remove";
 "action_reply" = "Reply";
 "action_report_bug" = "Report bug";
@@ -94,6 +94,8 @@ public enum L10n {
  public static var actionQuickReply: String { return L10n.tr("Localizable", "action_quick_reply") }
  /// Quote
  public static var actionQuote: String { return L10n.tr("Localizable", "action_quote") }
+  /// React
+  public static var actionReact: String { return L10n.tr("Localizable", "action_react") }
  /// Remove
  public static var actionRemove: String { return L10n.tr("Localizable", "action_remove") }
  /// Reply
@@ -40,13 +40,15 @@ struct ShimmerModifier: ViewModifier {
    /// The colour that causes the view to remain unchanged.
    private let regularColor = Color.white
    
+    /// A slow linear animation which auto-repeats after a delay.
+    private let animation: Animation = Tests.isRunningUITests ? .noAnimation : .linear(duration: 1.75).delay(0.5).repeatForever(autoreverses: false)
+    
    func body(content: Content) -> some View {
        content
            .mask { gradient }
+            .animation(animation, value: animationTrigger)
            .task {
-                withElementAnimation(.linear(duration: 1.75).delay(0.5).repeatForever(autoreverses: false)) {
-                    animationTrigger.toggle()
-                }
+                animationTrigger.toggle()
            }
    }
    
@@ -126,8 +126,6 @@ struct HomeScreen: View {
        ToolbarItemGroup(placement: .bottomBar) {
            Spacer()
            newRoomButton
-                // Fix position animating on loop by getting caught up in the shimmer effect somehow.
-                .animation(.noAnimation, value: context.viewState.roomListMode)
        }
    }
    
@@ -20,13 +20,19 @@ import SwiftUI
 struct MediaUploadPreviewScreen: View {
    @ObservedObject var context: MediaUploadPreviewScreenViewModel.Context
    
+    var title: String {
+        ProcessInfo.processInfo.isiOSAppOnMac ? context.viewState.title ?? "" : ""
+    }
+    
    var body: some View {
        PreviewView(context: context,
                    fileURL: context.viewState.url,
                    title: context.viewState.title)
            .id(UUID())
+            .navigationTitle(title)
+            .navigationBarTitleDisplayMode(.inline)
            .disabled(context.viewState.shouldDisableInteraction)
-            .ignoresSafeArea(edges: .bottom)
+            .ignoresSafeArea(edges: [.horizontal, .bottom])
            .toolbar { toolbar }
            .interactiveDismissDisabled()
    }
@@ -52,15 +58,19 @@ private struct PreviewView: UIViewControllerRepresentable {
    let fileURL: URL
    let title: String?

-    func makeUIViewController(context: Context) -> UINavigationController {
+    func makeUIViewController(context: Context) -> UIViewController {
        let previewController = QLPreviewController()
        previewController.dataSource = context.coordinator
        previewController.delegate = context.coordinator
-
-        return UINavigationController(rootViewController: previewController)
+        
+        if ProcessInfo.processInfo.isiOSAppOnMac {
+            return previewController
+        } else {
+            return UINavigationController(rootViewController: previewController)
+        }
    }

-    func updateUIViewController(_ uiViewController: UINavigationController, context: Context) { }
+    func updateUIViewController(_ uiViewController: UIViewController, context: Context) { }

    func makeCoordinator() -> Coordinator {
        Coordinator(view: self)
@@ -95,12 +95,14 @@ struct RoomScreenViewState: BindableState {
    var readReceiptsEnabled: Bool
    var isEncryptedOneToOneRoom = false
    
+    var composerMode: RoomScreenComposerMode = .default
+    let scrollToBottomPublisher = PassthroughSubject<Void, Never>()
+    
    var bindings: RoomScreenViewStateBindings
    
+    /// A closure providing the actions to show when long pressing on an item in the timeline.
    var timelineItemMenuActionProvider: (@MainActor (_ itemId: TimelineItemIdentifier) -> TimelineItemMenuActions?)?
    
-    var composerMode: RoomScreenComposerMode = .default
-    
    var sendButtonDisabled: Bool {
        bindings.composerText.count == 0
    }
@@ -112,8 +114,6 @@ struct RoomScreenViewState: BindableState {
    var itemViewModels: [RoomTimelineItemViewModel] {
        itemsDictionary.values.elements
    }
-    
-    let scrollToBottomPublisher = PassthroughSubject<Void, Never>()
 }

 struct RoomScreenViewStateBindings {
@@ -79,7 +79,7 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol

    var callback: ((RoomScreenViewModelAction) -> Void)?
    
-    // swiftlint:disable:next cyclomatic_complexity
+    // swiftlint:disable:next cyclomatic_complexity function_body_length
    override func process(viewAction: RoomScreenViewAction) {
        switch viewAction {
        case .displayRoomDetails:
@@ -129,8 +129,7 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
        case .tappedOnUser(userID: let userID):
            Task { await handleTappedUser(userID: userID) }
        case .displayEmojiPicker(let itemID):
-            guard let item = state.itemsDictionary[itemID.timelineID], item.isReactable else { return }
-            callback?(.displayEmojiPicker(itemID: itemID))
+            showEmojiPicker(for: itemID)
        case .reactionSummary(let itemID, let key):
            showReactionSummary(for: itemID, selectedKey: key)
        case .retrySend(let itemID):
@@ -501,6 +500,8 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
            }
        case .report:
            callback?(.displayReportContent(itemID: itemID, senderID: eventTimelineItem.sender.id))
+        case .react:
+            showEmojiPicker(for: itemID)
        }
        
        if action.switchToDefaultComposer {
@@ -662,7 +663,12 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
        }
    }
    
-    // MARK: - Reaction summary
+    // MARK: - Reactions
+    
+    private func showEmojiPicker(for itemID: TimelineItemIdentifier) {
+        guard let item = state.itemsDictionary[itemID.timelineID], item.isReactable else { return }
+        callback?(.displayEmojiPicker(itemID: itemID))
+    }
    
    private func showReactionSummary(for itemID: TimelineItemIdentifier, selectedKey: String) {
        guard let timelineItem = timelineController.timelineItems.first(where: { $0.id == itemID }),
@@ -139,6 +139,12 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
            } action: {
                context.send(viewAction: .timelineItemMenuAction(itemID: timelineItem.id, action: .reply))
            }
+            .contextMenu {
+                TimelineItemMacContextMenu(item: timelineItem,
+                                           actionProvider: context.viewState.timelineItemMenuActionProvider) { action in
+                    context.send(viewAction: .timelineItemMenuAction(itemID: timelineItem.id, action: action))
+                }
+            }
            .padding(.top, messageBubbleTopPadding)
    }

@@ -81,6 +81,12 @@ struct TimelineItemPlainStylerView<Content: View>: View {
        } action: {
            context.send(viewAction: .timelineItemMenuAction(itemID: timelineItem.id, action: .reply))
        }
+        .contextMenu {
+            TimelineItemMacContextMenu(item: timelineItem,
+                                       actionProvider: context.viewState.timelineItemMenuActionProvider) { action in
+                context.send(viewAction: .timelineItemMenuAction(itemID: timelineItem.id, action: action))
+            }
+        }
    }
    
    @ViewBuilder
@@ -0,0 +1,46 @@
+//
+// Copyright 2023 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
+
+/// The contents of the context menu shown when right clicking an item in the timeline on a Mac
+struct TimelineItemMacContextMenu: View {
+    let item: RoomTimelineItemProtocol
+    let actionProvider: (@MainActor (_ itemId: TimelineItemIdentifier) -> TimelineItemMenuActions?)?
+    let send: (TimelineItemMenuAction) -> Void
+    
+    var body: some View {
+        if ProcessInfo.processInfo.isiOSAppOnMac {
+            if let menuActions = actionProvider?(item.id) {
+                Section {
+                    if item.isReactable {
+                        Button { send(.react) } label: {
+                            TimelineItemMenuAction.react.label
+                        }
+                    }
+                    ForEach(menuActions.actions) { action in
+                        Button { send(action) } label: { action.label }
+                    }
+                }
+                Section {
+                    ForEach(menuActions.debugActions) { action in
+                        Button { send(action) } label: { action.label }
+                    }
+                }
+            }
+        }
+    }
+}
@@ -50,9 +50,11 @@ enum TimelineItemMenuAction: Identifiable, Hashable {
    case viewSource
    case retryDecryption(sessionID: String)
    case report
+    case react
    
    var id: Self { self }
-
+    
+    /// Whether the item should cancel a reply/edit occurring in the composer.
    var switchToDefaultComposer: Bool {
        switch self {
        case .reply, .edit:
@@ -61,7 +63,8 @@ enum TimelineItemMenuAction: Identifiable, Hashable {
            return true
        }
    }
-
+    
+    /// Whether the action should be shown for an item that failed to send.
    var canAppearInFailedEcho: Bool {
        switch self {
        case .copy, .edit, .redact, .viewSource:
@@ -70,7 +73,8 @@ enum TimelineItemMenuAction: Identifiable, Hashable {
            return false
        }
    }
-
+    
+    /// Whether the action should be shown for a redacted item.
    var canAppearInRedacted: Bool {
        switch self {
        case .viewSource:
@@ -79,20 +83,37 @@ enum TimelineItemMenuAction: Identifiable, Hashable {
            return false
        }
    }
+    
+    /// The item's label.
+    var label: some View {
+        switch self {
+        case .copy: return Label(L10n.actionCopy, systemImage: "doc.on.doc")
+        case .edit: return Label(L10n.actionEdit, systemImage: "pencil.line")
+        case .copyPermalink: return Label(L10n.actionCopyLinkToMessage, systemImage: "link")
+        case .reply: return Label(L10n.actionReply, systemImage: "arrowshape.turn.up.left")
+        case .forward: return Label(L10n.actionForward, systemImage: "arrowshape.turn.up.right")
+        case .redact: return Label(L10n.actionRemove, systemImage: "trash")
+        case .viewSource: return Label(L10n.actionViewSource, systemImage: "doc.text.below.ecg")
+        case .retryDecryption: return Label(L10n.actionRetryDecryption, systemImage: "arrow.down.message")
+        case .report: return Label(L10n.actionReportContent, systemImage: "exclamationmark.bubble")
+        case .react: return Label(L10n.actionReact, systemImage: "hand.thumbsup")
+        }
+    }
+}
+
+extension RoomTimelineItemProtocol {
+    var isReactable: Bool {
+        guard let eventItem = self as? EventBasedTimelineItemProtocol else { return false }
+        return !eventItem.isRedacted && !eventItem.hasFailedToSend && !eventItem.hasFailedDecryption
+    }
 }

 public struct TimelineItemMenu: View {
    @EnvironmentObject private var context: RoomScreenViewModel.Context
-    @Environment(\.presentationMode) private var presentationMode
+    @Environment(\.dismiss) private var dismiss
    
    let item: EventBasedTimelineItemProtocol
    let actions: TimelineItemMenuActions
-
-    private var canShowReactions: Bool {
-        !item.isRedacted &&
-            !item.hasFailedToSend &&
-            !item.hasFailedDecryption
-    }
    
    public var body: some View {
        VStack {
@@ -104,7 +125,7 @@ public struct TimelineItemMenu: View {
            
            ScrollView {
                VStack(alignment: .leading, spacing: 0.0) {
-                    if canShowReactions {
+                    if item.isReactable {
                        reactionsSection
                            .padding(.top, 4.0)
                            .padding(.bottom, 8.0)
@@ -171,7 +192,7 @@ public struct TimelineItemMenu: View {
            reactionButton(for: "👏")
            
            Button {
-                presentationMode.wrappedValue.dismiss()
+                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))
@@ -187,7 +208,7 @@ public struct TimelineItemMenu: View {
    
    private func reactionButton(for emoji: String) -> some View {
        Button {
-            presentationMode.wrappedValue.dismiss()
+            dismiss()
            context.send(viewAction: .toggleReaction(key: emoji, itemID: item.id))
        } label: {
            Text(emoji)
@@ -211,67 +232,23 @@ public struct TimelineItemMenu: View {
    
    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 .copyPermalink:
-                Button { send(action) } label: {
-                    MenuLabel(title: L10n.actionCopyLinkToMessage, systemImageName: "link")
-                }
-            case .reply:
-                Button { send(action) } label: {
-                    MenuLabel(title: L10n.actionReply, systemImageName: "arrowshape.turn.up.left")
-                }
-            case .forward:
-                Button { send(action) } label: {
-                    MenuLabel(title: L10n.actionForward, systemImageName: "arrowshape.turn.up.right")
-                }
-            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")
-                }
+            Button { send(action) } label: {
+                action.label
+                    .labelStyle(FixedIconSizeLabelStyle())
+                    .multilineTextAlignment(.leading)
+                    .frame(maxWidth: .infinity, alignment: .leading)
+                    .padding()
            }
        }
    }
    
    private func send(_ action: TimelineItemMenuAction) {
-        presentationMode.wrappedValue.dismiss()
+        dismiss()
        // Otherwise we might get errors that a sheet is already presented
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
            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 {
@@ -256,8 +256,7 @@ class RoomTimelineController: RoomTimelineControllerProtocol {
            return .none
        }
    }
-
-    // swiftlint:disable:next cyclomatic_complexity function_body_length
+    
    private func updateTimelineItems() {
        var newTimelineItems = [RoomTimelineItemProtocol]()
        var canBackPaginate = true
@@ -36,7 +36,7 @@ struct RoomTimelineItemFactory: RoomTimelineItemFactoryProtocol {
        self.stateEventStringBuilder = stateEventStringBuilder
    }
    
-    // swiftlint:disable:next cyclomatic_complexity function_body_length
+    // swiftlint:disable:next cyclomatic_complexity
    func buildTimelineItem(for eventItemProxy: EventTimelineItemProxy) -> RoomTimelineItemProtocol? {
        let isOutgoing = eventItemProxy.isOwn