-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Comments: Add the new header component #20753
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit
Hold shift + click to select a range
a53103b
Add new table header view for comment
dvdchr a21f88c
Show the new comment header in Reader comments
dvdchr bb031fd
Merge branch 'trunk' into task/20568-comment-sticky-header
dvdchr e72de7d
Update to ultraThinMaterial
dvdchr ad25743
Merge branch 'trunk' into task/20568-comment-sticky-header
dvdchr df561e2
Remove unused padding on the disclosure image
dvdchr File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
156 changes: 156 additions & 0 deletions
156
WordPress/Classes/ViewRelated/Comments/CommentTableHeaderView.swift
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,156 @@ | ||
| import SwiftUI | ||
|
|
||
| class CommentTableHeaderView: UITableViewHeaderFooterView, Reusable { | ||
|
|
||
| enum Subtitle { | ||
| /// Subtext for a top-level comment on a post. | ||
| case post | ||
|
|
||
| /// Subtext for a reply to a comment. | ||
| /// Requires a String describing the replied author's name. | ||
| case reply(String) | ||
|
|
||
| /// Subtext for the comment threads. | ||
| case commentThread | ||
|
|
||
| fileprivate var stringValue: String { | ||
| switch self { | ||
| case .post: | ||
| return Constants.postCommentSubText | ||
| case .reply(let authorName): | ||
| return String(format: Constants.replyCommentSubTextFormat, authorName) | ||
| case .commentThread: | ||
| return Constants.commentThreadSubText | ||
| } | ||
| } | ||
| } | ||
|
|
||
| private let hostingController: UIHostingController<CommentHeaderView> | ||
|
|
||
| init(title: String, | ||
| subtitle: Subtitle, | ||
| showsDisclosureIndicator: Bool = false, | ||
| reuseIdentifier: String? = CommentTableHeaderView.defaultReuseID) { | ||
| let headerView = CommentHeaderView(title: title, | ||
| subtitle: subtitle, | ||
| showsDisclosureIndicator: showsDisclosureIndicator) | ||
| hostingController = .init(rootView: headerView) | ||
| super.init(reuseIdentifier: reuseIdentifier) | ||
| configureView() | ||
| } | ||
|
|
||
| required init?(coder: NSCoder) { | ||
| fatalError("init(coder:) has not been implemented") | ||
| } | ||
| } | ||
|
|
||
| // MARK: - Private methods | ||
|
|
||
| private extension CommentTableHeaderView { | ||
|
|
||
| func configureView() { | ||
| hostingController.view.translatesAutoresizingMaskIntoConstraints = false | ||
| hostingController.view.backgroundColor = .clear | ||
| contentView.addSubview(hostingController.view) | ||
| contentView.pinSubviewToAllEdges(hostingController.view) | ||
| } | ||
|
|
||
| enum Constants { | ||
| static let postCommentSubText = NSLocalizedString( | ||
| "comment.header.subText.post", | ||
| value: "Comment on", | ||
| comment: """ | ||
| Provides a hint that the current screen displays a comment on a post. | ||
| The title of the post will be displayed below this text. | ||
| Example: Comment on \n My First Post | ||
| """ | ||
| ) | ||
|
|
||
| static let replyCommentSubTextFormat = NSLocalizedString( | ||
| "comment.header.subText.reply", | ||
| value: "Reply to %1$@", | ||
| comment: """ | ||
| Provides a hint that the current screen displays a reply to a comment. | ||
| %1$@ is a placeholder for the comment author's name that's been replied to. | ||
| Example: Reply to Pamela Nguyen | ||
| """ | ||
| ) | ||
|
|
||
| static let commentThreadSubText = NSLocalizedString( | ||
| "comment.header.subText.commentThread", | ||
| value: "Comments on", | ||
| comment: """ | ||
| Sentence fragment. | ||
| The full phrase is 'Comments on' followed by the title of the post on a separate line. | ||
| """ | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| // MARK: - SwiftUI | ||
|
|
||
| private struct CommentHeaderView: View { | ||
|
|
||
| @State var title = String() | ||
| @State var subtitle: CommentTableHeaderView.Subtitle = .post | ||
| @State var showsDisclosureIndicator = true | ||
|
|
||
| var body: some View { | ||
| if #available(iOS 15.0, *) { | ||
| // Material ShapeStyles are only available from iOS 15.0. | ||
| content.background(.ultraThinMaterial) | ||
| } else { | ||
| ZStack { | ||
| VisualEffectView(effect: UIBlurEffect(style: .systemUltraThinMaterial)) | ||
| content | ||
| } | ||
| } | ||
| } | ||
|
|
||
| var content: some View { | ||
| HStack { | ||
| text | ||
| Spacer() | ||
| if showsDisclosureIndicator { | ||
| disclosureIndicator | ||
| } | ||
| } | ||
| .padding(EdgeInsets(top: 10, leading: 16, bottom: 10, trailing: 16)) | ||
| } | ||
|
|
||
| var text: some View { | ||
| VStack(alignment: .leading) { | ||
| Text(subtitle.stringValue) | ||
| .lineLimit(1) | ||
| .font(.footnote) | ||
| .foregroundColor(Color(.secondaryLabel)) | ||
| Text(title) | ||
| .lineLimit(1) | ||
| .font(.subheadline) | ||
| .foregroundColor(Color(.text)) | ||
| } | ||
| } | ||
|
|
||
| var disclosureIndicator: some View { | ||
| Image(systemName: "chevron.forward") | ||
| .renderingMode(.template) | ||
| .foregroundColor(Color(.secondaryLabel)) | ||
| .font(.caption.weight(.semibold)) | ||
| .imageScale(.large) | ||
| .padding(.zero) | ||
dvdchr marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| } | ||
| } | ||
|
|
||
| // MARK: SwiftUI VisualEffect support for iOS 14 | ||
|
|
||
| private struct VisualEffectView: UIViewRepresentable { | ||
| var effect: UIVisualEffect | ||
|
|
||
| func makeUIView(context: Context) -> UIVisualEffectView { | ||
| return UIVisualEffectView() | ||
| } | ||
|
|
||
| func updateUIView(_ uiView: UIVisualEffectView, context: Context) { | ||
| uiView.effect = effect | ||
| } | ||
| } | ||
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.
Uh oh!
There was an error while loading. Please reload this page.
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.
You are hopefully going to be able to remove this (and
VisualEffectView) soon. There is a discussion when to merge the deployment target bump.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.
Thanks for the heads up, and looking forward to it! I'll create a follow-up PR to remove them once the version bump PR gets merged.