Update SettingsCustomFrameView layout

pqrs-org · Jan 21, 2025 · 62862aa · 62862aa
1 parent f9c77e7
commit 62862aa
Showing 1 changed file with 83 additions and 69 deletions.
diff --git a/src/ShowyEdge/swift/Views/Settings/SettingsCustomFrameView.swift b/src/ShowyEdge/swift/Views/Settings/SettingsCustomFrameView.swift
@@ -7,100 +7,114 @@ struct SettingsCustomFrameView: View {
     VStack(alignment: .leading, spacing: 25.0) {
       GroupBox(label: Text("Custom Frame")) {
         VStack(alignment: .leading, spacing: 25.0) {
-          HStack {
-            Toggle(isOn: $userSettings.useCustomFrame) {
-              Text("Use custom frame (Default: off)")
-            }
-            .switchToggleStyle()
-
-            Spacer()
+          Toggle(isOn: $userSettings.useCustomFrame) {
+            Text("Use custom frame (Default: off)")
           }
+          .switchToggleStyle()
 
           customFrameSettings
             .disabled(!userSettings.useCustomFrame)
-        }.padding()
+        }
+        .padding()
+        .frame(maxWidth: .infinity, alignment: .leading)
       }
-
-      Spacer()
-    }.padding()
+    }
   }
 
   var customFrameSettings: some View {
-    Group {
-      GroupBox(label: Text("Size")) {
-        HStack {
-          Text("Width")
-
-          DoubleTextField(
-            value: $userSettings.customFrameWidth,
-            range: 0...10000,
-            step: 10,
-            maximumFractionDigits: 1,
-            width: 50)
-
-          CustomFrameUnitPicker(value: $userSettings.customFrameWidthUnit)
-
-          Text("Height").padding(.leading, 40)
-
-          DoubleTextField(
-            value: $userSettings.customFrameHeight,
-            range: 0...10000,
-            step: 10,
-            maximumFractionDigits: 1,
-            width: 50)
-
-          CustomFrameUnitPicker(value: $userSettings.customFrameHeightUnit)
+    VStack(alignment: .leading, spacing: 15.0) {
+      HStack(alignment: .top) {
+        GroupBox(label: Text("Size")) {
+          Grid(alignment: .leadingFirstTextBaseline) {
+            GridRow {
+              Text("Width:")
+                .gridColumnAlignment(.trailing)
+
+              DoubleTextField(
+                value: $userSettings.customFrameWidth,
+                range: 0...10000,
+                step: 10,
+                maximumFractionDigits: 1,
+                width: 50)
+
+              CustomFrameUnitPicker(value: $userSettings.customFrameWidthUnit)
+            }
 
-          Spacer()
-        }.padding()
-      }
+            GridRow {
+              Text("Height:")
 
-      GroupBox(label: Text("Origin")) {
-        VStack(alignment: .leading, spacing: 10.0) {
-          Picker(selection: $userSettings.customFrameOrigin, label: Text("")) {
-            Text("Upper-Left").tag(0)
-            Text("Lower-Left").tag(1)
-            Text("Upper-Right").tag(2)
-            Text("Lower-Right").tag(3)
-          }.frame(width: 200.0)
+              DoubleTextField(
+                value: $userSettings.customFrameHeight,
+                range: 0...10000,
+                step: 10,
+                maximumFractionDigits: 1,
+                width: 50)
 
-          HStack {
-            Text("Margin-X")
+              CustomFrameUnitPicker(value: $userSettings.customFrameHeightUnit)
+            }
+          }
+          .padding()
+        }
+
+        GroupBox(label: Text("Origin")) {
+          Grid(alignment: .leadingFirstTextBaseline) {
+            GridRow {
+              Text("Position:")
+                .gridColumnAlignment(.trailing)
+
+              Picker(selection: $userSettings.customFrameOrigin, label: Text("Position:")) {
+                Text("Upper-Left").tag(0)
+                Text("Lower-Left").tag(1)
+                Text("Upper-Right").tag(2)
+                Text("Lower-Right").tag(3)
+              }
+              .labelsHidden()
+            }
 
-            DoubleTextField(
-              value: $userSettings.customFrameLeft,
-              range: -10000...10000,
-              step: 100,
-              maximumFractionDigits: 1,
-              width: 50)
+            GridRow {
+              Text("X:")
 
-            Text("pt")
+              HStack {
+                DoubleTextField(
+                  value: $userSettings.customFrameLeft,
+                  range: -10000...10000,
+                  step: 100,
+                  maximumFractionDigits: 1,
+                  width: 50)
 
-            Text("Margin-Y").padding(.leading, 40)
+                Text("pt")
+              }
+            }
 
-            DoubleTextField(
-              value: $userSettings.customFrameTop,
-              range: -10000...10000,
-              step: 100,
-              maximumFractionDigits: 1,
-              width: 50)
+            GridRow {
+              Text("Y:")
 
-            Text("pt")
+              HStack {
+                DoubleTextField(
+                  value: $userSettings.customFrameTop,
+                  range: -10000...10000,
+                  step: 100,
+                  maximumFractionDigits: 1,
+                  width: 50)
 
-            Spacer()
+                Text("pt")
+              }
+            }
           }
-        }.padding()
+          .padding()
+        }
       }
+      .frame(maxWidth: .infinity, alignment: .leading)
 
       GroupBox(label: Text("Shape")) {
-        HStack(alignment: .top, spacing: 10.0) {
+        VStack {
           Toggle(isOn: $userSettings.customFramePillShape) {
             Text("Use pill shape (Default: off)")
           }
           .switchToggleStyle()
-
-          Spacer()
-        }.padding()
+        }
+        .padding()
+        .frame(maxWidth: .infinity, alignment: .leading)
       }
     }
   }