fix(todo): Today's tab centres its day in the calendar
The day stood on the calendar's bottom edge: a line box's place in the space below the calendar's line was the font's to choose. It is placed by its baseline now. Whats-New: Today's tab shows its day centred in the calendar. Whats-New-De: Der Heute-Tab zeigt den Tag mittig im Kalender. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Signed-off-by: Tizian 「ティツィアーン」 <raisondetredev@pm.me>
This commit is contained in:
parent
53313978f1
commit
6ee7aeabc0
2 changed files with 63 additions and 16 deletions
|
|
@ -8,6 +8,12 @@ import 'package:material_ui/material_ui.dart';
|
||||||
/// blank calendar with today's day of the month in it, as Lucide's
|
/// blank calendar with today's day of the month in it, as Lucide's
|
||||||
/// `calendar-1` holds a 1, drawn anew at midnight.
|
/// `calendar-1` holds a 1, drawn anew at midnight.
|
||||||
class const TodayIcon({super.key}) extends StatefulWidget {
|
class const TodayIcon({super.key}) extends StatefulWidget {
|
||||||
|
/// The day's size, in the calendar's 24 units.
|
||||||
|
static const _fontSize = 9.6;
|
||||||
|
|
||||||
|
/// Noto Sans' digits' height, of the font's size.
|
||||||
|
static const _digitHeight = 0.714;
|
||||||
|
|
||||||
@override
|
@override
|
||||||
State<TodayIcon> createState() => _TodayIconState();
|
State<TodayIcon> createState() => _TodayIconState();
|
||||||
}
|
}
|
||||||
|
|
@ -49,22 +55,27 @@ class _TodayIconState() extends State<TodayIcon> {
|
||||||
alignment: Alignment.center,
|
alignment: Alignment.center,
|
||||||
children: [
|
children: [
|
||||||
const Icon(LucideIcons.calendar),
|
const Icon(LucideIcons.calendar),
|
||||||
// Lucide's calendar: its box from 4 to 22 of 24 units, the line
|
// Lucide's calendar: inside its strokes from 11 to 21 of 24 units.
|
||||||
// under its rings at 10; the day centred in what is below it.
|
// Placed by its baseline, a line box's place in it being the font's
|
||||||
Positioned(
|
// to choose (the day stood on the frame, 5 Nov 2026).
|
||||||
top: size * 10 / 24,
|
Positioned.fill(
|
||||||
bottom: size * 2 / 24,
|
child: Align(
|
||||||
left: 0,
|
alignment: Alignment.topCenter,
|
||||||
right: 0,
|
child: Baseline(
|
||||||
child: Center(
|
baseline:
|
||||||
child: Text(
|
size *
|
||||||
'${clock.now().day}',
|
(16 + TodayIcon._digitHeight * TodayIcon._fontSize / 2) /
|
||||||
textScaler: TextScaler.noScaling,
|
24,
|
||||||
style: TextStyle(
|
baselineType: TextBaseline.alphabetic,
|
||||||
color: icon.color,
|
child: Text(
|
||||||
fontSize: size * 0.4,
|
'${clock.now().day}',
|
||||||
height: 1,
|
textScaler: TextScaler.noScaling,
|
||||||
fontWeight: FontWeight.w700,
|
style: TextStyle(
|
||||||
|
color: icon.color,
|
||||||
|
fontSize: size * TodayIcon._fontSize / 24,
|
||||||
|
height: 1,
|
||||||
|
fontWeight: FontWeight.w700,
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
import 'package:clock/clock.dart';
|
||||||
|
import 'package:flutter_test/flutter_test.dart';
|
||||||
|
import 'package:halkyon_todo_flutter/src/tabs/today_icon.dart';
|
||||||
|
import 'package:material_ui/material_ui.dart';
|
||||||
|
|
||||||
|
void main() {
|
||||||
|
testWidgets("the day's digits stand centred below the calendar's line, "
|
||||||
|
"whatever the font's line box (the developer's review, 5 Nov 2026)", (
|
||||||
|
tester,
|
||||||
|
) async {
|
||||||
|
await tester.pumpWidget(
|
||||||
|
const Directionality(
|
||||||
|
textDirection: TextDirection.ltr,
|
||||||
|
child: IconTheme(
|
||||||
|
data: IconThemeData(size: 24),
|
||||||
|
child: Center(child: TodayIcon()),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
|
||||||
|
final icon = tester.getTopLeft(find.byType(TodayIcon));
|
||||||
|
final day = find.text('${clock.now().day}');
|
||||||
|
final measured = TextPainter(
|
||||||
|
text: TextSpan(text: '5', style: tester.widget<Text>(day).style),
|
||||||
|
textDirection: TextDirection.ltr,
|
||||||
|
)..layout();
|
||||||
|
addTearDown(measured.dispose);
|
||||||
|
final baseline =
|
||||||
|
tester.getTopLeft(day).dy +
|
||||||
|
measured.computeDistanceToActualBaseline(TextBaseline.alphabetic) -
|
||||||
|
icon.dy;
|
||||||
|
|
||||||
|
// The digits, 0.714 of 9.6 units high, between the strokes at 11 and 21.
|
||||||
|
expect(baseline, moreOrLessEquals(19.43, epsilon: 0.01));
|
||||||
|
});
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue