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:
Trey t
@@ -476,34 +476,37 @@ struct VotingLayoutPickerCompact: View {
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
HStack(spacing: 10) {
|
||||
ForEach(VotingLayoutStyle.allCases, id: \.rawValue) { layout in
|
||||
Button(action: {
|
||||
withAnimation(.easeInOut(duration: 0.2)) {
|
||||
votingLayoutStyle = layout.rawValue
|
||||
}
|
||||
EventLogger.log(event: "change_voting_layout", withData: ["layout": layout.displayName])
|
||||
}) {
|
||||
VStack(spacing: 6) {
|
||||
layoutIcon(for: layout)
|
||||
.frame(width: 44, height: 44)
|
||||
.foregroundColor(currentLayout == layout ? .accentColor : textColor.opacity(0.4))
|
||||
ScrollView(.horizontal, showsIndicators: false) {
|
||||
HStack(spacing: 10) {
|
||||
ForEach(VotingLayoutStyle.allCases, id: \.rawValue) { layout in
|
||||
Button(action: {
|
||||
withAnimation(.easeInOut(duration: 0.2)) {
|
||||
votingLayoutStyle = layout.rawValue
|
||||
}
|
||||
EventLogger.log(event: "change_voting_layout", withData: ["layout": layout.displayName])
|
||||
}) {
|
||||
VStack(spacing: 6) {
|
||||
layoutIcon(for: layout)
|
||||
.frame(width: 44, height: 44)
|
||||
.foregroundColor(currentLayout == layout ? .accentColor : textColor.opacity(0.4))
|
||||
|
||||
Text(layout.displayName)
|
||||
.font(.system(size: 11, weight: .medium))
|
||||
.foregroundColor(currentLayout == layout ? .accentColor : textColor.opacity(0.5))
|
||||
Text(layout.displayName)
|
||||
.font(.system(size: 11, weight: .medium))
|
||||
.foregroundColor(currentLayout == layout ? .accentColor : textColor.opacity(0.5))
|
||||
}
|
||||
.frame(width: 70)
|
||||
.padding(.vertical, 12)
|
||||
.background(
|
||||
RoundedRectangle(cornerRadius: 12)
|
||||
.fill(currentLayout == layout
|
||||
? Color.accentColor.opacity(0.1)
|
||||
: (colorScheme == .dark ? Color(.systemGray5) : Color(.systemGray6)))
|
||||
)
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
.padding(.vertical, 12)
|
||||
.background(
|
||||
RoundedRectangle(cornerRadius: 12)
|
||||
.fill(currentLayout == layout
|
||||
? Color.accentColor.opacity(0.1)
|
||||
: (colorScheme == .dark ? Color(.systemGray5) : Color(.systemGray6)))
|
||||
)
|
||||
.buttonStyle(.plain)
|
||||
}
|
||||
.buttonStyle(.plain)
|
||||
}
|
||||
.padding(.horizontal, 4)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -530,6 +533,34 @@ struct VotingLayoutPickerCompact: View {
|
||||
VStack(spacing: 4) {
|
||||
ForEach(0..<4, id: \.self) { _ in RoundedRectangle(cornerRadius: 2).frame(width: 32, height: 7) }
|
||||
}
|
||||
case .aura:
|
||||
// Glowing orbs in 2 rows
|
||||
VStack(spacing: 4) {
|
||||
HStack(spacing: 6) {
|
||||
ForEach(0..<3, id: \.self) { _ in
|
||||
ZStack {
|
||||
Circle()
|
||||
.fill(RadialGradient(colors: [.green.opacity(0.5), .clear], center: .center, startRadius: 0, endRadius: 8))
|
||||
.frame(width: 14, height: 14)
|
||||
Circle()
|
||||
.fill(.green)
|
||||
.frame(width: 8, height: 8)
|
||||
}
|
||||
}
|
||||
}
|
||||
HStack(spacing: 10) {
|
||||
ForEach(0..<2, id: \.self) { _ in
|
||||
ZStack {
|
||||
Circle()
|
||||
.fill(RadialGradient(colors: [.green.opacity(0.5), .clear], center: .center, startRadius: 0, endRadius: 8))
|
||||
.frame(width: 14, height: 14)
|
||||
Circle()
|
||||
.fill(.green)
|
||||
.frame(width: 8, height: 8)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -830,36 +861,39 @@ struct DayViewStylePickerCompact: View {
|
||||
@Environment(\.colorScheme) private var colorScheme
|
||||
|
||||
var body: some View {
|
||||
HStack(spacing: 10) {
|
||||
ForEach(DayViewStyle.allCases, id: \.rawValue) { style in
|
||||
Button(action: {
|
||||
withAnimation(.easeInOut(duration: 0.2)) {
|
||||
dayViewStyle = style
|
||||
}
|
||||
let impactMed = UIImpactFeedbackGenerator(style: .medium)
|
||||
impactMed.impactOccurred()
|
||||
EventLogger.log(event: "change_day_view_style", withData: ["style": style.displayName])
|
||||
}) {
|
||||
VStack(spacing: 6) {
|
||||
styleIcon(for: style)
|
||||
.frame(width: 44, height: 44)
|
||||
.foregroundColor(dayViewStyle == style ? .accentColor : textColor.opacity(0.4))
|
||||
ScrollView(.horizontal, showsIndicators: false) {
|
||||
HStack(spacing: 10) {
|
||||
ForEach(DayViewStyle.allCases, id: \.rawValue) { style in
|
||||
Button(action: {
|
||||
withAnimation(.easeInOut(duration: 0.2)) {
|
||||
dayViewStyle = style
|
||||
}
|
||||
let impactMed = UIImpactFeedbackGenerator(style: .medium)
|
||||
impactMed.impactOccurred()
|
||||
EventLogger.log(event: "change_day_view_style", withData: ["style": style.displayName])
|
||||
}) {
|
||||
VStack(spacing: 6) {
|
||||
styleIcon(for: style)
|
||||
.frame(width: 44, height: 44)
|
||||
.foregroundColor(dayViewStyle == style ? .accentColor : textColor.opacity(0.4))
|
||||
|
||||
Text(style.displayName)
|
||||
.font(.system(size: 11, weight: .medium))
|
||||
.foregroundColor(dayViewStyle == style ? .accentColor : textColor.opacity(0.5))
|
||||
Text(style.displayName)
|
||||
.font(.system(size: 11, weight: .medium))
|
||||
.foregroundColor(dayViewStyle == style ? .accentColor : textColor.opacity(0.5))
|
||||
}
|
||||
.frame(width: 70)
|
||||
.padding(.vertical, 12)
|
||||
.background(
|
||||
RoundedRectangle(cornerRadius: 12)
|
||||
.fill(dayViewStyle == style
|
||||
? Color.accentColor.opacity(0.1)
|
||||
: (colorScheme == .dark ? Color(.systemGray5) : Color(.systemGray6)))
|
||||
)
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
.padding(.vertical, 12)
|
||||
.background(
|
||||
RoundedRectangle(cornerRadius: 12)
|
||||
.fill(dayViewStyle == style
|
||||
? Color.accentColor.opacity(0.1)
|
||||
: (colorScheme == .dark ? Color(.systemGray5) : Color(.systemGray6)))
|
||||
)
|
||||
.buttonStyle(.plain)
|
||||
}
|
||||
.buttonStyle(.plain)
|
||||
}
|
||||
.padding(.horizontal, 4)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -919,6 +953,201 @@ struct DayViewStylePickerCompact: View {
|
||||
Circle().fill(.green).frame(width: 10, height: 10)
|
||||
Circle().fill(.yellow).frame(width: 10, height: 10)
|
||||
}
|
||||
case .aura:
|
||||
// Giant number with glowing orb
|
||||
HStack(spacing: 4) {
|
||||
Text("17")
|
||||
.font(.system(size: 20, weight: .black, design: .rounded))
|
||||
.foregroundStyle(
|
||||
LinearGradient(colors: [.green, .green.opacity(0.5)], startPoint: .top, endPoint: .bottom)
|
||||
)
|
||||
ZStack {
|
||||
Circle()
|
||||
.fill(
|
||||
RadialGradient(colors: [.green.opacity(0.6), .clear], center: .center, startRadius: 0, endRadius: 12)
|
||||
)
|
||||
.frame(width: 24, height: 24)
|
||||
Circle()
|
||||
.fill(.green)
|
||||
.frame(width: 12, height: 12)
|
||||
}
|
||||
}
|
||||
case .chronicle:
|
||||
// Editorial magazine style
|
||||
VStack(alignment: .leading, spacing: 2) {
|
||||
Rectangle().frame(width: 34, height: 2)
|
||||
HStack(spacing: 4) {
|
||||
Text("12")
|
||||
.font(.system(size: 18, weight: .regular, design: .serif))
|
||||
Rectangle().frame(width: 1, height: 20)
|
||||
VStack(alignment: .leading, spacing: 1) {
|
||||
RoundedRectangle(cornerRadius: 1).frame(width: 12, height: 3)
|
||||
RoundedRectangle(cornerRadius: 1).frame(width: 8, height: 2).opacity(0.5)
|
||||
}
|
||||
}
|
||||
}
|
||||
case .neon:
|
||||
// Cyberpunk neon style
|
||||
ZStack {
|
||||
RoundedRectangle(cornerRadius: 2)
|
||||
.fill(Color.black)
|
||||
.frame(width: 38, height: 28)
|
||||
RoundedRectangle(cornerRadius: 4)
|
||||
.stroke(Color.green, lineWidth: 1)
|
||||
.frame(width: 16, height: 16)
|
||||
.shadow(color: .green, radius: 4, x: 0, y: 0)
|
||||
RoundedRectangle(cornerRadius: 2)
|
||||
.stroke(Color.green.opacity(0.5), lineWidth: 0.5)
|
||||
.frame(width: 38, height: 28)
|
||||
}
|
||||
case .ink:
|
||||
// Japanese zen style
|
||||
HStack(spacing: 6) {
|
||||
ZStack {
|
||||
Circle()
|
||||
.trim(from: 0, to: 0.85)
|
||||
.stroke(style: StrokeStyle(lineWidth: 2, lineCap: .round))
|
||||
.frame(width: 18, height: 18)
|
||||
.rotationEffect(.degrees(20))
|
||||
}
|
||||
VStack(alignment: .leading, spacing: 2) {
|
||||
RoundedRectangle(cornerRadius: 1).frame(width: 14, height: 2).opacity(0.3)
|
||||
RoundedRectangle(cornerRadius: 1).frame(width: 10, height: 2).opacity(0.6)
|
||||
}
|
||||
}
|
||||
case .prism:
|
||||
// Glassmorphism with rainbow edge
|
||||
ZStack {
|
||||
RoundedRectangle(cornerRadius: 6)
|
||||
.fill(
|
||||
AngularGradient(colors: [.red, .orange, .yellow, .green, .blue, .purple, .red], center: .center)
|
||||
)
|
||||
.frame(width: 36, height: 26)
|
||||
.blur(radius: 3)
|
||||
.opacity(0.6)
|
||||
RoundedRectangle(cornerRadius: 5)
|
||||
.fill(.ultraThinMaterial)
|
||||
.frame(width: 32, height: 22)
|
||||
Circle()
|
||||
.fill(.green.opacity(0.5))
|
||||
.frame(width: 10, height: 10)
|
||||
.offset(x: -6)
|
||||
}
|
||||
case .tape:
|
||||
// Cassette tape reels
|
||||
HStack(spacing: 8) {
|
||||
ZStack {
|
||||
Circle().stroke(lineWidth: 2).frame(width: 14, height: 14)
|
||||
Circle().frame(width: 6, height: 6)
|
||||
}
|
||||
VStack(spacing: 2) {
|
||||
RoundedRectangle(cornerRadius: 1).frame(width: 16, height: 3)
|
||||
RoundedRectangle(cornerRadius: 1).frame(width: 16, height: 2).opacity(0.5)
|
||||
}
|
||||
ZStack {
|
||||
Circle().stroke(lineWidth: 2).frame(width: 14, height: 14)
|
||||
Circle().frame(width: 6, height: 6)
|
||||
}
|
||||
}
|
||||
case .morph:
|
||||
// Organic blob shapes
|
||||
ZStack {
|
||||
Ellipse()
|
||||
.fill(.green.opacity(0.4))
|
||||
.frame(width: 28, height: 22)
|
||||
.blur(radius: 4)
|
||||
Ellipse()
|
||||
.fill(.green.opacity(0.6))
|
||||
.frame(width: 18, height: 14)
|
||||
.offset(x: 4, y: 2)
|
||||
.blur(radius: 2)
|
||||
Circle()
|
||||
.fill(.green)
|
||||
.frame(width: 12, height: 12)
|
||||
}
|
||||
case .stack:
|
||||
// Layered paper notes
|
||||
ZStack {
|
||||
RoundedRectangle(cornerRadius: 3)
|
||||
.frame(width: 28, height: 22)
|
||||
.opacity(0.3)
|
||||
.offset(x: 3, y: 3)
|
||||
RoundedRectangle(cornerRadius: 3)
|
||||
.frame(width: 28, height: 22)
|
||||
.opacity(0.5)
|
||||
.offset(x: 1.5, y: 1.5)
|
||||
RoundedRectangle(cornerRadius: 3)
|
||||
.frame(width: 28, height: 22)
|
||||
VStack(spacing: 3) {
|
||||
Rectangle().frame(width: 18, height: 2)
|
||||
Rectangle().frame(width: 14, height: 2).opacity(0.5)
|
||||
}
|
||||
}
|
||||
case .wave:
|
||||
// Horizontal gradient wave
|
||||
VStack(spacing: 3) {
|
||||
Capsule().fill(.green).frame(width: 34, height: 8)
|
||||
Capsule().fill(.green.opacity(0.6)).frame(width: 34, height: 8)
|
||||
Capsule().fill(.green.opacity(0.3)).frame(width: 34, height: 8)
|
||||
}
|
||||
case .pattern:
|
||||
// Repeating pattern of icons
|
||||
ZStack {
|
||||
VStack(spacing: 6) {
|
||||
HStack(spacing: 8) {
|
||||
Circle().frame(width: 6, height: 6).opacity(0.2)
|
||||
Circle().frame(width: 6, height: 6).opacity(0.2)
|
||||
Circle().frame(width: 6, height: 6).opacity(0.2)
|
||||
}
|
||||
HStack(spacing: 8) {
|
||||
Circle().frame(width: 6, height: 6).opacity(0.2)
|
||||
Circle().frame(width: 6, height: 6).opacity(0.2)
|
||||
Circle().frame(width: 6, height: 6).opacity(0.2)
|
||||
}
|
||||
}
|
||||
RoundedRectangle(cornerRadius: 4)
|
||||
.fill(.green.opacity(0.3))
|
||||
.frame(width: 28, height: 18)
|
||||
Circle()
|
||||
.fill(.green)
|
||||
.frame(width: 12, height: 12)
|
||||
.offset(x: -6)
|
||||
}
|
||||
case .leather:
|
||||
// Skeuomorphic leather
|
||||
ZStack {
|
||||
RoundedRectangle(cornerRadius: 4)
|
||||
.fill(Color(red: 0.4, green: 0.28, blue: 0.18))
|
||||
.frame(width: 36, height: 26)
|
||||
RoundedRectangle(cornerRadius: 3)
|
||||
.strokeBorder(style: StrokeStyle(lineWidth: 1, dash: [2, 2]))
|
||||
.foregroundColor(Color(red: 0.6, green: 0.5, blue: 0.35))
|
||||
.frame(width: 30, height: 20)
|
||||
Circle()
|
||||
.fill(Color(red: 0.8, green: 0.7, blue: 0.5))
|
||||
.frame(width: 10, height: 10)
|
||||
}
|
||||
case .glass:
|
||||
// Liquid glass effect
|
||||
ZStack {
|
||||
RoundedRectangle(cornerRadius: 8)
|
||||
.fill(.ultraThinMaterial)
|
||||
.frame(width: 36, height: 26)
|
||||
RoundedRectangle(cornerRadius: 8)
|
||||
.fill(
|
||||
LinearGradient(
|
||||
colors: [.white.opacity(0.5), .white.opacity(0.1)],
|
||||
startPoint: .topLeading,
|
||||
endPoint: .bottomTrailing
|
||||
)
|
||||
)
|
||||
.frame(width: 36, height: 26)
|
||||
Circle()
|
||||
.fill(.green.opacity(0.5))
|
||||
.frame(width: 12, height: 12)
|
||||
.offset(x: -6)
|
||||
.blur(radius: 2)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -27,38 +27,40 @@ struct VotingLayoutPickerView: View {
|
||||
.padding(.horizontal)
|
||||
.padding(.top)
|
||||
|
||||
HStack(spacing: 8) {
|
||||
ForEach(VotingLayoutStyle.allCases, id: \.rawValue) { layout in
|
||||
Button(action: {
|
||||
withAnimation(.easeInOut(duration: 0.2)) {
|
||||
votingLayoutStyle = layout.rawValue
|
||||
}
|
||||
EventLogger.log(event: "change_voting_layout", withData: ["layout": layout.displayName])
|
||||
}) {
|
||||
VStack(spacing: 6) {
|
||||
layoutIcon(for: layout)
|
||||
.frame(width: 44, height: 44)
|
||||
.foregroundColor(currentLayout == layout ? .accentColor : textColor.opacity(0.6))
|
||||
ScrollView(.horizontal, showsIndicators: false) {
|
||||
HStack(spacing: 8) {
|
||||
ForEach(VotingLayoutStyle.allCases, id: \.rawValue) { layout in
|
||||
Button(action: {
|
||||
withAnimation(.easeInOut(duration: 0.2)) {
|
||||
votingLayoutStyle = layout.rawValue
|
||||
}
|
||||
EventLogger.log(event: "change_voting_layout", withData: ["layout": layout.displayName])
|
||||
}) {
|
||||
VStack(spacing: 6) {
|
||||
layoutIcon(for: layout)
|
||||
.frame(width: 44, height: 44)
|
||||
.foregroundColor(currentLayout == layout ? .accentColor : textColor.opacity(0.6))
|
||||
|
||||
Text(layout.displayName)
|
||||
.font(.caption)
|
||||
.foregroundColor(currentLayout == layout ? .accentColor : textColor.opacity(0.8))
|
||||
Text(layout.displayName)
|
||||
.font(.caption)
|
||||
.foregroundColor(currentLayout == layout ? .accentColor : textColor.opacity(0.8))
|
||||
}
|
||||
.frame(width: 70)
|
||||
.padding(.vertical, 12)
|
||||
.background(
|
||||
RoundedRectangle(cornerRadius: 10)
|
||||
.fill(currentLayout == layout ? Color.accentColor.opacity(0.15) : Color.clear)
|
||||
)
|
||||
.overlay(
|
||||
RoundedRectangle(cornerRadius: 10)
|
||||
.stroke(currentLayout == layout ? Color.accentColor : Color.clear, lineWidth: 2)
|
||||
)
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
.padding(.vertical, 12)
|
||||
.background(
|
||||
RoundedRectangle(cornerRadius: 10)
|
||||
.fill(currentLayout == layout ? Color.accentColor.opacity(0.15) : Color.clear)
|
||||
)
|
||||
.overlay(
|
||||
RoundedRectangle(cornerRadius: 10)
|
||||
.stroke(currentLayout == layout ? Color.accentColor : Color.clear, lineWidth: 2)
|
||||
)
|
||||
.buttonStyle(.plain)
|
||||
}
|
||||
.buttonStyle(.plain)
|
||||
}
|
||||
.padding(.horizontal)
|
||||
}
|
||||
.padding(.horizontal)
|
||||
.padding(.bottom)
|
||||
}
|
||||
}
|
||||
@@ -98,6 +100,34 @@ struct VotingLayoutPickerView: View {
|
||||
.frame(width: 32, height: 6)
|
||||
}
|
||||
}
|
||||
case .aura:
|
||||
// Glowing orbs in 2 rows
|
||||
VStack(spacing: 4) {
|
||||
HStack(spacing: 6) {
|
||||
ForEach(0..<3, id: \.self) { _ in
|
||||
ZStack {
|
||||
Circle()
|
||||
.fill(RadialGradient(colors: [.green.opacity(0.5), .clear], center: .center, startRadius: 0, endRadius: 8))
|
||||
.frame(width: 14, height: 14)
|
||||
Circle()
|
||||
.fill(.green)
|
||||
.frame(width: 8, height: 8)
|
||||
}
|
||||
}
|
||||
}
|
||||
HStack(spacing: 10) {
|
||||
ForEach(0..<2, id: \.self) { _ in
|
||||
ZStack {
|
||||
Circle()
|
||||
.fill(RadialGradient(colors: [.green.opacity(0.5), .clear], center: .center, startRadius: 0, endRadius: 8))
|
||||
.frame(width: 14, height: 14)
|
||||
Circle()
|
||||
.fill(.green)
|
||||
.frame(width: 8, height: 8)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user