From 34dcaca74c8de088722c05a9eaa3b0777adf5d87 Mon Sep 17 00:00:00 2001 From: Doug Date: Thu, 17 Mar 2022 11:50:59 +0000 Subject: [PATCH] Improve layout on different devices Fix dynamic type on some fonts. --- DesignKit/Variants/Fonts/ElementFonts.swift | 36 +++++++++---------- .../View/AnalyticsPrompt.swift | 6 +++- .../Avatar/View/OnboardingAvatarScreen.swift | 7 ++-- .../View/OnboardingDisplayNameScreen.swift | 9 +++-- 4 files changed, 35 insertions(+), 23 deletions(-) diff --git a/DesignKit/Variants/Fonts/ElementFonts.swift b/DesignKit/Variants/Fonts/ElementFonts.swift index d7538c905..e17984389 100644 --- a/DesignKit/Variants/Fonts/ElementFonts.swift +++ b/DesignKit/Variants/Fonts/ElementFonts.swift @@ -110,10 +110,10 @@ extension ElementFonts: Fonts { public var title2: SharedFont { let uiFont = self.font(forTextStyle: .title2) - if #available(iOS 13.0, *) { - return SharedFont(uiFont: uiFont, font: Font(uiFont)) - } else if #available(iOS 14.0, *) { + if #available(iOS 14.0, *) { return SharedFont(uiFont: uiFont, font: .title2) + } else if #available(iOS 13.0, *) { + return SharedFont(uiFont: uiFont, font: Font(uiFont)) } else { return SharedFont(uiFont: uiFont) } @@ -122,10 +122,10 @@ extension ElementFonts: Fonts { public var title2B: SharedFont { let uiFont = self.title2.uiFont.vc_bold - if #available(iOS 13.0, *) { - return SharedFont(uiFont: uiFont, font: Font(uiFont)) - } else if #available(iOS 14.0, *) { + if #available(iOS 14.0, *) { return SharedFont(uiFont: uiFont, font: .title2.bold()) + } else if #available(iOS 13.0, *) { + return SharedFont(uiFont: uiFont, font: Font(uiFont)) } else { return SharedFont(uiFont: uiFont) } @@ -134,10 +134,10 @@ extension ElementFonts: Fonts { public var title3: SharedFont { let uiFont = self.font(forTextStyle: .title3) - if #available(iOS 13.0, *) { - return SharedFont(uiFont: uiFont, font: Font(uiFont)) - } else if #available(iOS 14.0, *) { + if #available(iOS 14.0, *) { return SharedFont(uiFont: uiFont, font: .title3) + } else if #available(iOS 13.0, *) { + return SharedFont(uiFont: uiFont, font: Font(uiFont)) } else { return SharedFont(uiFont: uiFont) } @@ -146,10 +146,10 @@ extension ElementFonts: Fonts { public var title3SB: SharedFont { let uiFont = self.title3.uiFont.vc_semiBold - if #available(iOS 13.0, *) { - return SharedFont(uiFont: uiFont, font: Font(uiFont)) - } else if #available(iOS 14.0, *) { + if #available(iOS 14.0, *) { return SharedFont(uiFont: uiFont, font: .title3.weight(.semibold)) + } else if #available(iOS 13.0, *) { + return SharedFont(uiFont: uiFont, font: Font(uiFont)) } else { return SharedFont(uiFont: uiFont) } @@ -258,10 +258,10 @@ extension ElementFonts: Fonts { public var caption2: SharedFont { let uiFont = self.font(forTextStyle: .caption2) - if #available(iOS 13.0, *) { - return SharedFont(uiFont: uiFont, font: Font(uiFont)) - } else if #available(iOS 14.0, *) { + if #available(iOS 14.0, *) { return SharedFont(uiFont: uiFont, font: .caption2) + } else if #available(iOS 13.0, *) { + return SharedFont(uiFont: uiFont, font: Font(uiFont)) } else { return SharedFont(uiFont: uiFont) } @@ -270,10 +270,10 @@ extension ElementFonts: Fonts { public var caption2SB: SharedFont { let uiFont = self.caption2.uiFont.vc_semiBold - if #available(iOS 13.0, *) { - return SharedFont(uiFont: uiFont, font: Font(uiFont)) - } else if #available(iOS 14.0, *) { + if #available(iOS 14.0, *) { return SharedFont(uiFont: uiFont, font: .caption2.weight(.semibold)) + } else if #available(iOS 13.0, *) { + return SharedFont(uiFont: uiFont, font: Font(uiFont)) } else { return SharedFont(uiFont: uiFont) } diff --git a/RiotSwiftUI/Modules/AnalyticsPrompt/View/AnalyticsPrompt.swift b/RiotSwiftUI/Modules/AnalyticsPrompt/View/AnalyticsPrompt.swift index 816498006..96c917259 100644 --- a/RiotSwiftUI/Modules/AnalyticsPrompt/View/AnalyticsPrompt.swift +++ b/RiotSwiftUI/Modules/AnalyticsPrompt/View/AnalyticsPrompt.swift @@ -71,13 +71,14 @@ struct AnalyticsPrompt: View { Text(VectorL10n.analyticsPromptTitle(AppInfo.current.displayName)) .font(theme.fonts.title2B) + .multilineTextAlignment(.center) .foregroundColor(theme.colors.primaryContent) .padding(.bottom, 2) messageText .font(theme.fonts.body) - .foregroundColor(theme.colors.secondaryContent) .multilineTextAlignment(.center) + .foregroundColor(theme.colors.secondaryContent) Divider() .background(theme.colors.quinaryContent) @@ -117,8 +118,11 @@ struct AnalyticsPrompt: View { .padding(.top, 50) .padding(.horizontal, horizontalPadding) } + .frame(maxWidth: OnboardingConstants.maxContentWidth) + .frame(maxWidth: .infinity) buttons + .frame(maxWidth: OnboardingConstants.maxContentWidth) .padding(.horizontal, horizontalPadding) .padding(.bottom, geometry.safeAreaInsets.bottom > 0 ? 0 : 16) } diff --git a/RiotSwiftUI/Modules/Onboarding/Avatar/View/OnboardingAvatarScreen.swift b/RiotSwiftUI/Modules/Onboarding/Avatar/View/OnboardingAvatarScreen.swift index 2fab3fa66..fa5fe234e 100644 --- a/RiotSwiftUI/Modules/Onboarding/Avatar/View/OnboardingAvatarScreen.swift +++ b/RiotSwiftUI/Modules/Onboarding/Avatar/View/OnboardingAvatarScreen.swift @@ -46,8 +46,9 @@ struct OnboardingAvatarScreen: View { } .padding(.horizontal) .padding(.top, 8) - .frame(maxHeight: .infinity) + .frame(maxWidth: OnboardingConstants.maxContentWidth) } + .frame(maxWidth: .infinity, maxHeight: .infinity) .accentColor(theme.colors.accent) .background(theme.colors.background.ignoresSafeArea()) .alert(item: $viewModel.alertInfo) { $0.alert } @@ -106,10 +107,12 @@ struct OnboardingAvatarScreen: View { VStack(spacing: 8) { Text(VectorL10n.onboardingAvatarTitle) .font(theme.fonts.title2B) + .multilineTextAlignment(.center) .foregroundColor(theme.colors.primaryContent) Text(VectorL10n.onboardingAvatarMessage) .font(theme.fonts.subheadline) + .multilineTextAlignment(.center) .foregroundColor(theme.colors.secondaryContent) } } @@ -134,7 +137,7 @@ struct OnboardingAvatarScreen: View { // MARK: - Previews -@available(iOS 14.0, *) +@available(iOS 15.0, *) struct OnboardingAvatar_Previews: PreviewProvider { static let stateRenderer = MockOnboardingAvatarScreenState.stateRenderer static var previews: some View { diff --git a/RiotSwiftUI/Modules/Onboarding/DisplayName/View/OnboardingDisplayNameScreen.swift b/RiotSwiftUI/Modules/Onboarding/DisplayName/View/OnboardingDisplayNameScreen.swift index 54a21e263..5891de1d1 100644 --- a/RiotSwiftUI/Modules/Onboarding/DisplayName/View/OnboardingDisplayNameScreen.swift +++ b/RiotSwiftUI/Modules/Onboarding/DisplayName/View/OnboardingDisplayNameScreen.swift @@ -51,8 +51,9 @@ struct OnboardingDisplayNameScreen: View { } .padding(.horizontal) .padding(.top, 8) - .frame(maxHeight: .infinity) + .frame(maxWidth: OnboardingConstants.maxContentWidth) } + .frame(maxWidth: .infinity, maxHeight: .infinity) .accentColor(theme.colors.accent) .background(theme.colors.background.ignoresSafeArea()) .alert(item: $viewModel.alertInfo) { $0.alert } @@ -65,18 +66,22 @@ struct OnboardingDisplayNameScreen: View { var header: some View { VStack(spacing: 8) { Image(Asset.Images.onboardingCongratulationsIcon.name) + .resizable() .renderingMode(.template) .foregroundColor(theme.colors.accent) + .frame(width: 90, height: 90) .background(Circle().foregroundColor(.white).padding(2)) .padding(.bottom, 8) .accessibilityHidden(true) Text(VectorL10n.onboardingDisplayNameTitle) .font(theme.fonts.title2B) + .multilineTextAlignment(.center) .foregroundColor(theme.colors.primaryContent) Text(VectorL10n.onboardingDisplayNameMessage) .font(theme.fonts.subheadline) + .multilineTextAlignment(.center) .foregroundColor(theme.colors.secondaryContent) } } @@ -118,7 +123,7 @@ struct OnboardingDisplayNameScreen: View { // MARK: - Previews -@available(iOS 14.0, *) +@available(iOS 15.0, *) struct OnboardingDisplayName_Previews: PreviewProvider { static let stateRenderer = MockOnboardingDisplayNameScreenState.stateRenderer static var previews: some View {