Skip to content

Commit 276dc76

Browse files
jaclyncjaclync
authored
[Woo POS][Design System] Update floating control design (#15103)
2 parents 8b8972d + 4c49635 commit 276dc76

File tree

6 files changed

+85
-45
lines changed

6 files changed

+85
-45
lines changed

‎WooCommerce/Classes/POS/Card Present Payments/CardPresentPaymentPreviewService.swift‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,14 @@ import struct Yosemite.Order
55

66
#if DEBUG
77

8-
struct CardPresentPaymentPreviewService: CardPresentPaymentFacade {
8+
final class CardPresentPaymentPreviewService: CardPresentPaymentFacade {
99
let paymentEventPublisher: AnyPublisher<CardPresentPaymentEvent, Never> = Just(.idle).eraseToAnyPublisher()
1010

11-
let readerConnectionStatusPublisher: AnyPublisher<CardPresentPaymentReaderConnectionStatus, Never> = Just(.disconnected)
12-
.eraseToAnyPublisher()
11+
@Published var readerConnectionStatus: CardPresentPaymentReaderConnectionStatus = .disconnected
12+
13+
var readerConnectionStatusPublisher: AnyPublisher<CardPresentPaymentReaderConnectionStatus, Never> {
14+
$readerConnectionStatus.eraseToAnyPublisher()
15+
}
1316

1417
func connectReader(using connectionMethod: CardReaderConnectionMethod) async throws -> CardPresentPaymentReaderConnectionResult {
1518
.connected(CardPresentPaymentCardReader(name: "Test reader", batteryLevel: 0.85))

‎WooCommerce/Classes/POS/Presentation/CardReaderConnection/CardReaderConnectionStatusView.swift‎

Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -44,19 +44,17 @@ struct CardReaderConnectionStatusView: View {
4444
posModel.connectCardReader()
4545
} label: {
4646
HStack(spacing: Constants.buttonImageAndTextSpacing) {
47-
circleIcon(with: Color(.wooCommerceAmber(.shade60)))
47+
circleIcon(with: Color.posAlert)
4848
Text(Localization.readerDisconnected)
4949
.foregroundColor(disconnectedFontColor)
5050
}
51-
.padding(.horizontal, Constants.overlayInnerHorizontalPadding)
52-
.frame(maxHeight: .infinity)
53-
.overlay {
54-
RoundedRectangle(cornerRadius: Constants.overlayRadius)
55-
.stroke(Constants.overlayColor, lineWidth: Constants.overlayLineWidth)
56-
}
57-
.padding(.horizontal, Constants.overlayOuterHorizontalPadding)
58-
.padding(.vertical, Constants.overlayOuterVerticalPadding)
51+
.padding(.horizontal, Constants.disconnectedBorderAndContentSpacing)
5952
.frame(maxHeight: .infinity)
53+
.overlay(
54+
RoundedRectangle(cornerRadius: Constants.disconnectedBorderCornerRadius)
55+
.stroke(disconnectedBorderColor, lineWidth: Constants.disconnectedBorderWidth)
56+
)
57+
.padding(Constants.disconnectedBorderInset)
6058
}
6159
}
6260
}
@@ -102,23 +100,30 @@ private extension CardReaderConnectionStatusView {
102100
POSFloatingControlView.secondaryFontColor
103101
}
104102
}
103+
104+
var disconnectedBorderColor: Color {
105+
switch backgroundAppearance {
106+
case .primary:
107+
.posPrimary
108+
case .secondary:
109+
POSFloatingControlView.secondaryFontColor
110+
}
111+
}
105112
}
106113

