438 lines
15 KiB
Swift
438 lines
15 KiB
Swift
import SwiftUI
|
|
import Bedrock
|
|
|
|
/// A sheet that displays header layout options as a live preview carousel.
|
|
struct HeaderLayoutPickerView: View {
|
|
@Environment(\.dismiss) private var dismiss
|
|
|
|
@Binding var selectedLayout: CardHeaderLayout
|
|
let photoData: Data?
|
|
let coverPhotoData: Data?
|
|
let logoData: Data?
|
|
let avatarSystemName: String
|
|
let theme: CardTheme
|
|
let displayName: String
|
|
let role: String
|
|
let company: String
|
|
|
|
@State private var currentLayout: CardHeaderLayout
|
|
|
|
init(
|
|
selectedLayout: Binding<CardHeaderLayout>,
|
|
photoData: Data?,
|
|
coverPhotoData: Data?,
|
|
logoData: Data?,
|
|
avatarSystemName: String,
|
|
theme: CardTheme,
|
|
displayName: String,
|
|
role: String,
|
|
company: String
|
|
) {
|
|
self._selectedLayout = selectedLayout
|
|
self.photoData = photoData
|
|
self.coverPhotoData = coverPhotoData
|
|
self.logoData = logoData
|
|
self.avatarSystemName = avatarSystemName
|
|
self.theme = theme
|
|
self.displayName = displayName
|
|
self.role = role
|
|
self.company = company
|
|
self._currentLayout = State(initialValue: selectedLayout.wrappedValue)
|
|
}
|
|
|
|
private var suggestedLayout: CardHeaderLayout {
|
|
CardHeaderLayout.suggested(
|
|
hasProfile: photoData != nil,
|
|
hasCover: coverPhotoData != nil,
|
|
hasLogo: logoData != nil
|
|
)
|
|
}
|
|
|
|
var body: some View {
|
|
NavigationStack {
|
|
VStack(spacing: 0) {
|
|
ScrollView(.horizontal, showsIndicators: false) {
|
|
HStack(spacing: Design.Spacing.large) {
|
|
ForEach(CardHeaderLayout.allCases) { layout in
|
|
LayoutPreviewCard(
|
|
layout: layout,
|
|
isSelected: currentLayout == layout,
|
|
isSuggested: layout == suggestedLayout,
|
|
photoData: photoData,
|
|
coverPhotoData: coverPhotoData,
|
|
logoData: logoData,
|
|
avatarSystemName: avatarSystemName,
|
|
theme: theme
|
|
) {
|
|
withAnimation(.snappy(duration: Design.Animation.quick)) {
|
|
currentLayout = layout
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.padding(.horizontal, Design.Spacing.xLarge)
|
|
.padding(.vertical, Design.Spacing.large)
|
|
}
|
|
.scrollClipDisabled()
|
|
|
|
Spacer()
|
|
|
|
Button {
|
|
selectedLayout = currentLayout
|
|
dismiss()
|
|
} label: {
|
|
Text("Confirm layout")
|
|
.font(.headline)
|
|
.foregroundStyle(.white)
|
|
.frame(maxWidth: .infinity)
|
|
.padding(.vertical, Design.Spacing.large)
|
|
.background(.black)
|
|
.clipShape(.rect(cornerRadius: Design.CornerRadius.medium))
|
|
}
|
|
.padding(.horizontal, Design.Spacing.xLarge)
|
|
.padding(.bottom, Design.Spacing.xLarge)
|
|
}
|
|
.background(Color.AppBackground.base)
|
|
.navigationTitle("Choose a layout")
|
|
.navigationBarTitleDisplayMode(.inline)
|
|
.toolbar {
|
|
ToolbarItem(placement: .cancellationAction) {
|
|
Button {
|
|
dismiss()
|
|
} label: {
|
|
Image(systemName: "xmark")
|
|
.font(.body)
|
|
.foregroundStyle(Color.Text.primary)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// MARK: - Layout Preview Card
|
|
|
|
private struct LayoutPreviewCard: View {
|
|
let layout: CardHeaderLayout
|
|
let isSelected: Bool
|
|
let isSuggested: Bool
|
|
let photoData: Data?
|
|
let coverPhotoData: Data?
|
|
let logoData: Data?
|
|
let avatarSystemName: String
|
|
let theme: CardTheme
|
|
let onSelect: () -> Void
|
|
|
|
private let cardWidth: CGFloat = 200
|
|
private let cardHeight: CGFloat = 280
|
|
private let bannerHeight: CGFloat = 100
|
|
private let avatarSize: CGFloat = 56
|
|
private let logoRectWidth: CGFloat = 84 // 56 * 1.5 aspect ratio
|
|
|
|
private var needsMoreImages: Bool {
|
|
!layout.hasAllRequiredImages(
|
|
hasProfile: photoData != nil,
|
|
hasCover: coverPhotoData != nil,
|
|
hasLogo: logoData != nil
|
|
)
|
|
}
|
|
|
|
private var hasOverlappingContent: Bool {
|
|
layout.hasOverlappingContent
|
|
}
|
|
|
|
var body: some View {
|
|
Button(action: onSelect) {
|
|
VStack(spacing: 0) {
|
|
ZStack(alignment: .top) {
|
|
VStack(spacing: 0) {
|
|
bannerContent
|
|
.frame(height: bannerHeight)
|
|
.clipped()
|
|
|
|
contentArea
|
|
.offset(y: hasOverlappingContent ? -avatarSize / 2 : 0)
|
|
.padding(.bottom, hasOverlappingContent ? -avatarSize / 2 : 0)
|
|
}
|
|
.frame(width: cardWidth, height: cardHeight)
|
|
.background(Color.AppBackground.elevated)
|
|
.clipShape(.rect(cornerRadius: Design.CornerRadius.large))
|
|
.overlay(
|
|
RoundedRectangle(cornerRadius: Design.CornerRadius.large)
|
|
.stroke(isSelected ? theme.primaryColor : .clear, lineWidth: Design.LineWidth.thick)
|
|
)
|
|
.shadow(color: Color.Text.secondary.opacity(Design.Opacity.subtle), radius: Design.Shadow.radiusMedium, y: Design.Shadow.offsetMedium)
|
|
|
|
badgeOverlay
|
|
.offset(y: -Design.Spacing.small)
|
|
}
|
|
}
|
|
}
|
|
.buttonStyle(.plain)
|
|
.accessibilityLabel(layout.displayName)
|
|
.accessibilityValue(isSelected ? String(localized: "Selected") : "")
|
|
.accessibilityHint(layout.description)
|
|
.accessibilityAddTraits(isSelected ? [.isSelected] : [])
|
|
}
|
|
|
|
// MARK: - Banner Content
|
|
|
|
@ViewBuilder
|
|
private var bannerContent: some View {
|
|
switch layout.bannerContent {
|
|
case .profile:
|
|
profileBannerPreview
|
|
case .logo:
|
|
logoBannerPreview
|
|
case .cover:
|
|
coverBannerPreview
|
|
}
|
|
}
|
|
|
|
private var profileBannerPreview: some View {
|
|
ZStack {
|
|
if let photoData, let uiImage = UIImage(data: photoData) {
|
|
Image(uiImage: uiImage)
|
|
.resizable()
|
|
.scaledToFill()
|
|
} else {
|
|
LinearGradient(colors: [theme.primaryColor, theme.secondaryColor], startPoint: .topLeading, endPoint: .bottomTrailing)
|
|
|
|
VStack(spacing: Design.Spacing.xxSmall) {
|
|
Image(systemName: "person.fill")
|
|
.font(.system(size: Design.BaseFontSize.title))
|
|
Text("Profile")
|
|
.font(.caption)
|
|
.bold()
|
|
}
|
|
.foregroundStyle(theme.textColor.opacity(Design.Opacity.medium))
|
|
}
|
|
}
|
|
}
|
|
|
|
private var logoBannerPreview: some View {
|
|
ZStack {
|
|
LinearGradient(colors: [theme.primaryColor, theme.secondaryColor], startPoint: .topLeading, endPoint: .bottomTrailing)
|
|
|
|
if let logoData, let uiImage = UIImage(data: logoData) {
|
|
Image(uiImage: uiImage)
|
|
.resizable()
|
|
.scaledToFill()
|
|
} else {
|
|
VStack(spacing: Design.Spacing.xxSmall) {
|
|
Image(systemName: "building.2.fill")
|
|
.font(.system(size: Design.BaseFontSize.title))
|
|
Text("Logo")
|
|
.font(.caption)
|
|
.bold()
|
|
}
|
|
.foregroundStyle(theme.textColor.opacity(Design.Opacity.medium))
|
|
}
|
|
}
|
|
}
|
|
|
|
private var coverBannerPreview: some View {
|
|
Group {
|
|
if let coverData = coverPhotoData, let uiImage = UIImage(data: coverData) {
|
|
Image(uiImage: uiImage)
|
|
.resizable()
|
|
.scaledToFill()
|
|
} else {
|
|
ZStack {
|
|
LinearGradient(colors: [theme.primaryColor.opacity(Design.Opacity.light), theme.secondaryColor.opacity(Design.Opacity.light)], startPoint: .topLeading, endPoint: .bottomTrailing)
|
|
|
|
VStack(spacing: Design.Spacing.xxSmall) {
|
|
Image(systemName: "photo.fill")
|
|
.font(.system(size: Design.BaseFontSize.title))
|
|
Text("Cover")
|
|
.font(.caption)
|
|
.bold()
|
|
}
|
|
.foregroundStyle(Color.Text.tertiary)
|
|
}
|
|
}
|
|
}
|
|
.clipped()
|
|
}
|
|
|
|
// MARK: - Content Area
|
|
|
|
private var contentArea: some View {
|
|
VStack(alignment: .leading, spacing: Design.Spacing.small) {
|
|
contentOverlay
|
|
placeholderTextLines
|
|
Spacer()
|
|
}
|
|
.padding(.horizontal, Design.Spacing.medium)
|
|
.padding(.top, Design.Spacing.medium)
|
|
.padding(.bottom, Design.Spacing.small)
|
|
}
|
|
|
|
@ViewBuilder
|
|
private var contentOverlay: some View {
|
|
switch layout.contentOverlay {
|
|
case .none:
|
|
EmptyView()
|
|
case .avatar:
|
|
HStack {
|
|
profileAvatar
|
|
Spacer()
|
|
}
|
|
case .logoRectangle:
|
|
HStack {
|
|
logoRectangle
|
|
Spacer()
|
|
}
|
|
case .avatarAndLogo:
|
|
HStack {
|
|
profileAvatar
|
|
Spacer()
|
|
logoRectangle
|
|
}
|
|
}
|
|
}
|
|
|
|
private var placeholderTextLines: some View {
|
|
VStack(alignment: .leading, spacing: Design.Spacing.xSmall) {
|
|
RoundedRectangle(cornerRadius: Design.CornerRadius.small)
|
|
.fill(Color.Text.tertiary.opacity(Design.Opacity.hint))
|
|
.frame(height: Design.Spacing.medium)
|
|
.frame(maxWidth: .infinity, alignment: .leading)
|
|
.padding(.trailing, Design.Spacing.xLarge)
|
|
|
|
RoundedRectangle(cornerRadius: Design.CornerRadius.small)
|
|
.fill(Color.Text.tertiary.opacity(Design.Opacity.subtle))
|
|
.frame(height: Design.Spacing.small)
|
|
.frame(maxWidth: .infinity, alignment: .leading)
|
|
.padding(.trailing, Design.Spacing.xxLarge)
|
|
|
|
RoundedRectangle(cornerRadius: Design.CornerRadius.small)
|
|
.fill(Color.Text.tertiary.opacity(Design.Opacity.subtle))
|
|
.frame(height: Design.Spacing.small)
|
|
.frame(maxWidth: .infinity, alignment: .leading)
|
|
.padding(.trailing, Design.Spacing.xLarge)
|
|
}
|
|
}
|
|
|
|
// MARK: - Overlay Components
|
|
|
|
private var profileAvatar: some View {
|
|
Group {
|
|
if let photoData, let uiImage = UIImage(data: photoData) {
|
|
Image(uiImage: uiImage)
|
|
.resizable()
|
|
.scaledToFill()
|
|
} else {
|
|
Image(systemName: avatarSystemName)
|
|
.font(.system(size: avatarSize / 2.5))
|
|
.foregroundStyle(theme.textColor)
|
|
.frame(maxWidth: .infinity, maxHeight: .infinity)
|
|
.background(theme.accentColor)
|
|
}
|
|
}
|
|
.frame(width: avatarSize, height: avatarSize)
|
|
.clipShape(.circle)
|
|
.overlay(Circle().stroke(Color.AppBackground.elevated, lineWidth: Design.LineWidth.medium))
|
|
}
|
|
|
|
private var logoBadge: some View {
|
|
Group {
|
|
if let logoData, let uiImage = UIImage(data: logoData) {
|
|
Image(uiImage: uiImage)
|
|
.resizable()
|
|
.scaledToFill()
|
|
.clipped()
|
|
} else {
|
|
VStack(spacing: Design.Spacing.xxSmall) {
|
|
Image(systemName: "building.2")
|
|
.font(.caption)
|
|
Text("Logo")
|
|
.font(.system(size: 8))
|
|
}
|
|
.foregroundStyle(theme.textColor)
|
|
.frame(maxWidth: .infinity, maxHeight: .infinity)
|
|
}
|
|
}
|
|
.frame(width: avatarSize, height: avatarSize)
|
|
.background(theme.accentColor)
|
|
.clipShape(.rect(cornerRadius: Design.CornerRadius.medium))
|
|
.overlay(RoundedRectangle(cornerRadius: Design.CornerRadius.medium).stroke(Color.AppBackground.elevated, lineWidth: Design.LineWidth.medium))
|
|
}
|
|
|
|
private var logoRectangle: some View {
|
|
Group {
|
|
if let logoData, let uiImage = UIImage(data: logoData) {
|
|
Image(uiImage: uiImage)
|
|
.resizable()
|
|
.scaledToFill()
|
|
.clipped()
|
|
} else {
|
|
VStack(spacing: Design.Spacing.xxSmall) {
|
|
Image(systemName: "building.2")
|
|
.font(.caption)
|
|
Text("Logo")
|
|
.font(.system(size: 8))
|
|
}
|
|
.foregroundStyle(theme.textColor)
|
|
.frame(maxWidth: .infinity, maxHeight: .infinity)
|
|
}
|
|
}
|
|
.frame(width: logoRectWidth, height: avatarSize)
|
|
.background(theme.accentColor)
|
|
.clipShape(.rect(cornerRadius: Design.CornerRadius.medium))
|
|
.overlay(RoundedRectangle(cornerRadius: Design.CornerRadius.medium).stroke(Color.AppBackground.elevated, lineWidth: Design.LineWidth.medium))
|
|
}
|
|
|
|
// MARK: - Badges
|
|
|
|
@ViewBuilder
|
|
private var badgeOverlay: some View {
|
|
if needsMoreImages {
|
|
LayoutBadge(text: "More images required", iconName: "lock.fill", backgroundColor: Color.Text.primary.opacity(Design.Opacity.strong))
|
|
} else if isSuggested && !isSelected {
|
|
LayoutBadge(text: "Suggested", iconName: "star.fill", backgroundColor: Color.Badge.star)
|
|
}
|
|
}
|
|
}
|
|
|
|
// MARK: - Layout Badge
|
|
|
|
private struct LayoutBadge: View {
|
|
let text: String
|
|
let iconName: String
|
|
let backgroundColor: Color
|
|
|
|
var body: some View {
|
|
HStack(spacing: Design.Spacing.xSmall) {
|
|
Image(systemName: iconName)
|
|
.font(.caption2)
|
|
Text(text)
|
|
.font(.caption2)
|
|
.bold()
|
|
}
|
|
.padding(.horizontal, Design.Spacing.small)
|
|
.padding(.vertical, Design.Spacing.xSmall)
|
|
.background(backgroundColor)
|
|
.foregroundStyle(.white)
|
|
.clipShape(.capsule)
|
|
}
|
|
}
|
|
|
|
// MARK: - Preview
|
|
|
|
#Preview {
|
|
@Previewable @State var selectedLayout: CardHeaderLayout = .profileBanner
|
|
|
|
HeaderLayoutPickerView(
|
|
selectedLayout: $selectedLayout,
|
|
photoData: nil,
|
|
coverPhotoData: nil,
|
|
logoData: nil,
|
|
avatarSystemName: "person.crop.circle",
|
|
theme: .coral,
|
|
displayName: "John Doe",
|
|
role: "Developer",
|
|
company: "Acme Inc"
|
|
)
|
|
}
|