solve UI scaling problems

duckduckgo · Jan 11, 2024 · d71b430 · d71b430
1 parent bcba25b
commit d71b430
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 28 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,15 +90,23 @@ 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)
                 VStack(alignment: .leading, spacing: 10) {
                     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
@@ -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))
-Original file line number
+Diff line change
@@ Expand Up / @@ -100,6 +100,7 @@ public struct SaveRecoveryKeyView: View { @@
                 : nil
             )
             .padding(.horizontal, 20)
+            .padding(.bottom, 8)
         }
         @ViewBuilder
@@ Expand Down @@