Skip to content

Commit f4a2d04

Browse files
iamgabrielmaiamgabrielma
authored
[POS Settings] Minor UI updates (#16044)
2 parents 75aeefa + 5a275bc commit f4a2d04

File tree

3 files changed

+159
-130
lines changed

3 files changed

+159
-130
lines changed

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

Lines changed: 40 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -7,60 +7,58 @@ struct PointOfSaleSettingsHelpDetailView: View {
77

88
var body: some View {
99
NavigationStack {
10-
VStack(alignment: .leading) {
11-
List {
12-
Button {
13-
showProductRestrictions = true
14-
} label: {
15-
HStack(alignment: .firstTextBaseline) {
16-
Image(systemName: "magnifyingglass")
10+
List {
11+
Button {
12+
showProductRestrictions = true
13+
} label: {
14+
HStack(alignment: .firstTextBaseline) {
15+
Image(systemName: "magnifyingglass")
16+
.font(.posBodyLargeRegular())
17+
VStack(alignment: .leading, spacing: POSPadding.xSmall) {
18+
Text(Localization.productRestrictionsInfo)
1719
.font(.posBodyLargeRegular())
18-
VStack(alignment: .leading, spacing: POSPadding.xSmall) {
19-
Text(Localization.productRestrictionsInfo)
20-
.font(.posBodyLargeRegular())
21-
Text(Localization.productRestrictionsInfoSubtitle)
22-
.font(.posBodyMediumRegular())
23-
.foregroundStyle(.secondary)
24-
}
20+
Text(Localization.productRestrictionsInfoSubtitle)
21+
.font(.posBodyMediumRegular())
22+
.foregroundStyle(.secondary)
2523
}
2624
}
27-
.buttonStyle(.plain)
28-
Button {
29-
showDocumentation = true
30-
} label: {
31-
HStack(alignment: .firstTextBaseline) {
32-
Image(systemName: "doc.text")
25+
}
26+
.buttonStyle(.plain)
27+
28+
Button {
29+
showDocumentation = true
30+
} label: {
31+
HStack(alignment: .firstTextBaseline) {
32+
Image(systemName: "doc.text")
33+
.font(.posBodyLargeRegular())
34+
VStack(alignment: .leading, spacing: POSPadding.xSmall) {
35+
Text(Localization.documentationTitle)
3336
.font(.posBodyLargeRegular())
34-
VStack(alignment: .leading, spacing: POSPadding.xSmall) {
35-
Text(Localization.documentationTitle)
36-
.font(.posBodyLargeRegular())
37-
Text(Localization.documentationSubtitle)
38-
.font(.posBodyMediumRegular())
39-
.foregroundStyle(.secondary)
40-
}
37+
Text(Localization.documentationSubtitle)
38+
.font(.posBodyMediumRegular())
39+
.foregroundStyle(.secondary)
4140
}
4241
}
43-
.buttonStyle(.plain)
42+
}
43+
.buttonStyle(.plain)
4444

45-
Button {
46-
showSupport = true
47-
} label: {
48-
HStack(alignment: .firstTextBaseline) {
49-
Image(systemName: "questionmark")
45+
Button {
46+
showSupport = true
47+
} label: {
48+
HStack(alignment: .firstTextBaseline) {
49+
Image(systemName: "questionmark")
50+
.font(.posBodyLargeRegular())
51+
VStack(alignment: .leading, spacing: POSPadding.xSmall) {
52+
Text(Localization.getSupportTitle)
5053
.font(.posBodyLargeRegular())
51-
VStack(alignment: .leading, spacing: POSPadding.xSmall) {
52-
Text(Localization.getSupportTitle)
53-
.font(.posBodyLargeRegular())
54-
Text(Localization.getSupportSubtitle)
55-
.font(.posBodyMediumRegular())
56-
.foregroundStyle(.secondary)
57-
}
54+
Text(Localization.getSupportSubtitle)
55+
.font(.posBodyMediumRegular())
56+
.foregroundStyle(.secondary)
5857
}
5958
}
60-
.buttonStyle(.plain)
6159
}
60+
.buttonStyle(.plain)
6261
}
63-
.padding()
6462
}
6563
.posModal(isPresented: $showProductRestrictions) {
6664
// TODO: Remove copy on POSFloatingControlView.documentationView

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

Lines changed: 49 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -5,45 +5,64 @@ struct PointOfSaleSettingsStoreDetailView: View {
55

66
var body: some View {
77
NavigationStack {
8-
VStack(alignment: .leading) {
9-
Group {
8+
List {
9+
Section {
10+
VStack(alignment: .leading, spacing: POSPadding.small) {
11+
Text(Localization.storeName)
12+
.font(.posBodyMediumRegular())
13+
Text(settingsController.storeName)
14+
.font(.posBodyMediumRegular())
15+
.foregroundStyle(.secondary)
16+
}
17+
18+
VStack(alignment: .leading, spacing: POSPadding.small) {
19+
Text(Localization.address)
20+
.font(.posBodyMediumRegular())
21+
Text(settingsController.storeAddress)
22+
.font(.posBodyMediumRegular())
23+
.foregroundStyle(.secondary)
24+
}
25+
} header: {
1026
Text(Localization.storeInformation)
1127
.font(.posBodyLargeRegular())
12-
13-
Text(Localization.storeName)
14-
Text(settingsController.storeName)
15-
.font(.posBodyMediumRegular())
16-
.foregroundStyle(.secondary)
17-
18-
Text(Localization.address)
19-
Text(settingsController.storeAddress)
20-
.font(.posBodyMediumRegular())
21-
.foregroundStyle(.secondary)
2228
}
2329

24-
Group {
25-
Spacer()
30+
Section {
31+
VStack(alignment: .leading, spacing: POSPadding.small) {
32+
Text(Localization.receiptStoreName)
33+
.font(.posBodyMediumRegular())
34+
settingValueView(for: settingsController.receiptStoreName)
35+
}
36+
37+
VStack(alignment: .leading, spacing: POSPadding.small) {
38+
Text(Localization.physicalAddress)
39+
.font(.posBodyMediumRegular())
40+
settingValueView(for: settingsController.receiptStoreAddress)
41+
}
42+
43+
VStack(alignment: .leading, spacing: POSPadding.small) {
44+
Text(Localization.phoneNumber)
45+
.font(.posBodyMediumRegular())
46+
settingValueView(for: settingsController.receiptStorePhone)
47+
}
48+
49+
VStack(alignment: .leading, spacing: POSPadding.small) {
50+
Text(Localization.email)
51+
.font(.posBodyMediumRegular())
52+
settingValueView(for: settingsController.receiptStoreEmail)
53+
}
54+
55+
VStack(alignment: .leading, spacing: POSPadding.small) {
56+
Text(Localization.refundReturnsPolicy)
57+
.font(.posBodyMediumRegular())
58+
settingValueView(for: settingsController.receiptRefundReturnsPolicy)
59+
}
60+
} header: {
2661
Text(Localization.receiptInformation)
2762
.font(.posBodyLargeRegular())
28-
Text(Localization.receiptStoreName)
29-
settingValueView(for: settingsController.receiptStoreName)
30-
31-
Text(Localization.physicalAddress)
32-
settingValueView(for: settingsController.receiptStoreAddress)
33-
34-
Text(Localization.phoneNumber)
35-
settingValueView(for: settingsController.receiptStorePhone)
36-
37-
Text(Localization.email)
38-
settingValueView(for: settingsController.receiptStoreEmail)
39-
40-
Text(Localization.refundReturnsPolicy)
41-
settingValueView(for: settingsController.receiptRefundReturnsPolicy)
42-
4363
}
4464
.renderedIf(settingsController.shouldShowReceiptInformation)
4565
}
46-
.padding()
4766
}
4867
}
4968

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

Lines changed: 70 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -7,65 +7,9 @@ struct PointOfSaleSettingsView: View {
77
let settingsController: PointOfSaleSettingsControllerProtocol
88

99
var body: some View {
10-
POSPageHeaderView(
11-
title: Localization.navigationTitle,
12-
trailingContent: {
13-
Button(action: { dismiss() }) {
14-
Text(Image(systemName: "xmark"))
15-
.font(.posButtonSymbolLarge)
16-
}
17-
.foregroundColor(.posOnSurface)
18-
})
1910
GeometryReader { geometry in
2011
HStack(spacing: POSSpacing.none) {
21-
VStack(alignment: .leading, spacing: POSSpacing.none) {
22-
List(selection: $selection) {
23-
Section {
24-
ForEach([SidebarNavigation.store, SidebarNavigation.hardware], id: \.self) { item in
25-
HStack {
26-
Image(systemName: item.icon)
27-
.font(.posBodyLargeRegular())
28-
VStack(alignment: .leading) {
29-
Text(item.title)
30-
.font(.posBodyLargeRegular())
31-
Text(item.subtitle)
32-
.font(.posBodyMediumRegular())
33-
.foregroundStyle(.secondary)
34-
}
35-
}
36-
.tag(item)
37-
}
38-
}
39-
}
40-
.safeAreaInset(edge: .bottom) {
41-
Button {
42-
selection = .help
43-
} label: {
44-
HStack {
45-
Image(systemName: SidebarNavigation.help.icon)
46-
.font(.posBodyLargeRegular())
47-
.foregroundStyle(selection == .help ? .white : .primary)
48-
VStack(alignment: .leading) {
49-
Text(SidebarNavigation.help.title)
50-
.font(.posBodyLargeRegular())
51-
.foregroundStyle(selection == .help ? .white : .primary)
52-
Text(SidebarNavigation.help.subtitle)
53-
.font(.posBodyMediumRegular())
54-
.foregroundStyle(selection == .help ? .secondary : .secondary)
55-
}
56-
Spacer()
57-
}
58-
.padding(.vertical, POSPadding.small)
59-
.padding(.horizontal, POSPadding.medium)
60-
.contentShape(Rectangle())
61-
}
62-
.buttonStyle(.plain)
63-
.background(
64-
RoundedRectangle(cornerRadius: POSCornerRadiusStyle.large.value, style: .continuous)
65-
.fill(selection == .help ? Color.accentColor : Color.clear)
66-
)
67-
}
68-
}
12+
listView
6913
.frame(width: geometry.size.width * Constants.sidebarWidthFraction)
7014

7115
detailView
@@ -79,6 +23,41 @@ struct PointOfSaleSettingsView: View {
7923
}
8024

8125
extension PointOfSaleSettingsView {
26+
@ViewBuilder
27+
private var listView: some View {
28+
VStack(alignment: .leading, spacing: POSSpacing.none) {
29+
POSPageHeaderView(
30+
title: Localization.navigationTitle,
31+
backButtonConfiguration: .init(state: .enabled,
32+
action: { dismiss() },
33+
buttonIcon: "xmark"))
34+
.foregroundColor(.posSurface)
35+
36+
VStack(spacing: POSSpacing.small) {
37+
PointOfSaleSettingsCard(
38+
item: .store,
39+
isSelected: selection == .store,
40+
onTap: { selection = .store }
41+
)
42+
43+
PointOfSaleSettingsCard(
44+
item: .hardware,
45+
isSelected: selection == .hardware,
46+
onTap: { selection = .hardware }
47+
)
48+
49+
Spacer()
50+
51+
PointOfSaleSettingsCard(
52+
item: .help,
53+
isSelected: selection == .help,
54+
onTap: { selection = .help }
55+
)
56+
}
57+
.padding(.horizontal, POSPadding.medium)
58+
}
59+
}
60+
8261
@ViewBuilder
8362
private var detailView: some View {
8463
switch selection {
@@ -100,7 +79,40 @@ extension PointOfSaleSettingsView {
10079
}
10180
}
10281

103-
private extension PointOfSaleSettingsView {
82+
struct PointOfSaleSettingsCard: View {
83+
let item: PointOfSaleSettingsView.SidebarNavigation
84+
let isSelected: Bool
85+
let onTap: () -> Void
86+
87+
var body: some View {
88+
Button(action: onTap) {
89+
HStack {
90+
Image(systemName: item.icon)
91+
.font(.posBodyLargeRegular())
92+
.foregroundStyle(isSelected ? .white : .primary)
93+
VStack(alignment: .leading) {
94+
Text(item.title)
95+
.font(.posBodyLargeRegular())
96+
.foregroundStyle(isSelected ? .white : .primary)
97+
Text(item.subtitle)
98+
.font(.posBodyMediumRegular())
99+
.foregroundStyle(isSelected ? .white.opacity(0.8) : .secondary)
100+
}
101+
Spacer()
102+
}
103+
.padding(.vertical, POSPadding.small)
104+
.padding(.horizontal, POSPadding.medium)
105+
.contentShape(Rectangle())
106+
}
107+
.buttonStyle(.plain)
108+
.background(
109+
RoundedRectangle(cornerRadius: POSCornerRadiusStyle.large.value, style: .continuous)
110+
.fill(isSelected ? Color.accentColor : Color.clear)
111+
)
112+
}
113+
}
114+
115+
extension PointOfSaleSettingsView {
104116
enum SidebarNavigation: String, CaseIterable, Identifiable {
105117
case store
106118
case hardware

0 commit comments

Comments
 (0)