Skip to content

Commit

Permalink
[MBL-1458 pt 1] Add alert flag for PPO (#2120)
Browse files Browse the repository at this point in the history
* Add alert flag for PPO

* Add shared style file for PPO cards

* Move project details to PPO card styles

* Move project creator to PPO card styles

* Fix formatting

* More discussion on architecture
  • Loading branch information
stevestreza-ksr authored Aug 21, 2024
1 parent 5016b15 commit 38a8907
Show file tree
Hide file tree
Showing 9 changed files with 195 additions and 21 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"images" : [
{
"filename" : "clock.pdf",
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}
Binary file not shown.
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"images" : [
{
"filename" : "Icon.pdf",
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}
Binary file not shown.
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
import Library
import SwiftUI

struct PPOAlertFlag: View {
let alert: Alert

var body: some View {
HStack {
self.image
.renderingMode(.template)
.aspectRatio(contentMode: .fit)
.foregroundStyle(self.foregroundColor)
.frame(width: Constants.imageSize, height: Constants.imageSize)
Spacer()
.frame(width: Constants.spacerWidth)
Text(self.alert.message)
.font(Font(PPOCardStyles.title.font))
.foregroundStyle(self.foregroundColor)
}
.padding(Constants.padding)
.background(self.backgroundColor)
.clipShape(RoundedRectangle(cornerSize: CGSize(
width: Constants.cornerRadius,
height: Constants.cornerRadius
)))
}

var image: Image {
switch self.alert.type {
case .time:
Image(PPOCardStyles.timeImage)
case .alert:
Image(PPOCardStyles.alertImage)
}
}

var foregroundColor: Color {
switch self.alert.icon {
case .warning:
Color(uiColor: PPOCardStyles.warningColor.foreground)
case .alert:
Color(uiColor: PPOCardStyles.alertColor.foreground)
}
}

var backgroundColor: Color {
switch self.alert.icon {
case .warning:
Color(uiColor: PPOCardStyles.warningColor.background)
case .alert:
Color(uiColor: PPOCardStyles.alertColor.background)
}
}

struct Alert: Identifiable {
let type: AlertType
let icon: AlertIcon
let message: String

var id: String {
"\(self.type)-\(self.icon)-\(self.message)"
}

enum AlertType: Identifiable {
case time
case alert

var id: String {
switch self {
case .time:
"time"
case .alert:
"alert"
}
}
}

enum AlertIcon: Identifiable {
case warning
case alert

var id: String {
switch self {
case .warning:
"warning"
case .alert:
"alert"
}
}
}
}

private enum Constants {
static let imageSize: CGFloat = 18
static let spacerWidth: CGFloat = 4
static let cornerRadius: CGFloat = 6
static let font = UIFont.ksr_caption1().bolded
static let padding = EdgeInsets(top: 4, leading: 12, bottom: 4, trailing: 8)
}
}

#Preview("Stack of flags") {
VStack(alignment: .leading, spacing: 8) {
PPOAlertFlag(alert: .init(type: .time, icon: .warning, message: "Address locks in 8 hours"))
PPOAlertFlag(alert: .init(type: .alert, icon: .warning, message: "Survey available"))
PPOAlertFlag(alert: .init(type: .alert, icon: .alert, message: "Payment failed"))
PPOAlertFlag(alert: .init(type: .time, icon: .alert, message: "Pledge will be dropped in 6 days"))
PPOAlertFlag(alert: .init(type: .alert, icon: .alert, message: "Card needs authentication"))
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import Foundation
import Library
import SwiftUI

enum PPOCardStyles {
static let warningColor = (
foreground: UIColor.ksr_support_400,
background: UIColor.ksr_celebrate_100
)

static let alertColor = (
foreground: UIColor.hex(0x73140D),
background: UIColor.hex(0xFEF2F1)
)

static let title = (
font: UIFont.ksr_caption1().bolded,
color: UIColor.ksr_black
)

static let subtitle = (
font: UIFont.ksr_footnote(),
color: UIColor.ksr_support_400
)

static let timeImage = ImageResource.iconLimitedTime
static let alertImage = ImageResource.iconNotice
}
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,12 @@ struct PPOProjectCreator: View {
HStack(alignment: .firstTextBaseline) {
// TODO: Localize
Text("Created by **\(self.creatorName)**")
.font(Font(Constants.createdByFont))
.foregroundStyle(Color(Constants.createdByColor))
.frame(maxWidth: Constants.labelMaxWidth, alignment: Constants.labelAlignment)
.font(Font(PPOCardStyles.subtitle.font))
.foregroundStyle(Color(PPOCardStyles.subtitle.color))
.frame(
maxWidth: Constants.labelMaxWidth,
alignment: Constants.labelAlignment
)
.lineLimit(Constants.textLineLimit)

Button(action: {
Expand All @@ -20,7 +23,7 @@ struct PPOProjectCreator: View {
// TODO: Localize
Text("Send a message")
})
.font(Font(Constants.sendMessageFont))
.font(Font(PPOCardStyles.subtitle.font))
.foregroundStyle(Color(Constants.sendMessageColor))
.frame(alignment: Constants.buttonAlignment)
.lineLimit(Constants.textLineLimit)
Expand All @@ -39,17 +42,14 @@ struct PPOProjectCreator: View {
}

private enum Constants {
static let createdByFont = UIFont.ksr_caption2()
static let createdByColor = UIColor.ksr_support_400
static let sendMessageFont = UIFont.ksr_caption2()
static let sendMessageColor = UIColor.ksr_create_700
static let chevronSize: CGFloat = 10
static let chevronOffset = CGSize(width: 0, height: 2)
static let spacerWidth = Styles.grid(1)
static let textLineLimit = 1
static let labelMaxWidth = CGFloat.infinity
static let labelAlignment = Alignment.leading
static let buttonAlignment = Alignment.trailing
static let sendMessageColor = UIColor.ksr_create_700
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,24 +15,33 @@ struct PPOProjectDetails: View {
KFImage(self.imageUrl)
.resizable()
.clipShape(Constants.imageShape)
.aspectRatio(Constants.imageAspectRatio, contentMode: Constants.imageContentMode)
.aspectRatio(
Constants.imageAspectRatio,
contentMode: Constants.imageContentMode
)
.frame(width: self.leadingColumnWidth)
Spacer()
.frame(width: Constants.spacing)
VStack {
if let title {
Text(title)
.font(Font(Constants.titleFont))
.foregroundStyle(Color(Constants.titleTextColor))
.frame(maxWidth: Constants.textMaxWidth, alignment: Constants.textAlignment)
.font(Font(PPOCardStyles.title.font))
.foregroundStyle(Color(PPOCardStyles.title.color))
.frame(
maxWidth: Constants.textMaxWidth,
alignment: Constants.textAlignment
)
.lineLimit(Constants.titleLineLimit)
}
if let symbol = pledge.symbol, let amount = pledge.amount {
// TODO: Localize
Text("\(symbol)\(amount) pledged")
.font(Font(Constants.subtitleFont))
.foregroundStyle(Color(Constants.subtitleTextColor))
.frame(maxWidth: Constants.textMaxWidth, alignment: Constants.textAlignment)
.font(Font(PPOCardStyles.subtitle.font))
.foregroundStyle(Color(PPOCardStyles.subtitle.color))
.frame(
maxWidth: Constants.textMaxWidth,
alignment: Constants.textAlignment
)
.lineLimit(Constants.subtitleLineLimit)
}
}
Expand All @@ -48,12 +57,7 @@ struct PPOProjectDetails: View {
static let imageAspectRatio: CGFloat = 16 / 9
static let imageContentMode = ContentMode.fit

static let titleFont = UIFont.ksr_caption1().bolded
static let titleTextColor = UIColor.ksr_black
static let titleLineLimit = 2

static let subtitleFont = UIFont.ksr_footnote()
static let subtitleTextColor = UIColor.ksr_support_400
static let subtitleLineLimit = 1

static let textMaxWidth = CGFloat.infinity
Expand Down
10 changes: 9 additions & 1 deletion Kickstarter.xcodeproj/project.pbxproj
Original file line number Diff line number Diff line change
Expand Up @@ -1126,7 +1126,9 @@
A7F6F0C11DC7EBF7002C118C /* DateProtocol.swift in Sources */ = {isa = PBXBuildFile; fileRef = A7F6F0C01DC7EBF7002C118C /* DateProtocol.swift */; };
A7FC8C061C8F1DEA00C3B49B /* CircleAvatarImageView.swift in Sources */ = {isa = PBXBuildFile; fileRef = A7FC8C051C8F1DEA00C3B49B /* CircleAvatarImageView.swift */; };
AA6E9E842C62B9DC001543FC /* PPOProjectDetails.swift in Sources */ = {isa = PBXBuildFile; fileRef = AAA592782C5C708000482087 /* PPOProjectDetails.swift */; };
AA6E9E852C62B9DC001543FC /* PPOAlertFlag.swift in Sources */ = {isa = PBXBuildFile; fileRef = AAD2BEE82C59B981003D8B95 /* PPOAlertFlag.swift */; };
AA6E9E882C63EAE9001543FC /* PPOProjectCreator.swift in Sources */ = {isa = PBXBuildFile; fileRef = AA6E9E862C63E7C3001543FC /* PPOProjectCreator.swift */; };
AAE7C9A22C75142A00800E03 /* PPOCardStyles.swift in Sources */ = {isa = PBXBuildFile; fileRef = AAE7C9A12C75142A00800E03 /* PPOCardStyles.swift */; };
D002CAE1218CF8F1009783F2 /* WatchProjectMutation.swift in Sources */ = {isa = PBXBuildFile; fileRef = D002CAE0218CF8F1009783F2 /* WatchProjectMutation.swift */; };
D002CAE3218CF91D009783F2 /* WatchProjectInput.swift in Sources */ = {isa = PBXBuildFile; fileRef = D002CAE2218CF91D009783F2 /* WatchProjectInput.swift */; };
D002CAE5218CF951009783F2 /* WatchProjectResponseEnvelope.swift in Sources */ = {isa = PBXBuildFile; fileRef = D002CAE4218CF951009783F2 /* WatchProjectResponseEnvelope.swift */; };
Expand Down Expand Up @@ -2763,8 +2765,10 @@
A7F761741C85FA40005405ED /* ActivitiesViewController.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = ActivitiesViewController.swift; sourceTree = "<group>"; };
A7F761761C85FACB005405ED /* LoginToutViewController.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; lineEnding = 0; path = LoginToutViewController.swift; sourceTree = "<group>"; xcLanguageSpecificationIdentifier = xcode.lang.swift; };
A7FC8C051C8F1DEA00C3B49B /* CircleAvatarImageView.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = CircleAvatarImageView.swift; sourceTree = "<group>"; };
AAA592782C5C708000482087 /* PPOProjectDetails.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PPOProjectDetails.swift; sourceTree = "<group>"; };
AA6E9E862C63E7C3001543FC /* PPOProjectCreator.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PPOProjectCreator.swift; sourceTree = "<group>"; };
AAA592782C5C708000482087 /* PPOProjectDetails.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PPOProjectDetails.swift; sourceTree = "<group>"; };
AAD2BEE82C59B981003D8B95 /* PPOAlertFlag.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PPOAlertFlag.swift; sourceTree = "<group>"; };
AAE7C9A12C75142A00800E03 /* PPOCardStyles.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PPOCardStyles.swift; sourceTree = "<group>"; };
D002CAE0218CF8F1009783F2 /* WatchProjectMutation.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = WatchProjectMutation.swift; sourceTree = "<group>"; };
D002CAE2218CF91D009783F2 /* WatchProjectInput.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = WatchProjectInput.swift; sourceTree = "<group>"; };
D002CAE4218CF951009783F2 /* WatchProjectResponseEnvelope.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = WatchProjectResponseEnvelope.swift; sourceTree = "<group>"; };
Expand Down Expand Up @@ -6685,6 +6689,8 @@
AAD2BEE72C59B964003D8B95 /* CardView */ = {
isa = PBXGroup;
children = (
AAE7C9A12C75142A00800E03 /* PPOCardStyles.swift */,
AAD2BEE82C59B981003D8B95 /* PPOAlertFlag.swift */,
AAA592782C5C708000482087 /* PPOProjectDetails.swift */,
AA6E9E862C63E7C3001543FC /* PPOProjectCreator.swift */,
);
Expand Down Expand Up @@ -8385,6 +8391,7 @@
D0971E16221E083100DFEF9B /* SelectCurrencyCell.swift in Sources */,
8A14E09723971C1300387824 /* PledgeShippingLocationShimmerLoadingView.swift in Sources */,
94114D72265329770063E8F6 /* CommentCellHeaderStackView.swift in Sources */,
AAE7C9A22C75142A00800E03 /* PPOCardStyles.swift in Sources */,
A72C3AB91D00FB1F0075227E /* DiscoverySelectableRowCell.swift in Sources */,
20BCBEB7264DAA5500510EDF /* CommentInputContainerView.swift in Sources */,
A75A29281CE0B7DD00D35E5C /* BackingCell.swift in Sources */,
Expand Down Expand Up @@ -8429,6 +8436,7 @@
473DE014273C551C0033331D /* ProjectRisksDisclaimerCell.swift in Sources */,
D6C3845B210B9AC400ADB671 /* SettingsNewslettersTopCell.swift in Sources */,
D6534D3822E784B500E9D279 /* PledgePaymentMethodCell.swift in Sources */,
AA6E9E852C62B9DC001543FC /* PPOAlertFlag.swift in Sources */,
AA6E9E842C62B9DC001543FC /* PPOProjectDetails.swift in Sources */,
777C67BB220A0FA5009F8D42 /* SettingsTableViewHeader.swift in Sources */,
A72C3AB01D00F9C10075227E /* DiscoveryFiltersDataSource.swift in Sources */,
Expand Down

0 comments on commit 38a8907

Please sign in to comment.