From da90b53057fb2a3b50b1e1edfcb532bca705ebcc Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 6 Apr 2023 23:35:55 +0800
Subject: [PATCH] Get slider closer to design

---
 .../Sources/Views/CustomSlider.swift          | 23 +++++++++++++++----
 .../Views/FontSizeAdjustmentPopoverView.swift | 22 +++++++++++-------
 2 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/apple/OmnivoreKit/Sources/Views/CustomSlider.swift b/apple/OmnivoreKit/Sources/Views/CustomSlider.swift
index cda8d2b29..6aaf688c6 100644
--- a/apple/OmnivoreKit/Sources/Views/CustomSlider.swift
+++ b/apple/OmnivoreKit/Sources/Views/CustomSlider.swift
@@ -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)
+        }
       }
     }
   }
diff --git a/apple/OmnivoreKit/Sources/Views/FontSizeAdjustmentPopoverView.swift b/apple/OmnivoreKit/Sources/Views/FontSizeAdjustmentPopoverView.swift
index 4e8fafb57..07a6f6b0c 100644
--- a/apple/OmnivoreKit/Sources/Views/FontSizeAdjustmentPopoverView.swift
+++ b/apple/OmnivoreKit/Sources/Views/FontSizeAdjustmentPopoverView.swift
@@ -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) })