Redesign ingredient list with swipe-to-add grocery action and add-all button
Remove checkbox icons and tap-to-select state from ingredient items. Replace with bullet points and a small green cart indicator for items already in the grocery list. Add a full-width "Add All to Grocery List" / "Remove from Grocery List" button below ingredients. Swipe right on individual ingredients shows a rounded green/red cart icon to add/remove single items. Add DE/ES/FR translations for new grocery list button strings. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -516,6 +516,28 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"Add All to Grocery List" : {
|
||||
"localizations" : {
|
||||
"de" : {
|
||||
"stringUnit" : {
|
||||
"state" : "translated",
|
||||
"value" : "Alle zur Einkaufsliste hinzufügen"
|
||||
}
|
||||
},
|
||||
"es" : {
|
||||
"stringUnit" : {
|
||||
"state" : "translated",
|
||||
"value" : "Añadir todo a la lista de compras"
|
||||
}
|
||||
},
|
||||
"fr" : {
|
||||
"stringUnit" : {
|
||||
"state" : "translated",
|
||||
"value" : "Tout ajouter à la liste de courses"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"Add cooking steps for fellow chefs to follow." : {
|
||||
"extractionState" : "stale",
|
||||
"localizations" : {
|
||||
@@ -3665,6 +3687,28 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"Remove from Grocery List" : {
|
||||
"localizations" : {
|
||||
"de" : {
|
||||
"stringUnit" : {
|
||||
"state" : "translated",
|
||||
"value" : "Von der Einkaufsliste entfernen"
|
||||
}
|
||||
},
|
||||
"es" : {
|
||||
"stringUnit" : {
|
||||
"state" : "translated",
|
||||
"value" : "Eliminar de la lista de compras"
|
||||
}
|
||||
},
|
||||
"fr" : {
|
||||
"stringUnit" : {
|
||||
"state" : "translated",
|
||||
"value" : "Retirer de la liste de courses"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"Same as Device" : {
|
||||
"localizations" : {
|
||||
"de" : {
|
||||
|
||||
@@ -17,22 +17,6 @@ struct RecipeIngredientSection: View {
|
||||
var body: some View {
|
||||
VStack(alignment: .leading) {
|
||||
HStack {
|
||||
Button {
|
||||
withAnimation {
|
||||
if groceryList.containsRecipe(viewModel.observableRecipeDetail.id) {
|
||||
groceryList.deleteGroceryRecipe(viewModel.observableRecipeDetail.id)
|
||||
} else {
|
||||
groceryList.addItems(
|
||||
viewModel.observableRecipeDetail.recipeIngredient,
|
||||
toRecipe: viewModel.observableRecipeDetail.id,
|
||||
recipeName: viewModel.observableRecipeDetail.name
|
||||
)
|
||||
}
|
||||
}
|
||||
} label: {
|
||||
Image(systemName: "storefront")
|
||||
}.disabled(viewModel.editMode)
|
||||
|
||||
SecondaryLabel(text: LocalizedStringKey("Ingredients"))
|
||||
|
||||
Spacer()
|
||||
@@ -49,14 +33,9 @@ struct RecipeIngredientSection: View {
|
||||
ingredient: $viewModel.observableRecipeDetail.recipeIngredient[ix],
|
||||
servings: $viewModel.observableRecipeDetail.ingredientMultiplier,
|
||||
recipeYield: Double(viewModel.observableRecipeDetail.recipeYield),
|
||||
recipeId: viewModel.observableRecipeDetail.id
|
||||
) {
|
||||
groceryList.addItem(
|
||||
viewModel.observableRecipeDetail.recipeIngredient[ix],
|
||||
toRecipe: viewModel.observableRecipeDetail.id,
|
||||
recipeId: viewModel.observableRecipeDetail.id,
|
||||
recipeName: viewModel.observableRecipeDetail.name
|
||||
)
|
||||
}
|
||||
.padding(4)
|
||||
}
|
||||
|
||||
@@ -69,6 +48,28 @@ struct RecipeIngredientSection: View {
|
||||
}.padding(.top)
|
||||
}
|
||||
|
||||
Button {
|
||||
withAnimation {
|
||||
if groceryList.containsRecipe(viewModel.observableRecipeDetail.id) {
|
||||
groceryList.deleteGroceryRecipe(viewModel.observableRecipeDetail.id)
|
||||
} else {
|
||||
groceryList.addItems(
|
||||
viewModel.observableRecipeDetail.recipeIngredient,
|
||||
toRecipe: viewModel.observableRecipeDetail.id,
|
||||
recipeName: viewModel.observableRecipeDetail.name
|
||||
)
|
||||
}
|
||||
}
|
||||
} label: {
|
||||
HStack {
|
||||
Image(systemName: groceryList.containsRecipe(viewModel.observableRecipeDetail.id) ? "cart.badge.minus" : "cart.badge.plus")
|
||||
.foregroundStyle(groceryList.containsRecipe(viewModel.observableRecipeDetail.id) ? .red : .green)
|
||||
Text(groceryList.containsRecipe(viewModel.observableRecipeDetail.id) ? "Remove from Grocery List" : "Add All to Grocery List")
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
}
|
||||
.buttonStyle(.bordered)
|
||||
.padding(.top, 8)
|
||||
}
|
||||
.padding()
|
||||
.animation(.easeInOut, value: viewModel.observableRecipeDetail.ingredientMultiplier)
|
||||
@@ -115,29 +116,43 @@ fileprivate struct IngredientListItem: View {
|
||||
@Binding var servings: Double
|
||||
@State var recipeYield: Double
|
||||
@State var recipeId: String
|
||||
let addToGroceryListAction: () -> Void
|
||||
var recipeName: String
|
||||
|
||||
@State var modifiedIngredient: AttributedString = ""
|
||||
@State var isSelected: Bool = false
|
||||
var unmodified: Bool {
|
||||
servings == Double(recipeYield) || servings == 0
|
||||
}
|
||||
|
||||
// Drag animation
|
||||
// Swipe state
|
||||
@State private var dragOffset: CGFloat = 0
|
||||
@State private var animationStartOffset: CGFloat = 0
|
||||
let maxDragDistance = 50.0
|
||||
private let maxDragDistance: CGFloat = 80
|
||||
private let swipeThreshold: CGFloat = 0.4
|
||||
|
||||
private var isInGroceryList: Bool {
|
||||
groceryList.containsItem(at: recipeId, item: ingredient)
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
HStack(alignment: .top) {
|
||||
if groceryList.containsItem(at: recipeId, item: ingredient) {
|
||||
Image(systemName: "storefront")
|
||||
.foregroundStyle(Color.green)
|
||||
} else if isSelected {
|
||||
Image(systemName: "checkmark.circle")
|
||||
} else {
|
||||
Image(systemName: "circle")
|
||||
ZStack(alignment: .leading) {
|
||||
// Swipe background
|
||||
if dragOffset > 0 {
|
||||
Image(systemName: isInGroceryList ? "cart.badge.minus" : "cart.badge.plus")
|
||||
.font(.caption)
|
||||
.bold()
|
||||
.foregroundStyle(.white)
|
||||
.frame(width: dragOffset, alignment: .center)
|
||||
.frame(maxHeight: .infinity)
|
||||
.background(
|
||||
RoundedRectangle(cornerRadius: 10)
|
||||
.fill(isInGroceryList ? Color.red : Color.green)
|
||||
)
|
||||
}
|
||||
|
||||
// Ingredient row
|
||||
HStack(alignment: .center) {
|
||||
Text("•")
|
||||
.foregroundStyle(.secondary)
|
||||
if !unmodified && String(modifiedIngredient.characters) == ingredient {
|
||||
Image(systemName: "exclamationmark.triangle.fill")
|
||||
.foregroundStyle(.red)
|
||||
@@ -150,10 +165,18 @@ fileprivate struct IngredientListItem: View {
|
||||
Text(modifiedIngredient)
|
||||
.multilineTextAlignment(.leading)
|
||||
.lineLimit(5)
|
||||
//.foregroundStyle(String(modifiedIngredient.characters) == ingredient ? .red : .primary)
|
||||
}
|
||||
if isInGroceryList {
|
||||
Image(systemName: "cart")
|
||||
.font(.caption2)
|
||||
.foregroundStyle(.green)
|
||||
}
|
||||
Spacer()
|
||||
}
|
||||
.background(Color(.systemBackground))
|
||||
.offset(x: dragOffset)
|
||||
}
|
||||
.clipped()
|
||||
.onChange(of: servings) { newServings in
|
||||
if recipeYield == 0 {
|
||||
modifiedIngredient = ObservableRecipeDetail.adjustIngredient(ingredient, by: newServings)
|
||||
@@ -161,34 +184,29 @@ fileprivate struct IngredientListItem: View {
|
||||
modifiedIngredient = ObservableRecipeDetail.adjustIngredient(ingredient, by: newServings/recipeYield)
|
||||
}
|
||||
}
|
||||
.foregroundStyle(isSelected ? Color.secondary : Color.primary)
|
||||
.onTapGesture {
|
||||
isSelected.toggle()
|
||||
}
|
||||
.offset(x: dragOffset, y: 0)
|
||||
.animation(.easeInOut, value: isSelected)
|
||||
|
||||
.gesture(
|
||||
DragGesture()
|
||||
.onChanged { gesture in
|
||||
// Update drag offset as the user drags
|
||||
if animationStartOffset == 0 {
|
||||
animationStartOffset = gesture.translation.width
|
||||
}
|
||||
let dragAmount = gesture.translation.width
|
||||
let offset = min(dragAmount, maxDragDistance + pow(dragAmount - maxDragDistance, 0.7)) - animationStartOffset
|
||||
let offset = min(dragAmount, maxDragDistance + pow(max(0, dragAmount - maxDragDistance), 0.7)) - animationStartOffset
|
||||
self.dragOffset = max(0, offset)
|
||||
}
|
||||
.onEnded { gesture in
|
||||
.onEnded { _ in
|
||||
withAnimation {
|
||||
if dragOffset > maxDragDistance * 0.3 { // Swipe threshold
|
||||
if groceryList.containsItem(at: recipeId, item: ingredient) {
|
||||
if dragOffset > maxDragDistance * swipeThreshold {
|
||||
if isInGroceryList {
|
||||
groceryList.deleteItem(ingredient, fromRecipe: recipeId)
|
||||
} else {
|
||||
addToGroceryListAction()
|
||||
groceryList.addItem(
|
||||
ingredient,
|
||||
toRecipe: recipeId,
|
||||
recipeName: recipeName
|
||||
)
|
||||
}
|
||||
}
|
||||
// Animate back to original position
|
||||
self.dragOffset = 0
|
||||
self.animationStartOffset = 0
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user