0ct0pu5/immich
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Added floating button to count selected item and exist the multiselect mode on clicked

Browse source
This commit is contained in:
Alex Tran 2022-02-08 17:28:11 -06:00
parent b04e69fd66
commit 3ecd0e9468
7 changed files with 106 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
mobile/lib/modules/home/ui/daily_title_text.dart
View file

@ -24,6 +24,31 @@ class DailyTitleText extends ConsumerWidget {
var selectedDateGroup = ref.watch(homePageStateProvider).selectedDateGroup;
var selectedItems = ref.watch(homePageStateProvider).selectedItems;
void _handleTitleIconClick() {
if (isMultiSelectEnable &&
selectedDateGroup.contains(dateText) &&
selectedDateGroup.length == 1 &&
selectedItems.length <= assetGroup.length) {
// Multi select is active - click again on the icon while it is the only active group -> disable multi select
ref.watch(homePageStateProvider.notifier).disableMultiSelect();
} else if (isMultiSelectEnable &&
selectedDateGroup.contains(dateText) &&
selectedItems.length != assetGroup.length) {
// Multi select is active - click again on the icon while it is not the only active group -> remove that group from selected group/items
ref.watch(homePageStateProvider.notifier).removeSelectedDateGroup(dateText);
ref.watch(homePageStateProvider.notifier).removeMultipleSelectedItem(assetGroup);
} else if (isMultiSelectEnable && selectedDateGroup.contains(dateText) && selectedDateGroup.length > 1) {
ref.watch(homePageStateProvider.notifier).removeSelectedDateGroup(dateText);
ref.watch(homePageStateProvider.notifier).removeMultipleSelectedItem(assetGroup);
} else if (isMultiSelectEnable && !selectedDateGroup.contains(dateText)) {
ref.watch(homePageStateProvider.notifier).addSelectedDateGroup(dateText);
ref.watch(homePageStateProvider.notifier).addMultipleSelectedItems(assetGroup);
} else {
ref.watch(homePageStateProvider.notifier).enableMultiSelect(assetGroup.toSet());
ref.watch(homePageStateProvider.notifier).addSelectedDateGroup(dateText);
}
}
return SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.only(top: 29.0, bottom: 29.0, left: 12.0, right: 12.0),
@ -39,33 +64,16 @@ class DailyTitleText extends ConsumerWidget {
),
const Spacer(),
GestureDetector(
onTap: () {
if (isMultiSelectEnable &&
selectedDateGroup.contains(dateText) &&
selectedDateGroup.length == 1 &&
selectedItems.length == assetGroup.length) {
ref.watch(homePageStateProvider.notifier).disableMultiSelect();
} else if (isMultiSelectEnable &&
selectedDateGroup.contains(dateText) &&
selectedItems.length != assetGroup.length) {
ref.watch(homePageStateProvider.notifier).removeSelectedDateGroup(dateText);
ref.watch(homePageStateProvider.notifier).removeMultipleSelectedItem(assetGroup);
} else if (isMultiSelectEnable &&
selectedDateGroup.contains(dateText) &&
selectedDateGroup.length > 1) {
ref.watch(homePageStateProvider.notifier).removeSelectedDateGroup(dateText);
ref.watch(homePageStateProvider.notifier).removeMultipleSelectedItem(assetGroup);
} else if (isMultiSelectEnable && !selectedDateGroup.contains(dateText)) {
ref.watch(homePageStateProvider.notifier).addSelectedDateGroup(dateText);
ref.watch(homePageStateProvider.notifier).addMultipleSelectedItems(assetGroup);
} else {
ref.watch(homePageStateProvider.notifier).enableMultiSelect(assetGroup.toSet());
ref.watch(homePageStateProvider.notifier).addSelectedDateGroup(dateText);
}
},
onTap: _handleTitleIconClick,
child: isMultiSelectEnable && selectedDateGroup.contains(dateText)
? const Icon(Icons.check_circle_rounded)
: const Icon(Icons.check_circle_outline_rounded),
? Icon(
Icons.check_circle_rounded,
color: Theme.of(context).primaryColor,
)
: const Icon(
Icons.check_circle_outline_rounded,
color: Colors.grey,
),
)
],
),

0
mobile/lib/modules/home/ui/edit_bottom_app_bar.dart Normal file
View file

2
mobile/lib/modules/home/ui/profile_drawer.dart
View file

@ -57,8 +57,8 @@ class ProfileDrawer extends ConsumerWidget {
bool res = await ref.read(authenticationProvider.notifier).logout();
if (res) {
ref.watch(assetProvider.notifier).clearAllAsset();
AutoRouter.of(context).popUntilRoot();
ref.read(assetProvider.notifier).clearAllAsset();
}
},
)

