ayushya/noo
1
0
Fork 0
Code Pull Requests Actions Packages Projects Releases 14 Activity

Noo design system rebuild #1

Merged
ayushya merged 31 commits from noo-design-system-rebuild into main 2026-10-01 09:23:58 -04:00
Conversation 0 Commits 31 Files Changed 151
+272 -176
5 changed files with 272 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c2540ec2ce - Show all commits
lib/views/file_viewer_screen.dart
+104 -31
View File
@@ -4,6 +4,7 @@ import 'package:open_file/open_file.dart';
import 'package:path/path.dart' as p; import 'package:path/path.dart' as p;
import 'package:path_provider/path_provider.dart'; import 'package:path_provider/path_provider.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
import 'package:video_player/video_player.dart';
import '../models/nextcloud_item.dart'; import '../models/nextcloud_item.dart';
import '../providers/item_operations.dart'; import '../providers/item_operations.dart';
import '../providers/session_controller.dart'; import '../providers/session_controller.dart';
@@ -141,6 +142,12 @@ class _FileViewerScreenState extends State<FileViewerScreen> {
late int _currentIndex; late int _currentIndex;
late final PageController _pageController; late final PageController _pageController;
/// The active page's video controller, once `MediaVideoPreview` reports
/// it - only ever set by the *current* page (see `_buildBody`), so a
/// neighboring `PageView` page can't steal the transport row. Drives
/// `VideoTransportControls` inside the bottom `MediaActionBar` panel.
VideoPlayerController? _videoController;
NextcloudItem get _currentItem => _mediaItems[_currentIndex]; NextcloudItem get _currentItem => _mediaItems[_currentIndex];
bool get _isOffline => widget.localPathResolver != null; bool get _isOffline => widget.localPathResolver != null;
@@ -402,6 +409,28 @@ class _FileViewerScreenState extends State<FileViewerScreen> {
backgroundColor: colors.fg1.withValues(alpha: 0.16), backgroundColor: colors.fg1.withValues(alpha: 0.16),
), ),
), ),
// Scrim behind the top bar, per the approved canvas
// (https://claude.ai/artifact/3AGPqqMdkLSC2ypCh2CQs4): a plain
// gradient fade, not `FrostedGlassContainer`'s blur - just
// enough to keep the back button/title legible over bright
// media without another blurred layer stacked on the bar itself.
if (_isSwipeable)
IgnorePointer(
child: AnimatedOpacity(
duration: const Duration(milliseconds: 220),
opacity: _controlsVisible ? 1 : 0,
child: Container(
height: 150,
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Color(0x8C000000), Colors.transparent],
),
),
),
),
),
AnimatedSlide( AnimatedSlide(
duration: const Duration(milliseconds: 220), duration: const Duration(milliseconds: 220),
curve: Curves.easeInOutCubic, curve: Curves.easeInOutCubic,
@@ -409,35 +438,41 @@ class _FileViewerScreenState extends State<FileViewerScreen> {
child: IgnorePointer( child: IgnorePointer(
ignoring: !_controlsVisible, ignoring: !_controlsVisible,
child: SafeArea( child: SafeArea(
child: Padding( bottom: false,
padding: const EdgeInsets.fromLTRB(20, 12, 20, 0), child: FrostedGlassContainer(
child: FrostedGlassContainer( child: Padding(
child: Padding( padding: const EdgeInsets.symmetric(
padding: const EdgeInsets.symmetric( horizontal: 6,
horizontal: 6, vertical: 6,
vertical: 6, ),
child: IconTheme.merge(
// Fixed white, not `colors.fg1`: this bar 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.
data: const IconThemeData(
color: Colors.white,
size: 24,
), ),
child: IconTheme.merge( child: Row(
data: IconThemeData(color: colors.fg1, size: 24), children: [
child: Row( NooTopBarButton(
children: [ icon: LucideIcons.arrowLeft,
NooTopBarButton( tooltip: 'Back',
icon: LucideIcons.arrowLeft, onTap: () => Navigator.pop(context),
tooltip: 'Back', ),
onTap: () => Navigator.pop(context), const SizedBox(width: 4),
), Expanded(
const SizedBox(width: 4), child: MarqueeTitle(
Expanded( text: _currentItem.name,
child: MarqueeTitle( style: NooText.label.copyWith(
text: _currentItem.name, color: Colors.white,
style: NooText.label.copyWith(
color: colors.fg1,
),
), ),
), ),
const SizedBox(width: 10), ),
], const SizedBox(width: 10),
), ],
), ),
), ),
), ),
@@ -445,6 +480,26 @@ class _FileViewerScreenState extends State<FileViewerScreen> {
), ),
), ),
), ),
if (_isSwipeable)
Align(
alignment: Alignment.bottomCenter,
child: IgnorePointer(
child: AnimatedOpacity(
duration: const Duration(milliseconds: 220),
opacity: _controlsVisible ? 1 : 0,
child: Container(
height: 260,
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
colors: [Color(0x99000000), Colors.transparent],
),
),
),
),
),
),
Align( Align(
alignment: Alignment.bottomCenter, alignment: Alignment.bottomCenter,
child: AnimatedSlide( child: AnimatedSlide(
@@ -460,6 +515,12 @@ class _FileViewerScreenState extends State<FileViewerScreen> {
// server - hidden rather than shown-and-failing while // server - hidden rather than shown-and-failing while
// browsing an already-local file from the Offline tab. // browsing an already-local file from the Offline tab.
showServerActions: !_isOffline, showServerActions: !_isOffline,
transportControls:
_isSwipeable &&
_currentItem.type == NextcloudItemType.video &&
_videoController != null
? VideoTransportControls(controller: _videoController!)
: null,
onShare: () => ShareSheet.show(context, _currentItem), onShare: () => ShareSheet.show(context, _currentItem),
onFavorite: () => _toggleFavorite(ops), onFavorite: () => _toggleFavorite(ops),
onDelete: () => _deleteCurrentItem(ops), onDelete: () => _deleteCurrentItem(ops),
@@ -484,9 +545,17 @@ class _FileViewerScreenState extends State<FileViewerScreen> {
return PageView.builder( return PageView.builder(
controller: _pageController, controller: _pageController,
itemCount: _mediaItems.length, itemCount: _mediaItems.length,
onPageChanged: (index) => setState(() => _currentIndex = index), onPageChanged: (index) => setState(() {
_currentIndex = index;
// The outgoing page's `onController` stops being passed below (it's
// no longer the active index) and reports null on its own dispose,
// but that can lag a frame or two behind this rebuild - clear
// eagerly so the transport row never briefly shows the old video.
_videoController = null;
}),
itemBuilder: (context, index) { itemBuilder: (context, index) {
final mediaItem = _mediaItems[index]; final mediaItem = _mediaItems[index];
final isActive = index == _currentIndex;
if (!_isOffline) { if (!_isOffline) {
if (mediaItem.type == NextcloudItemType.image) { if (mediaItem.type == NextcloudItemType.image) {
return MediaImagePreview( return MediaImagePreview(
@@ -499,8 +568,10 @@ class _FileViewerScreenState extends State<FileViewerScreen> {
key: ValueKey(mediaItem.id), key: ValueKey(mediaItem.id),
url: session.service!.fileUrl(mediaItem.path), url: session.service!.fileUrl(mediaItem.path),
headers: session.service!.authHeaders, headers: session.service!.authHeaders,
isActive: index == _currentIndex, isActive: isActive,
controlsBottomOffset: _controlsVisible ? 108 : 24, onController: isActive
? (c) => setState(() => _videoController = c)
: null,
); );
} }
// Offline: each swiped-to item resolves its own local path on // Offline: each swiped-to item resolves its own local path on
@@ -540,8 +611,10 @@ class _FileViewerScreenState extends State<FileViewerScreen> {
url: null, url: null,
headers: const {}, headers: const {},
localPath: localPath, localPath: localPath,
isActive: index == _currentIndex, isActive: isActive,
controlsBottomOffset: _controlsVisible ? 108 : 24, onController: isActive
? (c) => setState(() => _videoController = c)
: null,
); );
}, },
); );
lib/widgets/frosted_glass_container.dart
+19 -21
View File
@@ -1,9 +1,15 @@
import 'dart:ui'; import 'dart:ui';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
/// The frosted-glass pill background shared by all floating chrome in the /// The blurred/translucent chrome for the media viewer's overlay bars
/// app (bottom nav bar, media viewer action bar): blurred backdrop, a /// (`file_viewer_screen.dart`'s top bar, `MediaActionBar`, the video
/// translucent tonal fill, a faint outline, and a soft drop shadow. /// transport row) - the one deliberate exception to the design system's
/// flat, no-shadow product UI (DESIGN_SYSTEM.md 1.4), since this chrome
/// floats over photo/video content rather than over the app's own
/// surfaces. No shadow, no outline, no `ColorScheme` tint: a fixed dark
/// translucent fill (`color`) that reads correctly over any media,
/// regardless of the app's light/dark theme - matching the canvas at
/// https://claude.ai/artifact/3AGPqqMdkLSC2ypCh2CQs4.
class FrostedGlassContainer extends StatelessWidget { class FrostedGlassContainer extends StatelessWidget {
final Widget child; final Widget child;
final double borderRadius; final double borderRadius;
@@ -17,39 +23,31 @@ class FrostedGlassContainer extends StatelessWidget {
/// adjustable. /// adjustable.
final double opacity; final double opacity;
/// The tint under the blur. Defaults to the design's fixed dark tone
/// (`#141311`, the spec's `fg-1` dark value) - deliberately not a
/// `ColorScheme`/`NooColors` lookup, since this chrome always sits over a
/// black media stage, not over a themed surface.
final Color color;
const FrostedGlassContainer({ const FrostedGlassContainer({
super.key, super.key,
required this.child, required this.child,
this.borderRadius = 32, this.borderRadius = 0,
this.blurSigma = 28, this.blurSigma = 20,
this.opacity = 0.55, this.opacity = 0.55,
this.color = const Color(0xFF141311),
}); });
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final colorScheme = Theme.of(context).colorScheme;
return ClipRRect( return ClipRRect(
borderRadius: BorderRadius.circular(borderRadius), borderRadius: BorderRadius.circular(borderRadius),
child: BackdropFilter( child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: blurSigma, sigmaY: blurSigma), filter: ImageFilter.blur(sigmaX: blurSigma, sigmaY: blurSigma),
child: Container( child: Container(
decoration: BoxDecoration( decoration: BoxDecoration(
color: colorScheme.surfaceContainerHighest.withValues( color: color.withValues(alpha: opacity),
alpha: opacity,
),
borderRadius: BorderRadius.circular(borderRadius), borderRadius: BorderRadius.circular(borderRadius),
border: Border.all(
color: colorScheme.outlineVariant.withValues(alpha: 0.35),
width: 1,
),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.14),
blurRadius: 24,
offset: const Offset(0, 8),
),
],
), ),
child: child, child: child,
), ),
lib/widgets/viewer/media_action_bar.dart
+28 -14
View File
@@ -4,15 +4,19 @@ import '../../theme/design_tokens.dart';
import '../frosted_glass_container.dart'; import '../frosted_glass_container.dart';
import 'viewer_icon_button.dart'; import 'viewer_icon_button.dart';
/// The floating action bar (share/favorite/open/download/delete/details) /// The bottom panel overlaid on the media viewer: an optional transport row
/// overlaid on the media viewer - kept on `FrostedGlassContainer`'s blurred /// ([transportControls], video only) above the action row
/// chrome as a deliberate exception to the design system's flat product UI /// (share/favorite/open/download/delete/details) - one continuous flush,
/// (see `file_viewer_screen.dart`'s build() comment for why), unlike the /// full-width `FrostedGlassContainer` panel, not two separate floating
/// now-flat bottom nav bar (`bottom_nav_bar.dart`) this screen sits above. /// pills. Kept on that blurred chrome as a deliberate exception to the
/// design system's flat product UI (see `file_viewer_screen.dart`'s
/// build() comment for why), unlike the now-flat bottom nav bar
/// (`bottom_nav_bar.dart`) this screen sits above.
class MediaActionBar extends StatelessWidget { class MediaActionBar extends StatelessWidget {
final bool isFavorite; final bool isFavorite;
final bool isBusy; final bool isBusy;
final bool showServerActions; final bool showServerActions;
final Widget? transportControls;
final VoidCallback onShare; final VoidCallback onShare;
final VoidCallback onFavorite; final VoidCallback onFavorite;
final VoidCallback onDelete; final VoidCallback onDelete;
@@ -25,6 +29,7 @@ class MediaActionBar extends StatelessWidget {
required this.isFavorite, required this.isFavorite,
required this.isBusy, required this.isBusy,
required this.showServerActions, required this.showServerActions,
this.transportControls,
required this.onShare, required this.onShare,
required this.onFavorite, required this.onFavorite,
required this.onDelete, required this.onDelete,
@@ -35,15 +40,23 @@ class MediaActionBar extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final colors = context.nooColors; // This panel always sits on a black media stage regardless of the
// app's own light/dark theme (see FrostedGlassContainer's doc
// comment) - fixed dark-palette values, not `context.nooColors`, so
// favorite/delete stay legible even when the ambient theme is light.
const dark = NooColors.dark;
return SafeArea( return SafeArea(
child: Padding( top: false,
padding: const EdgeInsets.only(bottom: 20, left: 20, right: 20), child: FrostedGlassContainer(
child: ConstrainedBox( child: Column(
constraints: const BoxConstraints(maxWidth: 480), mainAxisSize: MainAxisSize.min,
child: FrostedGlassContainer( children: [
child: Padding( if (transportControls != null) ...[
transportControls!,
Divider(height: 1, color: Colors.white.withValues(alpha: 0.14)),
],
Padding(
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 6), padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 6),
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, mainAxisAlignment: MainAxisAlignment.spaceEvenly,
@@ -62,6 +75,7 @@ class MediaActionBar extends StatelessWidget {
tooltip: isFavorite tooltip: isFavorite
? 'Remove from favorites' ? 'Remove from favorites'
: 'Favorite', : 'Favorite',
color: isFavorite ? dark.accentText : null,
onTap: onFavorite, onTap: onFavorite,
), ),
ViewerIconButton( ViewerIconButton(
@@ -79,7 +93,7 @@ class MediaActionBar extends StatelessWidget {
ViewerIconButton( ViewerIconButton(
icon: LucideIcons.trash2, icon: LucideIcons.trash2,
tooltip: 'Delete', tooltip: 'Delete',
color: colors.danger, color: dark.danger,
onTap: isBusy ? null : onDelete, onTap: isBusy ? null : onDelete,
), ),
ViewerIconButton( ViewerIconButton(
@@ -90,7 +104,7 @@ class MediaActionBar extends StatelessWidget {
], ],
), ),
), ),
), ],
), ),
), ),
); );
lib/widgets/viewer/media_video_preview.dart
+109 -98
View File
@@ -6,12 +6,16 @@ import 'package:provider/provider.dart';
import 'package:video_player/video_player.dart'; import 'package:video_player/video_player.dart';
import '../../providers/settings_controller.dart'; import '../../providers/settings_controller.dart';
import '../../theme/design_tokens.dart'; import '../../theme/design_tokens.dart';
import '../frosted_glass_container.dart';
import '../seek_bar_painter.dart'; import '../seek_bar_painter.dart';
import 'viewer_icon_button.dart'; import 'viewer_icon_button.dart';
/// Playing video page for [FileViewerScreen]'s swipeable `PageView`, plus /// Playing video page for [FileViewerScreen]'s swipeable `PageView`. Just
/// its floating transport controls (play/pause, position, mute, seek bar). /// the video surface - the transport controls ([VideoTransportControls])
/// are built by the parent, inside the same bottom panel as
/// [MediaActionBar], once this reports its controller up via
/// [onController]. Keeping playback lifecycle (`initState`/`dispose`) here
/// and the controls' *presentation* in the parent is what lets both sit in
/// one continuous panel without the parent owning playback.
class MediaVideoPreview extends StatefulWidget { class MediaVideoPreview extends StatefulWidget {
final String? url; final String? url;
final Map<String, String> headers; final Map<String, String> headers;
@@ -22,11 +26,12 @@ class MediaVideoPreview extends StatefulWidget {
/// `FileViewerScreen.localPathResolver`'s doc comment). /// `FileViewerScreen.localPathResolver`'s doc comment).
final String? localPath; final String? localPath;
/// Distance from the bottom of the screen the transport controls should /// Reports the live controller once initialized, and `null` on dispose,
/// sit at. Passed in by the parent so the controls can track the floating /// so the parent can render [VideoTransportControls] for it. The parent
/// action bar: resting just above it when visible, sliding down to hug /// only passes this for the *active* page (see `file_viewer_screen.dart`'s
/// the screen edge when the bar (and rest of the chrome) is hidden. /// `_buildBody`) - a neighboring, inactive `PageView` page never reports
final double controlsBottomOffset; /// up, so an adjacent video can't steal the transport row.
final ValueChanged<VideoPlayerController?>? onController;
const MediaVideoPreview({ const MediaVideoPreview({
super.key, super.key,
@@ -34,7 +39,7 @@ class MediaVideoPreview extends StatefulWidget {
required this.headers, required this.headers,
this.localPath, this.localPath,
this.isActive = true, this.isActive = true,
this.controlsBottomOffset = 24, this.onController,
}); });
@override @override
@@ -65,6 +70,7 @@ class _MediaVideoPreviewState extends State<MediaVideoPreview> {
return; return;
} }
setState(() => _controller = controller); setState(() => _controller = controller);
widget.onController?.call(controller);
if (widget.isActive) controller.play(); if (widget.isActive) controller.play();
} catch (e) { } catch (e) {
if (mounted) setState(() => _error = e.toString()); if (mounted) setState(() => _error = e.toString());
@@ -81,26 +87,32 @@ class _MediaVideoPreviewState extends State<MediaVideoPreview> {
_controller?.pause(); _controller?.pause();
} }
} }
// Newly given a callback (this page just became active) and already
// initialized: report it, but not synchronously - `didUpdateWidget`
// runs as part of the *parent's* own widget-tree update (the
// `onPageChanged` setState that made this page active), and the
// parent's `onController` calls `setState` itself, which would trip
// "setState called during build" if invoked in the same pass. Defer to
// the next frame instead of waiting for `_init` (which won't run again).
if (oldWidget.onController == null &&
widget.onController != null &&
_controller != null) {
WidgetsBinding.instance.addPostFrameCallback((_) {
if (mounted) widget.onController!(_controller);
});
}
} }
@override @override
void dispose() { void dispose() {
widget.onController?.call(null);
_controller?.dispose(); _controller?.dispose();
super.dispose(); super.dispose();
} }
String _formatDuration(Duration d) {
final minutes = d.inMinutes.remainder(60);
final seconds = d.inSeconds.remainder(60).toString().padLeft(2, '0');
return '$minutes:$seconds';
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final colors = context.nooColors; final colors = context.nooColors;
final progressBarStyle = context
.watch<SettingsController>()
.mediaProgressBarStyle;
if (_error != null) { if (_error != null) {
return Center( return Center(
child: Text( child: Text(
@@ -115,89 +127,88 @@ class _MediaVideoPreviewState extends State<MediaVideoPreview> {
} }
return SizedBox.expand( return SizedBox.expand(
child: Stack( child: Center(
alignment: Alignment.center, child: AspectRatio(
children: [ aspectRatio: controller.value.aspectRatio,
Center( child: VideoPlayer(controller),
child: AspectRatio( ),
aspectRatio: controller.value.aspectRatio, ),
child: VideoPlayer(controller), );
), }
), }
AnimatedPositioned(
duration: const Duration(milliseconds: 220), /// The transport row content (play/pause, position, mute, seek bar) for
curve: Curves.easeInOutCubic, /// [controller] - no panel chrome of its own. Rendered by
left: 16, /// `file_viewer_screen.dart` inside the same bottom panel as
right: 16, /// [MediaActionBar], directly above the action row, once
bottom: widget.controlsBottomOffset, /// [MediaVideoPreview.onController] reports a live controller.
child: AnimatedBuilder( class VideoTransportControls extends StatelessWidget {
animation: controller, final VideoPlayerController controller;
builder: (context, _) {
final fg = colors.fg1; const VideoTransportControls({super.key, required this.controller});
// Same frosted-glass treatment (and user opacity/blur
// settings) as the back button and media action bar, so the String _formatDuration(Duration d) {
// transport controls match the rest of the app's chrome. final minutes = d.inMinutes.remainder(60);
return FrostedGlassContainer( final seconds = d.inSeconds.remainder(60).toString().padLeft(2, '0');
borderRadius: 24, return '$minutes:$seconds';
child: Padding( }
padding: const EdgeInsets.symmetric(
horizontal: 4, @override
vertical: 4, Widget build(BuildContext context) {
), final progressBarStyle = context
child: Column( .watch<SettingsController>()
mainAxisSize: MainAxisSize.min, .mediaProgressBarStyle;
children: [ return AnimatedBuilder(
Row( animation: controller,
children: [ builder: (context, _) {
ViewerIconButton( const fg = Colors.white;
icon: controller.value.isPlaying return Padding(
? LucideIcons.pause padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 4),
: LucideIcons.play, child: Column(
tooltip: controller.value.isPlaying mainAxisSize: MainAxisSize.min,
? 'Pause' children: [
: 'Play', Row(
onTap: () => controller.value.isPlaying children: [
? controller.pause() ViewerIconButton(
: controller.play(), icon: controller.value.isPlaying
), ? LucideIcons.pause
Expanded( : LucideIcons.play,
child: Text( tooltip: controller.value.isPlaying ? 'Pause' : 'Play',
'${_formatDuration(controller.value.position)} / ${_formatDuration(controller.value.duration)}', onTap: () => controller.value.isPlaying
textAlign: TextAlign.center, ? controller.pause()
style: NooText.meta.copyWith(color: fg), : controller.play(),
), ),
), Expanded(
ViewerIconButton( child: Text(
icon: controller.value.volume == 0 '${_formatDuration(controller.value.position)} / ${_formatDuration(controller.value.duration)}',
? LucideIcons.volumeX textAlign: TextAlign.center,
: LucideIcons.volume2, style: NooText.meta.copyWith(color: fg),
tooltip: controller.value.volume == 0
? 'Unmute'
: 'Mute',
onTap: () => controller.setVolume(
controller.value.volume == 0 ? 1 : 0,
),
),
],
),
Padding(
padding: const EdgeInsets.fromLTRB(12, 0, 12, 8),
child: WavySeekBar(
controller: controller,
playedColor: fg,
trackColor: fg.withValues(alpha: 0.3),
style: progressBarStyle,
),
),
],
), ),
), ),
); ViewerIconButton(
}, icon: controller.value.volume == 0
), ? LucideIcons.volumeX
: LucideIcons.volume2,
tooltip: controller.value.volume == 0 ? 'Unmute' : 'Mute',
onTap: () => controller.setVolume(
controller.value.volume == 0 ? 1 : 0,
),
),
],
),
Padding(
padding: const EdgeInsets.fromLTRB(12, 0, 12, 8),
child: WavySeekBar(
controller: controller,
playedColor: fg,
trackColor: fg.withValues(alpha: 0.3),
style: progressBarStyle,
),
),
],
), ),
], );
), },
); );
} }
} }
lib/widgets/viewer/viewer_icon_button.dart
+12 -12
View File
@@ -1,21 +1,22 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import '../../theme/design_tokens.dart';
/// Icon-only action button for the media viewer's floating chrome (top bar, /// 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 /// bottom action bar, video transport controls) - a fixed 22px icon in a
/// round hit box, colored from [NooColors] rather than Material's /// round hit box. Colored white by default, not from [NooColors]/
/// [ColorScheme]. Kept as one small widget (matching the pre-rework /// [ColorScheme]: this chrome always sits on the dark translucent panel
/// `_ActionIconButton` it replaces - see `styling.md`) so every floating /// over a black media stage (see `FrostedGlassContainer`'s doc comment),
/// control in this screen looks the same instead of drifting apart across /// regardless of the app's light/dark theme, so a theme-derived color would
/// the three call sites that need one. /// 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 { class ViewerIconButton extends StatelessWidget {
final IconData icon; final IconData icon;
final String tooltip; final String tooltip;
final VoidCallback? onTap; final VoidCallback? onTap;
/// Overrides the default `fg-1` (e.g. `danger` for delete). Ignored while /// Overrides the default white (e.g. `danger` for delete, `accent-text`
/// [onTap] is null - a disabled button always dims to the same faded fg-1 /// for a favorited state). Ignored while [onTap] is null - a disabled
/// regardless of its normal color. /// button always dims to faded white regardless of its normal color.
final Color? color; final Color? color;
const ViewerIconButton({ const ViewerIconButton({
@@ -28,10 +29,9 @@ class ViewerIconButton extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final colors = context.nooColors;
final fg = onTap == null final fg = onTap == null
? colors.fg1.withValues(alpha: 0.4) ? Colors.white.withValues(alpha: 0.4)
: (color ?? colors.fg1); : (color ?? Colors.white);
return Tooltip( return Tooltip(
message: tooltip, message: tooltip,