add long press information in button customization screen

This commit is contained in:
Fabian Freund
2026-03-13 04:36:39 +01:00
parent 85b08667ae
commit 8dc7151c45
2 changed files with 162 additions and 4 deletions
@@ -64,6 +64,7 @@ class ToolbarButtonDefinition {
WidgetRef ref, WidgetRef ref,
) )
builder; builder;
final List<String> longPressActions;
const ToolbarButtonDefinition({ const ToolbarButtonDefinition({
required this.spec, required this.spec,
@@ -71,6 +72,7 @@ class ToolbarButtonDefinition {
required this.icon, required this.icon,
this.isPrimaryAvailable, this.isPrimaryAvailable,
required this.builder, required this.builder,
this.longPressActions = const [],
}); });
} }
@@ -82,6 +84,7 @@ final List<ToolbarButtonDefinition> toolbarButtonRegistry = [
isPrimaryAvailable: (scope, ref) => isPrimaryAvailable: (scope, ref) =>
scope.tabState?.historyState.canGoBack == true || scope.tabState?.historyState.canGoBack == true ||
scope.tabState?.isLoading == true, scope.tabState?.isLoading == true,
longPressActions: ['History Menu (Previous pages)'],
builder: (scope, context, ref) { builder: (scope, context, ref) {
if (scope.isPreview) { if (scope.isPreview) {
return NavigateBackButtonView( return NavigateBackButtonView(
@@ -103,6 +106,7 @@ final List<ToolbarButtonDefinition> toolbarButtonRegistry = [
icon: Icons.arrow_forward, icon: Icons.arrow_forward,
isPrimaryAvailable: (scope, ref) => isPrimaryAvailable: (scope, ref) =>
scope.tabState?.historyState.canGoForward == true, scope.tabState?.historyState.canGoForward == true,
longPressActions: ['History Menu (Forward pages)'],
builder: (scope, context, ref) { builder: (scope, context, ref) {
if (scope.isPreview) { if (scope.isPreview) {
return NavigateForwardButtonView( return NavigateForwardButtonView(
@@ -118,6 +122,7 @@ final List<ToolbarButtonDefinition> toolbarButtonRegistry = [
spec: bookmarksToolbarButtonSpec, spec: bookmarksToolbarButtonSpec,
label: 'Bookmarks', label: 'Bookmarks',
icon: MdiIcons.bookmarkMultiple, icon: MdiIcons.bookmarkMultiple,
longPressActions: ['Add Bookmark', 'Remove Bookmark'],
builder: (scope, context, ref) => _BookmarkToolbarButton(scope: scope), builder: (scope, context, ref) => _BookmarkToolbarButton(scope: scope),
), ),
ToolbarButtonDefinition( ToolbarButtonDefinition(
@@ -132,6 +137,12 @@ final List<ToolbarButtonDefinition> toolbarButtonRegistry = [
spec: addTabToolbarButtonSpec, spec: addTabToolbarButtonSpec,
label: 'New Tab', label: 'New Tab',
icon: MdiIcons.tabPlus, icon: MdiIcons.tabPlus,
longPressActions: [
'Add Regular Tab',
'Add Child Tab',
'Add Private Tab',
'Add Isolated Tab',
],
builder: (scope, context, ref) => scope.isPreview builder: (scope, context, ref) => scope.isPreview
? AddTabButtonView(onPressed: () {}, onLongPress: () {}) ? AddTabButtonView(onPressed: () {}, onLongPress: () {})
: const AddTabButton(), : const AddTabButton(),
@@ -140,6 +151,12 @@ final List<ToolbarButtonDefinition> toolbarButtonRegistry = [
spec: tabsCountToolbarButtonSpec, spec: tabsCountToolbarButtonSpec,
label: 'Tabs', label: 'Tabs',
icon: MdiIcons.tab, icon: MdiIcons.tab,
longPressActions: [
'Add Regular Tab',
'Add Child Tab',
'Add Private Tab',
'Add Isolated Tab',
],
builder: (scope, context, ref) => scope.isPreview builder: (scope, context, ref) => scope.isPreview
? TabsCountButtonView( ? TabsCountButtonView(
isActive: false, isActive: false,
@@ -172,6 +189,7 @@ final List<ToolbarButtonDefinition> toolbarButtonRegistry = [
spec: reloadToolbarButtonSpec, spec: reloadToolbarButtonSpec,
label: 'Reload', label: 'Reload',
icon: Icons.refresh, icon: Icons.refresh,
longPressActions: ['Hard Refresh (bypass cache)'],
builder: (scope, context, ref) => _ReloadToolbarButton(scope: scope), builder: (scope, context, ref) => _ReloadToolbarButton(scope: scope),
), ),
ToolbarButtonDefinition( ToolbarButtonDefinition(
@@ -223,6 +241,7 @@ final List<ToolbarButtonDefinition> toolbarButtonRegistry = [
spec: translationToolbarButtonSpec, spec: translationToolbarButtonSpec,
label: 'Translate', label: 'Translate',
icon: Icons.translate, icon: Icons.translate,
longPressActions: ['Show Translation Options'],
isPrimaryAvailable: (scope, ref) { isPrimaryAvailable: (scope, ref) {
final engineState = ref.read(translationEngineStateProvider); final engineState = ref.read(translationEngineStateProvider);
final readerActive = scope.tabState?.readerableState.active ?? false; final readerActive = scope.tabState?.readerableState.active ?? false;
@@ -257,6 +276,7 @@ final List<ToolbarButtonDefinition> toolbarButtonRegistry = [
spec: closeTabToolbarButtonSpec, spec: closeTabToolbarButtonSpec,
label: 'Close Tab', label: 'Close Tab',
icon: MdiIcons.tabMinus, icon: MdiIcons.tabMinus,
longPressActions: ['Close Others', 'Close from Same Host'],
builder: (scope, context, ref) => _CloseTabToolbarButton(scope: scope), builder: (scope, context, ref) => _CloseTabToolbarButton(scope: scope),
), ),
ToolbarButtonDefinition( ToolbarButtonDefinition(
@@ -294,6 +314,11 @@ final List<ToolbarButtonDefinition> toolbarButtonRegistry = [
spec: duplicateTabToolbarButtonSpec, spec: duplicateTabToolbarButtonSpec,
label: 'Duplicate Tab', label: 'Duplicate Tab',
icon: MdiIcons.contentDuplicate, icon: MdiIcons.contentDuplicate,
longPressActions: [
'Clone as Regular',
'Clone as Private',
'Clone as Isolated',
],
builder: (scope, context, ref) { builder: (scope, context, ref) {
return scope.isPreview return scope.isPreview
? CloneTabButtonView(onPressed: () {}, onLongPress: () {}) ? CloneTabButtonView(onPressed: () {}, onLongPress: () {})
@@ -341,6 +366,7 @@ final List<ToolbarButtonDefinition> toolbarButtonRegistry = [
spec: pageUpToolbarButtonSpec, spec: pageUpToolbarButtonSpec,
label: 'Page Up', label: 'Page Up',
icon: MdiIcons.chevronDoubleUp, icon: MdiIcons.chevronDoubleUp,
longPressActions: ['Scroll to Top'],
builder: (scope, context, ref) { builder: (scope, context, ref) {
return IconButton( return IconButton(
onPressed: scope.isPreview onPressed: scope.isPreview
@@ -371,6 +397,7 @@ final List<ToolbarButtonDefinition> toolbarButtonRegistry = [
spec: pageDownToolbarButtonSpec, spec: pageDownToolbarButtonSpec,
label: 'Page Down', label: 'Page Down',
icon: MdiIcons.chevronDoubleDown, icon: MdiIcons.chevronDoubleDown,
longPressActions: ['Scroll to Bottom'],
builder: (scope, context, ref) { builder: (scope, context, ref) {
return IconButton( return IconButton(
onPressed: scope.isPreview onPressed: scope.isPreview
@@ -415,6 +442,7 @@ final List<ToolbarButtonDefinition> toolbarButtonRegistry = [
spec: extensionShortcutToolbarButtonSpec, spec: extensionShortcutToolbarButtonSpec,
label: 'Extensions', label: 'Extensions',
icon: MdiIcons.puzzle, icon: MdiIcons.puzzle,
longPressActions: ['Extensions Menu'],
isPrimaryAvailable: (scope, ref) => ref isPrimaryAvailable: (scope, ref) => ref
.read( .read(
webExtensionsStateProvider( webExtensionsStateProvider(
@@ -191,21 +191,34 @@ class _ToolbarButtonConfigTile extends HookConsumerWidget {
) )
.toList(); .toList();
final longPressActions = def.longPressActions;
return Material( return Material(
color: Colors.transparent, color: Colors.transparent,
child: ListTile( child: ListTile(
leading: Icon(def.icon), leading: Icon(def.icon),
title: Text(def.label), title: Text(def.label),
subtitle: hasStatefulFallback subtitle: Column(
? _FallbackPicker( crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
if (hasStatefulFallback)
_FallbackPicker(
current: ToolbarFallbackChoice.fromStored(config.fallbackId), current: ToolbarFallbackChoice.fromStored(config.fallbackId),
options: fallbackOptions, options: fallbackOptions,
onChanged: (newFallback) => repository.assignFallback( onChanged: (newFallback) => repository.assignFallback(
config.buttonId, config.buttonId,
(newFallback ?? ToolbarFallbackNone()).toStoredFallbackId(), (newFallback ?? ToolbarFallbackNone()).toStoredFallbackId(),
), ),
) ),
: null, if (longPressActions.isNotEmpty)
_LongPressHint(
buttonLabel: def.label,
icon: def.icon,
actions: longPressActions,
),
],
),
trailing: Row( trailing: Row(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
@@ -228,6 +241,121 @@ class _ToolbarButtonConfigTile extends HookConsumerWidget {
} }
} }
class _LongPressHint extends StatelessWidget {
const _LongPressHint({
required this.buttonLabel,
required this.icon,
required this.actions,
});
final String buttonLabel;
final IconData icon;
final List<String> actions;
@override
Widget build(BuildContext context) {
return InkWell(
borderRadius: BorderRadius.circular(4),
onTap: () => _showLongPressDetails(context),
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 4),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.touch_app,
size: 14,
color: Theme.of(context).colorScheme.primary,
),
const SizedBox(width: 8),
Flexible(
child: Text(
'Long press available',
style: TextStyle(
color: Theme.of(context).colorScheme.primary,
fontSize: 12,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
const SizedBox(width: 4),
Icon(
Icons.info_outline,
size: 14,
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
],
),
),
);
}
Future<void> _showLongPressDetails(BuildContext context) async {
await showModalBottomSheet(
context: context,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
),
builder: (context) {
return SafeArea(
child: Padding(
padding: const EdgeInsets.all(20),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(icon, color: Theme.of(context).colorScheme.primary),
const SizedBox(width: 12),
Text(
'$buttonLabel Long Press',
style: Theme.of(context).textTheme.titleMedium?.copyWith(
fontWeight: FontWeight.bold,
),
),
],
),
const SizedBox(height: 8),
Text(
'Press and hold this button to access:',
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
),
const SizedBox(height: 12),
...actions.map(
(action) => Padding(
padding: const EdgeInsets.symmetric(vertical: 6),
child: Row(
children: [
Icon(
Icons.touch_app,
size: 18,
color: Theme.of(context).colorScheme.primary,
),
const SizedBox(width: 12),
Expanded(
child: Text(
action,
style: Theme.of(context).textTheme.bodyLarge,
),
),
],
),
),
),
const SizedBox(height: 16),
],
),
),
);
},
);
}
}
class _FallbackPicker extends StatelessWidget { class _FallbackPicker extends StatelessWidget {
const _FallbackPicker({ const _FallbackPicker({
required this.current, required this.current,
@@ -245,6 +373,8 @@ class _FallbackPicker extends StatelessWidget {
value: current, value: current,
hint: const Text('No fallback'), hint: const Text('No fallback'),
isExpanded: true, isExpanded: true,
isDense: true,
padding: const EdgeInsets.symmetric(vertical: 2.0),
underline: const SizedBox.shrink(), underline: const SizedBox.shrink(),
items: [ items: [
DropdownMenuItem( DropdownMenuItem(