sascha
/
immich
mirror of https://github.com/immich-app/immich.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: styling for asset_viewer bottom sheet (#20006) 

bottom sheet styling
pull/19310/head
Alex 2025-07-18 08:36:29 +07:00 committed by GitHub
parent 53acf08263
commit 137f0d48c0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 43 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
mobile/lib/presentation/pages/drift_recently_taken.page.dart
Unescape Escape View File

@ -1,9 +1,11 @@
import 'package:auto_route/auto_route.dart';
import 'package:flutter/widgets.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:immich_mobile/extensions/translate_extensions.dart';
import 'package:immich_mobile/presentation/widgets/timeline/timeline.widget.dart';
import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
import 'package:immich_mobile/providers/user.provider.dart';
import 'package:immich_mobile/widgets/common/mesmerizing_sliver_app_bar.dart';
@RoutePage()
class DriftRecentlyTakenPage extends StatelessWidget {
@ -29,7 +31,9 @@ class DriftRecentlyTakenPage extends StatelessWidget {
},
),
],
child: const Timeline(),
child: Timeline(
appBar: MesmerizingSliverAppBar(title: 'recently_taken'.t()),
),
);
}
}

6
mobile/lib/presentation/pages/drift_video.page.dart
Unescape Escape View File

@ -1,9 +1,11 @@
import 'package:auto_route/auto_route.dart';
import 'package:flutter/widgets.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:immich_mobile/extensions/translate_extensions.dart';
import 'package:immich_mobile/presentation/widgets/timeline/timeline.widget.dart';
import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
import 'package:immich_mobile/providers/user.provider.dart';
import 'package:immich_mobile/widgets/common/mesmerizing_sliver_app_bar.dart';
@RoutePage()
class DriftVideoPage extends StatelessWidget {
@ -27,7 +29,9 @@ class DriftVideoPage extends StatelessWidget {
},
),
],
child: const Timeline(),
child: Timeline(
appBar: MesmerizingSliverAppBar(title: 'videos'.t()),
),
);
}
}

15
mobile/lib/presentation/widgets/asset_viewer/bottom_bar.widget.dart
Unescape Escape View File

@ -3,9 +3,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:immich_mobile/constants/enums.dart';
import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
import 'package:immich_mobile/extensions/build_context_extensions.dart';
import 'package:immich_mobile/extensions/translate_extensions.dart';
import 'package:immich_mobile/presentation/widgets/action_buttons/archive_action_button.widget.dart';
import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
import 'package:immich_mobile/presentation/widgets/action_buttons/share_action_button.widget.dart';
import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart';
@ -39,7 +37,6 @@ class ViewerBottomBar extends ConsumerWidget {
final actions = <Widget>[
const ShareActionButton(source: ActionSource.viewer),
const _EditActionButton(),
if (asset.hasRemote && isOwner)
const ArchiveActionButton(source: ActionSource.viewer),
];
@ -86,15 +83,3 @@ class ViewerBottomBar extends ConsumerWidget {
);
}
}
class _EditActionButton extends ConsumerWidget {
const _EditActionButton();
@override
Widget build(BuildContext context, WidgetRef ref) {
return BaseActionButton(
iconData: Icons.tune_outlined,
label: 'edit'.t(context: context),
);
}
}

39
mobile/lib/presentation/widgets/asset_viewer/bottom_sheet.widget.dart
Unescape Escape View File

