mirror of
https://github.com/wahyd4/image-flow.git
synced 2026-08-08 20:56:05 +10:00
Update flip clock
This commit is contained in:
@@ -46,63 +46,39 @@ struct ClockPreviewView: View {
|
||||
}
|
||||
|
||||
private var flipPreview: some View {
|
||||
HStack(spacing: 8) {
|
||||
HStack(spacing: 4) {
|
||||
// Hours
|
||||
VStack {
|
||||
ZStack {
|
||||
RoundedRectangle(cornerRadius: 4)
|
||||
.fill(Color.black)
|
||||
.frame(width: 30, height: 30)
|
||||
|
||||
Text("\(String(format: "%02d", calendar.component(.hour, from: currentTime)))")
|
||||
.font(.system(size: 22, weight: .bold))
|
||||
.foregroundColor(.white)
|
||||
}
|
||||
|
||||
Rectangle()
|
||||
.fill(Color.gray.opacity(0.5))
|
||||
.frame(height: 1)
|
||||
|
||||
ZStack {
|
||||
RoundedRectangle(cornerRadius: 4)
|
||||
.fill(Color.black)
|
||||
.frame(width: 30, height: 30)
|
||||
|
||||
Text("\(String(format: "%02d", calendar.component(.hour, from: currentTime)))")
|
||||
.font(.system(size: 22, weight: .bold))
|
||||
.foregroundColor(.white)
|
||||
}
|
||||
HStack(spacing: 2) {
|
||||
digitView(value: calendar.component(.hour, from: currentTime) / 10)
|
||||
digitView(value: calendar.component(.hour, from: currentTime) % 10)
|
||||
}
|
||||
|
||||
// Separator
|
||||
Text(":")
|
||||
.font(.system(size: 26, weight: .bold))
|
||||
.foregroundColor(.primary)
|
||||
.offset(y: -2)
|
||||
|
||||
// Minutes
|
||||
VStack {
|
||||
ZStack {
|
||||
RoundedRectangle(cornerRadius: 4)
|
||||
.fill(Color.black)
|
||||
.frame(width: 30, height: 30)
|
||||
|
||||
Text("\(String(format: "%02d", calendar.component(.minute, from: currentTime)))")
|
||||
.font(.system(size: 22, weight: .bold))
|
||||
.foregroundColor(.white)
|
||||
}
|
||||
|
||||
Rectangle()
|
||||
.fill(Color.gray.opacity(0.5))
|
||||
.frame(height: 1)
|
||||
|
||||
ZStack {
|
||||
RoundedRectangle(cornerRadius: 4)
|
||||
.fill(Color.black)
|
||||
.frame(width: 30, height: 30)
|
||||
|
||||
Text("\(String(format: "%02d", calendar.component(.minute, from: currentTime)))")
|
||||
.font(.system(size: 22, weight: .bold))
|
||||
.foregroundColor(.white)
|
||||
}
|
||||
HStack(spacing: 2) {
|
||||
digitView(value: calendar.component(.minute, from: currentTime) / 10)
|
||||
digitView(value: calendar.component(.minute, from: currentTime) % 10)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private func digitView(value: Int) -> some View {
|
||||
ZStack {
|
||||
RoundedRectangle(cornerRadius: 4)
|
||||
.fill(Color.black)
|
||||
.frame(width: 30, height: 40)
|
||||
|
||||
Text("\(value)")
|
||||
.font(.system(size: 26, weight: .bold))
|
||||
.foregroundColor(.white)
|
||||
}
|
||||
}
|
||||
|
||||
private var minimalPreview: some View {
|
||||
Text(minimalTimeFormatter.string(from: currentTime))
|
||||
.font(.system(size: 36, weight: .thin, design: .rounded))
|
||||
|
||||
@@ -6,7 +6,7 @@ class FlipClockViewModel: ObservableObject {
|
||||
setupTimer()
|
||||
}
|
||||
|
||||
private(set) lazy var flipViewModels = { (0...5).map { _ in FlipViewModel() } }()
|
||||
private(set) lazy var flipViewModels = { (0...3).map { _ in FlipViewModel() } }()
|
||||
|
||||
// MARK: - Private
|
||||
|
||||
@@ -29,7 +29,7 @@ class FlipClockViewModel: ObservableObject {
|
||||
|
||||
private var timeFormatter: DateFormatter {
|
||||
let formatter = DateFormatter()
|
||||
formatter.dateFormat = "HHmmss"
|
||||
formatter.dateFormat = "HHmm"
|
||||
return formatter
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,17 +8,17 @@ struct SingleFlipView: View {
|
||||
|
||||
var body: some View {
|
||||
Text(text)
|
||||
.font(.system(size: 40))
|
||||
.font(.system(size: 60))
|
||||
.fontWeight(.heavy)
|
||||
.foregroundColor(.white)
|
||||
.fixedSize()
|
||||
.padding(type.padding, -20)
|
||||
.frame(width: 15, height: 20, alignment: type.alignment)
|
||||
.padding(type.paddingEdges, 10)
|
||||
.padding(type.padding, -30)
|
||||
.frame(width: 25, height: 30, alignment: type.alignment)
|
||||
.padding(type.paddingEdges, 15)
|
||||
.clipped()
|
||||
.background(Color.black)
|
||||
.cornerRadius(4)
|
||||
.padding(type.padding, -4.5)
|
||||
.cornerRadius(6)
|
||||
.padding(type.padding, -6)
|
||||
.clipped()
|
||||
}
|
||||
|
||||
|
||||
@@ -187,37 +187,31 @@ struct FlipClockView: View {
|
||||
var body: some View {
|
||||
GeometryReader { geometry in
|
||||
let isPortrait = geometry.size.width < geometry.size.height
|
||||
let scale: CGFloat = isPortrait ? 1.0 : 0.7
|
||||
let scale: CGFloat = isPortrait ? 1.2 : 1.0
|
||||
|
||||
VStack {
|
||||
HStack(spacing: 15) {
|
||||
HStack(spacing: 25) {
|
||||
// Hours
|
||||
HStack(spacing: 5) {
|
||||
HStack(spacing: 8) {
|
||||
FlipView(viewModel: viewModel.flipViewModels[0])
|
||||
FlipView(viewModel: viewModel.flipViewModels[1])
|
||||
}
|
||||
|
||||
// Minutes
|
||||
HStack(spacing: 5) {
|
||||
HStack(spacing: 8) {
|
||||
FlipView(viewModel: viewModel.flipViewModels[2])
|
||||
FlipView(viewModel: viewModel.flipViewModels[3])
|
||||
}
|
||||
|
||||
// Seconds
|
||||
HStack(spacing: 5) {
|
||||
FlipView(viewModel: viewModel.flipViewModels[4])
|
||||
FlipView(viewModel: viewModel.flipViewModels[5])
|
||||
}
|
||||
}
|
||||
.scaleEffect(scale)
|
||||
|
||||
// AM/PM indicator
|
||||
Text(Calendar.current.component(.hour, from: currentTime) >= 12 ? "PM" : "AM")
|
||||
.font(.system(size: 24 * scale, weight: .bold, design: .rounded))
|
||||
.font(.system(size: 32 * scale, weight: .bold, design: .rounded))
|
||||
.foregroundColor(.white)
|
||||
.padding(.top, 10 * scale)
|
||||
.padding(.top, 15 * scale)
|
||||
}
|
||||
.shadow(color: .black.opacity(0.5), radius: 5, x: 0, y: 2)
|
||||
.shadow(color: .black.opacity(0.6), radius: 8, x: 0, y: 3)
|
||||
.frame(maxWidth: .infinity, maxHeight: .infinity)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user