Skip to content

Commit 5df8f98

Browse files
iamgabrielmaiamgabrielma
authored
[POS Settings] Design updates (#16065)
2 parents 00a34fb + 87a46da commit 5df8f98

File tree

4 files changed

+142
-64
lines changed

4 files changed

+142
-64
lines changed

‎WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift‎

Lines changed: 63 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,15 @@ struct PointOfSaleSettingsHardwareDetailView: View {
2525
}
2626
}
2727

28+
private var backgroundColor: Color {
29+
Color.posOnSecondaryContainer
30+
}
31+
2832
var body: some View {
2933
NavigationStack(path: $navigationPath) {
34+
POSPageHeaderView(title: Localization.hardwareTitle)
35+
.foregroundColor(.posSurface)
36+
3037
List(HardwareDestination.allCases) { destination in
3138
NavigationLink(value: NavigationDestination.hardware(destination)) {
3239
HStack(alignment: .firstTextBaseline) {
@@ -41,7 +48,13 @@ struct PointOfSaleSettingsHardwareDetailView: View {
4148
}
4249
}
4350
}
51+
.listRowSeparator(.hidden)
4452
}
53+
.listStyle(.plain)
54+
.scrollContentBackground(.hidden)
55+
.background(backgroundColor)
56+
.listRowBackground(Color.clear)
57+
.listRowSeparator(.hidden)
4558
.navigationDestination(for: NavigationDestination.self) { destination in
4659
switch destination {
4760
case .hardware(.cardReaders):
@@ -69,7 +82,14 @@ struct PointOfSaleSettingsHardwareDetailView: View {
6982
}
7083

7184
private var cardReadersView: some View {
72-
VStack(spacing: POSSpacing.large) {
85+
VStack(spacing: POSSpacing.none) {
86+
POSPageHeaderView(
87+
title: Localization.cardReadersTitle,
88+
backButtonConfiguration: .init(state: .enabled, action: {
89+
navigationPath.removeLast()
90+
}, buttonIcon: "chevron.left"))
91+
.foregroundColor(.posSurface)
92+
7393
List {
7494
VStack(spacing: POSPadding.xSmall) {
7595
HStack {
@@ -109,36 +129,56 @@ struct PointOfSaleSettingsHardwareDetailView: View {
109129
}
110130
}
111131
.buttonStyle(.plain)
132+
.listRowSeparator(.hidden)
112133
}
134+
.listStyle(.plain)
135+
.scrollContentBackground(.hidden)
136+
.listRowBackground(Color.clear)
137+
.background(backgroundColor)
138+
.foregroundColor(.posOnSurface)
113139
}
114-
.navigationTitle(Localization.cardReadersTitle)
140+
.navigationBarBackButtonHidden(true)
115141
.posFullScreenCover(isPresented: $showCardReaderDocumentationModal) {
116142
SafariView(url: WooConstants.URLs.inPersonPaymentsLearnMoreWCPay.asURL())
117143
}
118144
}
119145

120146
private var scannersView: some View {
121-
List(ScannerDestination.allCases) { destination in
122-
Button {
123-
handleScannerDestination(destination)
124-
} label: {
125-
HStack(alignment: .firstTextBaseline) {
126-
Image(systemName: destination.icon)
127-
.font(.posBodyLargeRegular())
128-
VStack(alignment: .leading, spacing: POSPadding.xSmall) {
129-
Text(destination.title)
147+
VStack(spacing: POSSpacing.none) {
148+
POSPageHeaderView(
149+
title: Localization.scannersTitle,
150+
backButtonConfiguration: .init(state: .enabled, action: {
151+
navigationPath.removeLast()
152+
}, buttonIcon: "chevron.left"))
153+
.foregroundColor(.posSurface)
154+
155+
List(ScannerDestination.allCases) { destination in
156+
Button {
157+
handleScannerDestination(destination)
158+
} label: {
159+
HStack(alignment: .firstTextBaseline) {
160+
Image(systemName: destination.icon)
130161
.font(.posBodyLargeRegular())
131-
Text(destination.subtitle)
132-
.font(.posBodyMediumRegular())
133-
.foregroundStyle(.secondary)
162+
VStack(alignment: .leading, spacing: POSPadding.xSmall) {
163+
Text(destination.title)
164+
.font(.posBodyLargeRegular())
165+
Text(destination.subtitle)
166+
.font(.posBodyMediumRegular())
167+
.foregroundStyle(.secondary)
168+
}
134169
}
135170
}
171+
.buttonStyle(.plain)
172+
.listRowSeparator(.hidden)
136173
}
137-
.buttonStyle(.plain)
174+
.listStyle(.plain)
175+
.scrollContentBackground(.hidden)
176+
.listRowBackground(Color.clear)
177+
.background(backgroundColor)
178+
.foregroundColor(.posOnSurface)
138179
}
139-
.navigationTitle(Localization.scannersTitle)
180+
.navigationBarBackButtonHidden(true)
140181
}
141-
142182
}
143183

144184
extension PointOfSaleSettingsHardwareDetailView {
@@ -241,6 +281,12 @@ private extension PointOfSaleSettingsHardwareDetailView {
241281
comment: "Text displayed on Point of Sale settings when card reader battery is unknown."
242282
)
243283

284+
static let hardwareTitle = NSLocalizedString(
285+
"pointOfSaleSettingsHardwareDetailView.hardwareTitle",
286+
value: "Hardware",
287+
comment: "Navigation title for the hardware settings list."
288+
)
289+
244290
static let cardReadersTitle = NSLocalizedString(
245291
"pointOfSaleSettingsHardwareDetailView.cardReadersTitle",
246292
value: "Card readers",

‎WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHelpDetailView.swift‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,14 @@ struct PointOfSaleSettingsHelpDetailView: View {
55
@State private var showDocumentation = false
66
@State private var showSupport = false
77

8+
private var backgroundColor: Color {
9+
Color.posOnSecondaryContainer
10+
}
11+
812
var body: some View {
913
NavigationStack {
14+
POSPageHeaderView(title: Localization.helpTitle)
15+
.foregroundColor(.posSurface)
1016
List {
1117
Button {
1218
showProductRestrictions = true
@@ -23,6 +29,7 @@ struct PointOfSaleSettingsHelpDetailView: View {
2329
}
2430
}
2531
}
32+
.listRowSeparator(.hidden)
2633
.buttonStyle(.plain)
2734

2835
Button {
@@ -40,6 +47,7 @@ struct PointOfSaleSettingsHelpDetailView: View {
4047
}
4148
}
4249
}
50+
.listRowSeparator(.hidden)
4351
.buttonStyle(.plain)
4452

4553
Button {
@@ -57,8 +65,14 @@ struct PointOfSaleSettingsHelpDetailView: View {
5765
}
5866
}
5967
}
68+
.listRowSeparator(.hidden)
6069
.buttonStyle(.plain)
6170
}
71+
.listStyle(.plain)
72+
.scrollContentBackground(.hidden)
73+
.background(backgroundColor)
74+
.listRowBackground(Color.clear)
75+
.listRowSeparator(.hidden)
6276
}
6377
.posModal(isPresented: $showProductRestrictions) {
6478
// TODO: Remove copy on POSFloatingControlView.documentationView
@@ -86,6 +100,12 @@ private extension PointOfSaleSettingsHelpDetailView {
86100
}
87101

88102
enum Localization {
103+
static let helpTitle = NSLocalizedString(
104+
"PointOfSaleSettingsHelpDetailView.help.title",
105+
value: "Help",
106+
comment: "Navigation title for the help settings list."
107+
)
108+
89109
static let productRestrictionsInfo = NSLocalizedString(
90110
"PointOfSaleSettingsHelpDetailView.help.productRestrictionsInfo.button.title",
91111
value: "Where are my products?",
@@ -147,3 +167,9 @@ private extension PointOfSaleSettingsHelpDetailView {
147167
.navigationViewStyle(.stack)
148168
}
149169
}
170+
171+
#if DEBUG
172+
#Preview {
173+
PointOfSaleSettingsHelpDetailView()
174+
}
175+
#endif

‎WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsStoreDetailView.swift‎

Lines changed: 47 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@ struct PointOfSaleSettingsStoreDetailView: View {
99
self.viewModel = viewModel
1010
}
1111

12+
private var backgroundColor: Color {
13+
Color.posOnSecondaryContainer
14+
}
15+
1216
var body: some View {
1317
NavigationStack {
1418
List {
@@ -20,6 +24,7 @@ struct PointOfSaleSettingsStoreDetailView: View {
2024
.font(.posBodyMediumRegular())
2125
.foregroundStyle(.secondary)
2226
}
27+
.listRowSeparator(.hidden)
2328

2429
VStack(alignment: .leading, spacing: POSPadding.small) {
2530
Text(Localization.address)
@@ -28,9 +33,19 @@ struct PointOfSaleSettingsStoreDetailView: View {
2833
.font(.posBodyMediumRegular())
2934
.foregroundStyle(.secondary)
3035
}
36+
.listRowSeparator(.hidden)
3137
} header: {
32-
Text(Localization.storeInformation)
33-
.font(.posBodyLargeRegular())
38+
ZStack {
39+
backgroundColor
40+
Text(Localization.storeInformation)
41+
.font(.posHeadingBold)
42+
.foregroundColor(.posOnSurface)
43+
.frame(maxWidth: .infinity, alignment: .leading)
44+
.padding(.horizontal, POSPadding.medium)
45+
.padding(.vertical, POSPadding.small)
46+
.textCase(nil)
47+
}
48+
.listRowInsets(EdgeInsets())
3449
}
3550

3651
Section {
@@ -39,36 +54,55 @@ struct PointOfSaleSettingsStoreDetailView: View {
3954
.font(.posBodyMediumRegular())
4055
settingValueView(for: viewModel.receiptInformation.storeName)
4156
}
57+
.listRowSeparator(.hidden)
4258

4359
VStack(alignment: .leading, spacing: POSPadding.small) {
4460
Text(Localization.physicalAddress)
4561
.font(.posBodyMediumRegular())
4662
settingValueView(for: viewModel.receiptInformation.storeAddress)
4763
}
64+
.listRowSeparator(.hidden)
4865

4966
VStack(alignment: .leading, spacing: POSPadding.small) {
5067
Text(Localization.phoneNumber)
5168
.font(.posBodyMediumRegular())
5269
settingValueView(for: viewModel.receiptInformation.phone)
5370
}
71+
.listRowSeparator(.hidden)
5472

5573
VStack(alignment: .leading, spacing: POSPadding.small) {
5674
Text(Localization.email)
5775
.font(.posBodyMediumRegular())
5876
settingValueView(for: viewModel.receiptInformation.email)
5977
}
78+
.listRowSeparator(.hidden)
6079

6180
VStack(alignment: .leading, spacing: POSPadding.small) {
6281
Text(Localization.refundReturnsPolicy)
6382
.font(.posBodyMediumRegular())
6483
settingValueView(for: viewModel.receiptInformation.refundReturnsPolicy)
6584
}
85+
.listRowSeparator(.hidden)
6686
} header: {
67-
Text(Localization.receiptInformation)
68-
.font(.posBodyLargeRegular())
87+
ZStack {
88+
backgroundColor
89+
Text(Localization.receiptInformation)
90+
.font(.posHeadingBold)
91+
.foregroundColor(.posOnSurface)
92+
.frame(maxWidth: .infinity, alignment: .leading)
93+
.padding(.horizontal, POSPadding.medium)
94+
.padding(.vertical, POSPadding.small)
95+
.textCase(nil)
96+
}
97+
.listRowInsets(EdgeInsets())
6998
}
7099
.renderedIf(viewModel.shouldShowReceiptInformation)
71100
}
101+
.listStyle(.plain)
102+
.scrollContentBackground(.hidden)
103+
.background(backgroundColor)
104+
.listRowSeparator(.hidden)
105+
.listSectionSeparator(.hidden)
72106
.task {
73107
isLoading = true
74108
await viewModel.retrievePOSReceiptSettings()
@@ -80,7 +114,11 @@ struct PointOfSaleSettingsStoreDetailView: View {
80114
@ViewBuilder
81115
private func settingValueView(for value: String?) -> some View {
82116
if isLoading {
83-
GhostSettingRowView()
117+
Rectangle()
118+
.fill(Color.posOnSurfaceVariantLowest)
119+
.frame(width: Constants.shimmeringTextWidth, height: Constants.shimmeringTextHeight)
120+
.clipShape(RoundedRectangle(cornerRadius: POSCornerRadiusStyle.small.value))
121+
.shimmering()
84122
} else {
85123
Text(value ?? Localization.notSet)
86124
.font(.posBodyMediumRegular())
@@ -89,46 +127,13 @@ struct PointOfSaleSettingsStoreDetailView: View {
89127
}
90128
}
91129

92-
// Temporary: Simplified copy from PointOfSaleOrderListView.GhostOrderRowView
93-
private struct GhostSettingRowView: View {
94-
@ScaledMetric private var scale: CGFloat = 1.0
95-
@Environment(\.dynamicTypeSize) var dynamicTypeSize
96-
97-
private var minHeight: CGFloat {
98-
min(Constants.orderCardMinHeight * scale, Constants.maximumOrderCardHeight)
99-
}
100-
101-
var body: some View {
102-
HStack(alignment: .center, spacing: POSSpacing.medium) {
103-
VStack(alignment: .leading, spacing: POSSpacing.xSmall) {
104-
Rectangle()
105-
.fill(Color.posOnSurfaceVariantLowest)
106-
.frame(width: 70, height: 16)
107-
.clipShape(RoundedRectangle(cornerRadius: 4))
108-
.shimmering()
109-
110-
Rectangle()
111-
.fill(Color.posOnSurfaceVariantLowest)
112-
.frame(width: 160, height: 14)
113-
.clipShape(RoundedRectangle(cornerRadius: 4))
114-
.shimmering()
115-
}
116-
}
117-
.padding(.horizontal, POSPadding.medium * (1 / scale))
118-
.padding(.vertical, POSPadding.medium * (1 / scale))
119-
.frame(maxWidth: .infinity, minHeight: dynamicTypeSize.isAccessibilitySize ? nil : minHeight, alignment: .leading)
120-
.background(Color.posSurfaceContainerLowest)
121-
.posItemCardBorderStyles()
122-
.geometryGroup()
123-
}
124130

125-
private enum Constants {
126-
static let orderCardMinHeight: CGFloat = 90
127-
static let maximumOrderCardHeight: CGFloat = Constants.orderCardMinHeight * 2
131+
private extension PointOfSaleSettingsStoreDetailView {
132+
enum Constants {
133+
static let shimmeringTextWidth: CGFloat = 70
134+
static let shimmeringTextHeight: CGFloat = 16
128135
}
129-
}
130136

131-
private extension PointOfSaleSettingsStoreDetailView {
132137
enum Localization {
133138
static let notSet = NSLocalizedString(
134139
"pointOfSaleSettingsStoreDetailView.notSet",

0 commit comments

Comments
 (0)