Get slider closer to design
This commit is contained in:
@ -12,6 +12,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
class CustomSliderView: UISlider {
|
||||
@IBInspectable var trackLineHeight: CGFloat = 2
|
||||
|
||||
override func trackRect(forBounds bound: CGRect) -> CGRect {
|
||||
CGRect(origin: CGPoint(x: bound.origin.x, y: bound.midY),
|
||||
size: CGSize(width: bound.width, height: trackLineHeight))
|
||||
}
|
||||
}
|
||||
|
||||
struct CustomSlider: UIViewRepresentable {
|
||||
typealias UIViewType = UISlider
|
||||
|
||||
@ -33,11 +42,12 @@
|
||||
}
|
||||
|
||||
func makeUIView(context: Context) -> UISlider {
|
||||
let slider = UISlider(frame: .zero)
|
||||
let slider = CustomSliderView(frame: .zero)
|
||||
slider.trackLineHeight = 2
|
||||
slider.minimumValue = asFloat(minValue)
|
||||
slider.maximumValue = asFloat(maxValue)
|
||||
|
||||
let tintColor = UIColor(Color.appCtaYellow)
|
||||
let tintColor = UIColor(Color(hex: "#969594") ?? Color.appGrayBorder)
|
||||
let thumbImage = UIImage(systemName: "circle.fill",
|
||||
withConfiguration: UIImage.SymbolConfiguration(scale: .medium))?
|
||||
.withTintColor(tintColor)
|
||||
@ -46,7 +56,7 @@
|
||||
slider.setThumbImage(thumbImage, for: .selected)
|
||||
slider.setThumbImage(thumbImage, for: .normal)
|
||||
|
||||
slider.minimumTrackTintColor = tintColor
|
||||
// slider.minimumTrackTintColor = tintColor
|
||||
slider.addTarget(context.coordinator,
|
||||
action: #selector(Coordinator.valueChanged(_:)),
|
||||
for: .valueChanged)
|
||||
@ -75,8 +85,11 @@
|
||||
}
|
||||
|
||||
@objc func valueChanged(_ sender: UISlider) {
|
||||
value.wrappedValue = Int(sender.value)
|
||||
onEditingChanged(sender.isTracking)
|
||||
let oldValue = value.wrappedValue
|
||||
value.wrappedValue = Int(round(sender.value))
|
||||
if oldValue != value.wrappedValue {
|
||||
onEditingChanged(sender.isTracking)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -192,15 +192,19 @@ public enum WebFont: String, CaseIterable {
|
||||
Button(action: {
|
||||
storedFontSize = min(storedFontSize + 2, 28)
|
||||
}, label: { Image(systemName: "textformat.size.smaller") })
|
||||
CustomSlider(value: $storedFontSize, minValue: 10, maxValue: 28) { changed in
|
||||
print("changed font size: ", changed)
|
||||
updateReaderPreferences()
|
||||
.frame(width: 25, height: 25, alignment: .center)
|
||||
CustomSlider(value: $storedFontSize, minValue: 10, maxValue: 28) { _ in
|
||||
if storedFontSize % 2 == 0 {
|
||||
updateReaderPreferences()
|
||||
}
|
||||
}
|
||||
.padding(.horizontal, 10)
|
||||
.tint(Color(hex: "#D9D9D9"))
|
||||
|
||||
Button(action: {
|
||||
storedFontSize = max(storedFontSize - 2, 10)
|
||||
}, label: { Image(systemName: "textformat.size.larger") })
|
||||
.frame(width: 25, height: 25, alignment: .center)
|
||||
}
|
||||
}
|
||||
|
||||
@ -210,10 +214,10 @@ public enum WebFont: String, CaseIterable {
|
||||
storedMaxWidthPercentage = min(storedMaxWidthPercentage + 10, 100)
|
||||
}, label: { Image("margin-smaller", bundle: .module) })
|
||||
.frame(width: 25, height: 25, alignment: .center)
|
||||
CustomSlider(value: $storedMaxWidthPercentage, minValue: 40, maxValue: 100) { changed in
|
||||
print("changed storedMaxWidthPercentage: ", changed)
|
||||
CustomSlider(value: $storedMaxWidthPercentage, minValue: 40, maxValue: 100) { _ in
|
||||
updateReaderPreferences()
|
||||
}
|
||||
.padding(.horizontal, 10)
|
||||
.tint(Color(hex: "#D9D9D9"))
|
||||
|
||||
Button(action: {
|
||||
@ -232,11 +236,12 @@ public enum WebFont: String, CaseIterable {
|
||||
CustomSlider(value: $storedLineSpacing, minValue: 100, maxValue: 300) { _ in
|
||||
updateReaderPreferences()
|
||||
}
|
||||
.padding(.horizontal, 10)
|
||||
.tint(Color(hex: "#D9D9D9"))
|
||||
|
||||
Button(action: {
|
||||
storedLineSpacing = max(storedLineSpacing - 25, 100)
|
||||
}, label: { Image("lineheight-smaller", bundle: .module) })
|
||||
}, label: { Image("lineheight-larger", bundle: .module) })
|
||||
.frame(width: 25, height: 25, alignment: .center)
|
||||
}
|
||||
}
|
||||
@ -247,10 +252,11 @@ public enum WebFont: String, CaseIterable {
|
||||
storedFontSize = min(storedFontSize + 2, 28)
|
||||
}, label: { Image("brightness-lower", bundle: .module) })
|
||||
.frame(width: 25, height: 25, alignment: .center)
|
||||
CustomSlider(value: $storedFontSize, minValue: 10, maxValue: 28) { changed in
|
||||
print("changed font size: ", changed)
|
||||
CustomSlider(value: $storedFontSize, minValue: 10, maxValue: 28) { _ in
|
||||
updateReaderPreferences()
|
||||
}
|
||||
.padding(.horizontal, 10)
|
||||
|
||||
Button(action: {
|
||||
storedFontSize = max(storedFontSize - 2, 10)
|
||||
}, label: { Image("brightness-higher", bundle: .module) })
|
||||
|
||||
Reference in New Issue
Block a user