Skip to content

Commit

Permalink
New 💊 (IOS-234) (#1268)
Browse files Browse the repository at this point in the history
- Replaces the view previously in the Navigation Bar with the new,
so-called Timeline Status Pill
- We use it to show three states: When a post has been published
(successfully), when new statuses are available or when five (I slightly
increased the limit) requests failed
- The Timeline Status Pill features some fancy animations and a little
shadow
- For further details have a look at IOS-234 🙂 


![ios_234_iphone](https://github.com/mastodon/mastodon-ios/assets/2580019/c77df339-aa72-406f-8be3-572acb244246)

![ios_234_ipad](https://github.com/mastodon/mastodon-ios/assets/2580019/f2fafc4c-ed5a-4afb-86a7-5de69325997b)

To simulate the different reasons I used this snippet. When you press
the Settings-button, you should see the 💊 :

```diff
diff --git a/Mastodon/Scene/HomeTimeline/HomeTimelineViewController.swift b/Mastodon/Scene/HomeTimeline/HomeTimelineViewController.swift
index 8559025d4..0eb27d0e8 100644
--- a/Mastodon/Scene/HomeTimeline/HomeTimelineViewController.swift
+++ b/Mastodon/Scene/HomeTimeline/HomeTimelineViewController.swift
@@ -488,9 +488,14 @@ extension HomeTimelineViewController {
     }
     
     @objc private func settingBarButtonItemPressed(_ sender: UIBarButtonItem) {
-        guard let setting = context.settingService.currentSetting.value else { return }
+        // don't commit
+        timelinePill.update(with: .newPosts)
+        showTimelinePill()
 
-        _ = coordinator.present(scene: .settings(setting: setting), from: self, transition: .none)
+//        guard let setting = context.settingService.currentSetting.value else { return }
+//
+//        _ = coordinator.present(scene: .settings(setting: setting), from: self, transition: .none)
+        // don't commit
     }
 
     @objc private func refreshControlValueChanged(_ sender: RefreshControl) {

```
  • Loading branch information
zeitschlag authored Apr 10, 2024
2 parents 4ea6004 + 0b282c4 commit 1a2cf27
Show file tree
Hide file tree
Showing 12 changed files with 274 additions and 551 deletions.
11 changes: 3 additions & 8 deletions Localization/StringsConvertor/input/Base.lproj/app.json
Original file line number Diff line number Diff line change
Expand Up @@ -474,15 +474,10 @@
"following": "Following",
"local_community": "Local"
},
"navigation_bar_state": {
"timeline_pill": {
"offline": "Offline",
"new_posts": "See new posts",
"published": "Published!",
"Publishing": "Publishing post...",
"accessibility": {
"logo_label": "Mastodon",
"logo_hint": "Tap to scroll to top and tap again to previous location"
}
"new_posts": "New Posts",
"post_sent": "Post Sent"
}
},
"suggestion_account": {
Expand Down
11 changes: 3 additions & 8 deletions Localization/app.json
Original file line number Diff line number Diff line change
Expand Up @@ -474,15 +474,10 @@
"following": "Following",
"local_community": "Local"
},
"navigation_bar_state": {
"timeline_pill": {
"offline": "Offline",
"new_posts": "See new posts",
"published": "Published!",
"Publishing": "Publishing post...",
"accessibility": {
"logo_label": "Mastodon",
"logo_hint": "Tap to scroll to top and tap again to previous location"
}
"new_posts": "New Posts",
"post_sent": "Post Sent"
}
},
"suggestion_account": {
Expand Down
20 changes: 4 additions & 16 deletions Mastodon.xcodeproj/project.pbxproj
Original file line number Diff line number Diff line change
Expand Up @@ -91,8 +91,6 @@
2D7867192625B77500211898 /* NotificationItem.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2D7867182625B77500211898 /* NotificationItem.swift */; };
2D82B9FF25E7863200E36F0F /* OnboardingViewControllerAppearance.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2D82B9FE25E7863200E36F0F /* OnboardingViewControllerAppearance.swift */; };
2D82BA0525E7897700E36F0F /* MastodonResendEmailViewModelNavigationDelegateShim.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2D82BA0425E7897700E36F0F /* MastodonResendEmailViewModelNavigationDelegateShim.swift */; };
2D8434F525FF465D00EECE90 /* HomeTimelineNavigationBarTitleViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2D8434F425FF465D00EECE90 /* HomeTimelineNavigationBarTitleViewModel.swift */; };
2D8434FB25FF46B300EECE90 /* HomeTimelineNavigationBarTitleView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2D8434FA25FF46B300EECE90 /* HomeTimelineNavigationBarTitleView.swift */; };
2D84350525FF858100EECE90 /* UIScrollView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2D84350425FF858100EECE90 /* UIScrollView.swift */; };
2D939AB525EDD8A90076FA61 /* String.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2D939AB425EDD8A90076FA61 /* String.swift */; };
2DAC9E38262FC2320062E1A6 /* SuggestionAccountViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2DAC9E37262FC2320062E1A6 /* SuggestionAccountViewController.swift */; };
Expand Down Expand Up @@ -154,6 +152,7 @@
D8318A882A4468D300C0FB73 /* NotificationSettingsViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = D8318A872A4468D300C0FB73 /* NotificationSettingsViewController.swift */; };
D8318A8A2A4468DC00C0FB73 /* AboutViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = D8318A892A4468DC00C0FB73 /* AboutViewController.swift */; };
D8363B1629469CE200A74079 /* OnboardingNextView.swift in Sources */ = {isa = PBXBuildFile; fileRef = D8363B1529469CE200A74079 /* OnboardingNextView.swift */; };
D84738D42BBD9ABE00ECD52B /* TimelineStatusPill.swift in Sources */ = {isa = PBXBuildFile; fileRef = D84738D32BBD9ABE00ECD52B /* TimelineStatusPill.swift */; };
D84FA0932AE6915800987F47 /* MBProgressHUD in Frameworks */ = {isa = PBXBuildFile; productRef = D84FA0922AE6915800987F47 /* MBProgressHUD */; };
D852C23C2AC5D02C00309232 /* AboutInstanceViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = D852C23B2AC5D02C00309232 /* AboutInstanceViewController.swift */; };
D852C23E2AC5D03300309232 /* InstanceRulesViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = D852C23D2AC5D03300309232 /* InstanceRulesViewController.swift */; };
Expand Down Expand Up @@ -715,8 +714,6 @@
2D7867182625B77500211898 /* NotificationItem.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NotificationItem.swift; sourceTree = "<group>"; };
2D82B9FE25E7863200E36F0F /* OnboardingViewControllerAppearance.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = OnboardingViewControllerAppearance.swift; sourceTree = "<group>"; };
2D82BA0425E7897700E36F0F /* MastodonResendEmailViewModelNavigationDelegateShim.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MastodonResendEmailViewModelNavigationDelegateShim.swift; sourceTree = "<group>"; };
2D8434F425FF465D00EECE90 /* HomeTimelineNavigationBarTitleViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = HomeTimelineNavigationBarTitleViewModel.swift; sourceTree = "<group>"; };
2D8434FA25FF46B300EECE90 /* HomeTimelineNavigationBarTitleView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = HomeTimelineNavigationBarTitleView.swift; sourceTree = "<group>"; };
2D84350425FF858100EECE90 /* UIScrollView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = UIScrollView.swift; sourceTree = "<group>"; };
2D939AB425EDD8A90076FA61 /* String.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = String.swift; sourceTree = "<group>"; };
2DAC9E37262FC2320062E1A6 /* SuggestionAccountViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SuggestionAccountViewController.swift; sourceTree = "<group>"; };
Expand Down Expand Up @@ -779,6 +776,7 @@
D8318A872A4468D300C0FB73 /* NotificationSettingsViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NotificationSettingsViewController.swift; sourceTree = "<group>"; };
D8318A892A4468DC00C0FB73 /* AboutViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AboutViewController.swift; sourceTree = "<group>"; };
D8363B1529469CE200A74079 /* OnboardingNextView.swift */ = {isa = PBXFileReference; indentWidth = 4; lastKnownFileType = sourcecode.swift; path = OnboardingNextView.swift; sourceTree = "<group>"; tabWidth = 4; };
D84738D32BBD9ABE00ECD52B /* TimelineStatusPill.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TimelineStatusPill.swift; sourceTree = "<group>"; };
D84C099D2B0F9E33009E685E /* README.md */ = {isa = PBXFileReference; lastKnownFileType = net.daringfireball.markdown; path = README.md; sourceTree = "<group>"; };
D84C099F2B0F9E41009E685E /* Setup.md */ = {isa = PBXFileReference; lastKnownFileType = net.daringfireball.markdown; path = Setup.md; sourceTree = "<group>"; };
D84C09A02B0F9E41009E685E /* How-it-works.md */ = {isa = PBXFileReference; lastKnownFileType = net.daringfireball.markdown; path = "How-it-works.md"; sourceTree = "<group>"; };
Expand Down Expand Up @@ -1501,13 +1499,13 @@
2D38F1D325CD463600561493 /* HomeTimeline */ = {
isa = PBXGroup;
children = (
DB1F239626117C360057430E /* View */,
2D38F1D425CD465300561493 /* HomeTimelineViewController.swift */,
DB697DD8278F4CED004EF2F7 /* HomeTimelineViewController+DataSourceProvider.swift */,
2D38F1E425CD46C100561493 /* HomeTimelineViewModel.swift */,
2D5A3D2725CF8BC9002347D6 /* HomeTimelineViewModel+Diffable.swift */,
2D38F1EA25CD477000561493 /* HomeTimelineViewModel+LoadLatestState.swift */,
2D38F1F625CD47AC00561493 /* HomeTimelineViewModel+LoadOldestState.swift */,
D84738D32BBD9ABE00ECD52B /* TimelineStatusPill.swift */,
);
path = HomeTimeline;
sourceTree = "<group>";
Expand Down Expand Up @@ -1983,15 +1981,6 @@
path = TableView;
sourceTree = "<group>";
};
DB1F239626117C360057430E /* View */ = {
isa = PBXGroup;
children = (
2D8434F425FF465D00EECE90 /* HomeTimelineNavigationBarTitleViewModel.swift */,
2D8434FA25FF46B300EECE90 /* HomeTimelineNavigationBarTitleView.swift */,
);
path = View;
sourceTree = "<group>";
};
DB3D0FF725BAA68500EAA174 /* Supporting Files */ = {
isa = PBXGroup;
children = (
Expand Down Expand Up @@ -3484,7 +3473,6 @@
DB0617FF27855D6C0030EE79 /* MastodonServerRulesViewModel+Diffable.swift in Sources */,
DBB5255E2611F07A002F1F29 /* ProfileViewModel.swift in Sources */,
DB0FCB982797F6BF006C02E2 /* UserTableViewCell+ViewModel.swift in Sources */,
2D8434FB25FF46B300EECE90 /* HomeTimelineNavigationBarTitleView.swift in Sources */,
DB697DD6278F4C29004EF2F7 /* DataSourceProvider.swift in Sources */,
DB0FCB8E2796C0B7006C02E2 /* TrendCollectionViewCell.swift in Sources */,
0F1E2D0B2615C39400C38565 /* DoubleTitleLabelNavigationBarTitleView.swift in Sources */,
Expand All @@ -3494,7 +3482,6 @@
DB45FAD725CA6C76005A8AC7 /* UIBarButtonItem.swift in Sources */,
D8FAAE432AD047B200DC1832 /* AboutInstanceTableFooterView.swift in Sources */,
D808B94E296EFBBA0031EB1E /* StatusEditHistoryTableViewCell.swift in Sources */,
2D8434F525FF465D00EECE90 /* HomeTimelineNavigationBarTitleViewModel.swift in Sources */,
D852C23E2AC5D03300309232 /* InstanceRulesViewController.swift in Sources */,
DB938F0F2624119800E5B6C1 /* ThreadViewModel+LoadThreadState.swift in Sources */,
DB6180F226391CF40018D199 /* MediaPreviewImageViewModel.swift in Sources */,
Expand Down Expand Up @@ -3763,6 +3750,7 @@
DB6B74FC272FF55800C70B6E /* UserSection.swift in Sources */,
DB0FCB862796BDA1006C02E2 /* SearchSection.swift in Sources */,
DB1D61CF26F1B33600DA8662 /* WelcomeViewModel.swift in Sources */,
D84738D42BBD9ABE00ECD52B /* TimelineStatusPill.swift in Sources */,
D8B5E4F42A4ED0240008970C /* NotificationSettingsViewModel.swift in Sources */,
DBD376B2269302A4007FEC24 /* UITableViewCell.swift in Sources */,
DB4F0966269ED52200D62E92 /* SearchResultViewModel.swift in Sources */,
Expand Down
194 changes: 124 additions & 70 deletions Mastodon/Scene/HomeTimeline/HomeTimelineViewController.swift
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,6 @@ final class HomeTimelineViewController: UIViewController, NeedsDependency, Media
return emptyView
}()

let titleView = HomeTimelineNavigationBarTitleView()

lazy var timelineSelectorButton = {
let button = UIButton(type: .custom)
button.setAttributedTitle(
Expand Down Expand Up @@ -101,6 +99,11 @@ final class HomeTimelineViewController: UIViewController, NeedsDependency, Media
}()

let refreshControl = RefreshControl()
let timelinePill = TimelineStatusPill()
var timelinePillCenterXAnchor: NSLayoutConstraint?
var timelinePillVisibleTopAnchor: NSLayoutConstraint?
var timelinePillHiddenTopAnchor: NSLayoutConstraint?


private func generateTimeSelectorMenu() -> UIMenu {
let showFollowingAction = UIAction(title: L10n.Scene.HomeTimeline.TimelineMenu.following, image: .init(systemName: "house")) { [weak self] _ in
Expand Down Expand Up @@ -170,33 +173,6 @@ extension HomeTimelineViewController {
settingBarButtonItem.action = #selector(HomeTimelineViewController.settingBarButtonItemPressed(_:))

self.navigationItem.leftBarButtonItem = UIBarButtonItem(customView: timelineSelectorButton)

// navigationItem.titleView = titleView
// titleView.delegate = self

viewModel?.homeTimelineNavigationBarTitleViewModel.state
.removeDuplicates()
.receive(on: DispatchQueue.main)
.sink { [weak self] state in
guard let self = self else { return }
self.titleView.configure(state: state)
}
.store(in: &disposeBag)

viewModel?.homeTimelineNavigationBarTitleViewModel.state
.removeDuplicates()
.filter { $0 == .publishedButton }
.receive(on: DispatchQueue.main)
.sink { [weak self] _ in
guard let self = self else { return }
guard UserDefaults.shared.lastVersionPromptedForReview == nil else { return }
guard UserDefaults.shared.processCompletedCount > 3 else { return }
guard let windowScene = self.view.window?.windowScene else { return }
let version = UIApplication.appVersion()
UserDefaults.shared.lastVersionPromptedForReview = version
SKStoreReviewController.requestReview(in: windowScene)
}
.store(in: &disposeBag)

tableView.refreshControl = refreshControl
refreshControl.addTarget(self, action: #selector(HomeTimelineViewController.refreshControlValueChanged(_:)), for: .valueChanged)
Expand Down Expand Up @@ -326,8 +302,68 @@ extension HomeTimelineViewController {
}
.store(in: &disposeBag)

timelinePill.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(timelinePill)

let timelinePillCenterXAnchor = timelinePill.centerXAnchor.constraint(equalTo: view.centerXAnchor)
let timelinePillVisibleTopAnchor = timelinePill.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 8)
let timelinePillHiddenTopAnchor = view.safeAreaLayoutGuide.topAnchor.constraint(equalTo: timelinePill.bottomAnchor, constant: 8)

NSLayoutConstraint.activate([
timelinePillHiddenTopAnchor, timelinePillCenterXAnchor
])

timelinePill.addTarget(self, action: #selector(HomeTimelineViewController.timelinePillTouched(_:)), for: .touchDown)
timelinePill.addTarget(self, action: #selector(HomeTimelineViewController.timelinePillPressedInside(_:)), for: .touchUpInside)
timelinePill.addTarget(self, action: #selector(HomeTimelineViewController.timelinePillTouchedOutside(_:)), for: .touchUpOutside)

self.timelinePillCenterXAnchor = timelinePillCenterXAnchor
self.timelinePillVisibleTopAnchor = timelinePillVisibleTopAnchor
self.timelinePillHiddenTopAnchor = timelinePillHiddenTopAnchor

viewModel?.hasNewPosts
.receive(on: DispatchQueue.main)
.sink(receiveValue: { [weak self] hasNewPosts in
guard let self else { return }

if hasNewPosts {
self.timelinePill.update(with: .newPosts)
self.showTimelinePill()
} else {
self.hideTimelinePill()
}
})
.store(in: &disposeBag)

viewModel?.isOffline
.receive(on: DispatchQueue.main)
.sink(receiveValue: { [weak self] isOffline in
guard let self else { return }

if isOffline {
self.timelinePill.update(with: .offline)
self.showTimelinePill()
} else {
self.hideTimelinePill()
}
})
.store(in: &disposeBag)

context.publisherService.statusPublishResult.prepend(.failure(AppError.badRequest))
.receive(on: DispatchQueue.main)
.sink { [weak self] publishResult in
guard let self else { return }
switch publishResult {
case .success:
self.timelinePill.update(with: .postSent)
self.showTimelinePill()
case .failure:
self.hideTimelinePill()
}
}
.store(in: &disposeBag)
}

override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)

Expand Down Expand Up @@ -477,18 +513,67 @@ extension HomeTimelineViewController {
}
}

@objc private func timelinePillTouched(_ sender: TimelineStatusPill) {
UIView.animate(withDuration: 0.05) {
sender.transform = CGAffineTransform.identity.scaledBy(x: 0.95, y: 0.95)
}
}

@objc private func timelinePillTouchedOutside(_ sender: TimelineStatusPill) {
UIView.animate(withDuration: 0.05) {
sender.transform = CGAffineTransform.identity.scaledBy(x: 100/95.0, y: 100/95.0)
}
}

@objc private func timelinePillPressedInside(_ sender: TimelineStatusPill) {
guard let reason = sender.reason else { return }

UIView.animate(withDuration: 0.05) {
sender.transform = CGAffineTransform.identity.scaledBy(x: 100/95.0, y: 100/95.0)
}

switch reason {
case .newPosts:
scrollToTop(animated: true)
viewModel?.hasNewPosts.value = false
case .postSent:
scrollToTop(animated: true)
hideTimelinePill()
case .offline:
hideTimelinePill()
}
}

private func showTimelinePill() {
guard let timelinePillHiddenTopAnchor, let timelinePillVisibleTopAnchor else { return }

timelinePill.setNeedsLayout()
timelinePill.layoutIfNeeded()
timelinePill.alpha = 0
NSLayoutConstraint.deactivate([timelinePillHiddenTopAnchor])
NSLayoutConstraint.activate([timelinePillVisibleTopAnchor])

UIView.animate(withDuration: 0.5, delay: 0.0, usingSpringWithDamping: 0.75, initialSpringVelocity: 0.9) { [weak self] in
self?.timelinePill.alpha = 1
self?.view.layoutIfNeeded()
}
}

private func hideTimelinePill() {
guard let timelinePillHiddenTopAnchor, let timelinePillVisibleTopAnchor else { return }

NSLayoutConstraint.deactivate([timelinePillVisibleTopAnchor])
NSLayoutConstraint.activate([timelinePillHiddenTopAnchor])
timelinePill.alpha = 1
UIView.animate(withDuration: 0.5, animations: { [weak self] in
self?.timelinePill.alpha = 0
self?.view.layoutIfNeeded()
})
}

}
// MARK: - UIScrollViewDelegate
extension HomeTimelineViewController {
func scrollViewDidScroll(_ scrollView: UIScrollView) {
switch scrollView {
case tableView:
viewModel?.homeTimelineNavigationBarTitleViewModel.handleScrollViewDidScroll(scrollView)
default:
break
}
}

func scrollViewShouldScrollToTop(_ scrollView: UIScrollView) -> Bool {
switch scrollView {
case tableView:
Expand Down Expand Up @@ -644,37 +729,6 @@ extension HomeTimelineViewController: ScrollViewContainer {
// MARK: - StatusTableViewCellDelegate
extension HomeTimelineViewController: StatusTableViewCellDelegate { }

// MARK: - HomeTimelineNavigationBarTitleViewDelegate
extension HomeTimelineViewController: HomeTimelineNavigationBarTitleViewDelegate {
func homeTimelineNavigationBarTitleView(_ titleView: HomeTimelineNavigationBarTitleView, logoButtonDidPressed sender: UIButton) {
if shouldRestoreScrollPosition() {
restorePositionWhenScrollToTop()
} else {
savePositionBeforeScrollToTop()
scrollToTop(animated: true)
}
}

func homeTimelineNavigationBarTitleView(_ titleView: HomeTimelineNavigationBarTitleView, buttonDidPressed sender: UIButton) {
switch titleView.state {
case .newPostButton:
guard let diffableDataSource = viewModel?.diffableDataSource else { return }
let indexPath = IndexPath(row: 0, section: 0)
guard diffableDataSource.itemIdentifier(for: indexPath) != nil else { return }

savePositionBeforeScrollToTop()
tableView.scrollToRow(at: indexPath, at: .top, animated: true)
case .offlineButton:
// TODO: retry
break
case .publishedButton:
break
default:
break
}
}
}

extension HomeTimelineViewController {
override var keyCommands: [UIKeyCommand]? {
return navigationKeyCommands + statusNavigationKeyCommands
Expand Down
Loading

0 comments on commit 1a2cf27

Please sign in to comment.