Optimize iPhone portrait chart typography and control... · a38e037

+31 -7

USB Meter/Views/Meter/Components/MeasurementChartView.swift

@@ -168,7 +168,10 @@ struct MeasurementChartView: View {
     }
 
     private var chartBaseFont: Font {
-        isLargeDisplay ? .callout : .footnote
+        if isIPhone && isPortraitLayout {
+            return .caption
+        }
+        return isLargeDisplay ? .callout : .footnote
     }
 
     var body: some View {
@@ -339,6 +342,7 @@ struct MeasurementChartView: View {
         currentSeries: SeriesData
     ) -> some View {
         let condensedLayout = compactLayout || verticalSizeClass == .compact
+        let showsCardBackground = !(isIPhone && isPortraitLayout) && !shouldFloatScaleControlsOverChart
 
         return originControlsRow(
             voltageSeries: voltageSeries,
@@ -350,12 +354,12 @@ struct MeasurementChartView: View {
         .padding(.vertical, condensedLayout ? 8 : (isLargeDisplay ? 10 : 8))
         .background(
             Capsule(style: .continuous)
-                .fill(shouldFloatScaleControlsOverChart ? Color.clear : Color.primary.opacity(0.08))
+                .fill(showsCardBackground ? Color.primary.opacity(0.08) : Color.clear)
         )
         .overlay(
             Capsule(style: .continuous)
                 .stroke(
-                    shouldFloatScaleControlsOverChart ? Color.clear : Color.secondary.opacity(0.18),
+                    showsCardBackground ? Color.secondary.opacity(0.18) : Color.clear,
                     lineWidth: 1
                 )
         )
@@ -1025,6 +1029,12 @@ struct MeasurementChartView: View {
         let labels = (1...xLabels).map {
             Date(timeIntervalSince1970: context.xAxisLabel(for: $0, of: self.xLabels)).format(as: timeFormat!)
         }
+        let axisLabelFont: Font = {
+            if isIPhone && isPortraitLayout {
+                return .caption2.weight(.semibold)
+            }
+            return (isLargeDisplay ? Font.callout : .caption).weight(.semibold)
+        }()
 
         return HStack(spacing: chartSectionSpacing) {
             Color.clear
@@ -1059,7 +1069,7 @@ struct MeasurementChartView: View {
                         )
 
                         Text(item.element)
-                            .font((isLargeDisplay ? Font.callout : .caption).weight(.semibold))
+                            .font(axisLabelFont)
                             .monospacedDigit()
                             .lineLimit(1)
                             .minimumScaleFactor(0.74)
@@ -1085,7 +1095,21 @@ struct MeasurementChartView: View {
         measurementUnit: String,
         tint: Color
     ) -> some View {
-        GeometryReader { geometry in
+        let yAxisFont: Font = {
+            if isIPhone && isPortraitLayout {
+                return .caption2.weight(.semibold)
+            }
+            return (isLargeDisplay ? Font.callout : .footnote).weight(.semibold)
+        }()
+
+        let unitFont: Font = {
+            if isIPhone && isPortraitLayout {
+                return .caption2.weight(.bold)
+            }
+            return (isLargeDisplay ? Font.footnote : .caption2).weight(.bold)
+        }()
+
+        return GeometryReader { geometry in
             let footerHeight: CGFloat = isLargeDisplay ? 30 : 24
             let topInset: CGFloat = isLargeDisplay ? 34 : 28
             let labelAreaHeight = max(geometry.size.height - footerHeight - topInset, 1)
@@ -1095,7 +1119,7 @@ struct MeasurementChartView: View {
                     let labelIndex = yLabels - row
 
                     Text("\(context.yAxisLabel(for: labelIndex, of: yLabels).format(fractionDigits: 1))")
-                        .font((isLargeDisplay ? Font.callout : .footnote).weight(.semibold))
+                        .font(yAxisFont)
                         .monospacedDigit()
                         .lineLimit(1)
                         .minimumScaleFactor(0.8)
@@ -1111,7 +1135,7 @@ struct MeasurementChartView: View {
                 }
 
                 Text(measurementUnit)
-                    .font((isLargeDisplay ? Font.footnote : .caption2).weight(.bold))
+                    .font(unitFont)
                     .foregroundColor(tint)
                     .padding(.horizontal, isLargeDisplay ? 8 : 6)
                     .padding(.vertical, isLargeDisplay ? 5 : 4)


	@@ -168,7 +168,10 @@ struct MeasurementChartView: View {
168	168	}
169	169
170	170	private var chartBaseFont: Font {
171		- isLargeDisplay ? .callout : .footnote
	171	+ if isIPhone && isPortraitLayout {
	172	+ return .caption
	173	+ }
	174	+ return isLargeDisplay ? .callout : .footnote
172	175	}
173	176
174	177	var body: some View {
	@@ -339,6 +342,7 @@ struct MeasurementChartView: View {
339	342	currentSeries: SeriesData
340	343	) -> some View {
341	344	let condensedLayout = compactLayout \|\| verticalSizeClass == .compact
	345	+ let showsCardBackground = !(isIPhone && isPortraitLayout) && !shouldFloatScaleControlsOverChart
342	346
343	347	return originControlsRow(
344	348	voltageSeries: voltageSeries,
	@@ -350,12 +354,12 @@ struct MeasurementChartView: View {
350	354	.padding(.vertical, condensedLayout ? 8 : (isLargeDisplay ? 10 : 8))
351	355	.background(
352	356	Capsule(style: .continuous)
353		- .fill(shouldFloatScaleControlsOverChart ? Color.clear : Color.primary.opacity(0.08))
	357	+ .fill(showsCardBackground ? Color.primary.opacity(0.08) : Color.clear)
354	358	)
355	359	.overlay(
356	360	Capsule(style: .continuous)
357	361	.stroke(
358		- shouldFloatScaleControlsOverChart ? Color.clear : Color.secondary.opacity(0.18),
	362	+ showsCardBackground ? Color.secondary.opacity(0.18) : Color.clear,
359	363	lineWidth: 1
360	364	)
361	365	)
	@@ -1025,6 +1029,12 @@ struct MeasurementChartView: View {
1025	1029	let labels = (1...xLabels).map {
1026	1030	Date(timeIntervalSince1970: context.xAxisLabel(for: $0, of: self.xLabels)).format(as: timeFormat!)
1027	1031	}
	1032	+ let axisLabelFont: Font = {
	1033	+ if isIPhone && isPortraitLayout {
	1034	+ return .caption2.weight(.semibold)
	1035	+ }
	1036	+ return (isLargeDisplay ? Font.callout : .caption).weight(.semibold)
	1037	+ }()
1028	1038
1029	1039	return HStack(spacing: chartSectionSpacing) {
1030	1040	Color.clear
	@@ -1059,7 +1069,7 @@ struct MeasurementChartView: View {
1059	1069	)
1060	1070
1061	1071	Text(item.element)
1062		- .font((isLargeDisplay ? Font.callout : .caption).weight(.semibold))
	1072	+ .font(axisLabelFont)
1063	1073	.monospacedDigit()
1064	1074	.lineLimit(1)
1065	1075	.minimumScaleFactor(0.74)
	@@ -1085,7 +1095,21 @@ struct MeasurementChartView: View {
1085	1095	measurementUnit: String,
1086	1096	tint: Color
1087	1097	) -> some View {
1088		- GeometryReader { geometry in
	1098	+ let yAxisFont: Font = {
	1099	+ if isIPhone && isPortraitLayout {
	1100	+ return .caption2.weight(.semibold)
	1101	+ }
	1102	+ return (isLargeDisplay ? Font.callout : .footnote).weight(.semibold)
	1103	+ }()
	1104	+
	1105	+ let unitFont: Font = {
	1106	+ if isIPhone && isPortraitLayout {
	1107	+ return .caption2.weight(.bold)
	1108	+ }
	1109	+ return (isLargeDisplay ? Font.footnote : .caption2).weight(.bold)
	1110	+ }()
	1111	+
	1112	+ return GeometryReader { geometry in
1089	1113	let footerHeight: CGFloat = isLargeDisplay ? 30 : 24
1090	1114	let topInset: CGFloat = isLargeDisplay ? 34 : 28
1091	1115	let labelAreaHeight = max(geometry.size.height - footerHeight - topInset, 1)
	@@ -1095,7 +1119,7 @@ struct MeasurementChartView: View {
1095	1119	let labelIndex = yLabels - row
1096	1120
1097	1121	Text("\(context.yAxisLabel(for: labelIndex, of: yLabels).format(fractionDigits: 1))")
1098		- .font((isLargeDisplay ? Font.callout : .footnote).weight(.semibold))
	1122	+ .font(yAxisFont)
1099	1123	.monospacedDigit()
1100	1124	.lineLimit(1)
1101	1125	.minimumScaleFactor(0.8)
	@@ -1111,7 +1135,7 @@ struct MeasurementChartView: View {
1111	1135	}
1112	1136
1113	1137	Text(measurementUnit)
1114		- .font((isLargeDisplay ? Font.footnote : .caption2).weight(.bold))
	1138	+ .font(unitFont)
1115	1139	.foregroundColor(tint)
1116	1140	.padding(.horizontal, isLargeDisplay ? 8 : 6)
1117	1141	.padding(.vertical, isLargeDisplay ? 5 : 4)