mirror of https://github.com/immich-app/immich.git
feat(mobile): init of add quick action configurator and settings for viewer actions
idubnori
parent
79d0e3e1ed
commit
eb7813047b
@ -0,0 +1,225 @@
|
||||
import 'package:easy_localization/easy_localization.dart';
|
||||
import 'package:flutter/foundation.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_reorderable_grid_view/widgets/reorderable_builder.dart';
|
||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||
import 'package:immich_mobile/providers/infrastructure/viewer_quick_action_order.provider.dart';
|
||||
import 'package:immich_mobile/utils/action_button.utils.dart';
|
||||
import 'package:immich_mobile/utils/action_button_visuals.dart';
|
||||
|
||||
class ViewerQuickActionConfigurator extends ConsumerStatefulWidget {
|
||||
const ViewerQuickActionConfigurator({super.key});
|
||||
|
||||
@override
|
||||
ConsumerState<ViewerQuickActionConfigurator> createState() => _ViewerQuickActionConfiguratorState();
|
||||
}
|
||||
|
||||
class _ViewerQuickActionConfiguratorState extends ConsumerState<ViewerQuickActionConfigurator> {
|
||||
late List<ActionButtonType> _order;
|
||||
late final ScrollController _scrollController;
|
||||
bool _hasLocalChanges = false;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_order = List<ActionButtonType>.from(ref.read(viewerQuickActionOrderProvider));
|
||||
_scrollController = ScrollController();
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_scrollController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
void _onReorder(ReorderedListFunction<ActionButtonType> reorder) {
|
||||
setState(() {
|
||||
_order = reorder(_order);
|
||||
_hasLocalChanges = true;
|
||||
});
|
||||
}
|
||||
|
||||
void _resetToDefault() {
|
||||
setState(() {
|
||||
_order = List<ActionButtonType>.from(ActionButtonBuilder.defaultQuickActionOrder);
|
||||
_hasLocalChanges = true;
|
||||
});
|
||||
}
|
||||
|
||||
void _cancel() => Navigator.of(context).pop();
|
||||
|
||||
Future<void> _save() async {
|
||||
final normalized = ActionButtonBuilder.normalizeQuickActionOrder(_order);
|
||||
|
||||
await ref.read(viewerQuickActionOrderProvider.notifier).setOrder(normalized);
|
||||
_hasLocalChanges = false;
|
||||
if (mounted) {
|
||||
Navigator.of(context).pop();
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
const crossAxisCount = 4;
|
||||
const crossAxisSpacing = 12.0;
|
||||
const mainAxisSpacing = 12.0;
|
||||
const tileHeight = 130.0;
|
||||
final currentOrder = ref.watch(viewerQuickActionOrderProvider);
|
||||
if (!_hasLocalChanges && !listEquals(_order, currentOrder)) {
|
||||
_order = List<ActionButtonType>.from(currentOrder);
|
||||
}
|
||||
final normalizedSelection = ActionButtonBuilder.normalizeQuickActionOrder(_order);
|
||||
final hasChanges = !listEquals(currentOrder, normalizedSelection);
|
||||
|
||||
return SafeArea(
|
||||
child: Padding(
|
||||
padding: EdgeInsets.only(left: 20, right: 20, bottom: MediaQuery.of(context).viewInsets.bottom + 20, top: 16),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.max,
|
||||
children: [
|
||||
Container(
|
||||
width: 40,
|
||||
height: 4,
|
||||
decoration: BoxDecoration(
|
||||
color: theme.colorScheme.onSurface.withValues(alpha: 0.25),
|
||||
borderRadius: BorderRadius.circular(2),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text('quick_actions_settings_title'.tr(), style: theme.textTheme.titleMedium),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
'quick_actions_settings_description'.tr(
|
||||
namedArgs: {'count': ActionButtonBuilder.defaultQuickActionLimit.toString()},
|
||||
),
|
||||
style: theme.textTheme.bodyMedium,
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
Expanded(
|
||||
child: LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
final rows = (_order.length / crossAxisCount).ceil().clamp(1, 4);
|
||||
final naturalHeight = rows * tileHeight + (rows - 1) * mainAxisSpacing;
|
||||
final shouldScroll = naturalHeight > constraints.maxHeight;
|
||||
final horizontalPadding = 8.0; // matches GridView padding
|
||||
final tileWidth =
|
||||
(constraints.maxWidth - horizontalPadding - (crossAxisSpacing * (crossAxisCount - 1))) /
|
||||
crossAxisCount;
|
||||
final childAspectRatio = tileWidth / tileHeight;
|
||||
final gridController = shouldScroll ? _scrollController : null;
|
||||
|
||||
return ReorderableBuilder<ActionButtonType>(
|
||||
onReorder: _onReorder,
|
||||
enableLongPress: false,
|
||||
scrollController: gridController,
|
||||
children: [
|
||||
for (var i = 0; i < _order.length; i++)
|
||||
_QuickActionTile(key: ValueKey(_order[i].name), index: i, type: _order[i]),
|
||||
],
|
||||
builder: (children) => GridView.count(
|
||||
controller: gridController,
|
||||
crossAxisCount: crossAxisCount,
|
||||
crossAxisSpacing: crossAxisSpacing,
|
||||
mainAxisSpacing: mainAxisSpacing,
|
||||
// padding: const EdgeInsets.fromLTRB(4, 0, 4, 12),
|
||||
physics: shouldScroll ? const BouncingScrollPhysics() : const NeverScrollableScrollPhysics(),
|
||||
childAspectRatio: childAspectRatio,
|
||||
children: children,
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
TextButton(onPressed: _resetToDefault, child: const Text('reset').tr()),
|
||||
Row(
|
||||
children: [
|
||||
TextButton(onPressed: _cancel, child: const Text('cancel').tr()),
|
||||
const SizedBox(width: 8),
|
||||
FilledButton(onPressed: hasChanges ? _save : null, child: const Text('done').tr()),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _QuickActionTile extends StatelessWidget {
|
||||
final int index;
|
||||
final ActionButtonType type;
|
||||
|
||||
const _QuickActionTile({super.key, required this.index, required this.type});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final borderColor = theme.dividerColor;
|
||||
final backgroundColor = theme.colorScheme.surfaceContainerHighest.withValues(alpha: 0.2);
|
||||
final indicatorColor = theme.colorScheme.primary;
|
||||
final accentColor = theme.colorScheme.onSurface.withValues(alpha: 0.7);
|
||||
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 2),
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
border: Border.all(color: borderColor),
|
||||
color: backgroundColor,
|
||||
),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
Container(
|
||||
width: 24,
|
||||
height: 24,
|
||||
decoration: BoxDecoration(
|
||||
color: indicatorColor.withValues(alpha: 0.15),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Center(
|
||||
child: Text(
|
||||
'${index + 1}',
|
||||
style: theme.textTheme.labelSmall?.copyWith(color: indicatorColor, fontWeight: FontWeight.bold),
|
||||
),
|
||||
),
|
||||
),
|
||||
const Spacer(),
|
||||
Icon(Icons.drag_indicator_rounded, size: 18, color: indicatorColor),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Align(
|
||||
alignment: Alignment.topCenter,
|
||||
child: Icon(type.iconData, size: 28, color: theme.colorScheme.onSurface),
|
||||
),
|
||||
const SizedBox(height: 6),
|
||||
Align(
|
||||
alignment: Alignment.topCenter,
|
||||
child: Text(
|
||||
type.localizedLabel(context),
|
||||
style: theme.textTheme.labelSmall?.copyWith(color: accentColor),
|
||||
textAlign: TextAlign.center,
|
||||
maxLines: 3,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,50 @@
|
||||
import 'dart:async';
|
||||
import 'package:flutter/foundation.dart';
|
||||
import 'package:immich_mobile/providers/app_settings.provider.dart';
|
||||
import 'package:immich_mobile/utils/action_button.utils.dart';
|
||||
import 'package:riverpod_annotation/riverpod_annotation.dart';
|
||||
|
||||
part 'viewer_quick_action_order.provider.g.dart';
|
||||
|
||||
@Riverpod(keepAlive: true)
|
||||
class ViewerQuickActionOrder extends _$ViewerQuickActionOrder {
|
||||
StreamSubscription<List<ActionButtonType>>? _subscription;
|
||||
|
||||
@override
|
||||
List<ActionButtonType> build() {
|
||||
final service = ref.watch(appSettingsServiceProvider);
|
||||
final initial = ActionButtonBuilder.normalizeQuickActionOrder(service.getViewerQuickActionOrder());
|
||||
|
||||
_subscription ??= service.watchViewerQuickActionOrder().listen((order) {
|
||||
state = ActionButtonBuilder.normalizeQuickActionOrder(order);
|
||||
});
|
||||
|
||||
ref.onDispose(() {
|
||||
_subscription?.cancel();
|
||||
_subscription = null;
|
||||
});
|
||||
|
||||
return initial;
|
||||
}
|
||||
|
||||
Future<void> setOrder(List<ActionButtonType> order) async {
|
||||
final normalized = ActionButtonBuilder.normalizeQuickActionOrder(order);
|
||||
|
||||
if (listEquals(state, normalized)) {
|
||||
return;
|
||||
}
|
||||
|
||||
final previous = state;
|
||||
state = normalized;
|
||||
|
||||
try {
|
||||
await ref.read(appSettingsServiceProvider).setViewerQuickActionOrder(normalized);
|
||||
} catch (error) {
|
||||
state = previous;
|
||||
rethrow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Mock class for testing
|
||||
abstract class ViewerQuickActionOrderInternal extends _$ViewerQuickActionOrder {}
|
||||
@ -0,0 +1,27 @@
|
||||
// GENERATED CODE - DO NOT MODIFY BY HAND
|
||||
|
||||
part of 'viewer_quick_action_order.provider.dart';
|
||||
|
||||
// **************************************************************************
|
||||
// RiverpodGenerator
|
||||
// **************************************************************************
|
||||
|
||||
String _$viewerQuickActionOrderHash() =>
|
||||
r'd539bc6ba5fae4fa07a7c30c42d9f6aee1488f97';
|
||||
|
||||
/// See also [ViewerQuickActionOrder].
|
||||
@ProviderFor(ViewerQuickActionOrder)
|
||||
final viewerQuickActionOrderProvider =
|
||||
NotifierProvider<ViewerQuickActionOrder, List<ActionButtonType>>.internal(
|
||||
ViewerQuickActionOrder.new,
|
||||
name: r'viewerQuickActionOrderProvider',
|
||||
debugGetCreateSourceHash: const bool.fromEnvironment('dart.vm.product')
|
||||
? null
|
||||
: _$viewerQuickActionOrderHash,
|
||||
dependencies: null,
|
||||
allTransitiveDependencies: null,
|
||||
);
|
||||
|
||||
typedef _$ViewerQuickActionOrder = Notifier<List<ActionButtonType>>;
|
||||
// ignore_for_file: type=lint
|
||||
// ignore_for_file: subtype_of_sealed_class, invalid_use_of_internal_member, invalid_use_of_visible_for_testing_member, deprecated_member_use_from_same_package
|
||||
@ -0,0 +1,53 @@
|
||||
import 'package:easy_localization/easy_localization.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:immich_mobile/utils/action_button.utils.dart';
|
||||
|
||||
extension ActionButtonTypeVisuals on ActionButtonType {
|
||||
IconData get iconData {
|
||||
return switch (this) {
|
||||
ActionButtonType.advancedInfo => Icons.help_outline_rounded,
|
||||
ActionButtonType.share => Icons.share_rounded,
|
||||
ActionButtonType.edit => Icons.tune,
|
||||
ActionButtonType.shareLink => Icons.link_rounded,
|
||||
ActionButtonType.similarPhotos => Icons.compare,
|
||||
ActionButtonType.archive => Icons.archive_outlined,
|
||||
ActionButtonType.unarchive => Icons.unarchive_outlined,
|
||||
ActionButtonType.download => Icons.download,
|
||||
ActionButtonType.trash => Icons.delete_outline_rounded,
|
||||
ActionButtonType.deletePermanent => Icons.delete_forever,
|
||||
ActionButtonType.delete => Icons.delete_sweep_outlined,
|
||||
ActionButtonType.moveToLockFolder => Icons.lock_outline_rounded,
|
||||
ActionButtonType.removeFromLockFolder => Icons.lock_open_rounded,
|
||||
ActionButtonType.deleteLocal => Icons.no_cell_outlined,
|
||||
ActionButtonType.upload => Icons.backup_outlined,
|
||||
ActionButtonType.removeFromAlbum => Icons.remove_circle_outline,
|
||||
ActionButtonType.unstack => Icons.layers_clear_outlined,
|
||||
ActionButtonType.likeActivity => Icons.favorite_border,
|
||||
};
|
||||
}
|
||||
|
||||
String get _labelKey {
|
||||
return switch (this) {
|
||||
ActionButtonType.advancedInfo => 'troubleshoot',
|
||||
ActionButtonType.share => 'share',
|
||||
ActionButtonType.edit => 'edit',
|
||||
ActionButtonType.shareLink => 'share_link',
|
||||
ActionButtonType.similarPhotos => 'view_similar_photos',
|
||||
ActionButtonType.archive => 'to_archive',
|
||||
ActionButtonType.unarchive => 'unarchive',
|
||||
ActionButtonType.download => 'download',
|
||||
ActionButtonType.trash => 'control_bottom_app_bar_trash_from_immich',
|
||||
ActionButtonType.deletePermanent => 'delete_permanently',
|
||||
ActionButtonType.delete => 'delete',
|
||||
ActionButtonType.moveToLockFolder => 'move_to_locked_folder',
|
||||
ActionButtonType.removeFromLockFolder => 'remove_from_locked_folder',
|
||||
ActionButtonType.deleteLocal => 'control_bottom_app_bar_delete_from_local',
|
||||
ActionButtonType.upload => 'upload',
|
||||
ActionButtonType.removeFromAlbum => 'remove_from_album',
|
||||
ActionButtonType.unstack => 'unstack',
|
||||
ActionButtonType.likeActivity => 'like',
|
||||
};
|
||||
}
|
||||
|
||||
String localizedLabel(BuildContext context) => _labelKey.tr();
|
||||
}
|
||||
Loading…
Reference in New Issue