cjones/immich
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: appbar

Browse Source
This commit is contained in:
shenlong-tanwen
2024-10-27 23:43:58 +05:30
parent 5385d43c8c
commit 8450c8cc4f
40 changed files with 1150 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mobile-v2/lib/presentation/components/appbar/immich_app_bar.widget.dart → mobile-v2/lib/presentation/components/appbar/app_bar.widget.dart
+15 -4
View File
@@ -1,4 +1,7 @@
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:immich_mobile/presentation/components/appbar/app_bar_dialog.widget.dart';
import 'package:immich_mobile/presentation/components/common/gap.widget.dart';
import 'package:immich_mobile/presentation/components/common/user_avatar.widget.dart';
import 'package:immich_mobile/presentation/components/image/immich_logo.widget.dart';
@@ -13,6 +16,11 @@ class ImAppBar extends StatelessWidget implements PreferredSizeWidget {
@override
Size get preferredSize => const Size.fromHeight(kToolbarHeight);
static void showAppBarDialog(BuildContext context) => unawaited(showDialog(
context: context,
builder: (_) => const ImAppBarDialog(),
));
@override
Widget build(BuildContext context) {
return AppBar(
@@ -20,7 +28,7 @@ class ImAppBar extends StatelessWidget implements PreferredSizeWidget {
title: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ImLogo(dimension: SizeConstants.xm),
ImLogo(dimension: SizeConstants.xxm),
SizedGap.sw(),
ImLogoText(fontSize: 20),
],
@@ -28,9 +36,12 @@ class ImAppBar extends StatelessWidget implements PreferredSizeWidget {
actions: [
Padding(
padding: const EdgeInsets.only(right: SizeConstants.m),
child: ImUserAvatar(
user: di<CurrentUserProvider>().value,
radius: SizeConstants.m,
child: InkWell(
onTap: () => showAppBarDialog(context),
child: ImUserAvatar(
user: di<CurrentUserProvider>().value,
radius: SizeConstants.m,
),
),
),
],
mobile-v2/lib/presentation/components/appbar/app_bar_dialog.widget.dart
+189
View File
@@ -0,0 +1,189 @@
import 'dart:async';
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:immich_mobile/domain/services/login.service.dart';
import 'package:immich_mobile/i18n/strings.g.dart';
import 'package:immich_mobile/presentation/components/common/user_avatar.widget.dart';
import 'package:immich_mobile/presentation/components/image/immich_logo.widget.dart';
import 'package:immich_mobile/presentation/router/router.dart';
import 'package:immich_mobile/presentation/states/app_info.state.dart';
import 'package:immich_mobile/presentation/states/current_user.state.dart';
import 'package:immich_mobile/presentation/states/server_info.state.dart';
import 'package:immich_mobile/presentation/theme/app_typography.dart';
import 'package:immich_mobile/service_locator.dart';
import 'package:immich_mobile/utils/constants/size_constants.dart';
import 'package:immich_mobile/utils/extensions/build_context.extension.dart';
import 'package:immich_mobile/utils/extensions/color.extension.dart';
import 'package:immich_mobile/utils/extensions/number.extension.dart';
import 'package:immich_mobile/utils/immich_api_client.dart';
import 'package:material_symbols_icons/material_symbols_icons.dart';
import 'package:url_launcher/url_launcher.dart';
part 'app_bar_dialog_actions.widget.dart';
part 'app_bar_dialog_server.widget.dart';
part 'app_bar_dialog_storage.widget.dart';
part 'app_bar_dialog_version.widget.dart';
class ImAppBarDialog extends StatelessWidget {
const ImAppBarDialog({super.key});
@override
Widget build(BuildContext context) {
return Dialog(
insetPadding: EdgeInsets.only(
left: context.isTablet ? 100 : 15,
top: context.isTablet ? 15 : 0,
right: context.isTablet ? 100 : 15,
bottom: context.isTablet ? 15 : 100,
),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(SizeConstants.xm)),
),
alignment: Alignment.center,
child: const Padding(
padding: EdgeInsets.all(SizeConstants.xs),
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: EdgeInsets.only(bottom: SizeConstants.xm),
child: _DialogTitleSection(),
),
_DialogProfileSection(),
_DialogStorageSection(),
_DialogServerSection(),
_DialogVersionMessage(),
Padding(
padding: EdgeInsets.only(top: 3),
child: _DialogActionLogs(),
),
_DialogActionSettings(),
_DialogActionSignOut(),
_DialogFooter(),
],
),
),
),
);
}
}
class _DialogTitleSection extends StatelessWidget {
const _DialogTitleSection();
@override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.only(left: SizeConstants.xs, top: SizeConstants.xs),
child: Stack(
children: [
Align(
alignment: Alignment.topLeft,
child: InkWell(
onTap: () => unawaited(context.maybePop()),
child: Icon(Symbols.close_rounded, size: SizeConstants.xm),
),
),
Center(child: ImLogoText(fontSize: SizeConstants.m)),
],
),
);
}
}
class _DialogHighlightedSection extends StatelessWidget {
final BorderRadiusGeometry? borderRadius;
final Widget child;
const _DialogHighlightedSection({this.borderRadius, required this.child});
@override
Widget build(BuildContext context) {
// ignore: avoid-wrapping-in-padding
return Padding(
padding: EdgeInsets.only(bottom: 3),
child: Container(
padding: EdgeInsets.symmetric(horizontal: SizeConstants.s),
decoration: BoxDecoration(
color: context.colorScheme.surface,
borderRadius: borderRadius,
),
child: child,
),
);
}
}
class _DialogProfileSection extends StatelessWidget {
const _DialogProfileSection();
@override
Widget build(BuildContext context) {
final user = di<CurrentUserProvider>().value;
return _DialogHighlightedSection(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(SizeConstants.xxs),
topRight: Radius.circular(SizeConstants.xxs),
),
child: ListTile(
leading: ImUserAvatar(user: user),
title: Text(
user.name,
style: AppTypography.titleMedium.copyWith(
color: context.colorScheme.primary,
fontWeight: FontWeight.w500,
),
),
subtitle: Text(
user.email,
style: AppTypography.titleMedium.copyWith(
color: context.colorScheme.onSurface.darken(
amount: RatioConstants.oneThird,
),
fontSize: 12,
fontWeight: FontWeight.w500,
),
),
minLeadingWidth: SizeConstants.xl,
),
);
}
}
class _DialogFooter extends StatelessWidget {
const _DialogFooter();
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: SizeConstants.s),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
InkWell(
onTap: () => unawaited(launchUrl(
Uri.parse('https://immich.app'),
mode: LaunchMode.externalApplication,
)),
child:
Text(context.t.common.components.appbar.footer_documentation),
),
const SizedBox(
width: 20,
child: Text("•", textAlign: TextAlign.center),
),
InkWell(
onTap: () => unawaited(launchUrl(
Uri.parse('https://github.com/immich-app/immich'),
mode: LaunchMode.externalApplication,
)),
child: Text(context.t.common.components.appbar.footer_github),
),
],
),
);
}
}
mobile-v2/lib/presentation/components/appbar/app_bar_dialog_actions.widget.dart
+73
View File
@@ -0,0 +1,73 @@
part of 'app_bar_dialog.widget.dart';
class _DialogAction extends StatelessWidget {
final IconData icon;
final String label;
final VoidCallback onTap;
const _DialogAction({
required this.icon,
required this.label,
required this.onTap,
});
@override
Widget build(BuildContext context) {
return ListTile(
leading: Padding(
padding: EdgeInsets.only(left: 4),
child: Icon(icon, size: 22),
),
title: Text(label),
dense: true,
visualDensity: VisualDensity.standard,
contentPadding: const EdgeInsets.only(left: 30),
onTap: onTap,
minLeadingWidth: 40,
);
}
}
class _DialogActionLogs extends StatelessWidget {
const _DialogActionLogs();
@override
Widget build(BuildContext context) {
return _DialogAction(
icon: Symbols.article_rounded,
label: context.t.common.components.appbar.action_logs,
onTap: () => unawaited(context.navigateTo(LogsRoute())),
);
}
}
class _DialogActionSettings extends StatelessWidget {
const _DialogActionSettings();
@override
Widget build(BuildContext context) {
return _DialogAction(
icon: Symbols.settings_rounded,
label: context.t.common.components.appbar.action_settings,
onTap: () => unawaited(context.navigateTo(SettingsRoute())),
);
}
}
class _DialogActionSignOut extends StatelessWidget {
const _DialogActionSignOut();
Future<void> _onLogout() async {
await di<LoginService>().logout();
await di<AppRouter>().replaceAll([const LoginRoute()]);
}
@override
Widget build(BuildContext context) {
return _DialogAction(
icon: Symbols.logout_rounded,
label: context.t.common.components.appbar.action_signout,
onTap: () => unawaited(_onLogout()),
);
}
}
mobile-v2/lib/presentation/components/appbar/app_bar_dialog_server.widget.dart
+123
View File
@@ -0,0 +1,123 @@
part of 'app_bar_dialog.widget.dart';
class _DialogServerSection extends StatelessWidget {
const _DialogServerSection();
@override
Widget build(BuildContext context) {
return const _DialogHighlightedSection(
child: Padding(
padding: EdgeInsets.symmetric(
vertical: SizeConstants.xxs,
horizontal: SizeConstants.s,
),
child: Column(
children: [
_DialogServerAppVersion(),
_DialogServerEntryDivider(),
_DialogServerVersion(),
_DialogServerEntryDivider(),
_DialogServerUrl(),
],
),
),
);
}
}
class _DialogServerEntryDivider extends StatelessWidget {
const _DialogServerEntryDivider();
@override
Widget build(BuildContext context) {
return const Padding(
padding: EdgeInsets.symmetric(horizontal: SizeConstants.s),
child: Divider(thickness: 1),
);
}
}
class _DialogServerEntry extends StatelessWidget {
final String label;
final String value;
const _DialogServerEntry({required this.label, required this.value});
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: SizeConstants.xs),
child: Text(
label,
style: TextStyle(fontWeight: FontWeight.w400),
),
),
),
Expanded(
flex: 0,
child: Container(
padding: const EdgeInsets.only(right: SizeConstants.xs),
width: context.width * RatioConstants.half,
child: Text(
value,
style: TextStyle(
color: context.colorScheme.onSurface.darken(
amount: RatioConstants.oneThird,
),
fontWeight: FontWeight.bold,
overflow: TextOverflow.ellipsis,
),
textAlign: TextAlign.end,
),
),
),
],
);
}
}
class _DialogServerAppVersion extends StatelessWidget {
const _DialogServerAppVersion();
@override
Widget build(BuildContext context) {
final version = di<AppInfoProvider>().value.versionString;
return _DialogServerEntry(
label: context.t.common.components.appbar.app_version_label,
value: version,
);
}
}
class _DialogServerVersion extends StatelessWidget {
const _DialogServerVersion();
@override
Widget build(BuildContext context) {
final version = di<ServerInfoProvider>().value.version;
return _DialogServerEntry(
label: context.t.common.components.appbar.server_version_label,
value: "${version.major}.${version.minor}.${version.patch}",
);
}
}
class _DialogServerUrl extends StatelessWidget {
const _DialogServerUrl();
@override
Widget build(BuildContext context) {
final serverUrl = di<ImApiClient>().basePath.replaceAll("/api", "");
return _DialogServerEntry(
label: context.t.common.components.appbar.server_url_label,
value: serverUrl,
);
}
}
mobile-v2/lib/presentation/components/appbar/app_bar_dialog_storage.widget.dart
+63
View File
@@ -0,0 +1,63 @@
part of 'app_bar_dialog.widget.dart';
class _DialogStorageSection extends StatelessWidget {
const _DialogStorageSection();
@override
Widget build(BuildContext context) {
final user = di<CurrentUserProvider>().value;
final int availableSizeInBytes;
final int usedSizeInBytes;
if (user.quotaSizeInBytes > 0) {
availableSizeInBytes = user.quotaSizeInBytes;
usedSizeInBytes = user.quotaUsageInBytes;
} else {
final storage = di<ServerInfoProvider>().value.disk;
availableSizeInBytes = storage.diskSizeInBytes;
usedSizeInBytes = storage.diskUseInBytes;
}
final percentageUsed = usedSizeInBytes / availableSizeInBytes;
return _DialogHighlightedSection(
child: ListTile(
leading: Padding(
padding: EdgeInsets.only(left: SizeConstants.s),
child: Icon(
Symbols.hard_drive_rounded,
color: context.colorScheme.primary,
),
),
title: Text(
context.t.common.components.appbar.server_storage,
style: AppTypography.titleMedium.copyWith(
fontSize: SizeConstants.xxs,
fontWeight: FontWeight.w400,
),
),
subtitle: Padding(
padding: EdgeInsets.only(top: SizeConstants.s),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
LinearProgressIndicator(
value: percentageUsed,
minHeight: 5,
borderRadius: const BorderRadius.all(Radius.circular(10.0)),
),
Padding(
padding: EdgeInsets.only(top: SizeConstants.s),
child: Text(context.t.common.components.appbar.storage_used(
used: usedSizeInBytes.formatAsSize(noOfDecimals: 1),
total: availableSizeInBytes.formatAsSize(),
)),
),
],
),
),
minLeadingWidth: SizeConstants.xl,
),
);
}
}
mobile-v2/lib/presentation/components/appbar/app_bar_dialog_version.widget.dart
+68
View File
@@ -0,0 +1,68 @@
part of 'app_bar_dialog.widget.dart';
class _DialogVersionMessage extends StatefulWidget {
const _DialogVersionMessage();
@override
State createState() => _DialogVersionMessageState();
}
class _DialogVersionMessageState extends State<_DialogVersionMessage>
with SingleTickerProviderStateMixin {
late final AnimationController _controller = AnimationController(
duration: Durations.medium2,
vsync: this,
);
late final Animation<double> _animation = CurvedAnimation(
parent: _controller,
curve: Curves.fastEaseInToSlowEaseOut,
);
@override
void initState() {
super.initState();
_controller.forward();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final appInfo = di<AppInfoProvider>().value;
final String message;
if (appInfo.isVersionMismatch) {
message = context.t[appInfo.versionMismatchError];
} else {
message = context.t.common.components.appbar.app_version_ok;
}
return SizeTransition(
sizeFactor: _animation,
axisAlignment: 1.0,
child: _DialogHighlightedSection(
borderRadius: const BorderRadius.only(
bottomLeft: Radius.circular(SizeConstants.xxs),
bottomRight: Radius.circular(SizeConstants.xxs),
),
child: Container(
padding: const EdgeInsets.all(SizeConstants.m),
width: double.infinity,
child: Text(
message,
style: TextStyle(
color: context.colorScheme.primary,
fontSize: 11,
fontWeight: FontWeight.w500,
),
textAlign: TextAlign.center,
),
),
),
);
}
}
mobile-v2/lib/presentation/components/common/gap.widget.dart
+10
View File
@@ -7,13 +7,23 @@ class SizedGap extends SizedBox {
// Widgets to be used in Column
const SizedGap.sh({super.key}) : super(height: SizeConstants.s);
const SizedGap.xsh({super.key}) : super(height: SizeConstants.xs);
const SizedGap.xxsh({super.key}) : super(height: SizeConstants.xxs);
const SizedGap.mh({super.key}) : super(height: SizeConstants.m);
const SizedGap.xmh({super.key}) : super(height: SizeConstants.xm);
const SizedGap.xxmh({super.key}) : super(height: SizeConstants.xxm);
const SizedGap.lh({super.key}) : super(height: SizeConstants.l);
const SizedGap.xlh({super.key}) : super(height: SizeConstants.xl);
const SizedGap.xxlh({super.key}) : super(height: SizeConstants.xxl);
// Widgets to be used in Row
const SizedGap.sw({super.key}) : super(width: SizeConstants.s);
const SizedGap.xsw({super.key}) : super(width: SizeConstants.xs);
const SizedGap.xxsw({super.key}) : super(width: SizeConstants.xxs);
const SizedGap.mw({super.key}) : super(width: SizeConstants.m);
const SizedGap.xmw({super.key}) : super(width: SizeConstants.xm);
const SizedGap.xxmw({super.key}) : super(width: SizeConstants.xxm);
const SizedGap.lw({super.key}) : super(width: SizeConstants.l);
const SizedGap.xlw({super.key}) : super(width: SizeConstants.xl);
const SizedGap.xxlw({super.key}) : super(width: SizeConstants.xxl);
}
mobile-v2/lib/presentation/components/common/page_empty.widget.dart
+36
View File
@@ -0,0 +1,36 @@
import 'package:flutter/widgets.dart';
import 'package:immich_mobile/presentation/components/common/gap.widget.dart';
import 'package:immich_mobile/utils/constants/size_constants.dart';
import 'package:immich_mobile/utils/extensions/build_context.extension.dart';
class ImPageEmptyIndicator extends StatelessWidget {
final IconData icon;
final String? message;
final Widget? subtitle;
const ImPageEmptyIndicator({
super.key,
required this.icon,
this.message,
this.subtitle,
});
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
icon,
size: SizeConstants.xl,
color: context.colorScheme.primary,
),
const SizedGap.mh(),
if (message != null) Text(message!),
if (subtitle != null) subtitle!,
],
),
);
}
}
mobile-v2/lib/presentation/components/common/user_avatar.widget.dart
+1 -1
View File
@@ -45,7 +45,7 @@ class ImUserAvatar extends StatelessWidget {
fit: BoxFit.cover,
placeholder: (_, __) => Image.memory(
kTransparentImage,
semanticLabel: 'Transparent',
semanticLabel: 'Transparent Image',
),
fadeInDuration: const Duration(milliseconds: 300),
errorWidget: (_, error, stackTrace) => SizedBox.square(),
mobile-v2/lib/presentation/components/grid/immich_asset_grid.state.dart → mobile-v2/lib/presentation/components/grid/asset_grid.state.dart
View File
mobile-v2/lib/presentation/components/grid/immich_asset_grid.widget.dart → mobile-v2/lib/presentation/components/grid/asset_grid.widget.dart
+30 -7
View File
@@ -3,17 +3,18 @@ import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_list_view/flutter_list_view.dart';
import 'package:immich_mobile/domain/models/render_list_element.model.dart';
import 'package:immich_mobile/i18n/strings.g.dart';
import 'package:immich_mobile/presentation/components/common/page_empty.widget.dart';
import 'package:immich_mobile/presentation/components/grid/asset_grid.state.dart';
import 'package:immich_mobile/presentation/components/grid/asset_render_grid.widget.dart';
import 'package:immich_mobile/presentation/components/grid/draggable_scrollbar.dart';
import 'package:immich_mobile/presentation/components/grid/immich_asset_grid.state.dart';
import 'package:immich_mobile/presentation/components/image/immich_image.widget.dart';
import 'package:immich_mobile/presentation/components/image/immich_thumbnail.widget.dart';
import 'package:immich_mobile/utils/extensions/async_snapshot.extension.dart';
import 'package:immich_mobile/utils/constants/size_constants.dart';
import 'package:immich_mobile/utils/extensions/build_context.extension.dart';
import 'package:immich_mobile/utils/extensions/color.extension.dart';
import 'package:intl/intl.dart';
import 'package:material_symbols_icons/symbols.dart';
part 'immich_asset_grid_header.widget.dart';
part 'immich_asset_render_grid.widget.dart';
part 'asset_grid_header.widget.dart';
class ImAssetGrid extends StatefulWidget {
/// The padding for the grid
@@ -66,6 +67,10 @@ class _ImAssetGridState extends State<ImAssetGrid> {
builder: (_, state) {
final elements = state.renderList.elements;
if (state.renderList.totalCount == 0) {
return const _ImGridEmpty();
}
// Append padding if required
if (widget.topPadding != null &&
elements.firstOrNull is! RenderListPaddingElement) {
@@ -94,7 +99,7 @@ class _ImAssetGridState extends State<ImAssetGrid> {
RenderListMonthHeaderElement() =>
_MonthHeader(text: section.header),
RenderListDayHeaderElement() => Text(section.header),
RenderListAssetElement() => _StaticGrid(
RenderListAssetElement() => ImStaticGrid(
section: section,
isDragging: state.isDragScrolling,
),
@@ -137,3 +142,21 @@ class _ImAssetGridState extends State<ImAssetGrid> {
.isAtSameMomentAs(current.renderList.modifiedTime),
);
}
class _ImGridEmpty extends StatelessWidget {
const _ImGridEmpty();
@override
Widget build(BuildContext context) {
return ImPageEmptyIndicator(
icon: Symbols.photo_camera_rounded,
subtitle: SizedBox(
width: context.width * RatioConstants.twoThird,
child: Text(
context.t.common.components.grid_empty_message,
textAlign: TextAlign.center,
),
),
);
}
}
mobile-v2/lib/presentation/components/grid/immich_asset_grid_header.widget.dart → mobile-v2/lib/presentation/components/grid/asset_grid_header.widget.dart
+3 -2
View File
@@ -1,4 +1,4 @@
part of 'immich_asset_grid.widget.dart';
part of 'asset_grid.widget.dart';
class _HeaderText extends StatelessWidget {
final String text;
@@ -22,7 +22,8 @@ class _HeaderText extends StatelessWidget {
const Spacer(),
Icon(
Symbols.check_circle_rounded,
color: context.colorScheme.onSurface,
color: context.colorScheme.onSurface
.darken(amount: RatioConstants.oneThird),
),
],
),
mobile-v2/lib/presentation/components/grid/immich_asset_render_grid.widget.dart → mobile-v2/lib/presentation/components/grid/asset_render_grid.widget.dart
+13 -3
View File
@@ -1,10 +1,20 @@
part of 'immich_asset_grid.widget.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:immich_mobile/domain/models/render_list_element.model.dart';
import 'package:immich_mobile/presentation/components/grid/asset_grid.state.dart';
import 'package:immich_mobile/presentation/components/image/immich_image.widget.dart';
import 'package:immich_mobile/presentation/components/image/immich_thumbnail.widget.dart';
import 'package:immich_mobile/utils/extensions/async_snapshot.extension.dart';
class _StaticGrid extends StatelessWidget {
class ImStaticGrid extends StatelessWidget {
final RenderListAssetElement section;
final bool isDragging;
const _StaticGrid({required this.section, required this.isDragging});
const ImStaticGrid({
super.key,
required this.section,
required this.isDragging,
});
@override
Widget build(BuildContext context) {
mobile-v2/lib/presentation/components/image/immich_thumbnail.widget.dart
+2 -1
View File
@@ -1,6 +1,7 @@
import 'package:flutter/material.dart';
import 'package:immich_mobile/domain/models/asset.model.dart';
import 'package:immich_mobile/presentation/components/image/immich_image.widget.dart';
import 'package:immich_mobile/utils/constants/size_constants.dart';
import 'package:material_symbols_icons/symbols.dart';
IconData _getStorageIcon(Asset asset) {
@@ -77,7 +78,7 @@ class _PadAlignedIcon extends StatelessWidget {
alignment: alignment,
child: Icon(
icon,
size: 20,
size: SizeConstants.xm,
fill: (filled != null && filled!) ? 1 : null,
color: Colors.white,
),