add circular type to main view top small roll up header thingy

This commit is contained in:
Trey t
2022-02-06 14:25:11 -06:00
parent 3c6adce544
commit 9ed803d9cf
2 changed files with 48 additions and 14 deletions

View File

@@ -7,14 +7,21 @@
import SwiftUI
enum SmallRollUpHeaderViewType {
case text
case circular
}
struct SmallRollUpHeaderView: View {
var entries = [(Mood, Int)]()
let backDays: Int
let type: SmallRollUpHeaderViewType
init(fakeData: Bool, backDays: Int) {
init(fakeData: Bool, backDays: Int, type: SmallRollUpHeaderViewType) {
self.type = type
self.backDays = backDays
var moodEntries: [MoodEntry]?
if fakeData {
moodEntries = PersistenceController.shared.randomEntries(count: 10)
} else {
@@ -36,29 +43,56 @@ struct SmallRollUpHeaderView: View {
})
}
private var textViews: some View {
HStack {
ForEach(entries, id: \.0) { (mood, value) in
Text(String(value))
.font(.title)
.fontWeight(.bold)
.foregroundColor(mood.color)
.frame(maxWidth: .infinity)
}
}
}
private var circularViews: some View {
HStack {
ForEach(entries, id: \.0) { (mood, value) in
Text(String(value))
.font(.title)
.fontWeight(.bold)
.frame(maxWidth: .infinity)
.padding()
.background(Circle().fill(mood.color))
.foregroundColor(Color(UIColor.white))
}
}
}
var body: some View {
VStack {
HStack {
ForEach(entries, id: \.0) { (mood, value) in
Text(String(value))
.font(.title)
.fontWeight(.bold)
.foregroundColor(mood.color)
.frame(maxWidth: .infinity)
}
switch self.type {
case .text:
textViews
.padding([.trailing, .leading, .top])
case .circular:
circularViews
.padding([.trailing, .leading, .top])
}
Text(String(format: String(localized: "content_view_header_title"), self.backDays))
.font(.body)
.foregroundColor(Color(UIColor.systemGray))
.frame(maxWidth: .infinity, alignment: .center)
.padding(.top, 2)
.padding(.top, 1)
}
}
}
struct SmallHeaderView_Previews: PreviewProvider {
static var previews: some View {
SmallRollUpHeaderView(fakeData: true, backDays: 30)
SmallRollUpHeaderView(fakeData: true, backDays: 30, type: .text)
SmallRollUpHeaderView(fakeData: true, backDays: 30, type: .circular)
}
}