@@ -5,57 +5,71 @@ import Yosemite
55struct InboxNoteRow : View {
66 let viewModel : InboxNoteRowViewModel
77
8+ // Tracks the scale of the view due to accessibility changes.
9+ @ScaledMetric private var scale : CGFloat = 1
10+
811 var body : some View {
912 VStack ( spacing: 0 ) {
10- VStack ( alignment: . leading,
11- spacing: Constants . verticalSpacing) {
13+ VStack ( alignment: . leading, spacing: Constants . spacingBetweenTopHStackAndContentVStack) {
1214 // HStack with type icon and relative date.
13- // TODO: 5954 - type icon and relative date
15+ HStack {
16+ Circle ( )
17+ . frame ( width: scale * Constants. typeIconDimension, height: scale * Constants. typeIconDimension, alignment: . center)
18+ . foregroundColor ( Color ( Constants . typeIconCircleColor) )
19+ . overlay (
20+ viewModel. typeIcon
21+ . resizable ( )
22+ . scaledToFit ( )
23+ . padding ( scale * Constants. typeIconPadding)
24+ )
25+ Text ( viewModel. date)
26+ . font ( . subheadline)
27+ . foregroundColor ( Color ( Constants . dateTextColor) )
28+ Spacer ( )
29+ }
1430
15- // Title.
16- Text ( viewModel. title)
17- . bodyStyle ( )
18- . fixedSize ( horizontal: false , vertical: true )
31+ VStack ( alignment: . leading, spacing: Constants . verticalSpacing) {
32+ // Title.
33+ Text ( viewModel. title)
34+ . bodyStyle ( )
35+ . fixedSize ( horizontal: false , vertical: true )
1936
20- // Content.
21- AttributedText ( viewModel. attributedContent)
22- . attributedTextLinkColor ( Color ( . accent) )
37+ // Content.
38+ AttributedText ( viewModel. attributedContent)
39+ . attributedTextLinkColor ( Color ( . accent) )
2340
24- // HStack with actions and dismiss action.
25- HStack ( spacing: Constants . spacingBetweenActions) {
26- ForEach ( viewModel. actions) { action in
27- if let url = action. url {
28- Button ( action. title) {
29- // TODO: 5955 - handle action
30- print ( " Handling action with URL: \( url) " )
41+ // HStack with actions and dismiss action.
42+ HStack ( spacing: Constants . spacingBetweenActions) {
43+ ForEach ( viewModel. actions) { action in
44+ if let url = action. url {
45+ Button ( action. title) {
46+ // TODO: 5955 - handle action
47+ print ( " Handling action with URL: \( url) " )
48+ }
49+ . foregroundColor ( Color ( . accent) )
50+ . font ( . body)
51+ . buttonStyle ( PlainButtonStyle ( ) )
52+ } else {
53+ Text ( action. title)
3154 }
32- . foregroundColor ( Color ( . accent) )
33- . font ( . body)
34- . buttonStyle ( PlainButtonStyle ( ) )
35- } else {
36- Text ( action. title)
3755 }
38- }
39- Button ( Localization . dismiss) {
40- // TODO: 5955 - handle dismiss action
41- print ( " Handling dismiss action " )
42- }
43- . foregroundColor ( Color ( . withColorStudio( . gray, shade: . shade30) ) )
44- . font ( . body)
45- . buttonStyle ( PlainButtonStyle ( ) )
56+ Button ( Localization . dismiss) {
57+ // TODO: 5955 - handle dismiss action
58+ print ( " Handling dismiss action " )
59+ }
60+ . foregroundColor ( Color ( . withColorStudio( . gray, shade: . shade30) ) )
61+ . font ( . body)
62+ . buttonStyle ( PlainButtonStyle ( ) )
4663
47- Spacer ( )
64+ Spacer ( )
65+ }
4866 }
4967 }
5068 . padding ( Constants . defaultPadding)
5169
52- if #available( iOS 15 . 0 , * ) {
53- // In order to show full-width separator, the default list separator is hidden and a `Divider` is shown inside the row.
54- Divider ( )
55- . frame ( height: Constants . dividerHeight)
56- }
70+ Divider ( )
71+ . frame ( height: Constants . dividerHeight)
5772 }
58- . listRowInsets ( . zero)
5973 }
6074}
6175
@@ -66,18 +80,25 @@ private extension InboxNoteRow {
6680
6781 enum Constants {
6882 static let spacingBetweenActions : CGFloat = 16
83+ static let spacingBetweenTopHStackAndContentVStack : CGFloat = 8
6984 static let verticalSpacing : CGFloat = 14
7085 static let defaultPadding : CGFloat = 16
7186 static let dividerHeight : CGFloat = 1
87+ static let dateTextColor : UIColor = . withColorStudio( . gray, shade: . shade30)
88+ static let typeIconDimension : CGFloat = 29
89+ static let typeIconPadding : CGFloat = 5
90+ static let typeIconCircleColor : UIColor = . init( light: . withColorStudio( . gray, shade: . shade0) , dark: . withColorStudio( . gray, shade: . shade70) )
7291 }
7392}
7493
7594struct InboxNoteRow_Previews : PreviewProvider {
7695 static var previews : some View {
96+ // Monday, February 14, 2022 1:04:42 PM
97+ let today = Date ( timeIntervalSince1970: 1644843882 )
7798 let note = InboxNote ( siteID: 2 ,
7899 id: 6 ,
79100 name: " " ,
80- type: " " ,
101+ type: " marketing " ,
81102 status: " " ,
82103 actions: [ . init( id: 2 , name: " " , label: " Let your customers know about Apple Pay " , status: " " , url: " https://wordpress.org " ) ,
83104 . init( id: 6 , name: " " , label: " No URL " , status: " " , url: " " ) ] ,
@@ -91,13 +112,33 @@ struct InboxNoteRow_Previews: PreviewProvider {
91112 isRemoved: false ,
92113 isRead: false ,
93114 dateCreated: . init( ) )
94- let viewModel = InboxNoteRowViewModel ( note: note)
115+ let shortNote = InboxNote ( siteID: 2 ,
116+ id: 6 ,
117+ name: " " ,
118+ type: " " ,
119+ status: " " ,
120+ actions: [ . init( id: 2 , name: " " , label: " Learn Apple Pay " , status: " " , url: " https://wordpress.org " ) ,
121+ . init( id: 6 , name: " " , label: " No URL " , status: " " , url: " " ) ] ,
122+ title: " Boost sales this holiday season with Apple Pay! " ,
123+ content: " Increase your conversion rate. " ,
124+ isRemoved: false ,
125+ isRead: false ,
126+ dateCreated: today)
95127 Group {
96- InboxNoteRow ( viewModel: viewModel)
128+ List {
129+ InboxNoteRow ( viewModel: . init( note: note. copy ( type: " marketing " , dateCreated: today) , today: today) )
130+ InboxNoteRow ( viewModel: . init( note: shortNote. copy ( type: " error " ) . copy ( dateCreated: today. addingTimeInterval ( - 6 * 60 ) ) , today: today) )
131+ InboxNoteRow ( viewModel: . init( note: shortNote. copy ( type: " warning " ) . copy ( dateCreated: today. addingTimeInterval ( - 6 * 3600 ) ) , today: today) )
132+ InboxNoteRow ( viewModel: . init( note: shortNote. copy ( type: " update " ) . copy ( dateCreated: today. addingTimeInterval ( - 6 * 86400 ) ) , today: today) )
133+ InboxNoteRow ( viewModel: . init( note: shortNote. copy ( type: " info " ) . copy ( dateCreated: today. addingTimeInterval ( - 14 * 86400 ) ) , today: today) )
134+ InboxNoteRow ( viewModel: . init( note: shortNote. copy ( type: " survey " ) . copy ( dateCreated: today. addingTimeInterval ( - 1.5 * 86400 ) ) , today: today) )
135+ }
97136 . preferredColorScheme ( . dark)
98- InboxNoteRow ( viewModel: viewModel)
137+ . environment ( \. sizeCategory, . extraSmall)
138+ . previewLayout ( . sizeThatFits)
139+ InboxNoteRow ( viewModel: . init( note: note. copy ( dateCreated: today. addingTimeInterval ( - 86400 * 2 ) ) , today: today) )
99140 . preferredColorScheme ( . light)
100- InboxNoteRow ( viewModel: viewModel )
141+ InboxNoteRow ( viewModel: . init ( note : note . copy ( dateCreated : today . addingTimeInterval ( - 6 * 60 ) ) , today : today ) )
101142 . preferredColorScheme ( . light)
102143 . environment ( \. sizeCategory, . extraExtraExtraLarge)
103144 }
0 commit comments