Switch to using LazyVStack for the Timeline
This commit is contained in:
parent
dbe662b7db
commit
9878ca4b17
|
@ -17,13 +17,6 @@ struct TimelineItemView: View {
|
||||||
var width: CGFloat
|
var width: CGFloat
|
||||||
var timelineItem: TimelineItem
|
var timelineItem: TimelineItem
|
||||||
|
|
||||||
#if os(macOS)
|
|
||||||
var verticalPadding: CGFloat = 10
|
|
||||||
#endif
|
|
||||||
#if os(iOS)
|
|
||||||
var verticalPadding: CGFloat = 0
|
|
||||||
#endif
|
|
||||||
|
|
||||||
var body: some View {
|
var body: some View {
|
||||||
HStack(alignment: .top) {
|
HStack(alignment: .top) {
|
||||||
TimelineItemStatusView(selected: selected, status: timelineItem.status)
|
TimelineItemStatusView(selected: selected, status: timelineItem.status)
|
||||||
|
@ -65,7 +58,8 @@ struct TimelineItemView: View {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.padding(.vertical, verticalPadding)
|
.padding(.vertical, 10)
|
||||||
|
.padding(.horizontal)
|
||||||
.onAppear {
|
.onAppear {
|
||||||
articleIconImageLoader.loadImage(for: timelineItem.article)
|
articleIconImageLoader.loadImage(for: timelineItem.article)
|
||||||
}
|
}
|
||||||
|
|
|
@ -15,6 +15,7 @@ struct TimelineView: View {
|
||||||
|
|
||||||
@EnvironmentObject private var timelineModel: TimelineModel
|
@EnvironmentObject private var timelineModel: TimelineModel
|
||||||
|
|
||||||
|
@State private var navigate = false
|
||||||
@State private var timelineItemFrames = [String: CGRect]()
|
@State private var timelineItemFrames = [String: CGRect]()
|
||||||
|
|
||||||
@ViewBuilder var body: some View {
|
@ViewBuilder var body: some View {
|
||||||
|
@ -40,11 +41,16 @@ struct TimelineView: View {
|
||||||
.buttonStyle(PlainButtonStyle())
|
.buttonStyle(PlainButtonStyle())
|
||||||
.help(isReadFiltered ?? false ? "Show Read Articles" : "Filter Read Articles")
|
.help(isReadFiltered ?? false ? "Show Read Articles" : "Filter Read Articles")
|
||||||
}
|
}
|
||||||
|
ScrollView {
|
||||||
ScrollViewReader { scrollViewProxy in
|
ScrollViewReader { scrollViewProxy in
|
||||||
List(timelineItems.items, selection: $timelineModel.selectedTimelineItemIDs) { timelineItem in
|
LazyVStack {
|
||||||
|
ForEach(timelineItems.items) { timelineItem in
|
||||||
let selected = timelineModel.selectedTimelineItemIDs.contains(timelineItem.article.articleID)
|
let selected = timelineModel.selectedTimelineItemIDs.contains(timelineItem.article.articleID)
|
||||||
TimelineItemView(selected: selected, width: geometryReaderProxy.size.width, timelineItem: timelineItem)
|
TimelineItemView(selected: selected, width: geometryReaderProxy.size.width, timelineItem: timelineItem)
|
||||||
.background(TimelineItemFramePreferenceView(timelineItem: timelineItem))
|
.background(TimelineItemBackgroundView(selected: selected, timelineItem: timelineItem))
|
||||||
|
.onTapGesture {
|
||||||
|
timelineModel.selectedTimelineItemIDs = Set([timelineItem.id])
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.onPreferenceChange(TimelineItemFramePreferenceKey.self) { preferences in
|
.onPreferenceChange(TimelineItemFramePreferenceKey.self) { preferences in
|
||||||
for pref in preferences {
|
for pref in preferences {
|
||||||
|
@ -65,19 +71,25 @@ struct TimelineView: View {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
.navigationTitle(Text(verbatim: timelineModel.nameForDisplay))
|
.navigationTitle(Text(verbatim: timelineModel.nameForDisplay))
|
||||||
#else
|
#else
|
||||||
ScrollViewReader { scrollViewProxy in
|
|
||||||
List(timelineItems.items) { timelineItem in
|
|
||||||
ZStack {
|
ZStack {
|
||||||
|
NavigationLink(destination: ArticleView(), isActive: $navigate) {
|
||||||
|
EmptyView()
|
||||||
|
}
|
||||||
|
ScrollView {
|
||||||
|
ScrollViewReader { scrollViewProxy in
|
||||||
|
LazyVStack {
|
||||||
|
ForEach(timelineItems.items) { timelineItem in
|
||||||
let selected = timelineModel.selectedTimelineItemID == timelineItem.article.articleID
|
let selected = timelineModel.selectedTimelineItemID == timelineItem.article.articleID
|
||||||
TimelineItemView(selected: selected, width: geometryReaderProxy.size.width, timelineItem: timelineItem)
|
TimelineItemView(selected: selected, width: geometryReaderProxy.size.width, timelineItem: timelineItem)
|
||||||
.background(TimelineItemFramePreferenceView(timelineItem: timelineItem))
|
.background(TimelineItemBackgroundView(selected: selected, timelineItem: timelineItem))
|
||||||
NavigationLink(destination: ArticleContainerView(),
|
.onTapGesture {
|
||||||
tag: timelineItem.article.articleID,
|
timelineModel.selectedTimelineItemIDs = Set([timelineItem.id])
|
||||||
selection: $timelineModel.selectedTimelineItemID) {
|
navigate = true
|
||||||
EmptyView()
|
}
|
||||||
}.buttonStyle(PlainButtonStyle())
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.onPreferenceChange(TimelineItemFramePreferenceKey.self) { preferences in
|
.onPreferenceChange(TimelineItemFramePreferenceKey.self) { preferences in
|
||||||
|
@ -96,6 +108,8 @@ struct TimelineView: View {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
.navigationBarTitle(Text(verbatim: timelineModel.nameForDisplay), displayMode: .inline)
|
.navigationBarTitle(Text(verbatim: timelineModel.nameForDisplay), displayMode: .inline)
|
||||||
#endif
|
#endif
|
||||||
}
|
}
|
||||||
|
@ -118,13 +132,16 @@ struct TimelineItemFramePreference: Equatable {
|
||||||
let frame: CGRect
|
let frame: CGRect
|
||||||
}
|
}
|
||||||
|
|
||||||
struct TimelineItemFramePreferenceView: View {
|
struct TimelineItemBackgroundView: View {
|
||||||
|
|
||||||
|
let selected: Bool
|
||||||
let timelineItem: TimelineItem
|
let timelineItem: TimelineItem
|
||||||
|
|
||||||
var body: some View {
|
var body: some View {
|
||||||
GeometryReader { proxy in
|
GeometryReader { proxy in
|
||||||
Rectangle()
|
Rectangle()
|
||||||
.fill(Color.clear)
|
.fill(selected ? Color.accentColor : Color.clear)
|
||||||
|
.cornerRadius(6)
|
||||||
.preference(key: TimelineItemFramePreferenceKey.self,
|
.preference(key: TimelineItemFramePreferenceKey.self,
|
||||||
value: [TimelineItemFramePreference(articleID: timelineItem.article.articleID, frame: proxy.frame(in: .global))])
|
value: [TimelineItemFramePreference(articleID: timelineItem.article.articleID, frame: proxy.frame(in: .global))])
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue