extract ClideTappable shared widget
Encapsulates the hover + click + cursor pattern repeated across the codebase. Builder receives (context, hovered) so callers control their own hover styling. Refactored _ThemeLink to use it. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -297,34 +297,22 @@ class _StatusLine extends StatelessWidget {
|
||||
}
|
||||
}
|
||||
|
||||
class _ThemeLink extends StatefulWidget {
|
||||
class _ThemeLink extends StatelessWidget {
|
||||
const _ThemeLink({required this.tokens, required this.kernel, required this.themeName});
|
||||
final SurfaceTokens tokens;
|
||||
final KernelServices kernel;
|
||||
final String themeName;
|
||||
|
||||
@override
|
||||
State<_ThemeLink> createState() => _ThemeLinkState();
|
||||
}
|
||||
|
||||
class _ThemeLinkState extends State<_ThemeLink> {
|
||||
bool _hover = false;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MouseRegion(
|
||||
cursor: SystemMouseCursors.click,
|
||||
onEnter: (_) => setState(() => _hover = true),
|
||||
onExit: (_) => setState(() => _hover = false),
|
||||
child: GestureDetector(
|
||||
onTap: () => widget.kernel.commands.execute('theme.pick'),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
ClideText('theme: ', muted: true, fontSize: 12, fontFamily: clideMonoFamily),
|
||||
ClideText(widget.themeName, fontSize: 12, fontFamily: clideMonoFamily, color: _hover ? widget.tokens.globalForeground : widget.tokens.globalFocus),
|
||||
],
|
||||
),
|
||||
return ClideTappable(
|
||||
onTap: () => kernel.commands.execute('theme.pick'),
|
||||
builder: (ctx, hovered) => Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
ClideText('theme: ', muted: true, fontSize: 12, fontFamily: clideMonoFamily),
|
||||
ClideText(themeName, fontSize: 12, fontFamily: clideMonoFamily, color: hovered ? tokens.globalForeground : tokens.globalFocus),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
import 'package:flutter/widgets.dart';
|
||||
|
||||
class ClideTappable extends StatefulWidget {
|
||||
const ClideTappable({
|
||||
super.key,
|
||||
required this.onTap,
|
||||
required this.builder,
|
||||
this.cursor = SystemMouseCursors.click,
|
||||
});
|
||||
|
||||
final VoidCallback onTap;
|
||||
final Widget Function(BuildContext context, bool hovered) builder;
|
||||
final MouseCursor cursor;
|
||||
|
||||
@override
|
||||
State<ClideTappable> createState() => _ClideTappableState();
|
||||
}
|
||||
|
||||
class _ClideTappableState extends State<ClideTappable> {
|
||||
bool _hover = false;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MouseRegion(
|
||||
cursor: widget.cursor,
|
||||
onEnter: (_) => setState(() => _hover = true),
|
||||
onExit: (_) => setState(() => _hover = false),
|
||||
child: GestureDetector(
|
||||
behavior: HitTestBehavior.opaque,
|
||||
onTap: widget.onTap,
|
||||
child: widget.builder(context, _hover),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -19,6 +19,7 @@ export 'src/clide_scrollbar.dart';
|
||||
export 'src/clide_spine.dart';
|
||||
export 'src/clide_surface.dart';
|
||||
export 'src/clide_tab_bar.dart';
|
||||
export 'src/clide_tappable.dart';
|
||||
export 'src/clide_text.dart';
|
||||
export 'src/clide_tooltip.dart';
|
||||
export 'src/typography.dart';
|
||||
|
||||
Reference in New Issue
Block a user