Voice message UI polish (part 2) (#1995)

* Update compund * Fix create poll screen bin button style * Fix timeline menu description for voice messages * Fix bin button in ComposerToolbar * Add VoiceMessageButtonStyle * Update compound & fix breaking changes * Fix voice message bin size * Refactor VoiceMessageRecordingButton * Fix preview tests
2023-11-01 10:03:35 +01:00
parent d42de30a36
commit b97dba43d8
25 changed files with 51 additions and 87 deletions
--- a/ElementX.xcodeproj/project.pbxproj
+++ b/ElementX.xcodeproj/project.pbxproj
@@ -6628,7 +6628,7 @@
 			repositoryURL = "https://github.com/vector-im/compound-ios";
 			requirement = {
 				kind = revision;
-				revision = eba9d995974fcedd55549395d56e336e5ff70cdf;
+				revision = 34dcd1e2960f3b0b7f50d6e7d020c108d5acf604;
 			};
 		};
 		9A472EE0218FE7DCF5283429 /* XCRemoteSwiftPackageReference "SwiftUI-Introspect" */ = {
--- a/ElementX.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved
+++ b/ElementX.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved
@@ -5,7 +5,8 @@
      "kind" : "remoteSourceControl",
      "location" : "https://github.com/vector-im/compound-design-tokens.git",
      "state" : {
-        "revision" : "387d2b7211f07761c67e849c59414a1bb803defa"
+        "revision" : "b603371c5e4ac798f4613a7388d2305100b31911",
+        "version" : "0.0.7"
      }
    },
    {
@@ -13,7 +14,7 @@
      "kind" : "remoteSourceControl",
      "location" : "https://github.com/vector-im/compound-ios",
      "state" : {
-        "revision" : "eba9d995974fcedd55549395d56e336e5ff70cdf"
+        "revision" : "34dcd1e2960f3b0b7f50d6e7d020c108d5acf604"
      }
    },
    {
--- a/ElementX/Resources/Assets.xcassets/images/composer/mic-fill.imageset/Contents.json
+++ b/ElementX/Resources/Assets.xcassets/images/composer/mic-fill.imageset/Contents.json
@@ -1,16 +0,0 @@
-{
-  "images" : [
-    {
-      "filename" : "mic-fill.svg",
-      "idiom" : "universal"
-    }
-  ],
-  "info" : {
-    "author" : "xcode",
-    "version" : 1
-  },
-  "properties" : {
-    "preserves-vector-representation" : true,
-    "template-rendering-intent" : "template"
-  }
-}
--- a/ElementX/Resources/Assets.xcassets/images/composer/mic-fill.imageset/mic-fill.svg
+++ b/ElementX/Resources/Assets.xcassets/images/composer/mic-fill.imageset/mic-fill.svg
@@ -1,5 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="mic_FILL1_wght400_GRAD0_opsz20 1">
-<path id="Vector" d="M12.0294 14.15C11.1764 14.15 10.4458 13.8458 9.83746 13.2375C9.22913 12.6292 8.92496 11.9 8.92496 11.05V5.075C8.92496 4.22083 9.22913 3.49479 9.83746 2.89688C10.4458 2.29896 11.1764 2 12.0294 2C12.8823 2 13.6073 2.29896 14.2044 2.89688C14.8014 3.49479 15.1 4.22083 15.1 5.075V11.05C15.1 11.9 14.8014 12.6292 14.2044 13.2375C13.6073 13.8458 12.8823 14.15 12.0294 14.15ZM12.025 21C11.7416 21 11.4958 20.8958 11.2875 20.6875C11.0791 20.4792 10.975 20.2333 10.975 19.95V18.0047C9.44163 17.8016 8.14163 17.1625 7.07496 16.0875C6.0083 15.0125 5.34996 13.725 5.09996 12.225C5.04996 11.9153 5.13136 11.6421 5.34416 11.4052C5.55698 11.1684 5.84225 11.05 6.19996 11.05C6.4333 11.05 6.64163 11.1333 6.82496 11.3C7.0083 11.4667 7.12496 11.6833 7.17496 11.95C7.38833 13.0953 7.94636 14.0525 8.84906 14.8215C9.75178 15.5905 10.8104 15.975 12.025 15.975C13.2332 15.975 14.2864 15.5905 15.1845 14.8215C16.0825 14.0525 16.6377 13.0953 16.85 11.95C16.9 11.6833 17.0166 11.4667 17.2 11.3C17.3833 11.1333 17.6003 11.05 17.8509 11.05C18.191 11.05 18.4675 11.1684 18.6805 11.4052C18.8935 11.6421 18.975 11.9153 18.925 12.225C18.6949 13.7279 18.0457 15.0162 16.9774 16.0897C15.9091 17.1632 14.6083 17.8016 13.075 18.0047V19.95C13.075 20.2333 12.9708 20.4792 12.7625 20.6875C12.5541 20.8958 12.3083 21 12.025 21Z" fill="#1B1D22"/>
-</g>
-</svg>
--- a/ElementX/Resources/Assets.xcassets/images/composer/mic.imageset/Contents.json
+++ b/ElementX/Resources/Assets.xcassets/images/composer/mic.imageset/Contents.json
@@ -1,16 +0,0 @@
-{
-  "images" : [
-    {
-      "filename" : "mic.svg",
-      "idiom" : "universal"
-    }
-  ],
-  "info" : {
-    "author" : "xcode",
-    "version" : 1
-  },
-  "properties" : {
-    "preserves-vector-representation" : true,
-    "template-rendering-intent" : "template"
-  }
-}
--- a/ElementX/Resources/Assets.xcassets/images/composer/mic.imageset/mic.svg
+++ b/ElementX/Resources/Assets.xcassets/images/composer/mic.imageset/mic.svg
@@ -1,5 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="mic_FILL0_wght400_GRAD0_opsz24 1">
-<path id="Vector" d="M12.0001 14C11.1667 14 10.4584 13.7083 9.87506 13.125C9.29173 12.5417 9.00006 11.8333 9.00006 11V5C9.00006 4.16667 9.29173 3.45833 9.87506 2.875C10.4584 2.29167 11.1667 2 12.0001 2C12.8334 2 13.5417 2.29167 14.1251 2.875C14.7084 3.45833 15.0001 4.16667 15.0001 5V11C15.0001 11.8333 14.7084 12.5417 14.1251 13.125C13.5417 13.7083 12.8334 14 12.0001 14ZM12.0001 21C11.7167 21 11.4792 20.9042 11.2876 20.7125C11.0959 20.5208 11.0001 20.2833 11.0001 20V17.925C9.45006 17.7083 8.13339 17.0583 7.05006 15.975C5.96673 14.8917 5.30839 13.5917 5.07506 12.075C5.02506 11.7917 5.10006 11.5417 5.30006 11.325C5.50006 11.1083 5.76673 11 6.10006 11C6.33339 11 6.54173 11.0875 6.72506 11.2625C6.90839 11.4375 7.02506 11.65 7.07506 11.9C7.29173 13.0667 7.85839 14.0417 8.77506 14.825C9.69173 15.6083 10.7667 16 12.0001 16C13.2334 16 14.3084 15.6083 15.2251 14.825C16.1417 14.0417 16.7084 13.0667 16.9251 11.9C16.9751 11.65 17.0959 11.4375 17.2876 11.2625C17.4792 11.0875 17.6917 11 17.9251 11C18.2417 11 18.5001 11.1083 18.7001 11.325C18.9001 11.5417 18.9751 11.7917 18.9251 12.075C18.6917 13.5917 18.0334 14.8917 16.9501 15.975C15.8667 17.0583 14.5501 17.7083 13.0001 17.925V20C13.0001 20.2833 12.9042 20.5208 12.7126 20.7125C12.5209 20.9042 12.2834 21 12.0001 21ZM12.0001 12C12.2834 12 12.5209 11.9042 12.7126 11.7125C12.9042 11.5208 13.0001 11.2833 13.0001 11V5C13.0001 4.71667 12.9042 4.47917 12.7126 4.2875C12.5209 4.09583 12.2834 4 12.0001 4C11.7167 4 11.4792 4.09583 11.2876 4.2875C11.0959 4.47917 11.0001 4.71667 11.0001 5V11C11.0001 11.2833 11.0959 11.5208 11.2876 11.7125C11.4792 11.9042 11.7167 12 12.0001 12Z" fill="#656D77"/>
-</g>
-</svg>
--- a/ElementX/Sources/Generated/Assets.swift
+++ b/ElementX/Sources/Generated/Assets.swift
@@ -49,8 +49,6 @@ internal enum Asset {
    internal static let inlineCode = ImageAsset(name: "images/inline-code")
    internal static let italic = ImageAsset(name: "images/italic")
    internal static let link = ImageAsset(name: "images/link")
-    internal static let micFill = ImageAsset(name: "images/mic-fill")
-    internal static let mic = ImageAsset(name: "images/mic")
    internal static let numberedList = ImageAsset(name: "images/numbered-list")
    internal static let quote = ImageAsset(name: "images/quote")
    internal static let sendMessage = ImageAsset(name: "images/send-message")
--- a/ElementX/Sources/Other/VoiceMessage/VoiceMessageButton.swift
+++ b/ElementX/Sources/Other/VoiceMessage/VoiceMessageButton.swift
@@ -53,7 +53,7 @@ struct VoiceMessageButton: View {
                .frame(width: buttonSize, height: buttonSize)
        }
        .animation(nil, value: state)
-        .buttonStyle(.plain)
+        .buttonStyle(VoiceMessageButtonStyle())
        .disabled(state == .loading)
        .background(Circle().foregroundColor(.compound.bgCanvasDefault))
    }
@@ -73,12 +73,20 @@ struct VoiceMessageButton: View {
                .scaledToFit()
                .frame(width: imageWidth, height: imageHeight)
                .offset(x: offset)
-                .foregroundColor(.compound.iconSecondary)
                .accessibilityLabel(accessibilityLabel)
        }
    }
 }

