From 1cf49e7b7242ddaf26c67e1a6edefbdcc7b9c8e5 Mon Sep 17 00:00:00 2001 From: Lukas Korba Date: Thu, 8 Dec 2022 07:37:00 +0100 Subject: [PATCH] [#179] Broken Onboarding UI for .accessibilityLarge (#504) - reimagined the way the onboarding is composed - the bare bone is now a VStack instead of a ZStack - there is no use of GeometryReader anymore --- .../OnboardingFlow/OnboardingFlowView.swift | 19 +++--- .../Views/OnboardingContentView.swift | 62 +++++++------------ .../Views/OnboardingFooterView.swift | 13 ++-- .../Views/OnboardingHeaderView.swift | 3 +- .../FontStyles/SecantTextStyles.swift | 2 +- 5 files changed, 42 insertions(+), 57 deletions(-) diff --git a/secant/Features/OnboardingFlow/OnboardingFlowView.swift b/secant/Features/OnboardingFlow/OnboardingFlowView.swift index 14288d8..1be0be2 100644 --- a/secant/Features/OnboardingFlow/OnboardingFlowView.swift +++ b/secant/Features/OnboardingFlow/OnboardingFlowView.swift @@ -12,7 +12,7 @@ struct OnboardingScreen: View { let store: Store var body: some View { - GeometryReader { proxy in + VStack { ZStack { OnboardingHeaderView( store: store.scope( @@ -32,14 +32,12 @@ struct OnboardingScreen: View { ) .zIndex(1) - OnboardingContentView( - store: store, - width: proxy.size.width, - height: proxy.size.height - ) - - OnboardingFooterView(store: store) + OnboardingContentView(store: store) } + + Spacer() + + OnboardingFooterView(store: store) } .navigationBarHidden(true) .applyScreenBackground() @@ -81,7 +79,8 @@ struct OnboardingScreen_Previews: PreviewProvider { ) ) .preferredColorScheme(.light) - .previewDevice(PreviewDevice(rawValue: "iPhone 12 Pro")) + .previewDevice(PreviewDevice(rawValue: "iPhone 14 Pro")) + .environment(\.sizeCategory, .accessibilityLarge) OnboardingScreen( store: Store( @@ -114,6 +113,6 @@ struct OnboardingScreen_Previews: PreviewProvider { ) ) .preferredColorScheme(.dark) - .previewDevice(PreviewDevice(rawValue: "iPhone 12 Pro")) + .previewDevice(PreviewDevice(rawValue: "iPhone 14 Pro")) } } diff --git a/secant/Features/OnboardingFlow/Views/OnboardingContentView.swift b/secant/Features/OnboardingFlow/Views/OnboardingContentView.swift index a13d938..27e6d6d 100644 --- a/secant/Features/OnboardingFlow/Views/OnboardingContentView.swift +++ b/secant/Features/OnboardingFlow/Views/OnboardingContentView.swift @@ -10,69 +10,51 @@ import ComposableArchitecture struct OnboardingContentView: View { let store: Store - let width: Double - let height: Double var body: some View { WithViewStore(self.store) { viewStore in - let scale = imageScale - let imageWidth: CGFloat = width * scale - let imageXOffset: CGFloat = (width - imageWidth) / 2 - let image = viewStore.steps[viewStore.index].background .resizable() - .aspectRatio(contentMode: .fit) - .frame(width: imageWidth) - .offset(x: imageXOffset) + .scaledToFit() let title = Text(viewStore.steps[viewStore.index].title) .titleText() .lineLimit(0) .minimumScaleFactor(0.1) - .padding(EdgeInsets(top: 0, leading: 10, bottom: 5, trailing: 10)) - + .padding(.vertical, 10) + let text = Text(viewStore.steps[viewStore.index].description) .paragraphText() .lineSpacing(2) - .padding(EdgeInsets(top: 0, leading: 10, bottom: 10, trailing: 10)) - + .minimumScaleFactor(0.1) + .padding(.horizontal, 20) + if viewStore.isFinalStep { - VStack(alignment: .leading) { - title - .padding(.top, 73 * imageScale) + VStack { + HStack { + title + .padding(.top, 60) + Spacer() + } + .padding(.horizontal, 20) text image - Spacer() } } else { - VStack(alignment: .leading) { + VStack { image - title + HStack { + title + Spacer() + } + .padding(.horizontal, 20) text - Spacer() } } } } } -/// Following computations are necessary to handle properly sizing and positioning of elements -/// on different devices (apects). iPhone SE and iPhone 8 are similar aspect family devices -/// while iPhone X, 11, etc are different family devices, capable to use more of the space. -extension OnboardingContentView { - var imageScale: CGFloat { - // Just to be sure that we counting with exactly 3 decimal points. - let aspectRatio = (floor(height / width * 1000)) / 1000 - - /// iPhone SE or iPhone 8 for example - if aspectRatio <= 1.725 { - return 0.7 - } else { - return 1.0 - } - } -} - struct OnboardingContentView_Previews: PreviewProvider { static var previews: some View { let store = Store( @@ -119,9 +101,9 @@ extension OnboardingContentView_Previews { .zIndex(1) OnboardingContentView( - store: store, - width: proxy.size.width, - height: proxy.size.height + store: store +// width: proxy.size.width, +// height: proxy.size.height ) } } diff --git a/secant/Features/OnboardingFlow/Views/OnboardingFooterView.swift b/secant/Features/OnboardingFlow/Views/OnboardingFooterView.swift index ad50258..dca4d32 100644 --- a/secant/Features/OnboardingFlow/Views/OnboardingFooterView.swift +++ b/secant/Features/OnboardingFlow/Views/OnboardingFooterView.swift @@ -15,27 +15,28 @@ struct OnboardingFooterView: View { var body: some View { WithViewStore(self.store) { viewStore in VStack(spacing: 5) { - Spacer() - if viewStore.isFinalStep { Button("onboarding.button.newWallet") { viewStore.send(.createNewWallet, animation: .easeInOut(duration: animationDuration)) } .activeButtonStyle .onboardingFooterButtonLayout() - + .minimumScaleFactor(0.1) + Button("onboarding.button.importWallet") { viewStore.send(.importExistingWallet, animation: .easeInOut(duration: animationDuration)) } .secondaryButtonStyle .onboardingFooterButtonLayout() + .minimumScaleFactor(0.1) } else { Button("Next") { viewStore.send(.next, animation: .easeInOut(duration: animationDuration)) } .primaryButtonStyle .onboardingFooterButtonLayout() - + .minimumScaleFactor(0.1) + ProgressView( String(format: "%02d", viewStore.index + 1), value: Double(viewStore.index + 1), @@ -46,6 +47,7 @@ struct OnboardingFooterView: View { .padding(.vertical, 20) } } + .padding(.top, 10) .navigationLinkEmpty( isActive: viewStore.bindingForDestination(.importExistingWallet), destination: { @@ -93,7 +95,8 @@ struct OnboardingFooterView_Previews: PreviewProvider { OnboardingFooterView(store: store) .applyScreenBackground() .preferredColorScheme(.light) - .previewDevice("iPhone 13 Pro Max") + .previewDevice("iPhone 14 Pro") + .environment(\.sizeCategory, .accessibilityLarge) OnboardingFooterView(store: store) .applyScreenBackground() diff --git a/secant/Features/OnboardingFlow/Views/OnboardingHeaderView.swift b/secant/Features/OnboardingFlow/Views/OnboardingHeaderView.swift index c032761..be5a6f5 100644 --- a/secant/Features/OnboardingFlow/Views/OnboardingHeaderView.swift +++ b/secant/Features/OnboardingFlow/Views/OnboardingHeaderView.swift @@ -33,6 +33,7 @@ struct OnboardingHeaderView: View { .navigationButtonStyle .frame(width: 75) .disabled(viewStore.isInitialStep) + .minimumScaleFactor(0.1) } Spacer() @@ -44,6 +45,7 @@ struct OnboardingHeaderView: View { .navigationButtonStyle .disabled(viewStore.isFinalStep) .frame(width: 75) + .minimumScaleFactor(0.1) } } .padding(.horizontal, 30) @@ -51,7 +53,6 @@ struct OnboardingHeaderView: View { Spacer() } - .padding(.top, 5) } } } diff --git a/secant/UI Components/FontStyles/SecantTextStyles.swift b/secant/UI Components/FontStyles/SecantTextStyles.swift index 7c31185..88a4f42 100644 --- a/secant/UI Components/FontStyles/SecantTextStyles.swift +++ b/secant/UI Components/FontStyles/SecantTextStyles.swift @@ -47,7 +47,7 @@ extension Text { func body(content: Content) -> some View { content .foregroundColor(Asset.Colors.Text.heading.color) - .font(.custom(FontFamily.Rubik.regular.name, size: 33, relativeTo: .callout)) + .font(.custom(FontFamily.Rubik.medium.name, size: 33, relativeTo: .callout)) .shadow(color: Asset.Colors.Text.captionTextShadow.color, radius: 1, x: 0, y: 1) } }