Better unread counter + animation

This commit is contained in:
Thomas Ricouard 2023-12-28 11:54:41 +01:00
parent 5c2148104c
commit d0c2cd4520

View file

@ -3,6 +3,7 @@ import Foundation
import Models import Models
import Observation import Observation
import SwiftUI import SwiftUI
import DesignSystem
@MainActor @MainActor
@Observable class PendingStatusesObserver { @Observable class PendingStatusesObserver {
@ -13,7 +14,9 @@ import SwiftUI
var pendingStatuses: [String] = [] { var pendingStatuses: [String] = [] {
didSet { didSet {
pendingStatusesCount = pendingStatuses.count withAnimation(.default) {
pendingStatusesCount = pendingStatuses.count
}
} }
} }
@ -30,14 +33,18 @@ import SwiftUI
struct PendingStatusesObserverView: View { struct PendingStatusesObserverView: View {
@State var observer: PendingStatusesObserver @State var observer: PendingStatusesObserver
@Environment(UserPreferences.self) private var preferences @Environment(UserPreferences.self) private var preferences
@Environment(Theme.self) private var theme
var body: some View { var body: some View {
if observer.pendingStatusesCount > 0 { if observer.pendingStatusesCount > 0 {
Button { Button {
observer.scrollToIndex?(observer.pendingStatusesCount) observer.scrollToIndex?(observer.pendingStatusesCount)
} label: { } label: {
Text("\(observer.pendingStatusesCount)") Text("\(observer.pendingStatusesCount)")
.contentTransition(.numericText(countsDown: true))
// Accessibility: this results in a frame with a size of at least 44x44 at regular font size // Accessibility: this results in a frame with a size of at least 44x44 at regular font size
.frame(minWidth: 30, minHeight: 30) .frame(minWidth: 16, minHeight: 16)
.font(.footnote)
} }
.accessibilityLabel("accessibility.tabs.timeline.unread-posts.label-\(observer.pendingStatusesCount)") .accessibilityLabel("accessibility.tabs.timeline.unread-posts.label-\(observer.pendingStatusesCount)")
.accessibilityHint("accessibility.tabs.timeline.unread-posts.hint") .accessibilityHint("accessibility.tabs.timeline.unread-posts.hint")
@ -49,7 +56,11 @@ struct PendingStatusesObserverView: View {
.background(.thinMaterial) .background(.thinMaterial)
#endif #endif
.cornerRadius(8) .cornerRadius(8)
.padding(12) .overlay(
RoundedRectangle(cornerRadius: 8)
.stroke(theme.tintColor, lineWidth: 1)
)
.padding(8)
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: preferences.pendingLocation) .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: preferences.pendingLocation)
} }
} }