+private struct VoiceMessageButtonStyle: ButtonStyle {
+    @Environment(\.isEnabled) var isEnabled: Bool
+
+    func makeBody(configuration: Configuration) -> some View {
+        configuration.label
+            .foregroundColor(isEnabled ? .compound.textSecondary.opacity(configuration.isPressed ? 0.6 : 1) : .compound.iconDisabled)
+    }
+}
+
 extension VoiceMessageButton.State {
    init(state: AudioPlayerPlaybackState) {
        switch state {
--- a/ElementX/Sources/Screens/ComposerToolbar/View/ComposerToolbar.swift
+++ b/ElementX/Sources/Screens/ComposerToolbar/View/ComposerToolbar.swift
@@ -25,7 +25,6 @@ struct ComposerToolbar: View {
    
    @FocusState private var composerFocused: Bool
    @ScaledMetric private var sendButtonIconSize = 16
-    @ScaledMetric private var trashButtonIconSize = 24
    @ScaledMetric(relativeTo: .title) private var spinnerSize = 44
    @ScaledMetric(relativeTo: .title) private var closeRTEButtonSize = 30
    
@@ -288,18 +287,14 @@ struct ComposerToolbar: View {
    }
        
    private var voiceMessageTrashButton: some View {
-        Button {
+        Button(role: .destructive) {
            context.send(viewAction: .deleteVoiceMessageRecording)
        } label: {
            CompoundIcon(\.delete)
-                .font(.compound.bodyLG)
-                .foregroundColor(.compound.textCriticalPrimary)
-                .frame(width: trashButtonIconSize, height: trashButtonIconSize)
                .padding(EdgeInsets(top: 10, leading: 11, bottom: 10, trailing: 11))
-                .fixedSize()
-                .accessibilityLabel(L10n.a11yDelete)
        }
-        .buttonStyle(.plain)
+        .buttonStyle(.compound(.plain))
+        .accessibilityLabel(L10n.a11yDelete)
    }
    
    private var voiceMessageRecordingButtonTooltipView: some View {
--- a/ElementX/Sources/Screens/ComposerToolbar/View/VoiceMessageRecordingButton.swift
+++ b/ElementX/Sources/Screens/ComposerToolbar/View/VoiceMessageRecordingButton.swift
@@ -18,7 +18,6 @@ import Compound
 import SwiftUI

 struct VoiceMessageRecordingButton: View {
-    @ScaledMetric private var buttonIconSize = 24
    @State private var buttonPressed = false

    var startRecording: (() -> Void)?
@@ -38,14 +37,11 @@ struct VoiceMessageRecordingButton: View {
                stopRecording?()
            }
        }
-        .fixedSize()
    }
    
    @ViewBuilder
    private var voiceMessageButtonImage: some View {
-        (buttonPressed ? Image(asset: Asset.Images.micFill) : Image(asset: Asset.Images.mic))
-            .resizable()
-            .frame(width: buttonIconSize, height: buttonIconSize)
+        CompoundIcon(buttonPressed ? \.micOnSolid : \.micOnOutline)
            .foregroundColor(.compound.iconSecondary)
            .padding(EdgeInsets(top: 6, leading: 6, bottom: 6, trailing: 6))
            .accessibilityLabel(L10n.a11yVoiceMessageRecord)
--- a/ElementX/Sources/Screens/CreatePollScreen/View/CreatePollScreen.swift
+++ b/ElementX/Sources/Screens/CreatePollScreen/View/CreatePollScreen.swift
@@ -139,12 +139,11 @@ private struct CreatePollOptionView: View {
    var body: some View {
        HStack {
            if editMode?.wrappedValue == .active {
-                Button(action: deleteAction) {
+                Button(role: .destructive, action: deleteAction) {
                    CompoundIcon(\.delete)
-                        .foregroundColor(.compound.iconCriticalPrimary)
                }
                .disabled(!canDeleteItem)
-                .buttonStyle(.plain)
+                .buttonStyle(.compound(.plain))
                .accessibilityLabel(L10n.actionRemove)
            }
            TextField(text: $text) {
--- a/ElementX/Sources/Screens/RoomScreen/View/RoomScreen.swift
+++ b/ElementX/Sources/Screens/RoomScreen/View/RoomScreen.swift
@@ -167,7 +167,7 @@ struct RoomScreen: View {
                Button {
                    context.send(viewAction: .presentCall)
                } label: {
-                    Label(L10n.actionJoin, icon: \.videoCall)
+                    Label(L10n.actionJoin, icon: \.videoCallSolid)
                        .labelStyle(.titleAndIcon)
                }
                .buttonStyle(ElementCallButtonStyle())
@@ -175,7 +175,7 @@ struct RoomScreen: View {
                Button {
                    context.send(viewAction: .presentCall)
                } label: {
-                    CompoundIcon(\.videoCall)
+                    CompoundIcon(\.videoCallSolid)
                }
            }
        }
--- a/ElementX/Sources/Screens/RoomScreen/View/Timeline/EncryptedHistoryRoomTimelineView.swift
+++ b/ElementX/Sources/Screens/RoomScreen/View/Timeline/EncryptedHistoryRoomTimelineView.swift
@@ -28,7 +28,7 @@ struct EncryptedHistoryRoomTimelineView: View {
                .font(.compound.bodyMDSemibold)
                .foregroundColor(.compound.textInfoPrimary)
        } icon: {
-            CompoundIcon(\.info, size: .small, relativeTo: .compound.bodyMDSemibold)
+            CompoundIcon(\.infoSolid, size: .small, relativeTo: .compound.bodyMDSemibold)
                .foregroundColor(.compound.iconInfoPrimary)
        }
        .labelStyle(EncryptedHistoryLabelStyle())
--- a/ElementX/Sources/Screens/RoomScreen/View/TimelineItemMenu.swift
+++ b/ElementX/Sources/Screens/RoomScreen/View/TimelineItemMenu.swift
@@ -193,7 +193,7 @@ public struct TimelineItemMenu: View {
                    .font(.compound.bodySMSemibold)
                    .foregroundColor(.compound.textPrimary)
                
-                Text(item.body.trimmingCharacters(in: .whitespacesAndNewlines))
+                Text(item.timelineMenuDescription)
                    .font(.compound.bodyMD)
                    .foregroundColor(.compound.textSecondary)
                    .lineLimit(1)
--- a/ElementX/Sources/Screens/SecureBackup/SecureBackupRecoveryKeyScreen/View/SecureBackupRecoveryKeyScreen.swift
+++ b/ElementX/Sources/Screens/SecureBackup/SecureBackupRecoveryKeyScreen/View/SecureBackupRecoveryKeyScreen.swift
@@ -134,7 +134,7 @@ struct SecureBackupRecoveryKeyScreen: View {
            
            HStack(alignment: .top) {
                if context.viewState.recoveryKey == nil {
-                    CompoundIcon(\.info, size: .small, relativeTo: .compound.bodySM)
+                    CompoundIcon(\.infoSolid, size: .small, relativeTo: .compound.bodySM)
                }
                
                Text(context.viewState.recoveryKeySubtitle)
--- a/ElementX/Sources/Services/Timeline/TimelineItems/EventBasedTimelineItemProtocol.swift
+++ b/ElementX/Sources/Services/Timeline/TimelineItems/EventBasedTimelineItemProtocol.swift
@@ -59,6 +59,15 @@ extension EventBasedTimelineItemProtocol {
        self is EncryptedRoomTimelineItem
    }

+    var timelineMenuDescription: String {
+        switch self {
+        case is VoiceMessageRoomTimelineItem:
+            return L10n.commonVoiceMessage
+        default:
+            return body.trimmingCharacters(in: .whitespacesAndNewlines)
+        }
+    }
+
    func additionalWhitespaces(timelineStyle: TimelineStyle) -> Int {
        guard timelineStyle == .bubbles else {
            return 0
--- a/UnitTests/Snapshots/PreviewTests/test_composerToolbar.1.png
+++ b/UnitTests/Snapshots/PreviewTests/test_composerToolbar.1.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2879ff2216ecdbd3b9afc2189c84ad892f154b852a873cfcb3108c2f8ee900a5
-size 66093
+oid sha256:c1e6e18b515a424aa91b552323bb5cba4d01914b51dc47e8ec3b5e9f81a57225
+size 66446
--- a/UnitTests/Snapshots/PreviewTests/test_composerToolbar.Voice-Message.png
+++ b/UnitTests/Snapshots/PreviewTests/test_composerToolbar.Voice-Message.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6387ef1c9d6ba711f20718a3bf9c3f32d5af688dbdb078481301d4a5ccc88a69
-size 93719
+oid sha256:866e24b28ef3ad776461af85ee96abaf83275d17c4e7c2047691479028fe0f06
+size 94382
--- a/UnitTests/Snapshots/PreviewTests/test_composerToolbar.With-Suggestions.png
+++ b/UnitTests/Snapshots/PreviewTests/test_composerToolbar.With-Suggestions.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0aa957098a18ecea76387910e75fb3c192bb40624211411c60a8cc25ffa81f2b
-size 95496
+oid sha256:225ba3d11602f2bd92ba2bb50c01c855d134945f1bbb6abedf5ff0cd549220bd
+size 95840
--- a/UnitTests/Snapshots/PreviewTests/test_createPollScreen.1.png
+++ b/UnitTests/Snapshots/PreviewTests/test_createPollScreen.1.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c3d9ade7c89cd250b94a8538212569c322bb86d607c6c41837c0f6520f2db222
-size 123004
+oid sha256:c8a37f2e525c24464f4a99e7110abad6bff7923429d5de27f25167c2b62b7241
+size 122848
--- a/UnitTests/Snapshots/PreviewTests/test_roomScreen.1.png
+++ b/UnitTests/Snapshots/PreviewTests/test_roomScreen.1.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:bd3dd80a72c692d2b326a598bb013fe2d0bdf57d3a802d31804b16f1c7d19b75
-size 318206
+oid sha256:12c2540041f1a2739e015b962f1490cb7d78201ab5c488d7b0edab06e304e127
+size 318511
--- a/UnitTests/Snapshots/PreviewTests/test_timelineView.1.png
+++ b/UnitTests/Snapshots/PreviewTests/test_timelineView.1.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d6d0c6241d39a889ecaa9c5471857d5e7e63f9998682e04f4e51150dbee96e12
-size 314691
+oid sha256:720eccf0e4e600da78abe5772d78e871866c3fc3b48da404079dd7285f34ecc6
+size 314996
--- a/UnitTests/Snapshots/PreviewTests/test_uITimelineView.1.png
+++ b/UnitTests/Snapshots/PreviewTests/test_uITimelineView.1.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d6d0c6241d39a889ecaa9c5471857d5e7e63f9998682e04f4e51150dbee96e12
-size 314691
+oid sha256:720eccf0e4e600da78abe5772d78e871866c3fc3b48da404079dd7285f34ecc6
+size 314996
--- a/UnitTests/Snapshots/PreviewTests/test_voiceMessageRecordingButton.1.png
+++ b/UnitTests/Snapshots/PreviewTests/test_voiceMessageRecordingButton.1.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f148b17af2dea5529eaa8a234966d6c5a907c24f47379f392bcbc6098ca6d26d
-size 56402
+oid sha256:454f1594e4f0eee33f53dcc3d45653087fbf1254324396b65723918af8a44536
+size 56462
--- a/project.yml
+++ b/project.yml
@@ -49,7 +49,7 @@ packages:
    # path: ../matrix-rust-sdk
  Compound:
    url: https://github.com/vector-im/compound-ios
-    revision: eba9d995974fcedd55549395d56e336e5ff70cdf
+    revision: 34dcd1e2960f3b0b7f50d6e7d020c108d5acf604
    # path: ../compound-ios
  AnalyticsEvents:
    url: https://github.com/matrix-org/matrix-analytics-events