ISSUE-110 | Sync arrow position with Digital Crown orientation (#111)

FreeAPSWatch WatchKit Extension/Views/BolusConfirmationView.swift

@@ -4,6 +4,7 @@ import SwiftUI
 struct BolusConfirmationView: View {
     @EnvironmentObject var state: WatchStateModel
 
+    @State var isCrownLeftOriented = WKInterfaceDevice.current().crownOrientation == .left
     @State var crownProgress: CGFloat = 100.0
     @State var progress: CGFloat = 0
 
@@ -16,54 +17,57 @@ struct BolusConfirmationView: View {
     var body: some View {
         VStack {
             GeometryReader { geo in
-                ZStack(alignment: .top) {
-                    RoundedRectangle(cornerRadius: elementSize / 2, style: .circular)
-                        .fill(.secondary)
-                        .frame(width: elementSize, height: geo.size.height)
-                        .opacity(0.2)
+                HStack(alignment: .top) {
+                    Spacer().frame(width: elementSize / 2)
+                    ZStack(alignment: .top) {
+                        RoundedRectangle(cornerRadius: elementSize / 2, style: .circular)
+                            .fill(.secondary)
+                            .frame(width: elementSize, height: geo.size.height)
+                            .opacity(0.2)
 
-                    RoundedRectangle(cornerRadius: elementSize / 2, style: .circular)
-                        .fill(Color.insulin)
-                        .frame(width: elementSize, height: elementSize + (geo.size.height - elementSize) * progress / 100)
-                        .opacity(0.2)
+                        RoundedRectangle(cornerRadius: elementSize / 2, style: .circular)
+                            .fill(Color.insulin)
+                            .frame(width: elementSize, height: elementSize + (geo.size.height - elementSize) * progress / 100)
+                            .opacity(0.2)
 
-                    Image(systemName: "arrow.right")
-                        .resizable()
-                        .frame(width: elementSize / 2, height: elementSize / 2)
-                        .foregroundColor(.primary)
-                        .position(x: geo.size.width - elementSize / 4, y: elementSize / 2)
-                        .transition(.opacity)
-
-                    if done {
-                        Image(systemName: "checkmark.circle.fill")
+                        Image(systemName: done == true ? "checkmark.circle.fill" : "arrow.down.circle.fill")
                             .resizable()
-                            .foregroundColor(.loopGreen)
+                            .foregroundColor(done == true ? .loopGreen : .insulin)
                             .frame(width: elementSize, height: elementSize)
-                            .position(
-                                x: geo.size.width / 2,
-                                y: elementSize / 2 + ((geo.size.height - elementSize) * progress / 100)
-                            )
+                            .offset(y: (geo.size.height - elementSize) * progress / 100)
+
+                    }.frame(maxWidth: .infinity, alignment: .center)
+                    if isCrownLeftOriented {
+                        Spacer().frame(width: elementSize / 2)
                     } else {
-                        Image(systemName: "arrow.down.circle.fill")
+                        Image(systemName: "arrow.down")
                             .resizable()
-                            .foregroundColor(.insulin)
-                            .frame(width: elementSize, height: elementSize)
-                            .position(
-                                x: geo.size.width / 2,
-                                y: elementSize / 2 + ((geo.size.height - elementSize) * progress / 100)
-                            )
+                            .frame(width: elementSize / 2, height: elementSize / 2)
+                            .foregroundColor(.primary)
+                            .transition(.opacity)
                     }
-                }
-                .frame(maxWidth: .infinity, maxHeight: .infinity)
+                }.frame(maxWidth: .infinity, maxHeight: .infinity)
             }
             .padding()
-            Button {
-                WKInterfaceDevice.current().play(.click)
-                state.pendingBolus = nil
-                state.isConfirmationBolusViewActive = false
-            }
-            label: {
-                Text("Cancel")
+            HStack(spacing: 16) {
+                if isCrownLeftOriented {
+                    Image(systemName: "arrow.down")
+                        .resizable()
+                        .frame(width: elementSize / 2, height: elementSize / 2)
+                        .foregroundColor(.primary)
+                        .transition(.opacity)
+                }
+                Button {
+                    WKInterfaceDevice.current().play(.click)
+                    state.pendingBolus = nil
+                    state.isConfirmationBolusViewActive = false
+                }
+                label: {
+                    Text("Cancel")
+                }
+                if isCrownLeftOriented {
+                    Spacer().frame(width: elementSize / 2)
+                }
             }
         }
         .focusable(true)