starred/Memola
1
0
Fork 0
mirror of https://github.com/dscyrescotti/Memola.git synced 2026-07-14 00:33:02 +02:00
Code Issues 5 Packages Projects Releases 3 Wiki Activity

feat: add tiny border to color preview

Browse Source
This commit is contained in:
dscyrescotti
2024-05-18 21:36:21 +07:00
parent 0c03abee4e
commit 23ce30731c
2 changed files with 41 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Memola/Features/Memo/ColorPicker/ColorPicker.swift
+37 -6
View File
@@ -16,7 +16,7 @@ struct ColorPicker: View {
@State var brightness: Double = 1 @State var brightness: Double = 1
@State var alpha: Double = 1 @State var alpha: Double = 1
let size: CGFloat = 15 let size: CGFloat = 18
var body: some View { var body: some View {
VStack(spacing: 10) { VStack(spacing: 10) {
@@ -37,7 +37,11 @@ struct ColorPicker: View {
} }
.frame(width: size * 2 + 10) .frame(width: size * 2 + 10)
.cornerRadius(5) .cornerRadius(5)
VStack(spacing: 10) { .overlay {
RoundedRectangle(cornerRadius: 5)
.stroke(Color.gray, lineWidth: 0.2)
}
VStack(spacing: 15) {
hueSlider hueSlider
alphaSlider alphaSlider
} }
@@ -76,14 +80,23 @@ struct ColorPicker: View {
} }
.cornerRadius(5) .cornerRadius(5)
.drawingGroup() .drawingGroup()
.overlay {
RoundedRectangle(cornerRadius: 5)
.stroke(Color.gray, lineWidth: 0.2)
}
.overlay(alignment: .bottomLeading) { .overlay(alignment: .bottomLeading) {
Color(hue: hue, saturation: saturation, brightness: brightness) Color(hue: hue, saturation: saturation, brightness: brightness)
.frame(width: size, height: size) .frame(width: size, height: size)
.clipShape(Circle()) .clipShape(Circle())
.padding(1)
.overlay { .overlay {
Circle() Circle()
.strokeBorder(.white, lineWidth: 2) .strokeBorder(.white, lineWidth: 2)
} }
.overlay {
Circle()
.stroke(Color.gray, lineWidth: 0.2)
}
.offset(x: -size + 5, y: size - 5) .offset(x: -size + 5, y: size - 5)
.offset(x: max(proxy.size.width * saturation, size - 10), y: min(proxy.size.height * -brightness, -size + 10)) .offset(x: max(proxy.size.width * saturation, size - 10), y: min(proxy.size.height * -brightness, -size + 10))
} }
@@ -109,16 +122,25 @@ struct ColorPicker: View {
) )
Color(hue: hue, saturation: 1, brightness: 1) Color(hue: hue, saturation: 1, brightness: 1)
.frame(width: size, height: size) .frame(width: size, height: size)
.clipShape(Circle())
.padding(1)
.overlay { .overlay {
Circle() Circle()
.strokeBorder(.white, lineWidth: 2) .strokeBorder(.white, lineWidth: 2)
} }
.clipShape(Circle()) .overlay {
Circle()
.stroke(Color.gray, lineWidth: 0.2)
}
.offset(x: -size) .offset(x: -size)
.offset(x: max(size, proxy.size.width * hue)) .offset(x: max(size, proxy.size.width * hue - 2))
} }
.frame(width: proxy.size.width, height: proxy.size.height) .frame(width: proxy.size.width, height: proxy.size.height)
.clipShape(Capsule()) .clipShape(Capsule())
.overlay {
Capsule()
.stroke(Color.gray, lineWidth: 0.2)
}
.gesture( .gesture(
DragGesture(minimumDistance: 0) DragGesture(minimumDistance: 0)
.onChanged { value in .onChanged { value in
@@ -153,16 +175,25 @@ struct ColorPicker: View {
} }
color color
.frame(width: size, height: size) .frame(width: size, height: size)
.clipShape(Circle())
.padding(1)
.overlay { .overlay {
Circle() Circle()
.strokeBorder(.white, lineWidth: 2) .strokeBorder(.white, lineWidth: 2)
} }
.clipShape(Circle()) .overlay {
Circle()
.stroke(Color.gray, lineWidth: 0.2)
}
.offset(x: -size) .offset(x: -size)
.offset(x: max(size, proxy.size.width * alpha)) .offset(x: max(size, proxy.size.width * alpha - 2))
} }
.frame(width: proxy.size.width, height: proxy.size.height) .frame(width: proxy.size.width, height: proxy.size.height)
.clipShape(Capsule()) .clipShape(Capsule())
.overlay {
Capsule()
.stroke(Color.gray, lineWidth: 0.2)
}
.gesture( .gesture(
DragGesture(minimumDistance: 0) DragGesture(minimumDistance: 0)
.onChanged { value in .onChanged { value in
Memola/Features/Memo/PenDock/PenDockView.swift
+4
View File
@@ -35,6 +35,10 @@ struct PenDockView: View {
.clipShape(Triangle()) .clipShape(Triangle())
} }
.clipShape(Capsule()) .clipShape(Capsule())
.overlay {
Capsule()
.stroke(Color.gray, lineWidth: 0.2)
}
.frame(height: 20) .frame(height: 20)
.drawingGroup() .drawingGroup()
} }