Skip to content

Commit

Permalink
Improve UI (#108)
Browse files Browse the repository at this point in the history 
* Improve UI

* Minor improvement

* Fix slider updates

* Fix slider updates
  • Loading branch information
@cp-pratik-k
cp-pratik-k authored Jan 9, 2025
1 parent 8bc55ec commit b339e4d
Show file tree
Hide file tree
Showing 9 changed files with 284 additions and 143 deletions.
8 changes: 4 additions & 4 deletions app/lib/components/selection_menu.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,16 +31,16 @@ class SelectionMenuAction extends StatelessWidget {
height: 60,
width: 60,
decoration: BoxDecoration(
color: context.colorScheme.surface,
borderRadius: BorderRadius.circular(8),
color: context.colorScheme.containerLowOnSurface,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: context.colorScheme.outline),
),
child: icon,
),
const SizedBox(height: 8),
Text(
title,
style: AppTextStyles.body.copyWith(
style: AppTextStyles.body2.copyWith(
color: context.colorScheme.textPrimary,
),
textAlign: TextAlign.center,
Expand Down Expand Up @@ -77,7 +77,7 @@ class SelectionMenu extends StatelessWidget {
padding: const EdgeInsets.only(bottom: 16, top: 24),
width: double.infinity,
decoration: BoxDecoration(
color: context.colorScheme.containerLowOnSurface,
color: context.colorScheme.surface,
border: Border(
top: BorderSide(
width: 1,
Expand Down
25 changes: 25 additions & 0 deletions app/lib/ui/flow/albums/media_list/album_media_list_screen.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import '../../../../components/app_sheet.dart';
import '../../../../components/error_screen.dart';
import '../../../../components/place_holder_screen.dart';
import '../../../../components/selection_menu.dart';
import '../../../../components/snack_bar.dart';
import '../../../../domain/extensions/context_extensions.dart';
import '../../../../domain/extensions/widget_extensions.dart';
import '../../../../gen/assets.gen.dart';
Expand Down Expand Up @@ -43,8 +44,32 @@ class _AlbumMediaListScreenState extends ConsumerState<AlbumMediaListScreen> {
super.initState();
}

void _errorObserver() {
ref.listen(
_provider.select((value) => value.actionError),
(previous, next) {
if (next != null) {
showErrorSnackBar(context: context, error: next);
}
},
);
}

void _deleteObserver() {
ref.listen(
_provider.select((value) => value.deleteAlbumSuccess),
(previous, next) {
if (next) {
context.pop();
}
},
);
}

@override
Widget build(BuildContext context) {
_errorObserver();
_deleteObserver();
final state = ref.watch(_provider);
return AppPage(
title: state.album.name,
Expand Down
21 changes: 11 additions & 10 deletions ...mponents/multi_selection_done_button.dart → .../home/components/home_selection_menu.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ class HomeSelectionMenu extends ConsumerWidget {
padding: const EdgeInsets.only(bottom: 0, right: 8),
child: Icon(
CupertinoIcons.cloud_upload,
color: context.colorScheme.textSecondary,
color: context.colorScheme.textPrimary,
size: 22,
),
),
Expand Down Expand Up @@ -143,7 +143,7 @@ class HomeSelectionMenu extends ConsumerWidget {
padding: const EdgeInsets.only(bottom: 0, right: 8),
child: Icon(
CupertinoIcons.cloud_download,
color: context.colorScheme.textSecondary,
color: context.colorScheme.textPrimary,
size: 22,
),
),
Expand Down Expand Up @@ -194,7 +194,7 @@ class HomeSelectionMenu extends ConsumerWidget {
padding: const EdgeInsets.only(bottom: 2, right: 2),
child: Icon(
CupertinoIcons.trash,
color: context.colorScheme.textSecondary,
color: context.colorScheme.alert,
size: 22,
),
),
Expand Down Expand Up @@ -243,7 +243,7 @@ class HomeSelectionMenu extends ConsumerWidget {
padding: const EdgeInsets.only(bottom: 0, right: 8),
child: Icon(
CupertinoIcons.cloud_upload,
color: context.colorScheme.textSecondary,
color: context.colorScheme.textPrimary,
size: 22,
),
),
Expand Down Expand Up @@ -289,7 +289,7 @@ class HomeSelectionMenu extends ConsumerWidget {
padding: const EdgeInsets.only(bottom: 0, right: 8),
child: Icon(
CupertinoIcons.cloud_download,
color: context.colorScheme.textSecondary,
color: context.colorScheme.textPrimary,
size: 22,
),
),
Expand Down Expand Up @@ -335,7 +335,7 @@ class HomeSelectionMenu extends ConsumerWidget {
padding: const EdgeInsets.only(bottom: 2, right: 2),
child: Icon(
CupertinoIcons.trash,
color: context.colorScheme.textSecondary,
color: context.colorScheme.alert,
size: 22,
),
),
Expand Down Expand Up @@ -375,9 +375,10 @@ class HomeSelectionMenu extends ConsumerWidget {

Widget _deleteFromDevice(BuildContext context, WidgetRef ref) {
return SelectionMenuAction(
icon: const Icon(
icon: Icon(
CupertinoIcons.delete,
size: 24,
size: 22,
color: context.colorScheme.alert,
),
title: context.l10n.delete_from_device_title,
onTap: () {
Expand Down Expand Up @@ -414,8 +415,8 @@ class HomeSelectionMenu extends ConsumerWidget {
return SelectionMenuAction(
icon: Icon(
Platform.isIOS ? CupertinoIcons.share : Icons.share_rounded,
color: context.colorScheme.textSecondary,
size: 24,
color: context.colorScheme.textPrimary,
size: 22,
),
title: context.l10n.common_share,
onTap: () {
Expand Down
34 changes: 19 additions & 15 deletions app/lib/ui/flow/home/home_screen.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import '../../../domain/extensions/widget_extensions.dart';
import '../../../domain/formatter/date_formatter.dart';
import '../../../domain/extensions/context_extensions.dart';
import '../../../gen/assets.gen.dart';
import 'components/home_selection_menu.dart';
import 'components/no_internet_connection_hint.dart';
import 'components/no_local_medias_access_screen.dart';
import 'components/sign_in_hint.dart';
Expand All @@ -21,7 +22,6 @@ import 'package:style/text/app_text_style.dart';
import '../../../components/snack_bar.dart';
import '../../navigation/app_route.dart';
import 'components/app_media_item.dart';
import 'components/multi_selection_done_button.dart';
import 'package:style/buttons/action_button.dart';
import 'package:style/animations/fade_in_switcher.dart';

Expand Down Expand Up @@ -153,20 +153,24 @@ class _HomeScreenState extends ConsumerState<HomeScreen> {
final gridEntry = state.medias.entries.elementAt(index - 1);
return Column(
children: [
Container(
height: 45,
padding: const EdgeInsets.only(left: 16, top: 5),
margin: EdgeInsets.zero,
alignment: Alignment.centerLeft,
decoration: BoxDecoration(
color: context.colorScheme.surface,
),
child: Text(
gridEntry.key.format(context, DateFormatType.relative),
style: AppTextStyles.subtitle1.copyWith(
color: context.colorScheme.textPrimary,
),
),
Builder(
builder: (context) {
return Container(
height: 45,
padding: const EdgeInsets.only(left: 16, top: 5),
margin: EdgeInsets.zero,
alignment: Alignment.centerLeft,
decoration: BoxDecoration(
color: context.colorScheme.surface,
),
child: Text(
gridEntry.key.format(context, DateFormatType.relative),
style: AppTextStyles.subtitle1.copyWith(
color: context.colorScheme.textPrimary,
),
),
);
},
),
GridView.builder(
padding: const EdgeInsets.all(4),
Expand Down
175 changes: 112 additions & 63 deletions app/lib/ui/flow/media_preview/components/top_bar.dart
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import 'dart:io';
import 'dart:ui';
import 'package:flutter_svg/svg.dart';
import 'package:style/theme/theme.dart';
import '../../../../domain/extensions/context_extensions.dart';
import '../../../../gen/assets.gen.dart';
import '../../../navigation/app_route.dart';
Expand All @@ -13,7 +15,6 @@ import 'package:style/buttons/action_button.dart';
import 'package:style/extensions/context_extensions.dart';
import 'package:style/text/app_text_style.dart';
import '../../../../components/app_dialog.dart';
import '../../../../components/app_page.dart';
import '../../../../domain/formatter/date_formatter.dart';
import '../media_preview_view_model.dart';
import 'package:share_plus/share_plus.dart';
Expand Down Expand Up @@ -58,70 +59,118 @@ class _PreviewTopBarState extends ConsumerState<PreviewTopBar> {

return CrossFadeAnimation(
showChild: state.showAction,
child: AdaptiveAppBar(
iosTransitionBetweenRoutes: false,
text:
media?.createdTime?.format(context, DateFormatType.relative) ?? '',
actions: media == null
? null
: [
ActionButton(
onPressed: () {
showMenu(
context: context,
position: RelativeRect.fromSize(
Rect.fromLTRB(context.mediaQuerySize.width, 50, 0, 0),
context.mediaQuerySize, // Size of the screen
),
elevation: 1,
surfaceTintColor: context.colorScheme.surface,
color: context.colorScheme.surface,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
items: [
infoAction(context, media),
if (!media.sources
.contains(AppMediaSource.googleDrive) &&
media.sources.contains(AppMediaSource.local) &&
state.googleAccount != null)
_uploadToGoogleDriveAction(context, media),
if (media.sources
.contains(AppMediaSource.googleDrive) &&
!media.sources.contains(AppMediaSource.local) &&
state.googleAccount != null)
_downloadFromGoogleDriveAction(context, media),
if (media.sources
.contains(AppMediaSource.googleDrive) &&
state.googleAccount != null)
_deleteFromGoogleDriveAction(context, media),
if (!media.sources.contains(AppMediaSource.dropbox) &&
media.sources.contains(AppMediaSource.local) &&
state.dropboxAccount != null)
_uploadToDropboxAction(context, media),
if (media.sources.contains(AppMediaSource.dropbox) &&
!media.sources.contains(AppMediaSource.local) &&
state.dropboxAccount != null)
_downloadFromDropboxAction(context, media),
if (media.sources.contains(AppMediaSource.dropbox) &&
state.dropboxAccount != null)
_deleteFromDropboxAction(context, media),
if (media.sources.contains(AppMediaSource.local))
_deleteFromDeviceAction(context, media),
if (media.sources.contains(AppMediaSource.local))
_shareAction(context, media),
],
);
},
icon: Icon(
Icons.more_vert_rounded,
color: context.colorScheme.textSecondary,
size: 22,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
appColorSchemeDark.surface.withValues(alpha: 0.8),
appColorSchemeDark.surface.withValues(alpha: 0.2),
],
),
),
child: AppBar(
backgroundColor: Colors.transparent,
foregroundColor: appColorSchemeDark.textPrimary,
title: Text(
media?.createdTime
?.format(context, DateFormatType.relative) ??
'',
),
actions: media == null
? null
: [
ActionButton(
onPressed: () {
showMenu(
context: context,
position: RelativeRect.fromSize(
Rect.fromLTRB(
context.mediaQuerySize.width,
50,
0,
0,
),
context.mediaQuerySize, // Size of the screen
),
elevation: 1,
surfaceTintColor: context.colorScheme.surface,
color: context.colorScheme.surface,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
items: [
infoAction(context, media),
if (!media.sources.contains(
AppMediaSource.googleDrive,
) &&
media.sources
.contains(AppMediaSource.local) &&
state.googleAccount != null)
_uploadToGoogleDriveAction(context, media),
if (media.sources.contains(
AppMediaSource.googleDrive,
) &&
!media.sources
.contains(AppMediaSource.local) &&
state.googleAccount != null)
_downloadFromGoogleDriveAction(
context,
media,
),
if (media.sources.contains(
AppMediaSource.googleDrive,
) &&
state.googleAccount != null)
_deleteFromGoogleDriveAction(
context,
media,
),
if (!media.sources
.contains(AppMediaSource.dropbox) &&
media.sources
.contains(AppMediaSource.local) &&
state.dropboxAccount != null)
_uploadToDropboxAction(context, media),
if (media.sources
.contains(AppMediaSource.dropbox) &&
!media.sources
.contains(AppMediaSource.local) &&
state.dropboxAccount != null)
_downloadFromDropboxAction(context, media),
if (media.sources
.contains(AppMediaSource.dropbox) &&
state.dropboxAccount != null)
_deleteFromDropboxAction(context, media),
if (media.sources
.contains(AppMediaSource.local))
_deleteFromDeviceAction(context, media),
if (media.sources
.contains(AppMediaSource.local))
_shareAction(context, media),
],
);
},
icon: Icon(
Icons.more_vert_rounded,
color: appColorSchemeDark.textPrimary,
size: 22,
),
),
],
),
if (!Platform.isIOS && !Platform.isMacOS)
const SizedBox(width: 8),
],
),
),
),
],
),
);
}
Expand Down
Loading

0 comments on commit b339e4d

Please sign in to comment.