1
mobile/lib/modules/home/ui/thumbnail_image.dart
View file

@ -49,6 +49,7 @@ class ThumbnailImage extends HookConsumerWidget {
} else if (isMultiSelectEnable && !selectedAsset.contains(asset)) {
ref.watch(homePageStateProvider.notifier).addSingleSelectedItem(asset);
} else {
print(asset.id);
if (asset.type == 'IMAGE') {
AutoRouter.of(context).push(
ImageViewerRoute(

75
mobile/lib/modules/home/views/home_page.dart
View file

@ -1,6 +1,7 @@
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:immich_mobile/modules/home/providers/home_page_state.provider.dart';
import 'package:immich_mobile/modules/home/ui/daily_title_text.dart';
import 'package:immich_mobile/modules/home/ui/draggable_scrollbar.dart';
import 'package:immich_mobile/modules/home/ui/image_grid.dart';
@ -9,6 +10,7 @@ import 'package:immich_mobile/modules/home/ui/monthly_title_text.dart';
import 'package:immich_mobile/modules/home/ui/profile_drawer.dart';
import 'package:immich_mobile/modules/home/models/get_all_asset_respose.model.dart';
import 'package:immich_mobile/modules/home/providers/asset.provider.dart';
import 'package:sliver_tools/sliver_tools.dart';
class HomePage extends HookConsumerWidget {
const HomePage({Key? key}) : super(key: key);
@ -18,6 +20,8 @@ class HomePage extends HookConsumerWidget {
ScrollController _scrollController = useScrollController();
List<ImmichAssetGroupByDate> _assetGroup = ref.watch(assetProvider);
List<Widget> _imageGridGroup = [];
var isMultiSelectEnable = ref.watch(homePageStateProvider).isMultiSelectEnable;
var homePageState = ref.watch(homePageStateProvider);
_scrollControllerCallback() {
var endOfPage = _scrollController.position.maxScrollExtent;
@ -85,20 +89,65 @@ class HomePage extends HookConsumerWidget {
}
return SafeArea(
child: DraggableScrollbar.semicircle(
backgroundColor: Theme.of(context).primaryColor,
controller: _scrollController,
heightScrollThumb: 48.0,
child: CustomScrollView(
controller: _scrollController,
slivers: [
ImmichSliverAppBar(
imageGridGroup: _imageGridGroup,
onPopBack: onPopBackFromBackupPage,
child: Stack(
children: [
DraggableScrollbar.semicircle(
backgroundColor: Theme.of(context).primaryColor,
controller: _scrollController,
heightScrollThumb: 48.0,
child: CustomScrollView(
controller: _scrollController,
slivers: [
SliverAnimatedSwitcher(
child: isMultiSelectEnable
? const SliverToBoxAdapter(
child: SizedBox(
height: 70,
child: null,
))
: ImmichSliverAppBar(
imageGridGroup: _imageGridGroup,
onPopBack: onPopBackFromBackupPage,
),
duration: const Duration(milliseconds: 250),
),
..._imageGridGroup
],
),
..._imageGridGroup,
],
),
),
isMultiSelectEnable
? Positioned(
top: 0,
left: 0,
child: Padding(
padding: const EdgeInsets.only(left: 8.0, top: 16),
child: Material(
elevation: 20,
borderRadius: BorderRadius.circular(35),
child: Container(
// width: 100,
// height: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(35),
color: Colors.white,
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 2.0),
child: TextButton.icon(
onPressed: () {
ref.watch(homePageStateProvider.notifier).disableMultiSelect();
},
icon: const Icon(Icons.close_rounded),
label: Text(
homePageState.selectedItems.length.toString(),
style: const TextStyle(fontWeight: FontWeight.w600, fontSize: 16),
)),
),
),
),
))
: Container(),
],
),
);
}

7
mobile/pubspec.lock
View file

@ -721,6 +721,13 @@ packages:
description: flutter
source: sdk
version: "0.0.99"
sliver_tools:
dependency: "direct main"
description:
name: sliver_tools
url: "https://pub.dartlang.org"
source: hosted
version: "0.2.5"
source_gen:
dependency: transitive
description:

1
mobile/pubspec.yaml
View file

@ -30,6 +30,7 @@ dependencies:
fluttertoast: ^8.0.8
video_player: ^2.2.18
chewie: ^1.2.2
sliver_tools: ^0.2.5
dev_dependencies:
flutter_test: