SwiftUI NavigationController and UserNotificationControllers (#309)

* Fixes #286 - Adopted the new SwiftUI NavigationStack based NavigationController throughout the application * Fixes #315 - Implemented new user notification components on top of SwiftUI and the new navigation flows * Add home screen fade animation between skeletons and real rooms * Bump the danger-swift version used on the CI and swiftlint with it * Renamed Splash to Onboarding, Empty to Splash
2026-11-02 21:33:26 +00:00 · 2022-11-16 15:37:34 +02:00
parent af85c770da
commit 2fd0491a18
108 changed files with 1627 additions and 3720 deletions
@@ -0,0 +1,44 @@
+//
+// 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
+
+final class OnboardingCoordinator: CoordinatorProtocol {
+    private var viewModel: OnboardingViewModelProtocol
+        
+    var callback: ((OnboardingCoordinatorAction) -> Void)?
+    
+    init() {
+        viewModel = OnboardingViewModel()
+    }
+    
+    // MARK: - Public
+    
+    func start() {
+        viewModel.callback = { [weak self] action in
+            MXLog.debug("OnboardingViewModel did complete with result: \(action).")
+            guard let self else { return }
+            switch action {
+            case .login:
+                self.callback?(.login)
+            }
+        }
+    }
+    
+    func toPresentable() -> AnyView {
+        AnyView(OnboardingScreen(context: viewModel.context))
+    }
+}
@@ -0,0 +1,95 @@
+//
+// 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
+
+// MARK: - Coordinator
+
+enum OnboardingCoordinatorAction {
+    case login
+}
+
+/// The content displayed in a single screen page.
+struct OnboardingPageContent {
+    let title: AttributedString
+    let message: String
+    let image: ImageAsset
+}
+
+// MARK: View model
+
+enum OnboardingViewModelAction {
+    case login
+}
+
+// MARK: View
+
+struct OnboardingViewState: BindableState {
+    /// The colours of the background gradient shown behind the 4 pages.
+    private let gradientColors = [
+        Color(red: 0.95, green: 0.98, blue: 0.96),
+        Color(red: 0.89, green: 0.96, blue: 0.97),
+        Color(red: 0.95, green: 0.89, blue: 0.97),
+        Color(red: 0.81, green: 0.95, blue: 0.91),
+        Color(red: 0.95, green: 0.98, blue: 0.96)
+    ]
+    
+    /// An array containing all content of the carousel pages
+    let content: [OnboardingPageContent]
+    var bindings: OnboardingBindings
+    
+    /// The background gradient for all 4 pages and the hidden page at the start of the carousel.
+    var backgroundGradient: Gradient {
+        if Tests.isRunningUITests {
+            return Gradient(colors: [.white])
+        }
+        // Include the extra stop for the hidden page at the start of the carousel.
+        // (The last color is the right-hand stop, but we need the left-hand stop,
+        // so take the last but one color from the array).
+        let hiddenPageColor = gradientColors[gradientColors.count - 2]
+        return Gradient(colors: [hiddenPageColor] + gradientColors)
+    }
+    
+    init() {
+        // The pun doesn't translate, so we only use it for English.
+        let locale = Locale.current
+        let page4Title = locale.identifier.hasPrefix("en") ? "Cut the slack from teams." : ElementL10n.ftueAuthCarouselWorkplaceTitle
+        
+        content = [
+            OnboardingPageContent(title: ElementL10n.ftueAuthCarouselSecureTitle.tinting("."),
+                                  message: ElementL10n.ftueAuthCarouselSecureBody,
+                                  image: Asset.Images.onboardingScreenPage1),
+            OnboardingPageContent(title: ElementL10n.ftueAuthCarouselControlTitle.tinting("."),
+                                  message: ElementL10n.ftueAuthCarouselControlBody,
+                                  image: Asset.Images.onboardingScreenPage2),
+            OnboardingPageContent(title: ElementL10n.ftueAuthCarouselEncryptedTitle.tinting("."),
+                                  message: ElementL10n.ftueAuthCarouselEncryptedBody,
+                                  image: Asset.Images.onboardingScreenPage3),
+            OnboardingPageContent(title: page4Title.tinting("."),
+                                  message: ElementL10n.ftueAuthCarouselWorkplaceBody(ElementInfoPlist.cfBundleDisplayName),
+                                  image: Asset.Images.onboardingScreenPage4)
+        ]
+        bindings = OnboardingBindings()
+    }
+}
+
+struct OnboardingBindings {
+    var pageIndex = 0
+}
+
+enum OnboardingViewAction {
+    case login
+}
@@ -0,0 +1,45 @@
+//
+// 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 Combine
+import SwiftUI
+
+typealias OnboardingViewModelType = StateStoreViewModel<OnboardingViewState, OnboardingViewAction>
+
+class OnboardingViewModel: OnboardingViewModelType, OnboardingViewModelProtocol {
+    // MARK: - Properties
+
+    // MARK: Private
+
+    // MARK: Public
+
+    var callback: ((OnboardingViewModelAction) -> Void)?
+
+    // MARK: - Setup
+
+    init() {
+        super.init(initialViewState: OnboardingViewState())
+    }
+
+    // MARK: - Public
+
+    override func process(viewAction: OnboardingViewAction) async {
+        switch viewAction {
+        case .login:
+            callback?(.login)
+        }
+    }
+}
@@ -0,0 +1,23 @@
+//
+// 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 Foundation
+
+@MainActor
+protocol OnboardingViewModelProtocol {
+    var callback: ((OnboardingViewModelAction) -> Void)? { get set }
+    var context: OnboardingViewModelType.Context { get }
+}
@@ -0,0 +1,51 @@
+//
+// 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 OnboardingPageIndicator: View {
+    // MARK: - Properties
+    
+    // MARK: Public
+    
+    /// The number of pages that are shown.
+    let pageCount: Int
+    /// The index of the current page
+    let pageIndex: Int
+    
+    // MARK: - Setup
+    
+    internal init(pageCount: Int, pageIndex: Int) {
+        self.pageCount = pageCount
+        
+        // Clamp the page index to handle the hidden page.
+        if pageIndex == -1 {
+            self.pageIndex = pageCount - 1
+        } else {
+            self.pageIndex = pageIndex % pageCount
+        }
+    }
+    
+    var body: some View {
+        HStack {
+            ForEach(0..<pageCount, id: \.self) { index in
+                Circle()
+                    .frame(width: 8, height: 8)
+                    .foregroundColor(index == pageIndex ? .accentColor : .element.quaternaryContent)
+            }
+        }
+    }
+}
@@ -0,0 +1,64 @@
+//
+// 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 OnboardingPageView: View {
+    // MARK: - Properties
+    
+    // MARK: Public
+    
+    /// The content that this page should display.
+    let content: OnboardingPageContent
+    
+    // MARK: - Views
+    
+    var body: some View {
+        VStack {
+            Image(content.image.name)
+                .resizable()
+                .scaledToFit()
+                .frame(maxWidth: 310) // This value is problematic. 300 results in dropped frames
+                // on iPhone 12/13 Mini. 305 the same on iPhone 12/13. As of
+                // iOS 15, 310 seems fine on all supported screen widths 🤞.
+                .padding(20)
+                .accessibilityHidden(true)
+            
+            VStack(spacing: 8) {
+                Text(content.title)
+                    .font(.element.title2Bold)
+                    .foregroundColor(.element.primaryContent)
+                Text(content.message)
+                    .font(.element.body)
+                    .foregroundColor(.element.secondaryContent)
+                    .multilineTextAlignment(.center)
+            }
+            .fixedSize(horizontal: false, vertical: true)
+        }
+        .padding(.bottom)
+        .padding(.horizontal, 16)
+        .readableFrame()
+    }
+}
+
+struct OnboardingPage_Previews: PreviewProvider {
+    static let content = OnboardingViewState().content
+    static var previews: some View {
+        ForEach(0..<content.count, id: \.self) { index in
+            OnboardingPageView(content: content[index])
+        }
+    }
+}
@@ -0,0 +1,223 @@
+//
+// 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 DesignKit
+import SwiftUI
+
+/// The screen shown at the beginning of the onboarding flow.
+struct OnboardingScreen: View {
+    // MARK: - Properties
+    
+    // MARK: Private
+    
+    @Environment(\.colorScheme) private var colorScheme
+    @Environment(\.layoutDirection) private var layoutDirection
+    
+    private var isLeftToRight: Bool { layoutDirection == .leftToRight }
+    private var pageCount: Int { context.viewState.content.count }
+    
+    /// A timer to automatically animate the pages.
+    @State private var pageTimer: Timer?
+    /// The amount of offset to apply when a drag gesture is in progress.
+    @State private var dragOffset: CGFloat = .zero
+    
+    // MARK: Public
+    
+    @ObservedObject var context: OnboardingViewModel.Context
+    
+    var body: some View {
+        GeometryReader { geometry in
+            VStack(alignment: .leading) {
+                Spacer()
+                    .frame(height: UIConstants.spacerHeight(in: geometry))
+                
+                // The main content of the carousel
+                HStack(alignment: .top, spacing: 0) {
+                    // Add a hidden page at the start of the carousel duplicating the content of the last page
+                    OnboardingPageView(content: context.viewState.content[pageCount - 1])
+                        .frame(width: geometry.size.width)
+                        .accessibilityIdentifier("hiddenPage")
+                    
+                    ForEach(0..<pageCount, id: \.self) { index in
+                        OnboardingPageView(content: context.viewState.content[index])
+                            .frame(width: geometry.size.width)
+                    }
+                }
+                .offset(x: pageOffset(in: geometry))
+                
+                Spacer()
+                
+                OnboardingPageIndicator(pageCount: pageCount, pageIndex: context.pageIndex)
+                    .frame(width: geometry.size.width)
+                    .padding(.bottom)
+                
+                Spacer()
+                
+                buttons
+                    .frame(width: geometry.size.width)
+                    .padding(.bottom, UIConstants.actionButtonBottomPadding)
+                    .padding(.bottom, geometry.safeAreaInsets.bottom > 0 ? 0 : 16)
+                
+                Spacer()
+                    .frame(height: UIConstants.spacerHeight(in: geometry))
+            }
+            .frame(maxHeight: .infinity)
+            .background(background.ignoresSafeArea().offset(x: pageOffset(in: geometry)))
+            .gesture(
+                DragGesture()
+                    .onChanged(handleDragGestureChange)
+                    .onEnded { handleDragGestureEnded($0, viewSize: geometry.size) }
+            )
+        }
+        .navigationBarHidden(true)
+        .onAppear(perform: startTimer)
+        .onDisappear(perform: stopTimer)
+    }
+    
+    /// The main action buttons.
+    var buttons: some View {
+        VStack(spacing: 12) {
+            Button { context.send(viewAction: .login) } label: {
+                Text(ElementL10n.loginSplashSubmit)
+            }
+            .buttonStyle(.elementAction(.xLarge))
+            .accessibilityIdentifier("getStartedButton")
+        }
+        .padding(.horizontal, 16)
+        .readableFrame()
+    }
+    
+    @ViewBuilder
+    /// The view's background, showing a gradient in light mode and a solid colour in dark mode.
+    var background: some View {
+        if colorScheme == .light {
+            LinearGradient(gradient: context.viewState.backgroundGradient,
+                           startPoint: .leading,
+                           endPoint: .trailing)
+                .flipsForRightToLeftLayoutDirection(true)
+        } else {
+            Color.element.background
+        }
+    }
+    
+    // MARK: - Animation
+    
+    /// Starts the animation timer for an automatic carousel effect.
+    private func startTimer() {
+        guard pageTimer == nil else { return }
+        
+        pageTimer = Timer.scheduledTimer(withTimeInterval: 5, repeats: true) { _ in
+            if context.pageIndex == pageCount - 1 {
+                showHiddenPage()
+                
+                withElementAnimation(.easeInOut(duration: 0.7)) {
+                    showNextPage()
+                }
+            } else {
+                withElementAnimation(.easeInOut(duration: 0.7)) {
+                    showNextPage()
+                }
+            }
+        }
+    }
+    
+    /// Stops the animation timer for manual interaction.
+    private func stopTimer() {
+        guard let pageTimer else { return }
+        
+        self.pageTimer = nil
+        pageTimer.invalidate()
+    }
+    
+    private func showNextPage() {
+        // Wrap back round to the first page index when reaching the end.
+        context.pageIndex = (context.pageIndex + 1) % context.viewState.content.count
+    }
+    
+    private func showPreviousPage() {
+        // Prevent the hidden page at index -1 from being shown.
+        context.pageIndex = max(0, context.pageIndex - 1)
+    }
+    
+    private func showHiddenPage() {
+        // Hidden page for a nicer animation when looping back to the start.
+        context.pageIndex = -1
+    }
+    
+    /// The offset to apply to the `HStack` of pages.
+    private func pageOffset(in geometry: GeometryProxy) -> CGFloat {
+        (CGFloat(context.pageIndex + 1) * -geometry.size.width) + dragOffset
+    }
+    
+    // MARK: - Gestures
+    
+    /// Whether or not a drag gesture is valid or not.
+    /// - Parameter width: The gesture's translation width.
+    /// - Returns: `true` if there is another page to drag to.
+    private func shouldSwipeForTranslation(_ width: CGFloat) -> Bool {
+        if context.pageIndex == 0 {
+            return isLeftToRight ? width < 0 : width > 0
+        } else if context.pageIndex == pageCount - 1 {
+            return isLeftToRight ? width > 0 : width < 0
+        }
+        
+        return true
+    }
+    
+    /// Updates the `dragOffset` based on the gesture's value.
+    /// - Parameter drag: The drag gesture value to handle.
+    private func handleDragGestureChange(_ drag: DragGesture.Value) {
+        guard shouldSwipeForTranslation(drag.translation.width) else { return }
+        
+        stopTimer()
+        
+        // Animate the change over a few frames to smooth out any stuttering.
+        withElementAnimation(.linear(duration: 0.05)) {
+            dragOffset = isLeftToRight ? drag.translation.width : -drag.translation.width
+        }
+    }
+    
+    /// Clears the drag offset and informs the view model to switch to another page if necessary.
+    /// - Parameter viewSize: The size of the view in which the gesture took place.
+    private func handleDragGestureEnded(_ drag: DragGesture.Value, viewSize: CGSize) {
+        guard shouldSwipeForTranslation(drag.predictedEndTranslation.width) else {
+            // Reset the offset just in case.
+            withElementAnimation { dragOffset = 0 }
+            return
+        }
+        
+        withElementAnimation(.easeInOut(duration: 0.2)) {
+            if drag.predictedEndTranslation.width < -viewSize.width / 2 {
+                showNextPage()
+            } else if drag.predictedEndTranslation.width > viewSize.width / 2 {
+                showPreviousPage()
+            }
+            
+            dragOffset = 0
+        }
+    }
+}
+
+// MARK: - Previews
+
+struct OnboardingScreen_Previews: PreviewProvider {
+    static let viewModel = OnboardingViewModel()
+    
+    static var previews: some View {
+        OnboardingScreen(context: viewModel.context)
+            .tint(.element.accent)
+    }
+}