✨ #207 Put description beneath slider

MrKai77 · Feb 16, 2024 · df077df · df077df
1 parent 1776f5c
commit df077df
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 52 deletions.
diff --git a/Loop/Settings/Padding/PaddingConfigurationView.swift b/Loop/Settings/Padding/PaddingConfigurationView.swift
@@ -37,20 +37,21 @@ struct PaddingConfigurationView: View {
 
                 if paddingModel.configureScreenPadding {
                     Section {
-                        CrispValueAdjuster("Window Gaps", value: $paddingModel.window, postfix: "px")
+                        CrispValueAdjuster("Window Gaps", value: $paddingModel.window, sliderRange: 0...100, postfix: "px")
                         CrispValueAdjuster(
                             "External Bar",
                             description: "Use this if you are using a custom menubar.",
                             value: $paddingModel.externalBar,
+                            sliderRange: 0...100,
                             postfix: "px"
                         )
                     }
 
                     Section("Screen Padding") {
-                        CrispValueAdjuster("Top", value: $paddingModel.top, postfix: "px")
-                        CrispValueAdjuster("Bottom", value: $paddingModel.bottom, postfix: "px")
-                        CrispValueAdjuster("Right", value: $paddingModel.right, postfix: "px")
-                        CrispValueAdjuster("Left", value: $paddingModel.left, postfix: "px")
+                        CrispValueAdjuster("Top", value: $paddingModel.top, sliderRange: 0...100, postfix: "px")
+                        CrispValueAdjuster("Bottom", value: $paddingModel.bottom, sliderRange: 0...100, postfix: "px")
+                        CrispValueAdjuster("Right", value: $paddingModel.right, sliderRange: 0...100, postfix: "px")
+                        CrispValueAdjuster("Left", value: $paddingModel.left, sliderRange: 0...100, postfix: "px")
                     }
                 } else {
                     CrispValueAdjuster(
@@ -67,6 +68,7 @@ struct PaddingConfigurationView: View {
                                 paddingModel.left = $0
                             }
                         ),
+                        sliderRange: 0...100,
                         postfix: "px"
                     )
                 }

diff --git a/Loop/Utilities/CrispValueAdjuster.swift b/Loop/Utilities/CrispValueAdjuster.swift
@@ -13,73 +13,80 @@ struct CrispValueAdjuster<V>: View where V: Strideable, V: BinaryFloatingPoint,
     let title: String
     let description: String?
     @Binding var value: V
+    let sliderRange: ClosedRange<V>
     let postfix: String?
 
     @State var isPopoverShown: Bool = false
 
-    init(_ title: String, description: String? = nil, value: Binding<V>, postfix: String? = nil) {
+    init(
+        _ title: String,
+        description: String? = nil,
+        value: Binding<V>,
+        sliderRange: ClosedRange<V>,
+        postfix: String? = nil
+    ) {
         self.title = title
         self.description = description
         self._value = value
+        self.sliderRange = sliderRange
         self.postfix = postfix
     }
 
     let stepperWidth: CGFloat = 150
-    let stepperRange: ClosedRange<V> = 0...100
 
     var popoverXOffset: CGFloat {
-        4 + ((stepperWidth - 8) * (CGFloat(value.clamped(to: stepperRange)) / CGFloat(stepperRange.upperBound)))
+        4 + ((stepperWidth - 8) * (CGFloat(value.clamped(to: sliderRange)) / CGFloat(sliderRange.upperBound)))
     }
 
     var body: some View {
-        HStack {
-            VStack(alignment: .leading) {
+        VStack(alignment: .leading) {
+            HStack {
                 Text(title)
 
-                if let description = description {
-                    Text(description)
-                        .font(.caption)
-                        .foregroundStyle(.secondary)
-                }
-            }
-
-            Spacer()
-
-            HStack {
-                stepperMinText
-
-                Slider(
-                    value: $value,
-                    in: stepperRange,
-                    step: V.Stride(stepperRange.upperBound / 10),
-                    label: { EmptyView() },
-                    onEditingChanged: { self.isPopoverShown = !$0 }
-                )
-                .labelsHidden()
-                .frame(width: stepperWidth)
-                .popover(
-                    isPresented: $isPopoverShown,
-                    attachmentAnchor: .rect(
-                        .rect(
-                            CGRect(
-                                // This compensates for the small spacing within the slider
-                                x: popoverXOffset,
-                                y: 15,
-                                width: 0,
-                                height: 0
+                Spacer()
+
+                HStack {
+                    stepperMinText
+
+                    Slider(
+                        value: $value,
+                        in: sliderRange,
+                        step: V.Stride(sliderRange.upperBound / 10),
+                        label: { EmptyView() },
+                        onEditingChanged: { self.isPopoverShown = !$0 }
+                    )
+                    .labelsHidden()
+                    .frame(width: stepperWidth)
+                    .popover(
+                        isPresented: $isPopoverShown,
+                        attachmentAnchor: .rect(
+                            .rect(
+                                CGRect(
+                                    // This compensates for the small spacing within the slider
+                                    x: popoverXOffset,
+                                    y: 15,
+                                    width: 0,
+                                    height: 0
+                                )
                             )
-                        )
-                    ),
-                    arrowEdge: .bottom
-                ) {
-                    stepperView
-                        .padding(10)
-                        .fixedSize()
+                        ),
+                        arrowEdge: .bottom
+                    ) {
+                        stepperView
+                            .padding(10)
+                            .fixedSize()
+                    }
+
+                    stepperMaxText
                 }
+                .fixedSize()
+            }
 
-                stepperMaxText
+            if let description = description {
+                Text(description)
+                    .font(.caption)
+                    .foregroundStyle(.secondary)
             }
-            .fixedSize()
         }
     }
 
@@ -123,15 +130,15 @@ struct CrispValueAdjuster<V>: View where V: Strideable, V: BinaryFloatingPoint,
 
     @ViewBuilder
     var stepperMinText: some View {
-        Text("\(stepperRange.lowerBound.formatted())\(postfix == nil ? "" : " \(postfix!)")")
+        Text("\(sliderRange.lowerBound.formatted())\(postfix == nil ? "" : " \(postfix!)")")
             .font(.caption2)
             .foregroundStyle(.secondary)
             .padding(.trailing, -4)
     }
 
     @ViewBuilder
     var stepperMaxText: some View {
-        Text("\(stepperRange.upperBound.formatted())\(postfix == nil ? "" : " \(postfix!)")")
+        Text("\(sliderRange.upperBound.formatted())\(postfix == nil ? "" : " \(postfix!)")")
             .font(.caption2)
             .foregroundStyle(.secondary)
             .padding(.leading, -4)