Skip to content

Commit 6194ba5

Browse files
c0d3rb4b4c0d3rb4b4
authored
Refine map legends layout and labels (#9)
1 parent 0b98114 commit 6194ba5

3 files changed

Lines changed: 82 additions & 97 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,13 @@ All notable changes to this project will be documented in this file.
55
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
66
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
77

8+
## [1.1.20] — 2026-02-23
9+
10+
### Changed
11+
- Moved the map direction legend controls to the lower-left legend stack so they no longer block the map action buttons.
12+
- Simplified map legend labels by removing `On/Off` state text for direction, eclipse visibility, and central-path overlays.
13+
- Bumped `apps/mobile` version to `1.1.20`.
14+
815
## [1.1.19] — 2026-02-23
916

1017
### Fixed

‎apps/mobile/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@eclipse-timer/mobile",
3-
"version": "1.1.19",
3+
"version": "1.1.20",
44
"private": true,
55
"main": "index.js",
66
"scripts": {

‎apps/mobile/src/screens/TimerScreen.tsx‎

Lines changed: 74 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -532,84 +532,81 @@ export default function TimerScreen({
532532
<Text style={styles.mapOverlayBtnText}>{mapTypeText}</Text>
533533
</Pressable>
534534

535-
<View style={styles.mapLegend}>
536-
<Pressable
537-
style={[
538-
styles.mapLegendItem,
539-
!timer.showVisibleOverlay ? styles.mapLegendMuted : null,
540-
!timer.hasVisibleOverlayData ? styles.mapLegendDisabled : null,
541-
]}
542-
onPress={timer.toggleVisibleOverlay}
543-
disabled={!timer.hasVisibleOverlayData}
544-
accessibilityRole="button"
545-
accessibilityLabel={
546-
timer.showVisibleOverlay
547-
? "Hide eclipse visible overlay"
548-
: "Show eclipse visible overlay"
549-
}
550-
>
551-
<View style={styles.mapLegendRow}>
552-
<View style={[styles.mapLegendSwatch, { backgroundColor: visibleOverlayColor }]} />
553-
<Text style={styles.mapLegendText}>Eclipse Visible</Text>
554-
</View>
555-
<Text style={styles.mapLegendState}>{timer.showVisibleOverlay ? "On" : "Off"}</Text>
556-
</Pressable>
535+
<View style={styles.mapLegendStack}>
536+
{timer.result && timer.isResultCurrentForPin ? (
537+
<Pressable
538+
style={[
539+
styles.mapDirectionLegend,
540+
!timer.showDirectionsOverlay ? styles.mapLegendMuted : null,
541+
!hasDirectionsData ? styles.mapLegendDisabled : null,
542+
]}
543+
onPress={timer.toggleDirectionsOverlay}
544+
disabled={!hasDirectionsData}
545+
accessibilityRole="button"
546+
accessibilityLabel={
547+
timer.showDirectionsOverlay ? "Hide direction overlays" : "Show direction overlays"
548+
}
549+
>
550+
{contactDirectionOverlays.map((direction) => (
551+
<View
552+
key={`direction-legend-${direction.key}`}
553+
style={styles.mapDirectionLegendRow}
554+
>
555+
<View
556+
style={[styles.mapDirectionLegendLine, { borderTopColor: direction.color }]}
557+
/>
558+
<Text style={[styles.mapDirectionLegendText, { color: direction.color }]}>
559+
{direction.label}
560+
</Text>
561+
</View>
562+
))}
563+
</Pressable>
564+
) : null}
557565

558-
<Pressable
559-
style={[
560-
styles.mapLegendItem,
561-
!timer.showCentralOverlay ? styles.mapLegendMuted : null,
562-
!timer.hasCentralOverlayData ? styles.mapLegendDisabled : null,
563-
]}
564-
onPress={timer.toggleCentralOverlay}
565-
disabled={!timer.hasCentralOverlayData}
566-
accessibilityRole="button"
567-
accessibilityLabel={
568-
timer.showCentralOverlay ? "Hide central path overlay" : "Show central path overlay"
569-
}
570-
>
571-
<View style={styles.mapLegendRow}>
572-
<View
573-
style={[styles.mapLegendSwatch, { backgroundColor: activeCentralOverlayColor }]}
574-
/>
575-
<Text style={styles.mapLegendText}>{centralLegendLabel}</Text>
576-
</View>
577-
<Text style={styles.mapLegendState}>{timer.showCentralOverlay ? "On" : "Off"}</Text>
578-
</Pressable>
579-
</View>
566+
<View style={styles.mapLegend}>
567+
<Pressable
568+
style={[
569+
styles.mapLegendItem,
570+
!timer.showVisibleOverlay ? styles.mapLegendMuted : null,
571+
!timer.hasVisibleOverlayData ? styles.mapLegendDisabled : null,
572+
]}
573+
onPress={timer.toggleVisibleOverlay}
574+
disabled={!timer.hasVisibleOverlayData}
575+
accessibilityRole="button"
576+
accessibilityLabel={
577+
timer.showVisibleOverlay
578+
? "Hide eclipse visible overlay"
579+
: "Show eclipse visible overlay"
580+
}
581+
>
582+
<View style={styles.mapLegendRow}>
583+
<View style={[styles.mapLegendSwatch, { backgroundColor: visibleOverlayColor }]} />
584+
<Text style={styles.mapLegendText}>Eclipse Visible</Text>
585+
</View>
586+
</Pressable>
580587

581-
{timer.result && timer.isResultCurrentForPin ? (
582-
<Pressable
583-
style={[
584-
styles.mapDirectionLegend,
585-
!timer.showDirectionsOverlay ? styles.mapLegendMuted : null,
586-
!hasDirectionsData ? styles.mapLegendDisabled : null,
587-
]}
588-
onPress={timer.toggleDirectionsOverlay}
589-
disabled={!hasDirectionsData}
590-
accessibilityRole="button"
591-
accessibilityLabel={
592-
timer.showDirectionsOverlay ? "Hide direction overlays" : "Show direction overlays"
593-
}
594-
>
595-
<View style={styles.mapDirectionLegendHeader}>
596-
<Text style={styles.mapDirectionLegendTitle}>Directions</Text>
597-
<Text style={styles.mapLegendState}>
598-
{timer.showDirectionsOverlay ? "On" : "Off"}
599-
</Text>
600-
</View>
601-
{contactDirectionOverlays.map((direction) => (
602-
<View key={`direction-legend-${direction.key}`} style={styles.mapDirectionLegendRow}>
588+
<Pressable
589+
style={[
590+
styles.mapLegendItem,
591+
!timer.showCentralOverlay ? styles.mapLegendMuted : null,
592+
!timer.hasCentralOverlayData ? styles.mapLegendDisabled : null,
593+
]}
594+
onPress={timer.toggleCentralOverlay}
595+
disabled={!timer.hasCentralOverlayData}
596+
accessibilityRole="button"
597+
accessibilityLabel={
598+
timer.showCentralOverlay ? "Hide central path overlay" : "Show central path overlay"
599+
}
600+
>
601+
<View style={styles.mapLegendRow}>
603602
<View
604-
style={[styles.mapDirectionLegendLine, { borderTopColor: direction.color }]}
603+
style={[styles.mapLegendSwatch, { backgroundColor: activeCentralOverlayColor }]}
605604
/>
606-
<Text style={[styles.mapDirectionLegendText, { color: direction.color }]}>
607-
{direction.label}
608-
</Text>
605+
<Text style={styles.mapLegendText}>{centralLegendLabel}</Text>
609606
</View>
610-
))}
611-
</Pressable>
612-
) : null}
607+
</Pressable>
608+
</View>
609+
</View>
613610
</View>
614611

615612
<View style={styles.controls}>
@@ -1109,10 +1106,13 @@ const styles = StyleSheet.create({
11091106
borderRadius: 2,
11101107
backgroundColor: "white",
11111108
},
1112-
mapLegend: {
1109+
mapLegendStack: {
11131110
position: "absolute",
11141111
left: 10,
11151112
bottom: 10,
1113+
gap: 6,
1114+
},
1115+
mapLegend: {
11161116
paddingVertical: 7,
11171117
paddingHorizontal: 8,
11181118
borderRadius: 10,
@@ -1151,35 +1151,13 @@ const styles = StyleSheet.create({
11511151
fontSize: 11,
11521152
fontWeight: "600",
11531153
},
1154-
mapLegendState: {
1155-
color: "#d6d6d6",
1156-
fontSize: 10,
1157-
fontWeight: "700",
1158-
textTransform: "uppercase",
1159-
},
11601154
mapDirectionLegend: {
1161-
position: "absolute",
1162-
right: 10,
1163-
bottom: 10,
11641155
borderRadius: 10,
11651156
backgroundColor: "rgba(0,0,0,0.62)",
11661157
paddingHorizontal: 8,
11671158
paddingVertical: 7,
11681159
gap: 4,
11691160
},
1170-
mapDirectionLegendHeader: {
1171-
flexDirection: "row",
1172-
alignItems: "center",
1173-
justifyContent: "space-between",
1174-
gap: 8,
1175-
},
1176-
mapDirectionLegendTitle: {
1177-
color: "#e2e2e2",
1178-
fontSize: 10,
1179-
fontWeight: "700",
1180-
textTransform: "uppercase",
1181-
letterSpacing: 0.4,
1182-
},
11831161
mapDirectionLegendRow: {
11841162
flexDirection: "row",
11851163
alignItems: "center",

0 commit comments

Comments
 (0)