Domain settings: show a list of domains with a CTA to add a domain #8606
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import SwiftUI | ||
|
|
||
| /// Custom view modifier for applying the default divider style. | ||
| struct DividerStyle: ViewModifier { | ||
|
|
||
| func body(content: Content) -> some View { | ||
| content | ||
| .foregroundColor(Color(.separator)) | ||
| .frame(height: Layout.height) | ||
| } | ||
| } | ||
|
|
||
| private extension DividerStyle { | ||
| enum Layout { | ||
| static let height: CGFloat = 1 | ||
| } | ||
| } | ||
|
|
||
| extension View { | ||
| /// Applies the default divider style to a view. | ||
| func dividerStyle() -> some View { | ||
| self.modifier(DividerStyle()) | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| import SwiftUI | ||
|
|
||
| /// Shows a list of domains in domain settings with a CTA to add a domain. | ||
| struct DomainSettingsListView: View { | ||
| let domains: [DomainSettingsViewModel.Domain] | ||
| let addDomain: () -> Void | ||
|
|
||
| var body: some View { | ||
| VStack(alignment: .leading, spacing: 0) { | ||
| Text(Localization.header.uppercased()) | ||
| .padding(Layout.headerPadding) | ||
| .foregroundColor(Color(.secondaryLabel)) | ||
| .captionStyle() | ||
|
|
||
| ForEach(domains, id: \.name) { domain in | ||
| HStack { | ||
| VStack(alignment: .leading) { | ||
| Text(domain.name) | ||
| if let renewalDate = domain.autoRenewalDate { | ||
| Text(String(format: Localization.renewalDateFormat, renewalDate.toString(dateStyle: .medium, timeStyle: .none))) | ||
| .foregroundColor(Color(.secondaryLabel)) | ||
| } | ||
| } | ||
| Spacer() | ||
| } | ||
| .padding(Layout.domainPadding) | ||
| Divider() | ||
| .dividerStyle() | ||
| .padding(Layout.dividerPadding) | ||
| } | ||
|
|
||
| Button(Localization.addDomain) { | ||
| addDomain() | ||
| } | ||
| .padding(Layout.actionButtonPadding) | ||
| .buttonStyle(PlusButtonStyle()) | ||
|
|
||
| Divider() | ||
| .dividerStyle() | ||
| .padding(Layout.dividerPadding) | ||
| } | ||
| } | ||
| } | ||
|
|
||
| private extension DomainSettingsListView { | ||
| enum Localization { | ||
| static let header = NSLocalizedString( | ||
| "Your site domains", | ||
| comment: "Header text of the site's domain list in domain settings." | ||
| ) | ||
| static let renewalDateFormat = NSLocalizedString( | ||
| "Renews on %1$@", | ||
| comment: "Renewal date of a site's domain in domain settings. " + | ||
| "Reads like `Renews on October 11, 2023`." | ||
| ) | ||
| static let addDomain = NSLocalizedString( | ||
| "Add a domain", | ||
| comment: "Title of button to add a domain in domain settings." | ||
| ) | ||
| } | ||
|
|
||
| enum Layout { | ||
| static let headerPadding: EdgeInsets = .init(top: 18, leading: 16, bottom: 6, trailing: 16) | ||
| static let domainPadding: EdgeInsets = .init(top: 10, leading: 16, bottom: 10, trailing: 16) | ||
| static let actionButtonPadding: EdgeInsets = .init(top: 18, leading: 16, bottom: 18, trailing: 23) | ||
| static let dividerPadding: EdgeInsets = .init(top: 0, leading: 16, bottom: 0, trailing: 0) | ||
| static let dividerHeight: CGFloat = 1 | ||
|
||
| } | ||
| } | ||
|
|
||
| struct DomainSettingsListView_Previews: PreviewProvider { | ||
| static var previews: some View { | ||
| DomainSettingsListView(domains: [ | ||
| .init(isPrimary: true, name: "play.store", autoRenewalDate: .distantFuture), | ||
| .init(isPrimary: false, name: "app.store", autoRenewalDate: nil), | ||
| .init(isPrimary: false, name: "woo.store", autoRenewalDate: .now) | ||
| ], addDomain: {}) | ||
| } | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
❓ Are we planning to add some button on the right side of the item? Asking because I'm not sure why we need a HStack to embed the contents here.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good question, we don't plan to add any button to the trailing side. Originally it was the only straightforward way for me to align the domain rows on the trailing edge, however it doesn't look needed anymore. Removed in 5ba1ff5