@ -73,6 +73,7 @@ class AssetDetailBottomSheet extends ConsumerWidget {
expand: false,
shouldCloseOnMinExtent: false,
resizeOnScroll: false,
backgroundColor: context.isDarkTheme ? Colors.black : Colors.white,
);
}
}
@ -84,14 +85,18 @@ class _AssetDetailBottomSheet extends ConsumerWidget {
final dateTime = asset.createdAt.toLocal();
final date = DateFormat.yMMMEd(ctx.locale.toLanguageTag()).format(dateTime);
final time = DateFormat.jm(ctx.locale.toLanguageTag()).format(dateTime);
return '$date$_kSeparator$time';
final timezone = dateTime.timeZoneOffset.isNegative
? 'UTC-${dateTime.timeZoneOffset.inHours.abs().toString().padLeft(2, '0')}:${(dateTime.timeZoneOffset.inMinutes.abs() % 60).toString().padLeft(2, '0')}'
: 'UTC+${dateTime.timeZoneOffset.inHours.toString().padLeft(2, '0')}:${(dateTime.timeZoneOffset.inMinutes.abs() % 60).toString().padLeft(2, '0')}';
return '$date$_kSeparator$time $timezone';
}
String _getFileInfo(BaseAsset asset, ExifInfo? exifInfo) {
final height = asset.height ?? exifInfo?.height;
final width = asset.width ?? exifInfo?.width;
final resolution =
(width != null && height != null) ? "$width x $height" : null;
final resolution = (width != null && height != null)
? "${width.toInt()} x ${height.toInt()}"
: null;
final fileSize =
exifInfo?.fileSize != null ? formatBytes(exifInfo!.fileSize!) : null;
@ -150,46 +155,46 @@ class _AssetDetailBottomSheet extends ConsumerWidget {
// Asset Date and Time
_SheetTile(
title: _getDateTime(context, asset),
titleStyle: context.textTheme.bodyLarge?.copyWith(
fontWeight: FontWeight.w500,
fontSize: 16,
titleStyle: context.textTheme.bodyMedium?.copyWith(
fontWeight: FontWeight.w600,
),
),
const SheetLocationDetails(),
// Details header
_SheetTile(
title: 'exif_bottom_sheet_details'.t(context: context),
titleStyle: context.textTheme.labelLarge,
titleStyle: context.textTheme.labelMedium?.copyWith(
color: context.textTheme.labelMedium?.color?.withAlpha(200),
fontWeight: FontWeight.w600,
),
),
// File info
_SheetTile(
title: asset.name,
titleStyle: context.textTheme.labelLarge
?.copyWith(fontWeight: FontWeight.w600),
titleStyle: context.textTheme.labelLarge,
leading: Icon(
asset.isImage ? Icons.image_outlined : Icons.videocam_outlined,
size: 30,
size: 24,
color: context.textTheme.labelLarge?.color,
),
subtitle: _getFileInfo(asset, exifInfo),
subtitleStyle: context.textTheme.labelLarge?.copyWith(
color: context.textTheme.labelLarge?.color?.withAlpha(200),
subtitleStyle: context.textTheme.bodyMedium?.copyWith(
color: context.textTheme.bodyMedium?.color?.withAlpha(155),
),
),
// Camera info
if (cameraTitle != null)
_SheetTile(
title: cameraTitle,
titleStyle: context.textTheme.labelLarge
?.copyWith(fontWeight: FontWeight.w600),
titleStyle: context.textTheme.labelLarge,
leading: Icon(
Icons.camera_outlined,
size: 30,
size: 24,
color: context.textTheme.labelLarge?.color,
),
subtitle: _getCameraInfoSubtitle(exifInfo),
subtitleStyle: context.textTheme.labelLarge?.copyWith(
color: context.textTheme.labelLarge?.color?.withAlpha(200),
subtitleStyle: context.textTheme.bodyMedium?.copyWith(
color: context.textTheme.bodyMedium?.color?.withAlpha(155),
),
),
],

13
mobile/lib/presentation/widgets/asset_viewer/bottom_sheet/location_details.widget.dart
Unescape Escape View File

@ -95,7 +95,10 @@ class _SheetLocationDetailsState extends ConsumerState<SheetLocationDetails> {
padding: const EdgeInsets.only(bottom: 16),
child: Text(
"exif_bottom_sheet_location".t(context: context),
style: context.textTheme.labelLarge,
style: context.textTheme.labelMedium?.copyWith(
color: context.textTheme.labelMedium?.color?.withAlpha(200),
fontWeight: FontWeight.w600,
),
),
),
ExifMap(
@ -109,15 +112,13 @@ class _SheetLocationDetailsState extends ConsumerState<SheetLocationDetails> {
padding: const EdgeInsets.only(bottom: 4.0),
child: Text(
locationName,
style: context.textTheme.bodyLarge?.copyWith(
fontWeight: FontWeight.w500,
),
style: context.textTheme.labelLarge,
),
),
Text(
coordinates,
style: context.textTheme.labelLarge?.copyWith(
color: context.textTheme.labelLarge?.color?.withAlpha(150),
style: context.textTheme.labelMedium?.copyWith(
color: context.textTheme.labelMedium?.color?.withAlpha(150),
),
),
],

6
mobile/lib/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart
Unescape Escape View File

@ -14,6 +14,7 @@ class BaseBottomSheet extends ConsumerStatefulWidget {
final bool expand;
final bool shouldCloseOnMinExtent;
final bool resizeOnScroll;
final Color? backgroundColor;
const BaseBottomSheet({
super.key,
@ -26,6 +27,7 @@ class BaseBottomSheet extends ConsumerStatefulWidget {
this.expand = true,
this.shouldCloseOnMinExtent = true,
this.resizeOnScroll = true,
this.backgroundColor,
});
@override
@ -69,8 +71,8 @@ class _BaseDraggableScrollableSheetState
shouldCloseOnMinExtent: widget.shouldCloseOnMinExtent,
builder: (BuildContext context, ScrollController scrollController) {
return Card(
color: context.colorScheme.surfaceContainerHigh,
surfaceTintColor: context.colorScheme.surfaceContainerHigh,
color: widget.backgroundColor ??
context.colorScheme.surfaceContainerHigh,
borderOnForeground: false,
clipBehavior: Clip.antiAlias,
elevation: 6.0,