107114
@available(iOS 17.0, *)
108115
private extension CardReaderConnectionStatusView {
109116
enum Constants {
110-
static let buttonImageAndTextSpacing: CGFloat = 12
111-
static let imageDimension: CGFloat = 12
117+
static let buttonImageAndTextSpacing: CGFloat = 16
118+
static let imageDimension: CGFloat = 14
112119
static let progressIndicatorDimension: CGFloat = 10
113120
static let progressIndicatorLineWidth: CGFloat = 2
114121
static let font = POSFontStyle.posBodyMediumRegular()
115122
static let horizontalPadding: CGFloat = 24
116-
static let overlayRadius: CGFloat = 4
117-
static let overlayLineWidth: CGFloat = 2
118-
static let overlayColor: Color = Color.init(uiColor: .wooCommercePurple(.shade60))
119-
static let overlayInnerHorizontalPadding: CGFloat = 16 + Self.overlayLineWidth
120-
static let overlayOuterHorizontalPadding: CGFloat = 8 + Self.overlayLineWidth
121-
static let overlayOuterVerticalPadding: CGFloat = 8 + Self.overlayLineWidth
123+
static let disconnectedBorderAndContentSpacing: CGFloat = 16
124+
static let disconnectedBorderCornerRadius: CGFloat = 4
125+
static let disconnectedBorderWidth: CGFloat = 2
126+
static let disconnectedBorderInset: CGFloat = 8
122127
}
123128
}
124129

@@ -170,6 +175,8 @@ private extension CardReaderConnectionStatusView {
170175
)
171176
VStack {
172177
CardReaderConnectionStatusView()
178+
.background(Color.posSurfaceContainerLow)
179+
.frame(height: 80)
173180
.environment(posModel)
174181
}
175182
}

‎WooCommerce/Classes/POS/Presentation/POSFloatingControlView.swift‎

Lines changed: 36 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import SwiftUI
44
struct POSFloatingControlView: View {
55
@Environment(\.posBackgroundAppearance) var backgroundAppearance
66
@Environment(PointOfSaleAggregateModel.self) private var posModel
7-
@Environment(\.colorScheme) var colorScheme
87
@Environment(\.horizontalSizeClass) private var horizontalSizeClass
98
@Binding private var showExitPOSModal: Bool
109
@Binding private var showSupport: Bool
@@ -71,6 +70,10 @@ struct POSFloatingControlView: View {
7170
.frame(height: Constants.size)
7271
.background(Color.clear)
7372
.animation(.default, value: backgroundAppearance)
73+
.shadow(color: Color.posShadow.opacity(0.05), radius: 43, y: 50)
74+
.shadow(color: Color.posShadow.opacity(0.10), radius: 36, y: 30)
75+
.shadow(color: Color.posShadow.opacity(0.18), radius: 27, y: 15)
76+
.shadow(color: Color.posShadow.opacity(0.20), radius: 15, y: 5)
7477
}
7578
}
7679

@@ -81,7 +84,7 @@ private extension POSFloatingControlView {
8184
case .primary:
8285
.posSurfaceContainerLow
8386
case .secondary:
84-
colorScheme == .light ? Color(.wooCommercePurple(.shade80)) : Color(.wooCommercePurple(.shade20))
87+
.posDisabledContainer
8588
}
8689
}
8790

@@ -93,14 +96,14 @@ private extension POSFloatingControlView {
9396
@available(iOS 17.0, *)
9497
extension POSFloatingControlView {
9598
static var secondaryFontColor: Color {
96-
return .posDarkGray.opacity(0.6)
99+
.posOnDisabledContainer
97100
}
98101
}
99102

100103
@available(iOS 17.0, *)
101104
private extension POSFloatingControlView {
102105
enum Constants {
103-
static let size: CGFloat = 56
106+
static let size: CGFloat = 80
104107
static let cornerRadius: CGFloat = 8
105108
}
106109

@@ -127,16 +130,40 @@ private extension POSFloatingControlView {
127130
}
128131

129132
#if DEBUG
133+
130134
@available(iOS 17.0, *)
131-
#Preview {
135+
#Preview("Reader Disconnected") {
132136
let posModel = PointOfSaleAggregateModel(
133137
itemsController: PointOfSalePreviewItemsController(),
134138
cardPresentPaymentService: CardPresentPaymentPreviewService(),
135139
orderController: PointOfSalePreviewOrderController())
140+
POSFloatingControlView(showExitPOSModal: .constant(false), showSupport: .constant(false), showDocumentation: .constant(false))
141+
.environment(\.posBackgroundAppearance, .primary)
142+
.environment(posModel)
143+
}
144+
145+
@available(iOS 17.0, *)
146+
#Preview("Reader Connected") {
147+
let paymentService = CardPresentPaymentPreviewService()
148+
let posModel = PointOfSaleAggregateModel(
149+
itemsController: PointOfSalePreviewItemsController(),
150+
cardPresentPaymentService: paymentService,
151+
orderController: PointOfSalePreviewOrderController())
152+
paymentService.readerConnectionStatus = .connected(.init(name: "", batteryLevel: 0.6))
153+
return POSFloatingControlView(showExitPOSModal: .constant(false), showSupport: .constant(false), showDocumentation: .constant(false))
154+
.environment(\.posBackgroundAppearance, .primary)
155+
.environment(posModel)
156+
}
136157

