Files
noo/lib/widgets/viewer/viewer_icon_button.dart
T
ayushyaandClaude Opus 5.5 c2540ec2ce Fix media viewer chrome to match the approved Noo design
The viewer's top/bottom bars still used the pre-rework
FrostedGlassContainer verbatim: a floating inset pill with a Material
colorScheme tint, an outline border and a drop shadow (violating the
design system's no-shadow rule), and theme-derived icon colors that
went near-invisible against the new dark panel in light mode. The
video transport controls were a second, separate floating pill above
the action bar instead of one continuous panel.

- FrostedGlassContainer: drop the shadow/border/ColorScheme tint for a
  fixed dark translucent fill matching the approved design canvas: no
  shadow anywhere in this screen now.
- file_viewer_screen.dart: top/bottom bars sit flush edge-to-edge
  (no floating-pill inset) with a gradient scrim behind each, and use
  fixed white (not theme-derived) text/icon color, since this chrome
  always sits over a black media stage regardless of app theme.
- ViewerIconButton: same fix - fixed white by default instead of
  colors.fg1.
- MediaActionBar: takes an optional transportControls slot so video's
  transport row renders inside the same panel as the action row,
  above a thin divider, instead of as a separate floating pill.
- MediaVideoPreview: renders only the video surface now; reports its
  controller up via onController (only when active, so a neighboring
  PageView page can't steal the transport row) instead of owning a
  floating panel. VideoTransportControls is the extracted, chrome-less
  transport row content, rendered by the parent via MediaActionBar's
  new slot.

Verified live on device: photo and video viewing, favorite/delete
coloring, and the merged transport+action panel all match the
approved canvas (https://claude.ai/artifact/3AGPqqMdkLSC2ypCh2CQs4).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-09-27 12:34:06 -04:00

49 lines
1.6 KiB
Dart

import 'package:flutter/material.dart';
/// Icon-only action button for the media viewer's floating chrome (top bar,
/// bottom action bar, video transport controls) - a fixed 22px icon in a
/// round hit box. Colored white by default, not from [NooColors]/
/// [ColorScheme]: this chrome always sits on the dark translucent panel
/// over a black media stage (see `FrostedGlassContainer`'s doc comment),
/// regardless of the app's light/dark theme, so a theme-derived color would
/// go near-invisible in light mode. Kept as one small widget so every
/// floating control in this screen looks the same instead of drifting
/// apart across the three call sites that need one.
class ViewerIconButton extends StatelessWidget {
final IconData icon;
final String tooltip;
final VoidCallback? onTap;
/// Overrides the default white (e.g. `danger` for delete, `accent-text`
/// for a favorited state). Ignored while [onTap] is null - a disabled
/// button always dims to faded white regardless of its normal color.
final Color? color;
const ViewerIconButton({
super.key,
required this.icon,
required this.tooltip,
required this.onTap,
this.color,
});
@override
Widget build(BuildContext context) {
final fg = onTap == null
? Colors.white.withValues(alpha: 0.4)
: (color ?? Colors.white);
return Tooltip(
message: tooltip,
child: InkWell(
onTap: onTap,
customBorder: const CircleBorder(),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12),
child: Icon(icon, color: fg, size: 22),
),
),
);
}
}