Fix widget layout clipping and add comprehensive widget previews
- Fix LargeVotingView mood icons getting clipped at edges by using flexible HStack spacing with maxWidth: .infinity - Fix VotingView medium layout with smaller icons and even distribution - Add comprehensive #Preview macros for all widget states: - Vote widget: small/medium, voted/not voted, all mood states - Timeline widget: small/medium/large with various data states - Reduce icon sizes and padding to fit within widget bounds - Update accessibility labels and hints across views 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -216,13 +216,13 @@ struct MonthCard: View {
|
||||
VStack(spacing: 0) {
|
||||
// Header with month/year
|
||||
Text("\(Random.monthName(fromMonthInt: month).uppercased()) \(String(year))")
|
||||
.font(.system(size: 32, weight: .heavy, design: .rounded))
|
||||
.font(.title.weight(.heavy))
|
||||
.foregroundColor(textColor)
|
||||
.padding(.top, 40)
|
||||
.padding(.bottom, 8)
|
||||
|
||||
Text("Monthly Mood Wrap")
|
||||
.font(.system(size: 16, weight: .medium, design: .rounded))
|
||||
.font(.body.weight(.medium))
|
||||
.foregroundColor(textColor.opacity(0.6))
|
||||
.padding(.bottom, 30)
|
||||
|
||||
@@ -238,15 +238,16 @@ struct MonthCard: View {
|
||||
.aspectRatio(contentMode: .fit)
|
||||
.foregroundColor(.white)
|
||||
.padding(24)
|
||||
.accessibilityLabel(topMood.strValue)
|
||||
)
|
||||
.shadow(color: moodTint.color(forMood: topMood).opacity(0.5), radius: 20, x: 0, y: 10)
|
||||
|
||||
Text("Top Mood")
|
||||
.font(.system(size: 14, weight: .medium, design: .rounded))
|
||||
.font(.subheadline.weight(.medium))
|
||||
.foregroundColor(textColor.opacity(0.5))
|
||||
|
||||
Text(topMood.strValue.uppercased())
|
||||
.font(.system(size: 20, weight: .bold, design: .rounded))
|
||||
.font(.title3.weight(.bold))
|
||||
.foregroundColor(moodTint.color(forMood: topMood))
|
||||
}
|
||||
.padding(.bottom, 30)
|
||||
@@ -256,10 +257,10 @@ struct MonthCard: View {
|
||||
HStack(spacing: 0) {
|
||||
VStack(spacing: 4) {
|
||||
Text("\(totalTrackedDays)")
|
||||
.font(.system(size: 36, weight: .bold, design: .rounded))
|
||||
.font(.largeTitle.weight(.bold))
|
||||
.foregroundColor(textColor)
|
||||
Text("Days Tracked")
|
||||
.font(.system(size: 12, weight: .medium, design: .rounded))
|
||||
.font(.caption.weight(.medium))
|
||||
.foregroundColor(textColor.opacity(0.5))
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
@@ -279,6 +280,7 @@ struct MonthCard: View {
|
||||
.aspectRatio(contentMode: .fit)
|
||||
.foregroundColor(.white)
|
||||
.padding(7)
|
||||
.accessibilityLabel(metric.mood.strValue)
|
||||
)
|
||||
|
||||
GeometryReader { geo in
|
||||
@@ -294,7 +296,7 @@ struct MonthCard: View {
|
||||
.frame(height: 12)
|
||||
|
||||
Text("\(Int(metric.percent))%")
|
||||
.font(.system(size: 14, weight: .semibold, design: .rounded))
|
||||
.font(.subheadline.weight(.semibold))
|
||||
.foregroundColor(textColor)
|
||||
.frame(width: 40, alignment: .trailing)
|
||||
}
|
||||
@@ -305,7 +307,7 @@ struct MonthCard: View {
|
||||
|
||||
// App branding
|
||||
Text("ifeel")
|
||||
.font(.system(size: 14, weight: .medium, design: .rounded))
|
||||
.font(.subheadline.weight(.medium))
|
||||
.foregroundColor(textColor.opacity(0.3))
|
||||
.padding(.bottom, 20)
|
||||
}
|
||||
@@ -317,7 +319,13 @@ struct MonthCard: View {
|
||||
VStack(spacing: 0) {
|
||||
// Month Header
|
||||
HStack {
|
||||
Button(action: { withAnimation(.easeInOut(duration: 0.2)) { showStats.toggle() } }) {
|
||||
Button(action: {
|
||||
if UIAccessibility.isReduceMotionEnabled {
|
||||
showStats.toggle()
|
||||
} else {
|
||||
withAnimation(.easeInOut(duration: 0.2)) { showStats.toggle() }
|
||||
}
|
||||
}) {
|
||||
HStack {
|
||||
Text("\(Random.monthName(fromMonthInt: month)) \(String(year))")
|
||||
.font(.title3.bold())
|
||||
@@ -453,6 +461,7 @@ struct MoodBarChart: View {
|
||||
.aspectRatio(contentMode: .fit)
|
||||
.frame(width: 18, height: 18)
|
||||
.foregroundColor(moodTint.color(forMood: metric.mood))
|
||||
.accessibilityLabel(metric.mood.strValue)
|
||||
|
||||
// Bar
|
||||
GeometryReader { geo in
|
||||
@@ -491,7 +500,7 @@ extension MonthView {
|
||||
}, label: {
|
||||
Image(systemName: "gear")
|
||||
.foregroundColor(Color(UIColor.darkGray))
|
||||
.font(.system(size: 20))
|
||||
.font(.title3)
|
||||
}).sheet(isPresented: $showingSheet) {
|
||||
SettingsView()
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user