137-
POSFloatingControlView(showExitPOSModal: .constant(false),
138-
showSupport: .constant(false),
139-
showDocumentation: .constant(false))
140-
.environment(posModel)
158+
@available(iOS 17.0, *)
159+
#Preview("Secondary/disabled Background") {
160+
let posModel = PointOfSaleAggregateModel(
161+
itemsController: PointOfSalePreviewItemsController(),
162+
cardPresentPaymentService: CardPresentPaymentPreviewService(),
163+
orderController: PointOfSalePreviewOrderController())
164+
POSFloatingControlView(showExitPOSModal: .constant(false), showSupport: .constant(false), showDocumentation: .constant(false))
165+
.environment(\.posBackgroundAppearance, .secondary)
166+
.environment(posModel)
141167
}
168+
142169
#endif

‎WooCommerce/Classes/POS/Presentation/PointOfSaleDashboardView.swift‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@ struct PointOfSaleDashboardView: View {
4444
POSFloatingControlView(showExitPOSModal: $showExitPOSModal,
4545
showSupport: $showSupport,
4646
showDocumentation: $showDocumentation)
47-
.shadow(color: Color.black.opacity(0.12), radius: 4, y: 2)
4847
.offset(x: Constants.floatingControlHorizontalOffset, y: -Constants.floatingControlVerticalOffset)
4948
.trackSize(size: $floatingSize)
5049
.accessibilitySortPriority(1)
@@ -169,7 +168,7 @@ private extension PointOfSaleDashboardView {
169168
// For the moment we're just considering landscape for the POS mode
170169
// https://github.com/woocommerce/woocommerce-ios/issues/13251
171170
static let cartWidth: CGFloat = 0.35
172-
static let floatingControlHorizontalOffset: CGFloat = 24
171+
static let floatingControlHorizontalOffset: CGFloat = 16
173172
static let floatingControlVerticalOffset: CGFloat = 0
174173
static let exitPOSSheetMaxWidth: CGFloat = 900.0
175174
static let supportTag = "origin:point-of-sale"
@@ -185,8 +184,9 @@ private extension PointOfSaleDashboardView {
185184
}
186185

187186
#if DEBUG
187+
188188
@available(iOS 17.0, *)
189-
#Preview {
189+
#Preview("Container loading state") {
190190
let posModel = PointOfSaleAggregateModel(
191191
itemsController: PointOfSalePreviewItemsController(),
192192
cardPresentPaymentService: CardPresentPaymentPreviewService(),
@@ -197,4 +197,20 @@ private extension PointOfSaleDashboardView {
197197
.environmentObject(POSModalManager())
198198
}
199199
}
200+
201+
@available(iOS 17.0, *)
202+
#Preview("Content loading state") {
203+
let itemsController = PointOfSalePreviewItemsController()
204+
let posModel = PointOfSaleAggregateModel(
205+
itemsController: itemsController,
206+
cardPresentPaymentService: CardPresentPaymentPreviewService(),
207+
orderController: PointOfSalePreviewOrderController())
208+
itemsController.itemsViewState = .init(containerState: .content, itemsStack: .init(root: .loading([]), itemStates: [:]))
209+
return NavigationStack {
210+
PointOfSaleDashboardView()
211+
.environment(posModel)
212+
.environmentObject(POSModalManager())
213+
}
214+
}
215+
200216
#endif

‎WooCommerce/Classes/POS/Utils/Color+WooCommercePOS.swift‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎WooCommerce/WooCommerce.xcodeproj/project.pbxproj‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -328,7 +328,6 @@
328328
02660504293D8D24004084EA /* PaymentCaptureCelebration.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02660503293D8D24004084EA /* PaymentCaptureCelebration.swift */; };
329329
02667A1A2ABDD44200C77B56 /* GiftCardCodeScannerViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02667A192ABDD44200C77B56 /* GiftCardCodeScannerViewController.swift */; };
330330
02667A1C2AC159A000C77B56 /* GiftCardCodeScannerNavigationView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02667A1B2AC159A000C77B56 /* GiftCardCodeScannerNavigationView.swift */; };
331-
026826992BF59DA90036F959 /* Color+WooCommercePOS.swift in Sources */ = {isa = PBXBuildFile; fileRef = 026826982BF59DA80036F959 /* Color+WooCommercePOS.swift */; };
332331
026826AA2BF59DF70036F959 /* CartView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 026826A32BF59DF60036F959 /* CartView.swift */; };
333332
026826AB2BF59DF70036F959 /* ItemRowView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 026826A22BF59DF60036F959 /* ItemRowView.swift */; };
334333
026826AC2BF59DF70036F959 /* SimpleProductCardView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 026826A42BF59DF60036F959 /* SimpleProductCardView.swift */; };
@@ -3532,7 +3531,6 @@
35323531
02660503293D8D24004084EA /* PaymentCaptureCelebration.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PaymentCaptureCelebration.swift; sourceTree = "<group>"; };
35333532
02667A192ABDD44200C77B56 /* GiftCardCodeScannerViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = GiftCardCodeScannerViewController.swift; sourceTree = "<group>"; };
35343533
02667A1B2AC159A000C77B56 /* GiftCardCodeScannerNavigationView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = GiftCardCodeScannerNavigationView.swift; sourceTree = "<group>"; };
3535-
026826982BF59DA80036F959 /* Color+WooCommercePOS.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = "Color+WooCommercePOS.swift"; sourceTree = "<group>"; };
35363534
026826A22BF59DF60036F959 /* ItemRowView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ItemRowView.swift; sourceTree = "<group>"; };
35373535
026826A32BF59DF60036F959 /* CartView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CartView.swift; sourceTree = "<group>"; };
35383536
026826A42BF59DF60036F959 /* SimpleProductCardView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SimpleProductCardView.swift; sourceTree = "<group>"; };
@@ -7152,7 +7150,6 @@
71527150
026826972BF59D9E0036F959 /* Utils */ = {
71537151
isa = PBXGroup;
71547152
children = (
7155-
026826982BF59DA80036F959 /* Color+WooCommercePOS.swift */,
71567153
68E4E8B42C0EF39D00CFA0C3 /* PreviewHelpers.swift */,
71577154
DA4104392C247B6900E8456A /* PointOfSalePreviewOrderController.swift */,
71587155
01664F9D2C50E685007CB5DD /* POSFontStyle.swift */,
@@ -15495,7 +15492,6 @@
1549515492
02D681A929C358BA00348510 /* StoreOnboardingPaymentsSetupView.swift in Sources */,
1549615493
02D681AB29C3F8AC00348510 /* StoreOnboardingPaymentsSetupCoordinator.swift in Sources */,
1549715494
B59D49CD219B587E006BF0AD /* UILabel+OrderStatus.swift in Sources */,
15498-
026826992BF59DA90036F959 /* Color+WooCommercePOS.swift in Sources */,
1549915495
265BCA0C2430E741004E53EE /* ProductCategoryTableViewCell.swift in Sources */,
1550015496
02ACD25A2852E11700EC928E /* CloseAccountCoordinator.swift in Sources */,
1550115497
0191301B2CF4E782008C0C88 /* TapToPayEducationStepViewModel.swift in Sources */,

0 commit comments

Comments
 (0)