javier
dd6f453466
This PR contains the work done to improve the app layout for max iPhones and iPads by levering on the navigation split view. Plus, the floating button to add todo tasks was improved and integrated better into the layout and a critical bug occurring on max iPhones and iPads was fixed. Reviewed-on: rock-n-code/todos-app#10 Co-authored-by: Javier Cicchelli <javier@rock-n-code.com> Co-committed-by: Javier Cicchelli <javier@rock-n-code.com>
114 lines
3.0 KiB
Swift
114 lines
3.0 KiB
Swift
import SwiftUI
|
|
|
|
extension TaskGroupListView {
|
|
|
|
/// A card-style view representing a single todo task group with its count.
|
|
///
|
|
/// This view displays a task group as a compact card showing:
|
|
/// - The group's icon and title on the left
|
|
/// - The task count on the right
|
|
/// - A tinted background using the group's color
|
|
///
|
|
/// The view is designed to be used within the `TaskGroupListView` and is typically
|
|
/// wrapped in a `NavigationLink` to allow navigation to detailed task lists.
|
|
struct Card: View {
|
|
|
|
// MARK: Properties
|
|
|
|
/// The number of tasks.
|
|
private let count: Int
|
|
|
|
/// The task group.
|
|
private let group: TodoGroup
|
|
|
|
// MARK: Initializers
|
|
|
|
/// Creates a task group list card.
|
|
/// - Parameters:
|
|
/// - group: The task group to display.
|
|
/// - count: The number of tasks in the group.
|
|
init(
|
|
group: TodoGroup,
|
|
count: Int
|
|
) {
|
|
self.count = count
|
|
self.group = group
|
|
}
|
|
|
|
// MARK: Body
|
|
|
|
/// The content and behavior of the view.
|
|
///
|
|
/// Displays a horizontal card layout with the group icon and title on the left,
|
|
/// and the task count on the right, all within a colored background.
|
|
var body: some View {
|
|
HStack {
|
|
VStack(
|
|
alignment: .leading,
|
|
spacing: 8
|
|
) {
|
|
Image(systemName: group.iconName)
|
|
.font(.system(size: 40))
|
|
.foregroundStyle(group.color)
|
|
|
|
Text(group.title)
|
|
.font(.headline)
|
|
.foregroundStyle(.primary)
|
|
.frame(
|
|
maxWidth: .infinity,
|
|
alignment: .leading
|
|
)
|
|
}
|
|
.padding(.vertical, 24)
|
|
|
|
Spacer()
|
|
|
|
Text(String(count))
|
|
.font(.title)
|
|
.fontWeight(.bold)
|
|
.foregroundStyle(group.color)
|
|
}
|
|
.padding(.horizontal, 24)
|
|
.background(
|
|
RoundedRectangle(cornerRadius: 8)
|
|
.fill(group.color.opacity(0.1))
|
|
)
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// MARK: - Previews
|
|
|
|
#Preview("Today item") {
|
|
TaskGroupListView.Card(
|
|
group: .today,
|
|
count: .random(in: 0...20)
|
|
)
|
|
.padding(.horizontal, 16)
|
|
}
|
|
|
|
#Preview("Upcoming item") {
|
|
TaskGroupListView.Card(
|
|
group: .upcoming,
|
|
count: .random(in: 0...20)
|
|
)
|
|
.padding(.horizontal, 16)
|
|
}
|
|
|
|
#Preview("Overdue item") {
|
|
TaskGroupListView.Card(
|
|
group: .overdue,
|
|
count: .random(in: 0...20)
|
|
)
|
|
.padding(.horizontal, 16)
|
|
}
|
|
|
|
#Preview("Completed item") {
|
|
TaskGroupListView.Card(
|
|
group: .completed,
|
|
count: .random(in: 0...20)
|
|
)
|
|
.padding(.horizontal, 16)
|
|
}
|