Improve empty state for lists (IOS-287)

This commit is contained in:
Marcus Kida 2024-07-24 15:32:32 +02:00
parent 50ee1c51e4
commit 07b0ddc14f
No known key found for this signature in database
GPG Key ID: 19FF64E08013CA40
6 changed files with 101 additions and 59 deletions

View File

@ -491,6 +491,9 @@
"offline": "Offline",
"new_posts": "New Posts",
"post_sent": "Post Sent"
},
"empty_state": {
"list_empty_message_title": "This list is empty"
}
},
"suggestion_account": {

View File

@ -28,6 +28,10 @@ final class HomeTimelineViewController: UIViewController, NeedsDependency, Media
var viewModel: HomeTimelineViewModel?
let mediaPreviewTransitionController = MediaPreviewTransitionController()
enum EmptyViewUseCase {
case timeline, list
}
let friendsAssetImageView: UIImageView = {
let imageView = UIImageView()
@ -335,24 +339,24 @@ extension HomeTimelineViewController {
viewModel?.timelineIsEmpty
.receive(on: DispatchQueue.main)
.sink { [weak self] isEmpty in
if isEmpty {
self?.showEmptyView()
let userDoesntFollowPeople: Bool
if let authContext = self?.authContext,
let me = authContext.mastodonAuthenticationBox.authentication.account() {
userDoesntFollowPeople = me.followersCount == 0
} else {
userDoesntFollowPeople = true
}
if (self?.viewModel?.presentedSuggestions == false) && userDoesntFollowPeople {
self?.findPeopleButtonPressed(self)
self?.viewModel?.presentedSuggestions = true
}
} else {
.sink { [weak self] state in
guard let state else {
self?.emptyView.removeFromSuperview()
return
}
self?.showEmptyView(state)
let userDoesntFollowPeople: Bool
if let authContext = self?.authContext,
let me = authContext.mastodonAuthenticationBox.authentication.account() {
userDoesntFollowPeople = me.followersCount == 0
} else {
userDoesntFollowPeople = true
}
if (self?.viewModel?.presentedSuggestions == false) && userDoesntFollowPeople {
self?.findPeopleButtonPressed(self)
self?.viewModel?.presentedSuggestions = true
}
}
.store(in: &disposeBag)
@ -478,7 +482,7 @@ extension HomeTimelineViewController {
}
extension HomeTimelineViewController {
func showEmptyView() {
func showEmptyView(_ state: HomeTimelineViewModel.EmptyViewState) {
if emptyView.superview != nil {
return
}
@ -494,48 +498,61 @@ extension HomeTimelineViewController {
if emptyView.arrangedSubviews.count > 0 {
return
}
let findPeopleButton: PrimaryActionButton = {
let button = PrimaryActionButton()
button.setTitle(L10n.Common.Controls.Actions.findPeople, for: .normal)
button.addTarget(self, action: #selector(HomeTimelineViewController.findPeopleButtonPressed(_:)), for: .touchUpInside)
return button
}()
NSLayoutConstraint.activate([
findPeopleButton.heightAnchor.constraint(equalToConstant: 46)
])
let manuallySearchButton: HighlightDimmableButton = {
let button = HighlightDimmableButton()
button.titleLabel?.font = UIFontMetrics(forTextStyle: .headline).scaledFont(for: .systemFont(ofSize: 15, weight: .semibold))
button.setTitle(L10n.Common.Controls.Actions.manuallySearch, for: .normal)
button.setTitleColor(Asset.Colors.Brand.blurple.color, for: .normal)
button.addTarget(self, action: #selector(HomeTimelineViewController.manuallySearchButtonPressed(_:)), for: .touchUpInside)
return button
}()
let topPaddingView = UIView()
let bottomPaddingView = UIView()
switch state {
case .list:
let noStatusesLabel: UILabel = {
let label = UILabel()
label.text = L10n.Scene.HomeTimeline.EmptyState.listEmptyMessageTitle
label.textColor = Asset.Colors.Label.secondary.color
label.textAlignment = .center
return label
}()
emptyView.addArrangedSubview(noStatusesLabel)
case .timeline:
let findPeopleButton: PrimaryActionButton = {
let button = PrimaryActionButton()
button.setTitle(L10n.Common.Controls.Actions.findPeople, for: .normal)
button.addTarget(self, action: #selector(HomeTimelineViewController.findPeopleButtonPressed(_:)), for: .touchUpInside)
return button
}()
NSLayoutConstraint.activate([
findPeopleButton.heightAnchor.constraint(equalToConstant: 46)
])
let manuallySearchButton: HighlightDimmableButton = {
let button = HighlightDimmableButton()
button.titleLabel?.font = UIFontMetrics(forTextStyle: .headline).scaledFont(for: .systemFont(ofSize: 15, weight: .semibold))
button.setTitle(L10n.Common.Controls.Actions.manuallySearch, for: .normal)
button.setTitleColor(Asset.Colors.Brand.blurple.color, for: .normal)
button.addTarget(self, action: #selector(HomeTimelineViewController.manuallySearchButtonPressed(_:)), for: .touchUpInside)
return button
}()
emptyView.addArrangedSubview(topPaddingView)
emptyView.addArrangedSubview(friendsAssetImageView)
emptyView.addArrangedSubview(bottomPaddingView)
let topPaddingView = UIView()
let bottomPaddingView = UIView()
topPaddingView.translatesAutoresizingMaskIntoConstraints = false
bottomPaddingView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
topPaddingView.heightAnchor.constraint(equalTo: bottomPaddingView.heightAnchor, multiplier: 0.8),
manuallySearchButton.heightAnchor.constraint(greaterThanOrEqualToConstant: 20),
])
emptyView.addArrangedSubview(topPaddingView)
emptyView.addArrangedSubview(friendsAssetImageView)
emptyView.addArrangedSubview(bottomPaddingView)
let buttonContainerStackView = UIStackView()
emptyView.addArrangedSubview(buttonContainerStackView)
buttonContainerStackView.isLayoutMarginsRelativeArrangement = true
buttonContainerStackView.layoutMargins = UIEdgeInsets(top: 0, left: 32, bottom: 22, right: 32)
buttonContainerStackView.axis = .vertical
buttonContainerStackView.spacing = 17
topPaddingView.translatesAutoresizingMaskIntoConstraints = false
bottomPaddingView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
topPaddingView.heightAnchor.constraint(equalTo: bottomPaddingView.heightAnchor, multiplier: 0.8),
manuallySearchButton.heightAnchor.constraint(greaterThanOrEqualToConstant: 20),
])
buttonContainerStackView.addArrangedSubview(findPeopleButton)
buttonContainerStackView.addArrangedSubview(manuallySearchButton)
let buttonContainerStackView = UIStackView()
emptyView.addArrangedSubview(buttonContainerStackView)
buttonContainerStackView.isLayoutMarginsRelativeArrangement = true
buttonContainerStackView.layoutMargins = UIEdgeInsets(top: 0, left: 32, bottom: 22, right: 32)
buttonContainerStackView.axis = .vertical
buttonContainerStackView.spacing = 17
buttonContainerStackView.addArrangedSubview(findPeopleButton)
buttonContainerStackView.addArrangedSubview(manuallySearchButton)
}
}
}

View File

@ -105,7 +105,8 @@ extension HomeTimelineViewModel.LoadLatestState {
guard let viewModel else { return }
viewModel.timelineIsEmpty.send(nil)
Task { @MainActor in
let latestFeedRecords = viewModel.dataController.records
@ -170,8 +171,20 @@ extension HomeTimelineViewModel.LoadLatestState {
viewModel.dataController.records = (toAdd + latestFeedRecords).removingDuplicates()
}
viewModel.timelineIsEmpty.value = latestStatusIDs.isEmpty && statuses.isEmpty
viewModel.timelineIsEmpty.value = (latestStatusIDs.isEmpty && statuses.isEmpty) ? {
switch viewModel.timelineContext {
case .home:
return .timeline
case .public:
return .timeline
case .list:
return .list
case .hashtag:
return .list
}
}() : nil
if !isUserInitiated {
FeedbackGenerator.shared.generate(.impact(.light))
}

View File

@ -43,11 +43,15 @@ final class HomeTimelineViewModel: NSObject {
hasNewPosts.send(false)
}
}
enum EmptyViewState {
case timeline, list
}
weak var tableView: UITableView?
weak var timelineMiddleLoaderTableViewCellDelegate: TimelineMiddleLoaderTableViewCellDelegate?
let timelineIsEmpty = CurrentValueSubject<Bool, Never>(false)
let timelineIsEmpty = CurrentValueSubject<EmptyViewState?, Never>(nil)
let homeTimelineNeedRefresh = PassthroughSubject<Void, Never>()
// output

View File

@ -857,6 +857,10 @@ public enum L10n {
public enum HomeTimeline {
/// Home
public static let title = L10n.tr("Localizable", "Scene.HomeTimeline.Title", fallback: "Home")
public enum EmptyState {
/// This list is empty
public static let listEmptyMessageTitle = L10n.tr("Localizable", "Scene.HomeTimeline.EmptyState.ListEmptyMessageTitle", fallback: "This list is empty")
}
public enum TimelineMenu {
/// Following
public static let following = L10n.tr("Localizable", "Scene.HomeTimeline.TimelineMenu.Following", fallback: "Following")

View File

@ -303,6 +303,7 @@ uploaded to Mastodon.";
"Scene.Follower.Title" = "follower";
"Scene.Following.Footer" = "Follows from other servers are not displayed.";
"Scene.Following.Title" = "following";
"Scene.HomeTimeline.EmptyState.ListEmptyMessageTitle" = "This list is empty";
"Scene.HomeTimeline.TimelineMenu.Following" = "Following";
"Scene.HomeTimeline.TimelineMenu.LocalCommunity" = "Local";
"Scene.HomeTimeline.TimelineMenu.Lists.Title" = "Lists";