top view will shrink and fade into another view

This commit is contained in:
Trey t
2022-01-28 15:18:00 -06:00
parent 3ece2c27a1
commit cffce6a773
6 changed files with 186 additions and 54 deletions

View File

@@ -17,9 +17,14 @@ struct ContentView: View {
@State private var showTodayInput = true
@State private var selectedEntry: MoodEntry?
@State private var showUpdateEntryAlert = false
@State private var headerHeight: CGFloat = 150
let minHeaderHeight = 88.0
let maxHeaderHeight = 150.0
@State private var headerOpacity: Double = 1.0
@ObservedObject var viewModel = ContentModeViewModel()
init(){
UITabBar.appearance().backgroundColor = UIColor.systemBackground
}
@@ -106,50 +111,86 @@ struct ContentView: View {
return formatter.string(from: NSNumber(integerLiteral: day)) ?? ""
}
func calcuateViewAlpha() {
let perc = (((Double(headerHeight) - minHeaderHeight) * 100) / (maxHeaderHeight - minHeaderHeight)) / 100
headerOpacity = perc
}
func calculateHeight(minHeight: CGFloat, maxHeight: CGFloat, yOffset: CGFloat) {
calcuateViewAlpha()
let newValue = maxHeight + yOffset
// If scrolling up, yOffset will be a negative number
if newValue < minHeight {
// SCROLLING UP
// Never go smaller than our minimum height
headerHeight = minHeight
return
}
if newValue > maxHeight {
// SCROLLING UP
// Never go smaller than our minimum height
headerHeight = maxHeight
return
}
// SCROLLING DOWN
headerHeight = newValue
}
private var listView: some View {
VStack {
List {
// for reach year
ForEach(viewModel.grouped.sorted(by: {
$0.key > $1.key
}), id: \.key) { year, months in
// for reach month
ForEach(months.sorted(by: {
ScrollView {
ZStack {
Color(.systemBackground).edgesIgnoringSafeArea(.bottom)
.cornerRadius(10)
LazyVStack {
// for reach year
ForEach(viewModel.grouped.sorted(by: {
$0.key > $1.key
}), id: \.key) { month, entries in
Section(header:
HStack{
Text(monthName(fromMonthInt: month))
.font(.title2)
.foregroundColor(Color(UIColor.label))
Text(String(year))
.font(.title2)
.foregroundColor(Color(UIColor.label))
}) {
// for reach all entries
ForEach(entries.sorted(by: {
return $0.forDate! > $1.forDate!
}), id: \.self) { entry in
entryListView(entry: entry)
.onTapGesture(perform: {
selectedEntry = entry
showUpdateEntryAlert = true
})
}.onDelete(perform: { offsets in
withAnimation {
viewModel.delete(offsets: offsets, inMonth: month, inYear: year)
}
})
}), id: \.key) { year, months in
// for reach month
ForEach(months.sorted(by: {
$0.key > $1.key
}), id: \.key) { month, entries in
Section(header:
HStack{
Text(monthName(fromMonthInt: month))
.font(.title2)
.foregroundColor(Color(UIColor.label))
Text(String(year))
.font(.title2)
.foregroundColor(Color(UIColor.label))
}) {
// for reach all entries
ForEach(entries.sorted(by: {
return $0.forDate! > $1.forDate!
}), id: \.self) { entry in
entryListView(entry: entry)
.onTapGesture(perform: {
selectedEntry = entry
showUpdateEntryAlert = true
})
}.onDelete(perform: { offsets in
withAnimation {
viewModel.delete(offsets: offsets, inMonth: month, inYear: year)
}
})
}
}
}
}
GeometryReader { proxy in
let offset = proxy.frame(in: .named("scroll")).minY
Color.clear.preference(key: ViewOffsetKey.self, value: offset)
}
}
.background(Color.clear.ignoresSafeArea())
.onAppear {
// Set the default to clear
UITableView.appearance().backgroundColor = .clear
}
}
.coordinateSpace(name: "scroll")
.onPreferenceChange(ViewOffsetKey.self) { value in
calculateHeight(minHeight: 88, maxHeight: 180, yOffset: value)
}
}
@@ -191,12 +232,13 @@ struct ContentView: View {
viewModel.add(mood: mood, forDate: date)
}
})
.frame(height: 180)
.frame(height: headerHeight)
.frame(minWidth: 0, maxWidth: .infinity)
} else {
HeaderStatsView(fakeData: false, backDays: 30)
.frame(height: 180)
// should match backDays above
.frame(height: headerHeight)
// should match backDays above
Text(String(format: String(localized: "content_view_header_title"), 30))
.font(.body)
.foregroundColor(Color(UIColor.systemGray))
@@ -233,26 +275,50 @@ struct ContentView: View {
private var mainView: some View {
ZStack {
BGView().equatable()
VStack{
settingsButtonView
.padding(.top, 50)
if viewModel.hasNoData {
Spacer()
emptyView
Spacer()
} else {
headerView
listView
ZStack {
VStack {
headerView
Spacer()
}
.opacity(headerOpacity)
VStack {
SmallRollUpHeaderView(fakeData: false, backDays: 30)
.padding([.leading, .trailing])
Spacer()
}
.opacity(1 - headerOpacity)
listView
.padding([.leading, .trailing])
.padding(.top, headerHeight+10)
.padding(.bottom, 60)
}
}
}
.padding(.bottom)
}
}
}
struct ViewOffsetKey: PreferenceKey {
typealias Value = CGFloat
static var defaultValue = CGFloat.zero
static func reduce(value: inout Value, nextValue: () -> Value) {
value += nextValue()
}
}
private let itemFormatter: DateFormatter = {
let formatter = DateFormatter()
formatter.dateStyle = .short