From 5cee86a55c10cb8dc36709598e069656271cfdba 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 + .../Resources/en.lproj/Localizable.strings | 11 +-- .../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 + 7 files changed, 63 insertions(+), 35 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/Resources/en.lproj/Localizable.strings b/LocalPackages/SyncUI/Sources/SyncUI/Resources/en.lproj/Localizable.strings index 0b3210a0b6..4b864482a4 100644 --- a/LocalPackages/SyncUI/Sources/SyncUI/Resources/en.lproj/Localizable.strings +++ b/LocalPackages/SyncUI/Sources/SyncUI/Resources/en.lproj/Localizable.strings @@ -26,7 +26,7 @@ "cancel.button" = "Cancel"; /* Connect With Server Sheet - Button */ -"connect.with.server.sheet.button" = "Turn on Sync & Backup"; +"connect.with.server.sheet.button" = "Turn On Sync & Back Up"; /* Connect With Server Sheet - Description Part 1 */ "connect.with.server.sheet.description.part1" = "This creates an encrypted backup of your bookmarks and passwords on DuckDuckGo’s secure server, which can be synced with your other devices."; @@ -50,7 +50,7 @@ "delete.server.data" = "Turn Off and Delete Server Data..."; /* Device SyncedSheet - Title */ -"device.synced.sheet.title" = "Your Data is Synced!"; +"device.synced.sheet.title" = "Your data is synced!"; /* Standard Buttons - Done Button */ "done.button" = "Done"; @@ -184,9 +184,6 @@ /* Scan or See Code View - Instruction with syncMenuPath */ "scan.or.see.code.instruction.attributed" = "Go to %@ in the DuckDuckGo Browser on another device and select ”Sync with Another Device.”."; -/* Scan or See Code View - Instruction Part 3 */ -"scan.or.see.code.instruction.part3" = "in the DuckDuckGo Browser on another device and select ”Sync with Another Device.”"; - /* Scan or See Code View - Manually Enter Code Link */ "scan.or.see.code.manually.enter.code.link" = "Manually Enter Code"; @@ -227,7 +224,7 @@ "sync.warning.sync.unavailable" = "Sync & Backup is Unavailable"; /* Button label for syncing with another device */ -"sync.with.another.device.button" = "Sync with Another Device"; +"sync.with.another.device.button" = "Sync With Another Device"; /* Footer message for syncing with another device */ "sync.with.another.device.footer" = "Your data is end-to-end encrypted, and DuckDuckGo does not have access to the encryption key."; @@ -257,7 +254,7 @@ "unified.favorites.instruction" = "Use the same favorite bookmarks on all your devices. Leave off to keep mobile and desktop favorites separate."; /* Options - Unify Favorites Title */ -"unified.favorites.title" = "Unify Favorites"; +"unified.favorites.title" = "Unify Favorites Across Devices"; /* View Text Code menu item */ "view.text.code.menu.item" = "View Text Code"; 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))