different home screen layouts
This commit is contained in:
Trey t
@@ -11,6 +11,7 @@ struct EntryListView: View {
|
||||
@AppStorage(UserDefaultsStore.Keys.moodImages.rawValue, store: GroupUserDefaults.groupDefaults) private var imagePack: MoodImages = .FontAwesome
|
||||
@AppStorage(UserDefaultsStore.Keys.moodTint.rawValue, store: GroupUserDefaults.groupDefaults) private var moodTint: MoodTints = .Default
|
||||
@AppStorage(UserDefaultsStore.Keys.textColor.rawValue, store: GroupUserDefaults.groupDefaults) private var textColor: Color = DefaultTextColor.textColor
|
||||
@AppStorage(UserDefaultsStore.Keys.dayViewStyle.rawValue, store: GroupUserDefaults.groupDefaults) private var dayViewStyle: DayViewStyle = .classic
|
||||
@Environment(\.colorScheme) private var colorScheme
|
||||
|
||||
public let entry: MoodEntryModel
|
||||
@@ -24,10 +25,25 @@ struct EntryListView: View {
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
switch dayViewStyle {
|
||||
case .classic:
|
||||
classicStyle
|
||||
case .minimal:
|
||||
minimalStyle
|
||||
case .compact:
|
||||
compactStyle
|
||||
case .bubble:
|
||||
bubbleStyle
|
||||
case .grid:
|
||||
gridStyle
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Classic Style (Original)
|
||||
private var classicStyle: some View {
|
||||
HStack(spacing: 16) {
|
||||
// Large mood icon with gradient background
|
||||
ZStack {
|
||||
// Gradient circle background
|
||||
Circle()
|
||||
.fill(
|
||||
LinearGradient(
|
||||
@@ -40,7 +56,6 @@ struct EntryListView: View {
|
||||
)
|
||||
.frame(width: 56, height: 56)
|
||||
|
||||
// Icon
|
||||
imagePack.icon(forMood: entry.mood)
|
||||
.resizable()
|
||||
.aspectRatio(contentMode: .fit)
|
||||
@@ -49,9 +64,7 @@ struct EntryListView: View {
|
||||
}
|
||||
.shadow(color: isMissing ? .clear : moodColor.opacity(0.4), radius: 8, x: 0, y: 4)
|
||||
|
||||
// Content
|
||||
VStack(alignment: .leading, spacing: 6) {
|
||||
// Date row
|
||||
HStack(spacing: 6) {
|
||||
Text(Random.weekdayName(fromDate: entry.forDate))
|
||||
.font(.system(size: 17, weight: .semibold))
|
||||
@@ -65,7 +78,6 @@ struct EntryListView: View {
|
||||
.foregroundColor(textColor.opacity(0.8))
|
||||
}
|
||||
|
||||
// Mood label with colored badge
|
||||
if isMissing {
|
||||
Text(String(localized: "mood_value_missing_tap_to_add"))
|
||||
.font(.system(size: 14, weight: .medium))
|
||||
@@ -85,7 +97,6 @@ struct EntryListView: View {
|
||||
|
||||
Spacer()
|
||||
|
||||
// Chevron indicator
|
||||
Image(systemName: "chevron.right")
|
||||
.font(.system(size: 14, weight: .semibold))
|
||||
.foregroundColor(textColor.opacity(0.3))
|
||||
@@ -112,6 +123,202 @@ struct EntryListView: View {
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
// MARK: - Minimal Style
|
||||
private var minimalStyle: some View {
|
||||
HStack(spacing: 14) {
|
||||
// Simple flat circle with icon
|
||||
Circle()
|
||||
.fill(isMissing ? Color.gray.opacity(0.15) : moodColor.opacity(0.15))
|
||||
.frame(width: 44, height: 44)
|
||||
.overlay(
|
||||
imagePack.icon(forMood: entry.mood)
|
||||
.resizable()
|
||||
.aspectRatio(contentMode: .fit)
|
||||
.frame(width: 22, height: 22)
|
||||
.foregroundColor(isMissing ? .gray : moodColor)
|
||||
)
|
||||
|
||||
VStack(alignment: .leading, spacing: 3) {
|
||||
Text(entry.forDate, format: .dateTime.weekday(.wide).day())
|
||||
.font(.system(size: 16, weight: .medium))
|
||||
.foregroundColor(textColor)
|
||||
|
||||
if isMissing {
|
||||
Text(String(localized: "mood_value_missing_tap_to_add"))
|
||||
.font(.system(size: 13))
|
||||
.foregroundColor(.gray)
|
||||
} else {
|
||||
Text(entry.moodString)
|
||||
.font(.system(size: 13, weight: .medium))
|
||||
.foregroundColor(moodColor)
|
||||
}
|
||||
}
|
||||
|
||||
Spacer()
|
||||
}
|
||||
.padding(.horizontal, 16)
|
||||
.padding(.vertical, 14)
|
||||
.background(
|
||||
RoundedRectangle(cornerRadius: 12)
|
||||
.fill(colorScheme == .dark ? Color(.systemGray6) : .white)
|
||||
)
|
||||
}
|
||||
|
||||
// MARK: - Compact Style (Timeline)
|
||||
private var compactStyle: some View {
|
||||
HStack(spacing: 12) {
|
||||
// Timeline indicator
|
||||
VStack(spacing: 0) {
|
||||
Circle()
|
||||
.fill(isMissing ? Color.gray.opacity(0.4) : moodColor)
|
||||
.frame(width: 12, height: 12)
|
||||
}
|
||||
|
||||
// Date column
|
||||
VStack(alignment: .leading, spacing: 0) {
|
||||
Text(entry.forDate, format: .dateTime.day())
|
||||
.font(.system(size: 20, weight: .bold, design: .rounded))
|
||||
.foregroundColor(textColor)
|
||||
Text(entry.forDate, format: .dateTime.weekday(.abbreviated))
|
||||
.font(.system(size: 11, weight: .medium))
|
||||
.foregroundColor(textColor.opacity(0.5))
|
||||
.textCase(.uppercase)
|
||||
}
|
||||
.frame(width: 36)
|
||||
|
||||
// Mood indicator bar
|
||||
if isMissing {
|
||||
RoundedRectangle(cornerRadius: 6)
|
||||
.fill(Color.gray.opacity(0.15))
|
||||
.frame(height: 32)
|
||||
.overlay(
|
||||
Text(String(localized: "mood_value_missing_tap_to_add"))
|
||||
.font(.system(size: 12, weight: .medium))
|
||||
.foregroundColor(.gray)
|
||||
)
|
||||
} else {
|
||||
RoundedRectangle(cornerRadius: 6)
|
||||
.fill(moodColor.opacity(0.2))
|
||||
.frame(height: 32)
|
||||
.overlay(
|
||||
HStack(spacing: 6) {
|
||||
imagePack.icon(forMood: entry.mood)
|
||||
.resizable()
|
||||
.aspectRatio(contentMode: .fit)
|
||||
.frame(width: 16, height: 16)
|
||||
.foregroundColor(moodColor)
|
||||
|
||||
Text(entry.moodString)
|
||||
.font(.system(size: 13, weight: .semibold))
|
||||
.foregroundColor(moodColor)
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
Spacer(minLength: 0)
|
||||
}
|
||||
.padding(.horizontal, 12)
|
||||
.padding(.vertical, 10)
|
||||
}
|
||||
|
||||
// MARK: - Bubble Style
|
||||
private var bubbleStyle: some View {
|
||||
HStack(spacing: 0) {
|
||||
// Full-width colored background
|
||||
HStack(spacing: 14) {
|
||||
// Icon
|
||||
imagePack.icon(forMood: entry.mood)
|
||||
.resizable()
|
||||
.aspectRatio(contentMode: .fit)
|
||||
.frame(width: 28, height: 28)
|
||||
.foregroundColor(isMissing ? .gray : .white)
|
||||
|
||||
VStack(alignment: .leading, spacing: 2) {
|
||||
Text(entry.forDate, format: .dateTime.weekday(.wide).day())
|
||||
.font(.system(size: 15, weight: .semibold))
|
||||
.foregroundColor(isMissing ? textColor : .white)
|
||||
|
||||
if isMissing {
|
||||
Text(String(localized: "mood_value_missing_tap_to_add"))
|
||||
.font(.system(size: 13))
|
||||
.foregroundColor(.gray)
|
||||
} else {
|
||||
Text(entry.moodString)
|
||||
.font(.system(size: 13, weight: .medium))
|
||||
.foregroundColor(.white.opacity(0.85))
|
||||
}
|
||||
}
|
||||
|
||||
Spacer()
|
||||
|
||||
Image(systemName: "chevron.right")
|
||||
.font(.system(size: 12, weight: .semibold))
|
||||
.foregroundColor(isMissing ? textColor.opacity(0.3) : .white.opacity(0.6))
|
||||
}
|
||||
.padding(.horizontal, 18)
|
||||
.padding(.vertical, 14)
|
||||
.background(
|
||||
RoundedRectangle(cornerRadius: 16)
|
||||
.fill(
|
||||
isMissing
|
||||
? (colorScheme == .dark ? Color(.systemGray5) : Color(.systemGray6))
|
||||
: moodColor
|
||||
)
|
||||
)
|
||||
.shadow(
|
||||
color: isMissing ? .clear : moodColor.opacity(0.35),
|
||||
radius: 8,
|
||||
x: 0,
|
||||
y: 4
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Grid Style (3 per row)
|
||||
private var gridStyle: some View {
|
||||
VStack(spacing: 6) {
|
||||
// Mood icon circle
|
||||
ZStack {
|
||||
Circle()
|
||||
.fill(
|
||||
isMissing
|
||||
? Color.gray.opacity(0.2)
|
||||
: moodColor
|
||||
)
|
||||
.aspectRatio(1, contentMode: .fit)
|
||||
|
||||
imagePack.icon(forMood: entry.mood)
|
||||
.resizable()
|
||||
.aspectRatio(contentMode: .fit)
|
||||
.padding(16)
|
||||
.foregroundColor(isMissing ? .gray : .white)
|
||||
}
|
||||
.shadow(
|
||||
color: isMissing ? .clear : moodColor.opacity(0.3),
|
||||
radius: 6,
|
||||
x: 0,
|
||||
y: 3
|
||||
)
|
||||
|
||||
// Day number
|
||||
Text(entry.forDate, format: .dateTime.day())
|
||||
.font(.system(size: 16, weight: .bold, design: .rounded))
|
||||
.foregroundColor(textColor)
|
||||
|
||||
// Weekday abbreviation
|
||||
Text(entry.forDate, format: .dateTime.weekday(.abbreviated))
|
||||
.font(.system(size: 11, weight: .medium))
|
||||
.foregroundColor(textColor.opacity(0.5))
|
||||
.textCase(.uppercase)
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
.padding(.vertical, 12)
|
||||
.background(
|
||||
RoundedRectangle(cornerRadius: 14)
|
||||
.fill(colorScheme == .dark ? Color(.systemGray6) : .white)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
struct EntryListView_Previews: PreviewProvider {
|
||||
|
||||
Reference in New Issue
Block a user