scroll to setting search entry and threshold for search box
This commit is contained in:
@@ -0,0 +1,41 @@
|
|||||||
|
/*
|
||||||
|
* Copyright (c) 2024-2026 Fabian Freund.
|
||||||
|
*
|
||||||
|
* This file is part of WebLibre
|
||||||
|
* (see https://weblibre.eu).
|
||||||
|
*
|
||||||
|
* This program is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU Affero General Public License as
|
||||||
|
* published by the Free Software Foundation, either version 3 of the
|
||||||
|
* License, or (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU Affero General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU Affero General Public License
|
||||||
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
import 'package:riverpod_annotation/riverpod_annotation.dart';
|
||||||
|
|
||||||
|
part 'pending_settings_highlight.g.dart';
|
||||||
|
|
||||||
|
/// Holds the [SettingsEntryDefinition.title] that a destination settings
|
||||||
|
/// screen should auto-scroll to and briefly pulse after navigation. Set by
|
||||||
|
/// the global settings search before pushing the destination route; consumed
|
||||||
|
/// (and cleared) by the matching entry once it has been highlighted.
|
||||||
|
@Riverpod(keepAlive: true)
|
||||||
|
class PendingSettingsHighlight extends _$PendingSettingsHighlight {
|
||||||
|
@override
|
||||||
|
String? build() => null;
|
||||||
|
|
||||||
|
// ignore: use_setters_to_change_properties
|
||||||
|
void set(String? title) {
|
||||||
|
state = title;
|
||||||
|
}
|
||||||
|
|
||||||
|
void clear() {
|
||||||
|
state = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
+80
@@ -0,0 +1,80 @@
|
|||||||
|
// GENERATED CODE - DO NOT MODIFY BY HAND
|
||||||
|
|
||||||
|
part of 'pending_settings_highlight.dart';
|
||||||
|
|
||||||
|
// **************************************************************************
|
||||||
|
// RiverpodGenerator
|
||||||
|
// **************************************************************************
|
||||||
|
|
||||||
|
// GENERATED CODE - DO NOT MODIFY BY HAND
|
||||||
|
// ignore_for_file: type=lint, type=warning
|
||||||
|
/// Holds the [SettingsEntryDefinition.title] that a destination settings
|
||||||
|
/// screen should auto-scroll to and briefly pulse after navigation. Set by
|
||||||
|
/// the global settings search before pushing the destination route; consumed
|
||||||
|
/// (and cleared) by the matching entry once it has been highlighted.
|
||||||
|
|
||||||
|
@ProviderFor(PendingSettingsHighlight)
|
||||||
|
final pendingSettingsHighlightProvider = PendingSettingsHighlightProvider._();
|
||||||
|
|
||||||
|
/// Holds the [SettingsEntryDefinition.title] that a destination settings
|
||||||
|
/// screen should auto-scroll to and briefly pulse after navigation. Set by
|
||||||
|
/// the global settings search before pushing the destination route; consumed
|
||||||
|
/// (and cleared) by the matching entry once it has been highlighted.
|
||||||
|
final class PendingSettingsHighlightProvider
|
||||||
|
extends $NotifierProvider<PendingSettingsHighlight, String?> {
|
||||||
|
/// Holds the [SettingsEntryDefinition.title] that a destination settings
|
||||||
|
/// screen should auto-scroll to and briefly pulse after navigation. Set by
|
||||||
|
/// the global settings search before pushing the destination route; consumed
|
||||||
|
/// (and cleared) by the matching entry once it has been highlighted.
|
||||||
|
PendingSettingsHighlightProvider._()
|
||||||
|
: super(
|
||||||
|
from: null,
|
||||||
|
argument: null,
|
||||||
|
retry: null,
|
||||||
|
name: r'pendingSettingsHighlightProvider',
|
||||||
|
isAutoDispose: false,
|
||||||
|
dependencies: null,
|
||||||
|
$allTransitiveDependencies: null,
|
||||||
|
);
|
||||||
|
|
||||||
|
@override
|
||||||
|
String debugGetCreateSourceHash() => _$pendingSettingsHighlightHash();
|
||||||
|
|
||||||
|
@$internal
|
||||||
|
@override
|
||||||
|
PendingSettingsHighlight create() => PendingSettingsHighlight();
|
||||||
|
|
||||||
|
/// {@macro riverpod.override_with_value}
|
||||||
|
Override overrideWithValue(String? value) {
|
||||||
|
return $ProviderOverride(
|
||||||
|
origin: this,
|
||||||
|
providerOverride: $SyncValueProvider<String?>(value),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
String _$pendingSettingsHighlightHash() =>
|
||||||
|
r'e64c23c22991e94ec6115ac27b5d7b9d33b801be';
|
||||||
|
|
||||||
|
/// Holds the [SettingsEntryDefinition.title] that a destination settings
|
||||||
|
/// screen should auto-scroll to and briefly pulse after navigation. Set by
|
||||||
|
/// the global settings search before pushing the destination route; consumed
|
||||||
|
/// (and cleared) by the matching entry once it has been highlighted.
|
||||||
|
|
||||||
|
abstract class _$PendingSettingsHighlight extends $Notifier<String?> {
|
||||||
|
String? build();
|
||||||
|
@$mustCallSuper
|
||||||
|
@override
|
||||||
|
void runBuild() {
|
||||||
|
final ref = this.ref as $Ref<String?, String?>;
|
||||||
|
final element =
|
||||||
|
ref.element
|
||||||
|
as $ClassProviderElement<
|
||||||
|
AnyNotifier<String?, String?>,
|
||||||
|
String?,
|
||||||
|
Object?,
|
||||||
|
Object?
|
||||||
|
>;
|
||||||
|
element.handleCreate(ref, build);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -21,7 +21,9 @@ import 'package:fading_scroll/fading_scroll.dart';
|
|||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:flutter_hooks/flutter_hooks.dart';
|
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||||
import 'package:flutter_material_design_icons/flutter_material_design_icons.dart';
|
import 'package:flutter_material_design_icons/flutter_material_design_icons.dart';
|
||||||
|
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||||
import 'package:weblibre/core/routing/routes.dart';
|
import 'package:weblibre/core/routing/routes.dart';
|
||||||
|
import 'package:weblibre/features/settings/domain/providers/pending_settings_highlight.dart';
|
||||||
import 'package:weblibre/features/settings/presentation/screens/advanced_settings.dart';
|
import 'package:weblibre/features/settings/presentation/screens/advanced_settings.dart';
|
||||||
import 'package:weblibre/features/settings/presentation/screens/browsing_settings.dart';
|
import 'package:weblibre/features/settings/presentation/screens/browsing_settings.dart';
|
||||||
import 'package:weblibre/features/settings/presentation/screens/extensions_settings.dart';
|
import 'package:weblibre/features/settings/presentation/screens/extensions_settings.dart';
|
||||||
@@ -327,7 +329,7 @@ class _CategoryTile extends StatelessWidget {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
class _SearchResultTile extends StatelessWidget {
|
class _SearchResultTile extends HookConsumerWidget {
|
||||||
final String title;
|
final String title;
|
||||||
final String? subtitle;
|
final String? subtitle;
|
||||||
final String category;
|
final String category;
|
||||||
@@ -345,7 +347,7 @@ class _SearchResultTile extends StatelessWidget {
|
|||||||
});
|
});
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context, WidgetRef ref) {
|
||||||
return ListTile(
|
return ListTile(
|
||||||
leading: Icon(icon),
|
leading: Icon(icon),
|
||||||
title: Text(title),
|
title: Text(title),
|
||||||
@@ -361,7 +363,16 @@ class _SearchResultTile extends StatelessWidget {
|
|||||||
),
|
),
|
||||||
trailing: const Icon(Icons.chevron_right),
|
trailing: const Icon(Icons.chevron_right),
|
||||||
onTap: () async {
|
onTap: () async {
|
||||||
await onTap(context);
|
final pendingHighlight = ref.read(
|
||||||
|
pendingSettingsHighlightProvider.notifier,
|
||||||
|
);
|
||||||
|
pendingHighlight.set(title);
|
||||||
|
try {
|
||||||
|
await onTap(context);
|
||||||
|
} catch (_) {
|
||||||
|
pendingHighlight.clear();
|
||||||
|
rethrow;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -20,6 +20,12 @@
|
|||||||
import 'package:fading_scroll/fading_scroll.dart';
|
import 'package:fading_scroll/fading_scroll.dart';
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:flutter_hooks/flutter_hooks.dart';
|
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||||
|
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||||
|
import 'package:weblibre/features/settings/domain/providers/pending_settings_highlight.dart';
|
||||||
|
|
||||||
|
/// Default total-entry count at or below which [SettingsDetailScaffold] hides
|
||||||
|
/// its search field — searching three toggles is just visual noise.
|
||||||
|
const int kDefaultSettingsSearchEntryThreshold = 10;
|
||||||
|
|
||||||
class SettingsEntryDefinition {
|
class SettingsEntryDefinition {
|
||||||
final String title;
|
final String title;
|
||||||
@@ -82,6 +88,7 @@ class SettingsDetailScaffold extends HookWidget {
|
|||||||
final List<SettingsSectionDefinition> sections;
|
final List<SettingsSectionDefinition> sections;
|
||||||
final List<Widget> actions;
|
final List<Widget> actions;
|
||||||
final String searchHintText;
|
final String searchHintText;
|
||||||
|
final int searchEntryThreshold;
|
||||||
|
|
||||||
const SettingsDetailScaffold({
|
const SettingsDetailScaffold({
|
||||||
super.key,
|
super.key,
|
||||||
@@ -91,16 +98,22 @@ class SettingsDetailScaffold extends HookWidget {
|
|||||||
required this.sections,
|
required this.sections,
|
||||||
this.actions = const [],
|
this.actions = const [],
|
||||||
this.searchHintText = 'Search settings',
|
this.searchHintText = 'Search settings',
|
||||||
|
this.searchEntryThreshold = kDefaultSettingsSearchEntryThreshold,
|
||||||
});
|
});
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
|
final totalEntries = sections.fold<int>(
|
||||||
|
0,
|
||||||
|
(sum, section) => sum + section.entries.length,
|
||||||
|
);
|
||||||
|
final showSearch = totalEntries > searchEntryThreshold;
|
||||||
|
|
||||||
final search = useSettingsSearch();
|
final search = useSettingsSearch();
|
||||||
|
|
||||||
final filteredSections = filterSettingsSections(
|
final filteredSections = showSearch
|
||||||
sections: sections,
|
? filterSettingsSections(sections: sections, query: search.rawQuery)
|
||||||
query: search.rawQuery,
|
: sections;
|
||||||
);
|
|
||||||
|
|
||||||
return Scaffold(
|
return Scaffold(
|
||||||
body: SafeArea(
|
body: SafeArea(
|
||||||
@@ -115,21 +128,27 @@ class SettingsDetailScaffold extends HookWidget {
|
|||||||
title: Text(title),
|
title: Text(title),
|
||||||
actions: actions,
|
actions: actions,
|
||||||
),
|
),
|
||||||
SliverPadding(
|
if (showSearch)
|
||||||
padding: const EdgeInsets.fromLTRB(16, 8, 16, 0),
|
SliverPadding(
|
||||||
sliver: SliverToBoxAdapter(
|
padding: const EdgeInsets.fromLTRB(16, 8, 16, 0),
|
||||||
child: SettingsSearchField(
|
sliver: SliverToBoxAdapter(
|
||||||
controller: search.controller,
|
child: SettingsSearchField(
|
||||||
hintText: searchHintText,
|
controller: search.controller,
|
||||||
|
hintText: searchHintText,
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
|
||||||
SliverPadding(
|
SliverPadding(
|
||||||
padding: const EdgeInsets.fromLTRB(16, 24, 16, 20),
|
padding: EdgeInsets.fromLTRB(
|
||||||
|
16,
|
||||||
|
showSearch ? 24 : 16,
|
||||||
|
16,
|
||||||
|
20,
|
||||||
|
),
|
||||||
sliver: SliverToBoxAdapter(
|
sliver: SliverToBoxAdapter(
|
||||||
child: SettingsSectionList(
|
child: SettingsSectionList(
|
||||||
sections: filteredSections,
|
sections: filteredSections,
|
||||||
query: search.rawQuery,
|
query: showSearch ? search.rawQuery : '',
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
@@ -297,7 +316,14 @@ List<Widget> buildSettingsSectionWidgets(
|
|||||||
entryIndex++
|
entryIndex++
|
||||||
) ...[
|
) ...[
|
||||||
if (entryIndex > 0) const Divider(height: 1),
|
if (entryIndex > 0) const Divider(height: 1),
|
||||||
sections[sectionIndex].entries[entryIndex].child,
|
_HighlightableEntry(
|
||||||
|
key: ValueKey(
|
||||||
|
'${sections[sectionIndex].title}/'
|
||||||
|
'${sections[sectionIndex].entries[entryIndex].title}',
|
||||||
|
),
|
||||||
|
title: sections[sectionIndex].entries[entryIndex].title,
|
||||||
|
child: sections[sectionIndex].entries[entryIndex].child,
|
||||||
|
),
|
||||||
],
|
],
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
@@ -306,6 +332,87 @@ List<Widget> buildSettingsSectionWidgets(
|
|||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// Wraps a settings entry tile and, when [PendingSettingsHighlight] matches
|
||||||
|
/// [title], auto-scrolls it into view and briefly pulses a tint behind it.
|
||||||
|
/// Self-clears the pending highlight as soon as the destination entry handles
|
||||||
|
/// it so the effect doesn't replay on rebuild or back-navigation.
|
||||||
|
class _HighlightableEntry extends HookConsumerWidget {
|
||||||
|
final String title;
|
||||||
|
final Widget child;
|
||||||
|
|
||||||
|
const _HighlightableEntry({
|
||||||
|
super.key,
|
||||||
|
required this.title,
|
||||||
|
required this.child,
|
||||||
|
});
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context, WidgetRef ref) {
|
||||||
|
final pending = ref.watch(pendingSettingsHighlightProvider);
|
||||||
|
final isTarget = pending != null && pending == title;
|
||||||
|
|
||||||
|
final controller = useAnimationController(
|
||||||
|
duration: const Duration(milliseconds: 1500),
|
||||||
|
);
|
||||||
|
|
||||||
|
final animation = useMemoized(
|
||||||
|
() => TweenSequence<double>([
|
||||||
|
TweenSequenceItem(
|
||||||
|
tween: Tween(
|
||||||
|
begin: 0.0,
|
||||||
|
end: 1.0,
|
||||||
|
).chain(CurveTween(curve: Curves.easeOut)),
|
||||||
|
weight: 20,
|
||||||
|
),
|
||||||
|
TweenSequenceItem(tween: ConstantTween(1.0), weight: 30),
|
||||||
|
TweenSequenceItem(
|
||||||
|
tween: Tween(
|
||||||
|
begin: 1.0,
|
||||||
|
end: 0.0,
|
||||||
|
).chain(CurveTween(curve: Curves.easeIn)),
|
||||||
|
weight: 50,
|
||||||
|
),
|
||||||
|
]).animate(controller),
|
||||||
|
[controller],
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() {
|
||||||
|
if (!isTarget) return null;
|
||||||
|
|
||||||
|
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||||
|
// Clear immediately once this entry claims the highlight so stale
|
||||||
|
// state cannot survive a quick pop or interrupted animation.
|
||||||
|
ref.read(pendingSettingsHighlightProvider.notifier).clear();
|
||||||
|
if (!context.mounted) return;
|
||||||
|
Scrollable.ensureVisible(
|
||||||
|
context,
|
||||||
|
duration: const Duration(milliseconds: 400),
|
||||||
|
curve: Curves.easeOutCubic,
|
||||||
|
alignment: 0.2,
|
||||||
|
);
|
||||||
|
controller.forward(from: 0);
|
||||||
|
});
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}, [isTarget]);
|
||||||
|
|
||||||
|
final highlightColor = Theme.of(context).colorScheme.secondaryContainer;
|
||||||
|
|
||||||
|
return AnimatedBuilder(
|
||||||
|
animation: animation,
|
||||||
|
builder: (context, child) {
|
||||||
|
final t = animation.value;
|
||||||
|
if (t == 0.0) return child!;
|
||||||
|
return ColoredBox(
|
||||||
|
color: highlightColor.withValues(alpha: t * 0.7),
|
||||||
|
child: child,
|
||||||
|
);
|
||||||
|
},
|
||||||
|
child: child,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
List<SettingsSectionDefinition> filterSettingsSections({
|
List<SettingsSectionDefinition> filterSettingsSections({
|
||||||
required List<SettingsSectionDefinition> sections,
|
required List<SettingsSectionDefinition> sections,
|
||||||
required String query,
|
required String query,
|
||||||
|
|||||||
Reference in New Issue
Block a user