improve background of glucose bubble and some padding adjustments...

FreeAPS/Sources/Modules/Home/View/Header/CurrentGlucoseView.swift

@@ -9,6 +9,8 @@ struct CurrentGlucoseView: View {
     @Binding var lowGlucose: Decimal
     @Binding var highGlucose: Decimal
 
+    @State private var rotationDegrees: Double = 0.0
+
     private var glucoseFormatter: NumberFormatter {
         let formatter = NumberFormatter()
         formatter.numberStyle = .decimal
@@ -45,73 +47,101 @@ struct CurrentGlucoseView: View {
     }
 
     var body: some View {
-        VStack(alignment: .center) {
-            HStack {
-                Text(
-                    (recentGlucose?.glucose ?? 100) == 400 ? "HIGH" : recentGlucose?.glucose
-                        .map {
-                            glucoseFormatter
-                                .string(from: Double(units == .mmolL ? $0.asMmolL : Decimal($0)) as NSNumber)! }
-                        ?? "--"
-                )
-                .font(.system(size: 40, weight: .bold))
-                .foregroundColor(alarm == nil ? colorOfGlucose : .loopRed)
-
-//                image
-            }
-            HStack {
-                let minutesAgo = -1 * (recentGlucose?.dateString.timeIntervalSinceNow ?? 0) / 60
-                let text = timaAgoFormatter.string(for: Double(minutesAgo)) ?? ""
-                Text(
-                    minutesAgo <= 1 ? "< 1 " + NSLocalizedString("min", comment: "Short form for minutes") : (
-                        text + " " +
-                            NSLocalizedString("min", comment: "Short form for minutes") + " "
-                    )
-                )
-                .font(.caption2).foregroundColor(.secondary)
-
-                Text(
-                    delta
-                        .map {
-                            deltaFormatter.string(from: Double(units == .mmolL ? $0.asMmolL : Decimal($0)) as NSNumber)!
-                        } ?? "--"
-                )
-                .font(.caption2).foregroundColor(.secondary)
-            }.frame(alignment: .top)
-        }
-        .overlay(
+        ZStack {
             TrendShape(color: colorOfGlucose)
-        )
-    }
+                .rotationEffect(.degrees(rotationDegrees))
+
+            VStack(alignment: .center) {
+                HStack {
+                    Text(
+                        (recentGlucose?.glucose ?? 100) == 400 ? "HIGH" : recentGlucose?.glucose
+                            .map {
+                                glucoseFormatter
+                                    .string(from: Double(units == .mmolL ? $0.asMmolL : Decimal($0)) as NSNumber)! }
+                            ?? "--"
+                    )
+                    .font(.system(size: 40, weight: .bold))
+                    .foregroundColor(alarm == nil ? colorOfGlucose : .loopRed)
+
+                    //                image
+                }
+                HStack {
+                    let minutesAgo = -1 * (recentGlucose?.dateString.timeIntervalSinceNow ?? 0) / 60
+                    let text = timaAgoFormatter.string(for: Double(minutesAgo)) ?? ""
+                    Text(
+                        minutesAgo <= 1 ? "< 1 " + NSLocalizedString("min", comment: "Short form for minutes") : (
+                            text + " " +
+                                NSLocalizedString("min", comment: "Short form for minutes") + " "
+                        )
+                    )
+                    .font(.caption2).foregroundColor(.secondary)
 
-    var image: Image {
-        guard let direction = recentGlucose?.direction else {
-            return Image(systemName: "arrow.left.and.right")
+                    Text(
+                        delta
+                            .map {
+                                deltaFormatter.string(from: Double(units == .mmolL ? $0.asMmolL : Decimal($0)) as NSNumber)!
+                            } ?? "--"
+                    )
+                    .font(.caption2).foregroundColor(.secondary)
+                }.frame(alignment: .top)
+            }
         }
-
-        switch direction {
-        case .doubleUp,
-             .singleUp,
-             .tripleUp:
-            return Image(systemName: "arrow.up")
-        case .fortyFiveUp:
-            return Image(systemName: "arrow.up.right")
-        case .flat:
-            return Image(systemName: "arrow.forward")
-        case .fortyFiveDown:
-            return Image(systemName: "arrow.down.forward")
-        case .doubleDown,
-             .singleDown,
-             .tripleDown:
-            return Image(systemName: "arrow.down")
-
-        case .none,
-             .notComputable,
-             .rateOutOfRange:
-            return Image(systemName: "arrow.left.and.right")
+        .onChange(of: recentGlucose?.direction) { newDirection in
+            withAnimation {
+                switch newDirection {
+                case .doubleUp,
+                     .singleUp,
+                     .tripleUp:
+                    rotationDegrees = 0
+                case .fortyFiveUp:
+                    rotationDegrees = 22.5
+                case .flat:
+                    rotationDegrees = 45
+                case .fortyFiveDown:
+                    rotationDegrees = 67.5
+                case .doubleDown,
+                     .singleDown,
+                     .tripleDown:
+                    rotationDegrees = 90
+                case .none,
+                     .notComputable,
+                     .rateOutOfRange:
+                    rotationDegrees = 45
+                @unknown default:
+                    rotationDegrees = 45
+                }
+            }
         }
     }
 
+//    var image: Image {
+//        guard let direction = recentGlucose?.direction else {
+//            return Image(systemName: "arrow.left.and.right")
+//        }
+//
+//        switch direction {
+//        case .doubleUp,
+//             .singleUp,
+//             .tripleUp:
+//            return Image(systemName: "arrow.up")
+//        case .fortyFiveUp:
+//            return Image(systemName: "arrow.up.right")
+//        case .flat:
+//            return Image(systemName: "arrow.forward")
+//        case .fortyFiveDown:
+//            return Image(systemName: "arrow.down.forward")
+//        case .doubleDown,
+//             .singleDown,
+//             .tripleDown:
+//            return Image(systemName: "arrow.down")
+//
+//        case .none,
+//             .notComputable,
+//             .rateOutOfRange:
+//            return Image(systemName: "arrow.left.and.right")
+//        }
+//    }
+
     var colorOfGlucose: Color {
         let whichGlucose = recentGlucose?.glucose ?? 0
 
@@ -155,12 +185,17 @@ struct TrendShape: View {
 }
 
 struct CircleShape: View {
+    @Environment(\.colorScheme) var colorScheme
+
     let color: Color
 
     var body: some View {
+        let colorBackground: Color = colorScheme == .dark ? .gray.opacity(0.1) : .white
+
         Circle()
             .stroke(color, lineWidth: 10)
-            .frame(width: 100, height: 100)
+            .background(Circle().fill(colorBackground))
+            .frame(width: 110, height: 110)
             .offset(x: 13)
     }
 }

FreeAPS/Sources/Modules/Home/View/HomeRootView.swift

@@ -119,7 +119,7 @@ extension Home {
 //                    .padding(.top, 10 + geo.safeAreaInsets.top)
 //                    .padding(.bottom, 10)
                 )
-                .frame(height: UIScreen.main.bounds.height / 12)
+                .frame(height: UIScreen.main.bounds.height / 13)
                 .padding([.leading, .trailing], 10)
         }
 
@@ -531,7 +531,7 @@ extension Home {
             ZStack {
                 Rectangle()
                     .fill(colourRectangle)
-                    .frame(height: UIScreen.main.bounds.height / 12)
+                    .frame(height: UIScreen.main.bounds.height / 13)
                     .cornerRadius(15)
                     .shadow(radius: 3)
                     .padding([.leading, .trailing], 10)
@@ -650,7 +650,7 @@ extension Home {
                         .padding(.top, 55)
 
                     glucoseView
-                        .padding(.vertical, 35)
+                        .padding(.vertical, 15)
 
                     infoPanel
 
@@ -659,7 +659,7 @@ extension Home {
                         .shadow(radius: 3)
                         .overlay(mainChart)
                         .padding([.leading, .trailing], 10)
-                        .frame(height: UIScreen.main.bounds.height / 2)
+                        .frame(height: UIScreen.main.bounds.height / 2.2) // with 2 chart was still too big
 
                     pickerPanel(geo)
                         .padding(.top, 5)
@@ -670,7 +670,7 @@ extension Home {
 //                        .padding(.top, 2)
 
                     bottomPanel(geo)
-                        .padding(.top, 2)
+                        .padding(.top, 20)
                 }
                 .edgesIgnoringSafeArea(.vertical)
             }