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,
),
),
),
);
}
}