144 lines
4.1 KiB
Swift
144 lines
4.1 KiB
Swift
//
|
|
// CircularImageFrame.swift
|
|
// secant-testnet
|
|
//
|
|
// Created by Adam Stener on 9/29/21.
|
|
//
|
|
|
|
import SwiftUI
|
|
|
|
struct CircularFrame: View {
|
|
@Environment(\.colorScheme) var colorScheme
|
|
|
|
var body: some View {
|
|
GeometryReader { proxy in
|
|
let lineWidth = proxy.size.width * 0.06
|
|
|
|
Circle()
|
|
.stroke(
|
|
LinearGradient(
|
|
colors: [
|
|
Asset.Colors.Onboarding.circularFrameGradientStart.color,
|
|
Asset.Colors.Onboarding.circularFrameGradientEnd.color
|
|
],
|
|
startPoint: colorScheme == .light ? .topLeading : .top,
|
|
endPoint: colorScheme == .light ? .bottomTrailing : .bottom
|
|
),
|
|
style: StrokeStyle(
|
|
lineWidth: lineWidth
|
|
)
|
|
)
|
|
.padding(colorScheme == .light ? 0 : 10)
|
|
|
|
if colorScheme == .dark {
|
|
Circle()
|
|
.stroke(
|
|
LinearGradient(
|
|
colors: [
|
|
Asset.Colors.Onboarding.circularFrameDarkOutlineGradientStart.color,
|
|
Asset.Colors.Onboarding.circularFrameDarkOutlineGradientEnd.color
|
|
],
|
|
startPoint: .top,
|
|
endPoint: .bottom
|
|
),
|
|
style: StrokeStyle(
|
|
lineWidth: lineWidth * 0.15
|
|
)
|
|
)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
struct OnboardingCircularFrame: View {
|
|
@Binding var index: Int
|
|
let size: CGFloat
|
|
|
|
var body: some View {
|
|
ZStack {
|
|
CircularFrame()
|
|
.frame(width: size, height: size)
|
|
|
|
switch index {
|
|
case 0:
|
|
Asset.Assets.Icons.shield.image
|
|
.onboardingBadge(parentSize: size)
|
|
case 1:
|
|
Asset.Assets.Icons.profile.image
|
|
.onboardingBadge(parentSize: size)
|
|
case 2:
|
|
Asset.Assets.Icons.list.image
|
|
.onboardingBadge(parentSize: size)
|
|
default:
|
|
EmptyView()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
extension Image {
|
|
func onboardingBadge(parentSize: CGFloat) -> some View {
|
|
self
|
|
.resizable()
|
|
.frame(width: parentSize / 2, height: parentSize / 2)
|
|
.offset(y: parentSize * 0.47)
|
|
.zIndex(100)
|
|
}
|
|
}
|
|
|
|
struct CircularFramePreviewHelper: View {
|
|
@State var index = 0
|
|
private let size: CGFloat = 300
|
|
|
|
var body: some View {
|
|
VStack {
|
|
HStack(spacing: 25) {
|
|
Button("+") {
|
|
guard index < 2 else { return }
|
|
index += 1
|
|
}
|
|
|
|
Button("-") {
|
|
guard index != 0 else { return }
|
|
index -= 1
|
|
}
|
|
|
|
Text("\(index)")
|
|
}
|
|
|
|
GeometryReader { proxy in
|
|
VStack {
|
|
Spacer()
|
|
|
|
HStack {
|
|
Spacer()
|
|
|
|
OnboardingCircularFrame(index: $index, size: proxy.size.width / 2)
|
|
.animation(.easeInOut(duration: 2), value: index)
|
|
|
|
Spacer()
|
|
}
|
|
|
|
Spacer()
|
|
}
|
|
}
|
|
|
|
CircularFrame()
|
|
.backgroundImage(Asset.Assets.Backgrounds.callout1.image)
|
|
.frame(width: size, height: size)
|
|
.badgeIcon(.shield)
|
|
|
|
Spacer()
|
|
}
|
|
}
|
|
}
|
|
|
|
struct CircularFrame_Previews: PreviewProvider {
|
|
static var previews: some View {
|
|
CircularFramePreviewHelper()
|
|
.preferredColorScheme(.dark)
|
|
.previewLayout(.device)
|
|
.applyScreenBackground()
|
|
}
|
|
}
|