Skip to content

Commit 27cac3e

Browse files
Merge pull request Expensify#89283 from software-mansion-labs/@GCyganek/gps/live-activity-design-update
Update GPS Live Activity design
2 parents 9caaac9 + 4de78c4 commit 27cac3e

17 files changed

Lines changed: 101 additions & 36 deletions

File tree

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"images" : [
3+
{
4+
"filename" : "Icon.svg",
5+
"idiom" : "universal"
6+
}
7+
],
8+
"info" : {
9+
"author" : "xcode",
10+
"version" : 1
11+
}
12+
}
Lines changed: 1 addition & 0 deletions
Loading
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"images" : [
3+
{
4+
"filename" : "lock-screen-bg.png",
5+
"idiom" : "universal"
6+
}
7+
],
8+
"info" : {
9+
"author" : "xcode",
10+
"version" : 1
11+
}
12+
}
29.5 KB
Loading

ios/LiveActivity/GpsTripAttributes.swift

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,7 @@ struct GpsTripAttributes: ActivityAttributes {
99
var distanceUnitLong: String
1010
var buttonText: String
1111
var subtitle: String
12+
var lockScreenBadgeText: String
13+
var lockScreenTrackingText: String
1214
}
1315
}

ios/LiveActivity/GpsTripLiveActivity.swift

Lines changed: 54 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import SwiftUI
33

44
private extension Color {
55
static let expensifyGreen = Color(red: 3 / 255, green: 212 / 255, blue: 124 / 255)
6+
static let distanceBadgeBg = Color(red: 8 / 255, green: 82 / 255, blue: 57 / 255)
7+
static let brandGreen100 = Color(red: 177 / 255, green: 242 / 255, blue: 214 / 255)
68
}
79

