Skip to content

Commit

Permalink
solve UI scaling problems
Browse files Browse the repository at this point in the history
  • Loading branch information
SabrinaTardio committed Jan 11, 2024
1 parent bdec5cf commit 5cee86a
Show file tree
Hide file tree
Showing 7 changed files with 63 additions and 35 deletions.
3 changes: 3 additions & 0 deletions LocalPackages/DuckUI/Sources/DuckUI/Button.swift
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.";
Expand All @@ -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";
Expand Down Expand Up @@ -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";

Expand Down Expand Up @@ -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.";
Expand Down Expand Up @@ -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";
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ public struct RecoverSyncedDataView: View {
.buttonStyle(PrimaryButtonStyle())
.frame(maxWidth: 360)
.padding(.horizontal, 30)
.padding(.bottom, 8)
}
}
}
Original file line number Diff 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
78 changes: 50 additions & 28 deletions LocalPackages/SyncUI/Sources/SyncUI/Views/ScanOrPasteCodeView.swift
Original file line number Diff line number Diff line change
Expand Up @@ -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()
}
}

Expand Down Expand Up @@ -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)
Expand All @@ -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 {
Expand All @@ -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")
}
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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))
Expand Down

0 comments on commit 5cee86a

Please sign in to comment.