top view will shrink and fade into another view
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user