810
private func distanceString(distance: Double) -> String {
@@ -17,40 +19,65 @@ private func distanceStringShort(distance: Double, distanceUnit: String) -> Stri
1719
struct GpsTripLiveActivity: Widget {
1820
var body: some WidgetConfiguration {
1921
ActivityConfiguration(for: GpsTripAttributes.self) { context in
20-
VStack {
21-
HStack(alignment: .bottom) {
22-
VStack(alignment: .leading, spacing: 14) {
23-
Image("wordmark")
24-
.resizable()
25-
.scaledToFit()
26-
.frame(maxWidth: 64)
27-
Text(context.state.subtitle)
28-
.font(.custom("ExpensifyNeue-Regular", size: 15))
29-
.foregroundColor(.white)
30-
}
31-
Spacer()
32-
VStack(alignment: .trailing, spacing: -4) {
22+
HStack(alignment: .center) {
23+
VStack(alignment: .leading) {
24+
Text(context.state.lockScreenTrackingText)
25+
.font(.custom("ExpensifyNeue-Regular", size: 15))
26+
.foregroundColor(.brandGreen100)
27+
.kerning(-0.3)
28+
HStack(alignment: .bottom, spacing: 6) {
3329
Text(distanceString(distance: context.state.distance))
3430
.font(.custom("ExpensifyNeue-Bold", size: 45))
3531
.foregroundColor(.expensifyGreen)
36-
Text(context.state.distanceUnitLong)
37-
.font(.custom("ExpensifyNeue-Regular", size: 15))
38-
.foregroundColor(.white)
32+
Text(context.state.distanceUnit)
33+
.font(.custom("ExpensifyNeue-Regular", size: 25))
34+
.foregroundColor(.brandGreen100)
35+
.padding(.bottom, 5)
3936
}
4037
}
38+
39+
Spacer()
40+
41+
ZStack(alignment: .topTrailing) {
42+
HStack(spacing: 4) {
43+
Image("location")
44+
Text(context.state.lockScreenBadgeText)
45+
.font(.custom("ExpensifyNeue-Bold", size: 11))
46+
.foregroundColor(.brandGreen100)
47+
}
48+
.padding(.trailing, 10)
49+
.padding(.leading, 8)
50+
.frame(height: 24)
51+
.background(Color.distanceBadgeBg)
52+
.clipShape(Capsule())
53+
.padding(.trailing, 44)
54+
.offset(y: -8)
55+
56+
Image("logo")
57+
.resizable()
58+
.scaledToFit()
59+
.frame(width: 60, height: 60)
60+
.clipShape(Circle())
61+
}
4162
}
42-
.padding(.top, 22)
43-
.padding(.bottom, 28)
44-
.padding(.horizontal, 24)
63+
.frame(height: 116)
64+
.padding(.trailing, 28)
65+
.padding(.leading, 24)
4566
.background {
46-
LinearGradient(
47-
stops: [
48-
.init(color: Color(.sRGB, red: 0, green: 46 / 255, blue: 34 / 255), location: 0),
49-
.init(color: Color(.sRGB, red: 6 / 255, green: 27 / 255, blue: 9 / 255), location: 1)
50-
],
51-
startPoint: UnitPoint(x: 0, y: 0.41),
52-
endPoint: UnitPoint(x: 1, y: 0.59)
53-
)
67+
ZStack {
68+
LinearGradient(
69+
stops: [
70+
.init(color: Color(.sRGB, red: 0, green: 46 / 255, blue: 34 / 255), location: 0),
71+
.init(color: Color(.sRGB, red: 6 / 255, green: 27 / 255, blue: 9 / 255), location: 1)
72+
],
73+
startPoint: UnitPoint(x: 0, y: 0.41),
74+
endPoint: UnitPoint(x: 1, y: 0.59)
75+
)
76+
Image("lock-screen-bg")
77+
.resizable()
78+
.scaledToFit()
79+
.frame(maxWidth: .infinity, alignment: .trailing)
80+
}
5481
}
5582
.widgetURL(URL(string: "new-expensify://\(context.attributes.deepLink)"))
5683
} dynamicIsland: { context in
@@ -109,7 +136,6 @@ struct GpsTripLiveActivity: Widget {
109136
.scaledToFit()
110137
.frame(maxWidth: 23, maxHeight: 23)
111138
.clipShape(RoundedRectangle(cornerRadius: 7))
112-
113139
}
114140
.widgetURL(URL(string: "new-expensify://\(context.attributes.deepLink)"))
115141
}

src/languages/de.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8312,7 +8312,7 @@ Fügen Sie weitere Ausgabelimits hinzu, um den Cashflow Ihres Unternehmens zu sc
83128312
prompt: 'Bitte erlaube den Standortzugriff in den Einstellungen deines Geräts, um die GPS‑Streckenverfolgung zu starten.',
83138313
},
83148314
gpsFloatingPillText: 'GPS-Verfolgung läuft...',
8315-
liveActivity: {subtitle: 'Entfernungserfassung', button: 'Fortschritt anzeigen'},
8315+
liveActivity: {subtitle: 'Entfernungserfassung', button: 'Fortschritt anzeigen', lockScreenBadgeText: 'Entfernung', lockScreenTrackingText: 'Verfolge …'},
83168316
},
83178317
reportCardLostOrDamaged: {
83188318
screenTitle: 'Zeugnis verloren oder beschädigt',

src/languages/en.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8299,6 +8299,8 @@ const translations = {
82998299
gpsFloatingPillText: 'GPS tracking in progress...',
83008300
liveActivity: {
83018301
subtitle: 'Tracking distance',
8302+
lockScreenBadgeText: 'Distance',
8303+
lockScreenTrackingText: 'Tracking...',
83028304
button: 'View progress',
83038305
},
83048306
},

src/languages/es.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9539,6 +9539,8 @@ ${amount} para ${merchant} - ${date}`,
95399539
liveActivity: {
95409540
subtitle: 'Seguimiento de distancia',
95419541
button: 'Ver progreso',
9542+
lockScreenBadgeText: 'Distancia',
9543+
lockScreenTrackingText: 'Siguiendo...',
95429544
},
95439545
},
95449546
};

src/languages/fr.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8335,7 +8335,7 @@ Ajoutez davantage de règles de dépenses pour protéger la trésorerie de l’e
83358335
prompt: 'Veuillez autoriser l’accès à la localisation dans les réglages de votre appareil pour commencer le suivi de distance GPS.',
83368336
},
83378337
gpsFloatingPillText: 'Suivi GPS en cours...',
8338-
liveActivity: {subtitle: 'Suivi de la distance', button: 'Voir la progression'},
8338+
liveActivity: {subtitle: 'Suivi de la distance', button: 'Voir la progression', lockScreenBadgeText: 'Distance', lockScreenTrackingText: 'Suivi...'},
83398339
},
83408340
reportCardLostOrDamaged: {
83418341
screenTitle: 'relevé de notes perdu ou endommagé',

0 commit comments

Comments
 (0)