Skip to content

Improve checkbox #86

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mikhailChelbaev merged 4 commits into from
Apr 18, 2025
Merged

Improve checkbox #86

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bc5e1b3
change checkbox and checkmark sizes
mikhailChelbaev Apr 17, 2025
a799001
change checkmark line width
mikhailChelbaev Apr 17, 2025
4724c84
Merge branch 'dev' into improve-checkbox
mikhailChelbaev Apr 17, 2025
0e99fb5
Merge branch 'dev' into improve-checkbox
mikhailChelbaev Apr 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 21 additions & 5 deletions Sources/ComponentsKit/Components/Checkbox/Models/CheckboxVM.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,19 +60,19 @@ extension CheckboxVM {
case .small:
return 1.5
case .medium:
return 2.0
return 1.75
case .large:
return 2.5
return 2.0
}
}
var checkboxSide: CGFloat {
switch self.size {
case .small:
return 16.0
case .medium:
return 20.0
case .large:
case .medium:
return 24.0
case .large:
return 28.0
}
}
var checkboxCornerRadius: CGFloat {
Expand Down Expand Up @@ -105,6 +105,22 @@ extension CheckboxVM {
return .lgBody
}
}
var checkmarkPath: CGPath {
let path = UIBezierPath()
path.move(to: .init(
x: 7 / 24 * self.checkboxSide,
y: 12 / 24 * self.checkboxSide
))
path.addLine(to: .init(
x: 11 / 24 * self.checkboxSide,
y: 16 / 24 * self.checkboxSide
))
path.addLine(to: .init(
x: 17 / 24 * self.checkboxSide,
y: 8 / 24 * self.checkboxSide
))
return path.cgPath
}
}

// MARK: UIKit Helpers
Expand Down
27 changes: 7 additions & 20 deletions Sources/ComponentsKit/Components/Checkbox/SUCheckbox.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,27 +45,14 @@ public struct SUCheckbox: View {
value: self.isSelected
)

Path { path in
path.move(to: .init(
x: self.model.checkboxSide / 4,
y: 11 / 24 * self.model.checkboxSide
Path(self.model.checkmarkPath)
.trim(from: 0, to: self.checkmarkStroke)
.stroke(style: StrokeStyle(
lineWidth: self.model.checkmarkLineWidth,
lineCap: .round,
lineJoin: .round
))
path.addLine(to: .init(
x: 11 / 24 * self.model.checkboxSide,
y: 17 / 24 * self.model.checkboxSide
))
path.addLine(to: .init(
x: 3 / 4 * self.model.checkboxSide,
y: 7 / 24 * self.model.checkboxSide
))
}
.trim(from: 0, to: self.checkmarkStroke)
.stroke(style: StrokeStyle(
lineWidth: self.model.checkmarkLineWidth,
lineCap: .round,
lineJoin: .round
))
.foregroundStyle(self.model.foregroundColor.color)
.foregroundStyle(self.model.foregroundColor.color)
}
.overlay {
RoundedRectangle(cornerRadius: self.model.checkboxCornerRadius)
Expand Down
17 changes: 1 addition & 16 deletions Sources/ComponentsKit/Components/Checkbox/UKCheckbox.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,22 +96,7 @@ open class UKCheckbox: UIView, UKComponent {
self.checkmarkLayer.lineCap = .round
self.checkmarkLayer.lineJoin = .round
self.checkmarkLayer.strokeEnd = self.isSelected ? 1.0 : 0.0

let checkmarkPath = UIBezierPath()
checkmarkPath.move(to: .init(
x: self.model.checkboxSide / 4,
y: 11 / 24 * self.model.checkboxSide
))
checkmarkPath.addLine(to: .init(
x: 11 / 24 * self.model.checkboxSide,
y: 17 / 24 * self.model.checkboxSide
))
checkmarkPath.addLine(to: .init(
x: 3 / 4 * self.model.checkboxSide,
y: 7 / 24 * self.model.checkboxSide
))

self.checkmarkLayer.path = checkmarkPath.cgPath
self.checkmarkLayer.path = self.model.checkmarkPath
}

// MARK: Style
Expand Down