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

Media viewer: Edit/Preview and Save move to the top bar

Browse Source 
A TextPreviewController (owned by the viewer, bound by MediaTextPreview)
mirrors the editing/dirty/saving state out so the top bar draws the buttons;
Save shows a spinner while saving. Located and tested via a Codex consult
(its end-to-end widget test, with the provider fixed and the saving state
adapted); the controller design replaces its builder-wrapping patch.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
Ayushya Amitabh
2026-10-06 20:38:19 -04:00
co-authored by Claude Sonnet 5.5
parent 4ab6c5d85c
commit 5fa20ff3e9
4 changed files with 369 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.claude/context/styling.md
+2 -2
View File
@@ -391,11 +391,11 @@ blocks are noted where they matter:
## Text/markdown viewer
`MediaTextPreview` is an editable monospace `TextField` padded clear of the status bar, top bar and action bar; a Save button appears when dirty (read-only for offline copies). `NooPersonAccessRow.trailing` replaces the owner label/permission pill (used by share-search results). Sheets whose close button lives in `showNooSheet` children must pop via a `Builder` context, not the caller's.
`MediaTextPreview` is an editable monospace `TextField` padded clear of the status bar, top bar and action bar; a Save icon button appears in the viewer's top bar when dirty (a spinner while it saves; read-only for offline copies). The preview owns the text, the editing mode and the save; a `TextPreviewController` (owned by `FileViewerScreen`, passed to `MediaTextPreview`) mirrors that state out so the screen's top bar can draw - and trigger - the buttons, which keeps the preview's widget tree unchanged. `NooPersonAccessRow.trailing` replaces the owner label/permission pill (used by share-search results). Sheets whose close button lives in `showNooSheet` children must pop via a `Builder` context, not the caller's.
`showNooSheet` insets its body by the keyboard (`viewInsets.bottom`) so focused fields stay visible; the body's widget structure must not change when the keyboard opens, or the sheet content is rebuilt and loses focus.
Markdown files (`.md`/`.markdown`) in `MediaTextPreview` open rendered via `flutter_markdown_plus` (`Markdown`, styled from Noo tokens in `_markdownStyle`), with a top-right Edit/Preview toggle (hidden for read-only offline copies). Other text files go straight to the editor.
Markdown files (`.md`/`.markdown`) in `MediaTextPreview` open rendered via `flutter_markdown_plus` (`Markdown`, styled from Noo tokens in `_markdownStyle`), with an Edit/Preview icon toggle in the viewer's top bar (hidden for read-only offline copies). Other text files go straight to the editor.
`ShareSheet`: focusing the people search field does not scroll; once the user types, `_revealPeopleSection` animates the "Share with people" section (keyed by `_peopleKey` on the `NooShareSection`, not the inner column) to just below the sheet's top edge with a small gap.
lib/views/file_viewer_screen.dart
+61 -1
View File
@@ -178,6 +178,10 @@ class _FileViewerScreenState extends State<FileViewerScreen> {
final _panelKey = GlobalKey<MediaDetailsPanelState>();
/// Edit/Preview + Save for a text/markdown file: the preview owns the
/// editing, this just lets the top bar draw (and trigger) its buttons.
final _textActions = TextPreviewController();
void _openDetails() {
if (NooLayout.isDesktop(context)) {
DetailsSheet.show(context, _currentItem);
@@ -229,6 +233,7 @@ class _FileViewerScreenState extends State<FileViewerScreen> {
@override
void dispose() {
_textActions.dispose();
_pageController.dispose();
super.dispose();
}
@@ -532,7 +537,14 @@ class _FileViewerScreenState extends State<FileViewerScreen> {
),
),
),
const SizedBox(width: 10),
// Edit/Preview and Save for text/markdown files -
// empty (zero-width) for every other file type.
ListenableBuilder(
listenable: _textActions,
builder: (context, _) =>
_TextActions(controller: _textActions),
),
const SizedBox(width: 4),
],
),
),
@@ -731,6 +743,7 @@ class _FileViewerScreenState extends State<FileViewerScreen> {
return MediaTextPreview(
item: widget.item,
session: session,
controller: _textActions,
localPathResolver: widget.localPathResolver,
);
}
@@ -743,3 +756,50 @@ class _FileViewerScreenState extends State<FileViewerScreen> {
}
}
}
/// The text viewer's top-bar buttons: Edit/Preview (markdown only) and Save
/// (once the content changed; a spinner while it saves). Same
/// [NooTopBarButton] look as the back button next to it.
class _TextActions extends StatelessWidget {
final TextPreviewController controller;
const _TextActions({required this.controller});
@override
Widget build(BuildContext context) {
final colors = context.nooColors;
return Row(
mainAxisSize: MainAxisSize.min,
children: [
if (controller.canToggleEditing)
NooTopBarButton(
icon: controller.editing ? LucideIcons.eye : LucideIcons.pencil,
tooltip: controller.editing ? 'Preview' : 'Edit',
onTap: controller.toggleEditing,
),
if (controller.saving)
Semantics(
label: 'Saving',
child: SizedBox.square(
dimension: 48,
child: Center(
child: SizedBox.square(
dimension: 20,
child: CircularProgressIndicator(
strokeWidth: 2,
color: colors.fg1,
),
),
),
),
)
else if (controller.showSave)
NooTopBarButton(
icon: LucideIcons.save,
tooltip: 'Save',
onTap: controller.save,
),
],
);
}
}
lib/widgets/viewer/media_text_preview.dart
+111 -31
View File
@@ -2,11 +2,9 @@ import 'dart:convert';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_markdown_plus/flutter_markdown_plus.dart';
import 'package:lucide_icons_flutter/lucide_icons.dart';
import '../../models/nextcloud_item.dart';
import '../../providers/session_controller.dart';
import '../../theme/design_tokens.dart';
import '../noo/core/noo_button.dart';
/// Space the viewer's floating top bar and bottom action bar cover, so the
/// text sits clear of them (and the status bar) instead of scrolling
@@ -14,16 +12,96 @@ import '../noo/core/noo_button.dart';
const double _kTopBarClearance = 72;
const double _kActionBarClearance = 112;
/// What the viewer's top bar needs from [MediaTextPreview]: whether to show
/// the Edit/Preview toggle and the Save button, their current state, and a way
/// to trigger them. The preview owns the text, the editing mode and the save;
/// this just mirrors that out so `FileViewerScreen` can draw the buttons in
/// its own top bar (they used to float inside the preview).
class TextPreviewController extends ChangeNotifier {
bool _canToggleEditing = false;
bool _editing = false;
bool _dirty = false;
bool _saving = false;
bool _disposed = false;
VoidCallback? _onToggleEditing;
Future<void> Function()? _onSave;
/// Markdown, writable (not the read-only Offline copy) and loaded - the
/// Edit/Preview toggle only exists then.
bool get canToggleEditing => _canToggleEditing;
/// Markdown is currently showing its raw text (the toggle then offers
/// "Preview"); false while rendered (it offers "Edit").
bool get editing => _editing;
/// The text differs from what's saved on the server.
bool get dirty => _dirty;
bool get saving => _saving;
/// The Save button is shown once the content has changed, and stays (as a
/// spinner) while the save is in flight.
bool get showSave => _dirty || _saving;
void toggleEditing() => _onToggleEditing?.call();
Future<void> save() async => _onSave?.call();
void _bind(VoidCallback toggleEditing, Future<void> Function() save) {
_onToggleEditing = toggleEditing;
_onSave = save;
}
/// The preview went away: nothing to toggle or save any more. Quiet (no
/// notification) - it happens while the tree is being torn down.
void _unbind() {
_onToggleEditing = null;
_onSave = null;
_canToggleEditing = false;
_editing = false;
_dirty = false;
_saving = false;
}
void _update({
required bool canToggleEditing,
required bool editing,
required bool dirty,
required bool saving,
}) {
if (_canToggleEditing == canToggleEditing &&
_editing == editing &&
_dirty == dirty &&
_saving == saving) {
return;
}
_canToggleEditing = canToggleEditing;
_editing = editing;
_dirty = dirty;
_saving = saving;
if (!_disposed) notifyListeners();
}
@override
void dispose() {
_disposed = true;
super.dispose();
}
}
/// Text/markdown file preview and editor for [FileViewerScreen]'s static
/// (non-swipeable) path (`_textPreviewExtensions`). Content is always
/// editable when online; a Save button appears once it has changed. Markdown
/// files open rendered, with an Edit/Preview toggle. Opened
/// from the Offline tab ([localPathResolver] set) it is read-only, since the
/// local copy has no server to write back to.
/// editable when online; Save appears once it has changed. Markdown files open
/// rendered, with an Edit/Preview toggle. Both controls live in the viewer's
/// top bar, driven through [controller]. Opened from the Offline tab
/// ([localPathResolver] set) it is read-only, since the local copy has no
/// server to write back to.
class MediaTextPreview extends StatefulWidget {
final NextcloudItem item;
final SessionController session;
/// Receives this preview's editing/save state and is how the top bar's
/// buttons reach it. Optional so the preview also works on its own.
final TextPreviewController? controller;
/// When set, read bytes from the local path it resolves to instead of
/// fetching from the server - see
/// `FileViewerScreen.localPathResolver`'s doc comment.
@@ -33,6 +111,7 @@ class MediaTextPreview extends StatefulWidget {
super.key,
required this.item,
required this.session,
this.controller,
this.localPathResolver,
});
@@ -60,16 +139,38 @@ class _MediaTextPreviewState extends State<MediaTextPreview> {
@override
void initState() {
super.initState();
_controller.addListener(() => setState(() {}));
widget.controller?._bind(_toggleEditing, _save);
_controller.addListener(() {
setState(() {});
_syncToolbar();
});
_load();
}
@override
void dispose() {
widget.controller?._unbind();
_controller.dispose();
super.dispose();
}
/// Mirrors the editing/save state out to the viewer's top bar. Only called
/// from event handlers and async completions - never from build or
/// initState, where notifying the bar's listeners would be illegal.
void _syncToolbar() {
widget.controller?._update(
canToggleEditing: _saved != null && _isMarkdown && !_readOnly,
editing: _editing,
dirty: _dirty,
saving: _isSaving,
);
}
void _toggleEditing() {
setState(() => _editing = !_editing);
_syncToolbar();
}
Future<void> _load() async {
try {
final List<int> bytes;
@@ -89,6 +190,7 @@ class _MediaTextPreviewState extends State<MediaTextPreview> {
final text = utf8.decode(bytes, allowMalformed: true);
_controller.text = text;
setState(() => _saved = text);
_syncToolbar();
}
} catch (e) {
if (mounted) setState(() => _error = e.toString());
@@ -99,6 +201,7 @@ class _MediaTextPreviewState extends State<MediaTextPreview> {
final messenger = ScaffoldMessenger.of(context);
final text = _controller.text;
setState(() => _isSaving = true);
_syncToolbar();
var ok = false;
try {
ok = await widget.session.service!.putBytes(
@@ -111,6 +214,7 @@ class _MediaTextPreviewState extends State<MediaTextPreview> {
_isSaving = false;
if (ok) _saved = text;
});
_syncToolbar();
messenger.showSnackBar(
SnackBar(
content: Text(ok ? 'Saved ${widget.item.name}' : 'Could not save file'),
@@ -171,30 +275,6 @@ class _MediaTextPreviewState extends State<MediaTextPreview> {
),
),
),
if (_isMarkdown && !_readOnly)
Positioned(
right: 20,
top: safe.top + _kTopBarClearance - 8,
child: NooButton(
variant: NooButtonVariant.tonal,
size: NooButtonSize.compact,
icon: _editing ? LucideIcons.eye : LucideIcons.pencil,
onTap: () => setState(() => _editing = !_editing),
child: Text(_editing ? 'Preview' : 'Edit'),
),
),
if (_dirty)
Positioned(
right: 20,
bottom: safe.bottom + _kActionBarClearance,
child: NooButton(
size: NooButtonSize.card,
icon: LucideIcons.save,
disabled: _isSaving,
onTap: _isSaving ? null : _save,
child: Text(_isSaving ? 'Saving…' : 'Save'),
),
),
],
),
);
test/views/file_viewer_screen_test.dart
+195
View File
@@ -0,0 +1,195 @@
import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter_markdown_plus/flutter_markdown_plus.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:noo/models/nextcloud_item.dart';
import 'package:noo/providers/item_operations.dart';
import 'package:noo/providers/session_controller.dart';
import 'package:noo/services/nextcloud_service.dart';
import 'package:noo/views/file_viewer_screen.dart';
import 'package:noo/widgets/noo/nav/noo_top_bar.dart';
import 'package:noo/widgets/viewer/media_action_bar.dart';
import 'package:provider/provider.dart';
import '../widgets/noo/noo_test_utils.dart';
class _Service extends NextcloudService {
_Service() : super(serverUrl: '', username: '', password: '');
final loaded = Completer<List<int>>();
Completer<bool>? saving;
String? written;
@override
Future<List<int>> fetchBytes(String itemPath) => loaded.future;
@override
Future<bool> putBytes(String itemPath, List<int> bytes) {
written = utf8.decode(bytes);
saving = Completer<bool>();
return saving!.future;
}
}
// These stand-ins avoid starting session restoration and platform channels.
class _Session extends ChangeNotifier implements SessionController {
_Session(this.service);
@override
final NextcloudService service;
@override
dynamic noSuchMethod(Invocation invocation) => super.noSuchMethod(invocation);
}
class _Operations implements ItemOperations {
@override
dynamic noSuchMethod(Invocation invocation) => super.noSuchMethod(invocation);
}
Finder _button(String tooltip) => find.byWidgetPredicate(
(widget) => widget is NooTopBarButton && widget.tooltip == tooltip,
);
void main() {
setUpNooTests();
Future<_Service> mount(
WidgetTester tester,
Size size, {
String name = 'notes.md',
bool offline = false,
}) async {
final service = _Service();
final session = _Session(service);
addTearDown(session.dispose);
await tester.binding.setSurfaceSize(size);
addTearDown(() => tester.binding.setSurfaceSize(null));
await tester.pumpWidget(
MultiProvider(
providers: [
ChangeNotifierProvider<SessionController>.value(value: session),
Provider<ItemOperations>.value(value: _Operations()),
],
child: MaterialApp(
theme: nooTheme(Brightness.light),
home: FileViewerScreen(
item: NextcloudItem(
id: '1',
name: name,
path: '/$name',
type: NextcloudItemType.file,
size: 12,
lastModified: DateTime(2026),
),
localPathResolver: offline ? (_) async => null : null,
),
),
),
);
return service;
}
for (final width in [390.0, 1200.0]) {
testWidgets('text actions use the top bar at width $width', (tester) async {
final service = await mount(tester, Size(width, 800));
expect(_button('Edit'), findsNothing);
expect(_button('Save'), findsNothing);
service.loaded.complete(utf8.encode('# Original'));
await tester.pumpAndSettle();
void inHeader(String label) {
final row = find
.ancestor(of: _button('Back'), matching: find.byType(Row))
.first;
expect(
find.descendant(of: row, matching: _button(label)),
findsOneWidget,
);
expect(
find.descendant(
of: find.byType(MediaActionBar),
matching: _button(label),
),
findsNothing,
);
}
inHeader('Edit');
expect(find.byType(Markdown), findsOneWidget);
await tester.tap(_button('Edit'));
await tester.pumpAndSettle();
inHeader('Preview');
await tester.enterText(find.byType(TextField), '# Changed');
await tester.pump();
inHeader('Save');
await tester.tap(_button('Preview'));
await tester.pumpAndSettle();
expect(tester.widget<Markdown>(find.byType(Markdown)).data, '# Changed');
inHeader('Save');
await tester.tap(_button('Save'));
await tester.pump();
expect(service.written, '# Changed');
// While the save is in flight the Save button gives way to a spinner,
// so it can't be tapped twice.
expect(_button('Save'), findsNothing);
expect(
find.byWidgetPredicate(
(w) => w is Semantics && w.properties.label == 'Saving',
),
findsOneWidget,
);
service.saving!.complete(false);
await tester.pumpAndSettle();
inHeader('Save');
expect(find.text('Could not save file'), findsOneWidget);
await tester.tap(_button('Save'));
await tester.pump();
service.saving!.complete(true);
await tester.pumpAndSettle();
expect(_button('Save'), findsNothing);
expect(_button('Edit'), findsOneWidget);
expect(tester.takeException(), isNull);
await tester.pumpWidget(const SizedBox.shrink());
});
}
testWidgets('plain text has Save without the markdown toggle', (
tester,
) async {
final service = await mount(
tester,
const Size(390, 800),
name: 'notes.txt',
);
service.loaded.complete(utf8.encode('Original'));
await tester.pumpAndSettle();
expect(_button('Edit'), findsNothing);
expect(_button('Preview'), findsNothing);
await tester.enterText(find.byType(TextField), 'Changed');
await tester.pump();
expect(_button('Save'), findsOneWidget);
await tester.pumpWidget(const SizedBox.shrink());
});
for (final offline in [false, true]) {
testWidgets('no text actions for offline=$offline unsupported files', (
tester,
) async {
await mount(
tester,
const Size(390, 800),
name: offline ? 'notes.md' : 'data.bin',
offline: offline,
);
await tester.pumpAndSettle();
expect(_button('Edit'), findsNothing);
expect(_button('Preview'), findsNothing);
expect(_button('Save'), findsNothing);
expect(tester.takeException(), isNull);
await tester.pumpWidget(const SizedBox.shrink());
});
}
}