1f040ab676
- Wrap 30+ production print() statements in #if DEBUG guards across 18 files - Add VoiceOver labels, hints, and traits to Watch app, Live Activities, widgets - Add .accessibilityAddTraits(.isButton) to 15+ onTapGesture views - Add text alternatives for color-only indicators (progress dots, mood circles) - Localize raw string literals in NoteEditorView, EntryDetailView, widgets - Replace 25+ silent try? with do/catch + AppLogger error logging - Replace hardcoded font sizes with semantic Dynamic Type fonts - Fix FIXME in IconPickerView (log icon change errors) - Extract magic animation delays to named constants across 8 files - Add widget empty state "Log your first mood!" messaging - Hide decorative images from VoiceOver, add labels to ColorPickers - Remove stale TODO in Color+Codable (alpha change deferred for migration) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
396 lines
16 KiB
Swift
396 lines
16 KiB
Swift
//
|
|
// CreateIconView.swift
|
|
// Reflect (iOS)
|
|
//
|
|
// Created by Trey Tartt on 2/13/22.
|
|
//
|
|
|
|
import SwiftUI
|
|
|
|
struct CreateWidgetView: View {
|
|
@AppStorage(UserDefaultsStore.Keys.theme.rawValue, store: GroupUserDefaults.groupDefaults) private var theme: Theme = .system
|
|
@Environment(\.dismiss) var dismiss
|
|
|
|
private var textColor: Color { theme.currentTheme.labelColor }
|
|
|
|
@StateObject private var customWidget: CustomWidgetModel
|
|
|
|
@State private var mouth: CustomWidgetMouthOptions = CustomWidgetMouthOptions.defaultOption
|
|
@State private var showRightEyeImagePicker: Bool = false
|
|
@State private var showLeftEyeImagePicker: Bool = false
|
|
@State private var showMuthImagePicker: Bool = false
|
|
|
|
var widgetView: CustomWidgetView
|
|
|
|
private var randomElements: [AnyView]
|
|
|
|
init(customWidget: CustomWidgetModel, randomElements: [AnyView] = [AnyView]()) {
|
|
self.randomElements = [
|
|
AnyView(Image(CustomWidgetBackGroundOptions.selectable.randomElement()!.rawValue)
|
|
.resizable()
|
|
.frame(width: 20, height: 20)),
|
|
AnyView(Image(CustomWidgetBackGroundOptions.selectable.randomElement()!.rawValue)
|
|
.resizable()
|
|
.frame(width: 20, height: 20)),
|
|
AnyView(Image(CustomWidgetBackGroundOptions.selectable.randomElement()!.rawValue)
|
|
.resizable()
|
|
.frame(width: 20, height: 20)),
|
|
AnyView(Image(CustomWidgetBackGroundOptions.selectable.randomElement()!.rawValue)
|
|
.resizable()
|
|
.frame(width: 20, height: 20))
|
|
]
|
|
|
|
_customWidget = StateObject(wrappedValue: customWidget)
|
|
|
|
widgetView = CustomWidgetView(customWidgetModel: customWidget)
|
|
}
|
|
|
|
func update(eye: CustomWidgetEyes, eyeOption: CustomWidgeImageOptions) {
|
|
AnalyticsManager.shared.track(.widgetEyeUpdated(style: eyeOption.rawValue))
|
|
switch eye {
|
|
case .left:
|
|
customWidget.leftEye = eyeOption
|
|
case .right:
|
|
customWidget.rightEye = eyeOption
|
|
}
|
|
}
|
|
|
|
func createRandom() {
|
|
AnalyticsManager.shared.track(.widgetRandomized)
|
|
customWidget.bgColor = Color.random()
|
|
customWidget.innerColor = Color.random()
|
|
customWidget.bgOverlayColor = Color.random()
|
|
customWidget.circleStrokeColor = Color.random()
|
|
customWidget.leftEyeColor = Color.random()
|
|
customWidget.rightEyeColor = Color.random()
|
|
customWidget.mouthColor = Color.random()
|
|
|
|
update(eye: .left, eyeOption: CustomWidgeImageOptions.allCases.randomElement()!)
|
|
update(eye: .right, eyeOption: CustomWidgeImageOptions.allCases.randomElement()!)
|
|
update(mouthOption: CustomWidgeImageOptions.allCases.randomElement()!)
|
|
|
|
update(background: CustomWidgetBackGroundOptions.allCases.randomElement()!)
|
|
}
|
|
|
|
func update(mouthOption: CustomWidgeImageOptions) {
|
|
AnalyticsManager.shared.track(.widgetMouthUpdated(style: mouthOption.rawValue))
|
|
customWidget.mouth = mouthOption
|
|
}
|
|
|
|
func update(background: CustomWidgetBackGroundOptions) {
|
|
AnalyticsManager.shared.track(.widgetBackgroundUpdated(style: background.rawValue))
|
|
customWidget.background = background
|
|
}
|
|
|
|
var mixBG: some View {
|
|
VStack {
|
|
HStack {
|
|
randomElements[0]
|
|
randomElements[1]
|
|
}
|
|
HStack {
|
|
randomElements[2]
|
|
randomElements[3]
|
|
}
|
|
}
|
|
}
|
|
|
|
var bottomBarButtons: some View {
|
|
HStack(alignment: .center, spacing: 0) {
|
|
Button(action: {
|
|
AnalyticsManager.shared.track(.widgetShuffled)
|
|
createRandom()
|
|
}, label: {
|
|
Image(systemName: "shuffle")
|
|
.font(.title)
|
|
.foregroundColor(.white)
|
|
.padding([.top, .bottom])
|
|
})
|
|
.frame(minWidth: 0, maxWidth: .infinity)
|
|
.frame(minHeight: 40, maxHeight: .infinity)
|
|
.background(.blue)
|
|
.accessibilityIdentifier(AccessibilityID.CustomWidget.shuffleButton)
|
|
|
|
Button(action: {
|
|
AnalyticsManager.shared.track(.widgetCreated)
|
|
UserDefaultsStore.saveCustomWidget(widgetModel: customWidget, inUse: false)
|
|
let impactMed = UIImpactFeedbackGenerator(style: .heavy)
|
|
impactMed.impactOccurred()
|
|
dismiss()
|
|
}, label: {
|
|
Text(String(localized: "create_widget_save"))
|
|
.font(.title)
|
|
.fontWeight(.bold)
|
|
.foregroundColor(.white)
|
|
.padding([.top, .bottom])
|
|
|
|
})
|
|
.frame(minWidth: 0, maxWidth: .infinity)
|
|
.frame(minHeight: 40, maxHeight: .infinity)
|
|
.background(.green)
|
|
.accessibilityIdentifier(AccessibilityID.CustomWidget.saveButton)
|
|
|
|
Button(action: {
|
|
AnalyticsManager.shared.track(.widgetUsed)
|
|
UserDefaultsStore.saveCustomWidget(widgetModel: customWidget, inUse: true)
|
|
let impactMed = UIImpactFeedbackGenerator(style: .heavy)
|
|
impactMed.impactOccurred()
|
|
dismiss()
|
|
}, label: {
|
|
Text(String(localized: "create_widget_use"))
|
|
.font(.title)
|
|
.fontWeight(.bold)
|
|
.foregroundColor(.white)
|
|
.padding([.top, .bottom])
|
|
|
|
})
|
|
.frame(minWidth: 0, maxWidth: .infinity)
|
|
.frame(minHeight: 40, maxHeight: .infinity)
|
|
.background(.pink)
|
|
.accessibilityIdentifier(AccessibilityID.CustomWidget.useButton)
|
|
|
|
if customWidget.isSaved {
|
|
Button(action: {
|
|
AnalyticsManager.shared.track(.widgetDeleted)
|
|
UserDefaultsStore.deleteCustomWidget(withUUID: customWidget.uuid)
|
|
let impactMed = UIImpactFeedbackGenerator(style: .heavy)
|
|
impactMed.impactOccurred()
|
|
dismiss()
|
|
}, label: {
|
|
Image(systemName: "trash")
|
|
.font(.title)
|
|
.foregroundColor(.white)
|
|
.padding([.top, .bottom])
|
|
|
|
})
|
|
.frame(minWidth: 0, maxWidth: .infinity)
|
|
.frame(minHeight: 40, maxHeight: .infinity)
|
|
.background(.orange)
|
|
.accessibilityIdentifier(AccessibilityID.CustomWidget.deleteButton)
|
|
}
|
|
}
|
|
.frame(minHeight: 40, maxHeight: .infinity)
|
|
}
|
|
|
|
var colorOptions: some View {
|
|
VStack {
|
|
HStack(spacing: 0) {
|
|
VStack(alignment: .center) {
|
|
Text(String(localized: "create_widget_background_color"))
|
|
ColorPicker("", selection: $customWidget.bgColor)
|
|
.onChange(of: customWidget.bgColor) {
|
|
AnalyticsManager.shared.track(.widgetColorUpdated(part: "background"))
|
|
}
|
|
.labelsHidden()
|
|
.accessibilityLabel(String(localized: "create_widget_background_color"))
|
|
.accessibilityIdentifier(AccessibilityID.CustomWidget.colorPicker("bg"))
|
|
}
|
|
.frame(minWidth: 0, maxWidth: .infinity)
|
|
|
|
VStack(alignment: .center) {
|
|
Text(String(localized: "create_widget_inner_color"))
|
|
ColorPicker("", selection: $customWidget.innerColor)
|
|
.onChange(of: customWidget.innerColor) {
|
|
AnalyticsManager.shared.track(.widgetColorUpdated(part: "inner"))
|
|
}
|
|
.labelsHidden()
|
|
.accessibilityLabel(String(localized: "create_widget_inner_color"))
|
|
.accessibilityIdentifier(AccessibilityID.CustomWidget.colorPicker("inner"))
|
|
}
|
|
.frame(minWidth: 0, maxWidth: .infinity)
|
|
|
|
VStack(alignment: .center) {
|
|
Text(String(localized: "create_widget_face_outline_color"))
|
|
ColorPicker("", selection: $customWidget.circleStrokeColor)
|
|
.onChange(of: customWidget.circleStrokeColor) {
|
|
AnalyticsManager.shared.track(.widgetColorUpdated(part: "outline"))
|
|
}
|
|
.labelsHidden()
|
|
.accessibilityLabel(String(localized: "create_widget_face_outline_color"))
|
|
.accessibilityIdentifier(AccessibilityID.CustomWidget.colorPicker("stroke"))
|
|
}
|
|
.frame(minWidth: 0, maxWidth: .infinity)
|
|
}
|
|
|
|
HStack(spacing: 0) {
|
|
VStack(alignment: .center) {
|
|
Text(String(localized: "create_widget_view_left_eye_color"))
|
|
ColorPicker("", selection: $customWidget.leftEyeColor)
|
|
.onChange(of: customWidget.leftEyeColor) {
|
|
AnalyticsManager.shared.track(.widgetColorUpdated(part: "left_eye"))
|
|
}
|
|
.labelsHidden()
|
|
.accessibilityLabel(String(localized: "create_widget_view_left_eye_color"))
|
|
.accessibilityIdentifier(AccessibilityID.CustomWidget.colorPicker("leftEye"))
|
|
}
|
|
.frame(minWidth: 0, maxWidth: .infinity)
|
|
|
|
VStack(alignment: .center) {
|
|
Text(String(localized: "create_widget_view_right_eye_color"))
|
|
ColorPicker("", selection: $customWidget.rightEyeColor)
|
|
.onChange(of: customWidget.rightEyeColor) {
|
|
AnalyticsManager.shared.track(.widgetColorUpdated(part: "right_eye"))
|
|
}
|
|
.labelsHidden()
|
|
.accessibilityLabel(String(localized: "create_widget_view_right_eye_color"))
|
|
.accessibilityIdentifier(AccessibilityID.CustomWidget.colorPicker("rightEye"))
|
|
}
|
|
.frame(minWidth: 0, maxWidth: .infinity)
|
|
|
|
VStack(alignment: .center) {
|
|
Text(String(localized: "create_widget_view_mouth_color"))
|
|
ColorPicker("", selection: $customWidget.mouthColor)
|
|
.onChange(of: customWidget.mouthColor) {
|
|
AnalyticsManager.shared.track(.widgetColorUpdated(part: "mouth"))
|
|
}
|
|
.labelsHidden()
|
|
.accessibilityLabel(String(localized: "create_widget_view_mouth_color"))
|
|
.accessibilityIdentifier(AccessibilityID.CustomWidget.colorPicker("mouth"))
|
|
}
|
|
.frame(minWidth: 0, maxWidth: .infinity)
|
|
}
|
|
}
|
|
.multilineTextAlignment(.center)
|
|
.padding()
|
|
.background(
|
|
theme.currentTheme.secondaryBGColor
|
|
)
|
|
}
|
|
|
|
var bgImageOptions: some View {
|
|
HStack {
|
|
ForEach(CustomWidgetBackGroundOptions.selectable, id: \.self) { bg in
|
|
Image(bg.rawValue, bundle: .main)
|
|
.resizable()
|
|
.aspectRatio(contentMode: .fill)
|
|
.frame(minWidth: 10, idealWidth: 40, maxWidth: 40,
|
|
minHeight: 10, idealHeight: 40, maxHeight: 40,
|
|
alignment: .center)
|
|
.accessibilityIdentifier(AccessibilityID.CustomWidget.backgroundOption(CustomWidgetBackGroundOptions.selectable.firstIndex(of: bg) ?? 0))
|
|
.onTapGesture {
|
|
update(background: bg)
|
|
}
|
|
.accessibilityAddTraits(.isButton)
|
|
.accessibilityLabel(String(localized: "Select background \(bg.rawValue)"))
|
|
}
|
|
mixBG
|
|
.accessibilityIdentifier(AccessibilityID.CustomWidget.randomBackgroundButton)
|
|
.onTapGesture {
|
|
update(background: .random)
|
|
}
|
|
.accessibilityAddTraits(.isButton)
|
|
.accessibilityLabel(String(localized: "Random background"))
|
|
Divider()
|
|
ColorPicker("", selection: $customWidget.bgOverlayColor)
|
|
.labelsHidden()
|
|
.accessibilityLabel(String(localized: "Background overlay color"))
|
|
.accessibilityIdentifier(AccessibilityID.CustomWidget.colorPicker("bgOverlay"))
|
|
}
|
|
.padding()
|
|
.background(
|
|
theme.currentTheme.secondaryBGColor
|
|
)
|
|
}
|
|
|
|
var faceImageOptions: some View {
|
|
HStack(alignment: .center) {
|
|
Text(String(localized: "create_widget_view_left_eye"))
|
|
.accessibilityIdentifier(AccessibilityID.CustomWidget.leftEyeButton)
|
|
.onTapGesture(perform: {
|
|
showLeftEyeImagePicker.toggle()
|
|
})
|
|
.accessibilityAddTraits(.isButton)
|
|
.foregroundColor(textColor)
|
|
.foregroundColor(textColor)
|
|
.frame(minWidth: 0, maxWidth: .infinity)
|
|
Divider()
|
|
Text(String(localized: "create_widget_view_right_eye"))
|
|
.accessibilityIdentifier(AccessibilityID.CustomWidget.rightEyeButton)
|
|
.onTapGesture(perform: {
|
|
showRightEyeImagePicker.toggle()
|
|
})
|
|
.accessibilityAddTraits(.isButton)
|
|
.foregroundColor(textColor)
|
|
.frame(minWidth: 0, maxWidth: .infinity)
|
|
Divider()
|
|
Text(String(localized: "create_widget_view_mouth"))
|
|
.accessibilityIdentifier(AccessibilityID.CustomWidget.mouthButton)
|
|
.onTapGesture(perform: {
|
|
showMuthImagePicker.toggle()
|
|
})
|
|
.accessibilityAddTraits(.isButton)
|
|
.foregroundColor(textColor)
|
|
.foregroundColor(textColor)
|
|
.frame(minWidth: 0, maxWidth: .infinity)
|
|
}
|
|
.padding()
|
|
.background(
|
|
theme.currentTheme.secondaryBGColor
|
|
)
|
|
}
|
|
|
|
var body: some View {
|
|
GeometryReader { geo in
|
|
VStack(spacing: 0) {
|
|
widgetView
|
|
.cornerRadius(10)
|
|
.padding()
|
|
.frame(width: geo.size.width, height: geo.size.width)
|
|
|
|
Spacer()
|
|
ScrollView {
|
|
VStack(spacing: 0) {
|
|
Divider().background(Color(UIColor.tertiarySystemBackground))
|
|
|
|
faceImageOptions
|
|
|
|
Divider().background(Color(UIColor.tertiarySystemBackground))
|
|
|
|
bgImageOptions
|
|
|
|
Divider().background(Color(UIColor.tertiarySystemBackground))
|
|
|
|
colorOptions
|
|
|
|
Divider().background(Color(UIColor.tertiarySystemBackground))
|
|
|
|
bottomBarButtons
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.sheet(isPresented: $showRightEyeImagePicker) {
|
|
ImagePickerGridView(pickedImageClosure: { image in
|
|
update(eye: .right, eyeOption: image)
|
|
})
|
|
}
|
|
.sheet(isPresented: $showLeftEyeImagePicker) {
|
|
ImagePickerGridView(pickedImageClosure: { image in
|
|
update(eye: .left, eyeOption: image)
|
|
})
|
|
}
|
|
.sheet(isPresented: $showMuthImagePicker) {
|
|
ImagePickerGridView(pickedImageClosure: { image in
|
|
update(mouthOption: image)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
|
|
struct CreateIconView_Previews: PreviewProvider {
|
|
static var widget: CustomWidgetModel {
|
|
let _widget = CustomWidgetModel.randomWidget
|
|
_widget.isSaved = true
|
|
return _widget
|
|
}
|
|
|
|
static var previews: some View {
|
|
Group {
|
|
CreateWidgetView(customWidget: CreateIconView_Previews.widget)
|
|
|
|
CreateWidgetView(customWidget: CustomWidgetModel.randomWidget)
|
|
.preferredColorScheme(.dark)
|
|
}
|
|
}
|
|
}
|