Add Aura voting layout and 12 new day view styles
New voting layout style with atmospheric glowing orb design. New day view styles: Aura, Chronicle, Neon, Ink, Prism, Tape, Morph, Stack, Wave, Pattern, Leather, and Glass. Updated style pickers to use horizontal ScrollView for better navigation. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -57,6 +57,8 @@ struct AddMoodHeaderView: View {
|
||||
RadialVotingView(moodTint: moodTint, onMoodSelected: addItem)
|
||||
case .stacked:
|
||||
StackedVotingView(moodTint: moodTint, onMoodSelected: addItem)
|
||||
case .aura:
|
||||
AuraVotingView(moodTint: moodTint, onMoodSelected: addItem)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -231,6 +233,106 @@ struct StackedVotingView: View {
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Layout 5: Aura (Atmospheric glowing orbs)
|
||||
struct AuraVotingView: View {
|
||||
let moodTint: MoodTints
|
||||
let onMoodSelected: (Mood) -> Void
|
||||
@Environment(\.colorScheme) private var colorScheme
|
||||
|
||||
var body: some View {
|
||||
VStack(spacing: 24) {
|
||||
// Top row: 3 moods (Horrible, Bad, Average)
|
||||
HStack(spacing: 16) {
|
||||
ForEach(Array(Mood.allValues.prefix(3))) { mood in
|
||||
auraButton(for: mood)
|
||||
}
|
||||
}
|
||||
|
||||
// Bottom row: 2 moods (Good, Great) - centered
|
||||
HStack(spacing: 24) {
|
||||
ForEach(Array(Mood.allValues.suffix(2))) { mood in
|
||||
auraButton(for: mood)
|
||||
}
|
||||
}
|
||||
}
|
||||
.padding(.vertical, 8)
|
||||
}
|
||||
|
||||
private func auraButton(for mood: Mood) -> some View {
|
||||
let color = moodTint.color(forMood: mood)
|
||||
|
||||
return Button(action: { onMoodSelected(mood) }) {
|
||||
VStack(spacing: 10) {
|
||||
// Glowing orb
|
||||
ZStack {
|
||||
// Outer atmospheric glow
|
||||
Circle()
|
||||
.fill(
|
||||
RadialGradient(
|
||||
colors: [
|
||||
color.opacity(0.5),
|
||||
color.opacity(0.2),
|
||||
Color.clear
|
||||
],
|
||||
center: .center,
|
||||
startRadius: 0,
|
||||
endRadius: 45
|
||||
)
|
||||
)
|
||||
.frame(width: 90, height: 90)
|
||||
|
||||
// Middle glow ring
|
||||
Circle()
|
||||
.fill(
|
||||
RadialGradient(
|
||||
colors: [
|
||||
color.opacity(0.8),
|
||||
color.opacity(0.4)
|
||||
],
|
||||
center: .center,
|
||||
startRadius: 10,
|
||||
endRadius: 30
|
||||
)
|
||||
)
|
||||
.frame(width: 60, height: 60)
|
||||
|
||||
// Inner solid core
|
||||
Circle()
|
||||
.fill(color)
|
||||
.frame(width: 48, height: 48)
|
||||
.shadow(color: color.opacity(0.8), radius: 12, x: 0, y: 0)
|
||||
|
||||
// Icon
|
||||
mood.icon
|
||||
.resizable()
|
||||
.aspectRatio(contentMode: .fit)
|
||||
.frame(width: 26, height: 26)
|
||||
.foregroundColor(.white)
|
||||
}
|
||||
|
||||
// Label with elegant typography
|
||||
Text(mood.strValue)
|
||||
.font(.system(size: 12, weight: .semibold, design: .rounded))
|
||||
.foregroundColor(color)
|
||||
.tracking(0.5)
|
||||
}
|
||||
}
|
||||
.buttonStyle(AuraButtonStyle(color: color))
|
||||
}
|
||||
}
|
||||
|
||||
// Custom button style for aura with glow effect on press
|
||||
struct AuraButtonStyle: ButtonStyle {
|
||||
let color: Color
|
||||
|
||||
func makeBody(configuration: Configuration) -> some View {
|
||||
configuration.label
|
||||
.scaleEffect(configuration.isPressed ? 0.92 : 1.0)
|
||||
.brightness(configuration.isPressed ? 0.1 : 0)
|
||||
.animation(.easeInOut(duration: 0.15), value: configuration.isPressed)
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Button Styles
|
||||
struct MoodButtonStyle: ButtonStyle {
|
||||
func makeBody(configuration: Configuration) -> some View {
|
||||
|
||||
Reference in New Issue
Block a user