From d71b43006f04d2bdd3defb71eaad50aec04235ec Mon Sep 17 00:00:00 2001 From: Sabrina Tardio Date: Thu, 11 Jan 2024 13:24:01 +0100 Subject: [PATCH] solve UI scaling problems --- .../DuckUI/Sources/DuckUI/Button.swift | 3 + .../SyncUI/Views/Internal/CameraView.swift | 3 + .../SyncUI/Views/RecoverSyncedDataView.swift | 1 + .../SyncUI/Views/SaveRecoveryKeyView.swift | 1 + .../SyncUI/Views/ScanOrPasteCodeView.swift | 78 ++++++++++++------- .../SyncUI/Views/SyncWithServerView.swift | 1 + 6 files changed, 59 insertions(+), 28 deletions(-) diff --git a/LocalPackages/DuckUI/Sources/DuckUI/Button.swift b/LocalPackages/DuckUI/Sources/DuckUI/Button.swift index 648cfee602..d87ff913b5 100644 --- a/LocalPackages/DuckUI/Sources/DuckUI/Button.swift +++ b/LocalPackages/DuckUI/Sources/DuckUI/Button.swift @@ -40,6 +40,9 @@ public struct PrimaryButtonStyle: ButtonStyle { let foregroundColor = disabled ? disabledForegroundColor : standardForegroundColor configuration.label + .fixedSize(horizontal: false, vertical: true) + .multilineTextAlignment(.center) + .lineLimit(nil) .font(Font(UIFont.boldAppFont(ofSize: compact ? Consts.fontSize - 1 : Consts.fontSize))) .foregroundColor(configuration.isPressed ? standardForegroundColor.opacity(Consts.pressedOpacity) : foregroundColor) .padding() diff --git a/LocalPackages/SyncUI/Sources/SyncUI/Views/Internal/CameraView.swift b/LocalPackages/SyncUI/Sources/SyncUI/Views/Internal/CameraView.swift index 86096b1518..08eae2da00 100644 --- a/LocalPackages/SyncUI/Sources/SyncUI/Views/Internal/CameraView.swift +++ b/LocalPackages/SyncUI/Sources/SyncUI/Views/Internal/CameraView.swift @@ -96,12 +96,15 @@ public struct CameraView: View { Text(UserText.cameraPermissionRequired) .daxTitle3() + .multilineTextAlignment(.center) + .fixedSize(horizontal: false, vertical: true) .lineSpacing(1.05) .padding(.bottom, 8) Text(UserText.cameraPermissionInstructions) .lineLimit(nil) .multilineTextAlignment(.center) + .fixedSize(horizontal: false, vertical: true) .daxBodyRegular() .lineSpacing(1.1) diff --git a/LocalPackages/SyncUI/Sources/SyncUI/Views/RecoverSyncedDataView.swift b/LocalPackages/SyncUI/Sources/SyncUI/Views/RecoverSyncedDataView.swift index 34bfc6c747..6f9ab59092 100644 --- a/LocalPackages/SyncUI/Sources/SyncUI/Views/RecoverSyncedDataView.swift +++ b/LocalPackages/SyncUI/Sources/SyncUI/Views/RecoverSyncedDataView.swift @@ -63,6 +63,7 @@ public struct RecoverSyncedDataView: View { .buttonStyle(PrimaryButtonStyle()) .frame(maxWidth: 360) .padding(.horizontal, 30) + .padding(.bottom, 8) } } } diff --git a/LocalPackages/SyncUI/Sources/SyncUI/Views/SaveRecoveryKeyView.swift b/LocalPackages/SyncUI/Sources/SyncUI/Views/SaveRecoveryKeyView.swift index bfd4027131..595bedf13c 100644 --- a/LocalPackages/SyncUI/Sources/SyncUI/Views/SaveRecoveryKeyView.swift +++ b/LocalPackages/SyncUI/Sources/SyncUI/Views/SaveRecoveryKeyView.swift @@ -100,6 +100,7 @@ public struct SaveRecoveryKeyView: View { : nil ) .padding(.horizontal, 20) + .padding(.bottom, 8) } @ViewBuilder diff --git a/LocalPackages/SyncUI/Sources/SyncUI/Views/ScanOrPasteCodeView.swift b/LocalPackages/SyncUI/Sources/SyncUI/Views/ScanOrPasteCodeView.swift index 92532fc260..5df2f93609 100644 --- a/LocalPackages/SyncUI/Sources/SyncUI/Views/ScanOrPasteCodeView.swift +++ b/LocalPackages/SyncUI/Sources/SyncUI/Views/ScanOrPasteCodeView.swift @@ -31,24 +31,29 @@ public struct ScanOrSeeCode: View { } public var body: some View { - VStack(spacing: 10) { - VStack(spacing: 10) { - titleView() - CameraView(model: model) - } - .toolbar { - ToolbarItem(placement: .navigationBarLeading) { - Button(UserText.cancelButton, action: model.cancel) - .foregroundColor(Color.white) + GeometryReader { geometry in + ScrollView { + VStack(spacing: 10) { + let heightFactor = geometry.size.width < 380 ? 1 : 0.84 + titleView() + CameraView(model: model) + .frame(width: geometry.size.width) + .frame(minHeight: geometry.size.width * heightFactor) + qrCodeView(width: geometry.size.width) } - ToolbarItem(placement: .navigationBarTrailing) { - NavigationLink(UserText.scanOrSeeCodeManuallyEnterCodeLink, destination: { - PasteCodeView(model: model) - }) - .foregroundColor(Color(designSystemColor: .accent)) + .toolbar { + ToolbarItem(placement: .navigationBarLeading) { + Button(UserText.cancelButton, action: model.cancel) + .foregroundColor(Color.white) + } + ToolbarItem(placement: .navigationBarTrailing) { + NavigationLink(UserText.scanOrSeeCodeManuallyEnterCodeLink, destination: { + PasteCodeView(model: model) + }) + .foregroundColor(Color(designSystemColor: .accent)) + } } } - qrCodeView() } } @@ -85,7 +90,14 @@ public struct ScanOrSeeCode: View { @ViewBuilder - func qrCodeView() -> some View { + func qrCodeView(width: CGFloat) -> some View { + var maxWidth: CGFloat { + let basedOnScreenWidth = (width - 70) / 3 * 2 + if width < 390 { + return basedOnScreenWidth + } + return 180 + } VStack(spacing: 8) { HStack(alignment: .top, spacing: 20) { QRCodeView(string: qrCodeModel.code ?? "", size: 120) @@ -93,7 +105,8 @@ public struct ScanOrSeeCode: View { HStack { Text(UserText.scanOrSeeCodeScanCodeInstructionsTitle) .daxBodyBold() - .fixedSize() + .fixedSize(horizontal: false, vertical: true) + .multilineTextAlignment(.leading) Spacer() Image("SyncDeviceType_phone") .padding(2) @@ -107,24 +120,17 @@ public struct ScanOrSeeCode: View { .fixedSize(horizontal: false, vertical: true) .multilineTextAlignment(.leading) } + .frame(maxWidth: maxWidth) } + .frame(width: width) .padding(20) .background( RoundedRectangle(cornerRadius: 8) .fill(Color(designSystemColor: .panel)) + .frame(width: width - 20) ) .padding(20) - HStack { - Text(UserText.scanOrSeeCodeFooter) - HStack(alignment: .center) { - Text(UserText.scanOrSeeCodeShareCodeLink) - .foregroundColor(Color(designSystemColor: .accent)) - .onTapGesture { - model.showShareCodeSheet() - } - Image("Arrow-Circle-Right-12") - } - } + cantScanView() } .padding(.bottom, 40) .onAppear { @@ -134,5 +140,21 @@ public struct ScanOrSeeCode: View { self.qrCodeModel = model.startConnectMode() } } + .frame(width: width) + } + + @ViewBuilder + func cantScanView() -> some View { + HStack { + Text(UserText.scanOrSeeCodeFooter) + HStack(alignment: .center) { + Text(UserText.scanOrSeeCodeShareCodeLink) + .foregroundColor(Color(designSystemColor: .accent)) + .onTapGesture { + model.showShareCodeSheet() + } + Image("Arrow-Circle-Right-12") + } + } } } diff --git a/LocalPackages/SyncUI/Sources/SyncUI/Views/SyncWithServerView.swift b/LocalPackages/SyncUI/Sources/SyncUI/Views/SyncWithServerView.swift index d95afd586b..4eaf0ccd0d 100644 --- a/LocalPackages/SyncUI/Sources/SyncUI/Views/SyncWithServerView.swift +++ b/LocalPackages/SyncUI/Sources/SyncUI/Views/SyncWithServerView.swift @@ -69,6 +69,7 @@ public struct SyncWithServerView: View { .buttonStyle(PrimaryButtonStyle()) .frame(maxWidth: 360) .padding(.horizontal, 30) + .padding(.bottom, 8) Text(UserText.connectWithServerSheetFooter) .daxFootnoteRegular() .foregroundColor(Color(designSystemColor: .textSecondary))