Unify header pill/button height to 38px, matching the HTML prototype
Measured the prototype screenshot pixel-for-pixel: content pills take up ~79% of the header's total height, matching its own CSS (height:38px, topBarWrap padding:5px 10px -> 48px total). The Flutter port had drifted to 34px for HeaderWindPill, MapSearchControls, and NavIconButton, while FlightModePill was left at the original 38px - so Fly mode looked inconsistent against itself, and both modes wasted more header height as margin than the prototype does. Bringing all four back to a shared 38px fixes both.
This commit is contained in:
@@ -13,7 +13,7 @@ class DroneFollowIcon extends StatelessWidget {
|
|||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
// NavIconButton zwingt seinem Kind straffe 34x34-Constraints auf - ohne
|
// NavIconButton zwingt seinem Kind straffe 38x38-Constraints auf - ohne
|
||||||
// Center/SizedBox wuerde CustomPaint sein size-Argument ignorieren und
|
// Center/SizedBox wuerde CustomPaint sein size-Argument ignorieren und
|
||||||
// auf die volle Knopfgroesse aufgeblasen (RenderCustomPaint hat anders
|
// auf die volle Knopfgroesse aufgeblasen (RenderCustomPaint hat anders
|
||||||
// als Icon kein eingebautes Center, das die Constraints fuer sein Kind
|
// als Icon kein eingebautes Center, das die Constraints fuer sein Kind
|
||||||
|
|||||||
@@ -19,13 +19,17 @@ class HeaderWindPill extends ConsumerWidget {
|
|||||||
return GestureDetector(
|
return GestureDetector(
|
||||||
onTap: () => ref.read(headerWindProvider.notifier).toggleShowPerWaypoint(),
|
onTap: () => ref.read(headerWindProvider.notifier).toggleShowPerWaypoint(),
|
||||||
child: Container(
|
child: Container(
|
||||||
height: 34,
|
// 38 statt vorher 34 (Nutzerwunsch: Kopfleisten-Pillen/-Buttons
|
||||||
|
// einheitlich auf die im HTML-Demonstrator vermessene Hoehe bringen,
|
||||||
|
// siehe TopModeBar-Klassendoku) - deckungsgleich mit FlightModePill,
|
||||||
|
// das schon immer 38 nutzte.
|
||||||
|
height: 38,
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 10),
|
padding: const EdgeInsets.symmetric(horizontal: 10),
|
||||||
decoration: BoxDecoration(
|
decoration: BoxDecoration(
|
||||||
color: active
|
color: active
|
||||||
? const Color(0xFF4D9DFF).withValues(alpha: 0.32)
|
? const Color(0xFF4D9DFF).withValues(alpha: 0.32)
|
||||||
: Colors.black.withValues(alpha: 0.55),
|
: Colors.black.withValues(alpha: 0.55),
|
||||||
borderRadius: BorderRadius.circular(17),
|
borderRadius: BorderRadius.circular(19),
|
||||||
border: Border.all(
|
border: Border.all(
|
||||||
color: active
|
color: active
|
||||||
? const Color(0xFF4D9DFF)
|
? const Color(0xFF4D9DFF)
|
||||||
|
|||||||
@@ -89,11 +89,14 @@ class _MapSearchControlsState extends ConsumerState<MapSearchControls> {
|
|||||||
children: [
|
children: [
|
||||||
Expanded(
|
Expanded(
|
||||||
child: Container(
|
child: Container(
|
||||||
height: 34,
|
// 38 statt vorher 34, deckungsgleich mit HeaderWindPill/
|
||||||
|
// FlightModePill/NavIconButton (Nutzerwunsch: einheitliche
|
||||||
|
// Kopfleisten-Hoehe wie im HTML-Demonstrator vermessen).
|
||||||
|
height: 38,
|
||||||
padding: const EdgeInsets.only(left: 12, right: 4),
|
padding: const EdgeInsets.only(left: 12, right: 4),
|
||||||
decoration: BoxDecoration(
|
decoration: BoxDecoration(
|
||||||
color: Colors.black.withValues(alpha: 0.55),
|
color: Colors.black.withValues(alpha: 0.55),
|
||||||
borderRadius: BorderRadius.circular(17),
|
borderRadius: BorderRadius.circular(19),
|
||||||
),
|
),
|
||||||
child: Row(
|
child: Row(
|
||||||
children: [
|
children: [
|
||||||
|
|||||||
@@ -28,8 +28,12 @@ class NavIconButton extends StatelessWidget {
|
|||||||
return GestureDetector(
|
return GestureDetector(
|
||||||
onTap: onTap,
|
onTap: onTap,
|
||||||
child: Container(
|
child: Container(
|
||||||
width: 34,
|
// 38 statt vorher 34, deckungsgleich mit HeaderWindPill/
|
||||||
height: 34,
|
// MapSearchControls/FlightModePill (Nutzerwunsch: einheitliche
|
||||||
|
// Kopfleisten-Hoehe wie im HTML-Demonstrator vermessen: #homeBtn/
|
||||||
|
// #fitBtn nutzen dort ebenfalls width/height:38px).
|
||||||
|
width: 38,
|
||||||
|
height: 38,
|
||||||
decoration: BoxDecoration(
|
decoration: BoxDecoration(
|
||||||
shape: BoxShape.circle,
|
shape: BoxShape.circle,
|
||||||
color: Colors.black.withValues(alpha: 0.55),
|
color: Colors.black.withValues(alpha: 0.55),
|
||||||
|
|||||||
Reference in New Issue
Block a user