Use more Liquid Glass in the room/space screen toolbars (#4965)

* Add a glass style to the Room/Space header view on iOS 26. * Update snapshots and fix the join call button.
2026-11-02 21:33:26 +00:00 · 2026-01-16 19:29:27 +00:00
parent 9131c0976c
commit c5b1c5d1bd
79 changed files with 222 additions and 198 deletions
@@ -0,0 +1,67 @@
+//
+// Copyright 2025 Element Creations Ltd.
+// Copyright 2023-2025 New Vector Ltd.
+//
+// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial.
+// Please see LICENSE files in the repository root for full details.
+//
+
+import Compound
+import SwiftUI
+
+struct JoinCallButton: View {
+    let action: () -> Void
+    
+    var body: some View {
+        if #available(iOS 26, *) {
+            glassButton
+        } else {
+            customButton
+        }
+    }
+    
+    var glassButton: some View {
+        Button(action: action) {
+            Text(L10n.a11yJoinCall)
+                .font(.compound.bodyLG.weight(.medium))
+                .foregroundStyle(.compound.textOnSolidPrimary)
+        }
+        .tint(.compound.bgAccentRest)
+        .backportButtonStyleGlassProminent()
+    }
+    
+    var customButton: some View {
+        Button(action: action) {
+            Label(L10n.actionJoin, icon: \.videoCallSolid)
+                .labelStyle(.titleAndIcon)
+        }
+        .buttonStyle(CustomStyle())
+        .accessibilityLabel(L10n.a11yJoinCall)
+    }
+    
+    struct CustomStyle: ButtonStyle {
+        func makeBody(configuration: Configuration) -> some View {
+            configuration.label
+                .padding(.horizontal, 16.0)
+                .padding(.vertical, 4.0)
+                .foregroundColor(.compound.bgCanvasDefault)
+                .background(Color.compound.iconAccentTertiary)
+                .clipShape(Capsule())
+        }
+    }
+}
+
+// MARK: - Previews
+
+struct JoinCallButton_Previews: PreviewProvider {
+    static var previews: some View {
+        NavigationStack {
+            Color.clear
+                .toolbar {
+                    ToolbarItem(placement: .confirmationAction) {
+                        JoinCallButton { }
+                    }
+                }
+        }
+    }
+}