sjs/immich
1
0
Fork 0
mirror of https://github.com/samsonjs/immich.git synced 2026-04-27 15:07:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore(mobile): cleanup server storage info (#26038)

Browse source 
The server storage info has a lot of whitespace due to the ListTile.
Converting it to be inline makes the styling appear more intentional.

There are also a few semantically relevant list items in the app bar
dialog which have been grouped together.
This commit is contained in:
Thomas 2026-02-12 15:39:55 +00:00 committed by GitHub
parent 675bbf3ac3
commit 0d35231dfd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 229 additions and 251 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
mobile/lib/widgets/common/app_bar_dialog/app_bar_dialog.dart
View file

@ -153,42 +153,26 @@ class ImmichAppBarDialog extends HookConsumerWidget {
percentage = user.quotaUsageInBytes / user.quotaSizeInBytes; percentage = user.quotaUsageInBytes / user.quotaSizeInBytes;
} }
return Padding( return Container(
padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 3), padding: const EdgeInsets.all(16),
child: Container( child: Column(
padding: const EdgeInsets.symmetric(vertical: 4), crossAxisAlignment: CrossAxisAlignment.start,
decoration: BoxDecoration(color: context.colorScheme.surface), spacing: 12,
child: ListTile( children: [
minLeadingWidth: 50, Text(
leading: Icon(Icons.storage_rounded, color: theme.primaryColor),
title: Text(
"backup_controller_page_server_storage", "backup_controller_page_server_storage",
style: context.textTheme.labelLarge?.copyWith(fontWeight: FontWeight.w500), style: context.textTheme.labelLarge?.copyWith(fontWeight: FontWeight.w500),
).tr(), ).tr(),
isThreeLine: true, LinearProgressIndicator(
subtitle: Padding( minHeight: 10.0,
padding: const EdgeInsets.only(top: 8.0), value: percentage,
child: Column( borderRadius: const BorderRadius.all(Radius.circular(10.0)),
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: LinearProgressIndicator(
minHeight: 10.0,
value: percentage,
borderRadius: const BorderRadius.all(Radius.circular(10.0)),
),
),
Padding(
padding: const EdgeInsets.only(top: 12.0),
child: const Text(
'backup_controller_page_storage_format',
).tr(namedArgs: {'used': usedDiskSpace, 'total': totalDiskSpace}),
),
],
),
), ),
), Text(
'backup_controller_page_storage_format',
style: context.textTheme.bodySmall,
).tr(namedArgs: {'used': usedDiskSpace, 'total': totalDiskSpace}),
],
), ),
); );
} }
@ -275,9 +259,22 @@ class ImmichAppBarDialog extends HookConsumerWidget {
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
Container(padding: const EdgeInsets.symmetric(horizontal: 8), child: buildTopRow()), Container(padding: const EdgeInsets.symmetric(horizontal: 8), child: buildTopRow()),
const AppBarProfileInfoBox(), Container(
buildStorageInformation(), decoration: BoxDecoration(
const AppBarServerInfo(), color: context.colorScheme.surface,
borderRadius: const BorderRadius.all(Radius.circular(10)),
),
margin: const EdgeInsets.only(left: 8, right: 8, bottom: 8),
child: Column(
children: [
const AppBarProfileInfoBox(),
const Divider(height: 3),
buildStorageInformation(),
const Divider(height: 3),
const AppBarServerInfo(),
],
),
),
if (Store.isBetaTimelineEnabled && isReadonlyModeEnabled) buildReadonlyMessage(), if (Store.isBetaTimelineEnabled && isReadonlyModeEnabled) buildReadonlyMessage(),
buildAppLogButton(), buildAppLogButton(),
buildFreeUpSpaceButton(), buildFreeUpSpaceButton(),

72
mobile/lib/widgets/common/app_bar_dialog/app_bar_profile_info.dart
View file

@ -80,50 +80,40 @@ class AppBarProfileInfoBox extends HookConsumerWidget {
); );
} }
return Padding( return ListTile(
padding: const EdgeInsets.symmetric(horizontal: 10.0), minLeadingWidth: 50,
child: Container( leading: GestureDetector(
width: double.infinity, onTap: pickUserProfileImage,
decoration: BoxDecoration( onLongPress: toggleReadonlyMode,
color: context.colorScheme.surface, child: Stack(
borderRadius: const BorderRadius.only(topLeft: Radius.circular(10), topRight: Radius.circular(10)), clipBehavior: Clip.none,
), children: [
child: ListTile( AbsorbPointer(child: buildUserProfileImage()),
minLeadingWidth: 50, if (!isReadonlyModeEnabled)
leading: GestureDetector( Positioned(
onTap: pickUserProfileImage, bottom: -5,
onLongPress: toggleReadonlyMode, right: -8,
child: Stack( child: Material(
clipBehavior: Clip.none, color: context.colorScheme.surfaceContainerHighest,
children: [ elevation: 3,
AbsorbPointer(child: buildUserProfileImage()), shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(50.0))),
if (!isReadonlyModeEnabled) child: Padding(
Positioned( padding: const EdgeInsets.all(5.0),
bottom: -5, child: Icon(Icons.camera_alt_outlined, color: context.primaryColor, size: 14),
right: -8,
child: Material(
color: context.colorScheme.surfaceContainerHighest,
elevation: 3,
shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(50.0))),
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Icon(Icons.camera_alt_outlined, color: context.primaryColor, size: 14),
),
),
), ),
], ),
), ),
), ],
title: Text(
authState.name,
style: context.textTheme.titleMedium?.copyWith(color: context.primaryColor, fontWeight: FontWeight.w500),
),
subtitle: Text(
authState.userEmail,
style: context.textTheme.bodySmall?.copyWith(color: context.colorScheme.onSurfaceSecondary),
),
), ),
), ),
title: Text(
authState.name,
style: context.textTheme.titleMedium?.copyWith(color: context.primaryColor, fontWeight: FontWeight.w500),
),
subtitle: Text(
authState.userEmail,
style: context.textTheme.bodySmall?.copyWith(color: context.colorScheme.onSurfaceSecondary),
),
); );
} }
} }

341
mobile/lib/widgets/common/app_bar_dialog/app_bar_server_info.dart
View file

@ -38,187 +38,178 @@ class AppBarServerInfo extends HookConsumerWidget {
}, []); }, []);
return Padding( return Padding(
padding: const EdgeInsets.only(left: 10.0, right: 10.0, bottom: 10.0), padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 8),
child: Container( child: Column(
decoration: BoxDecoration( crossAxisAlignment: CrossAxisAlignment.center,
color: context.colorScheme.surface, children: [
borderRadius: const BorderRadius.only(bottomLeft: Radius.circular(10), bottomRight: Radius.circular(10)), if (showVersionWarning) ...[
), const Padding(padding: EdgeInsets.symmetric(horizontal: 8.0), child: ServerUpdateNotification()),
child: Padding( const Padding(padding: EdgeInsets.symmetric(horizontal: 10), child: Divider(thickness: 1)),
padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 8), ],
child: Column( Row(
crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
if (showVersionWarning) ...[ Expanded(
const Padding(padding: EdgeInsets.symmetric(horizontal: 8.0), child: ServerUpdateNotification()), child: Padding(
const Padding(padding: EdgeInsets.symmetric(horizontal: 10), child: Divider(thickness: 1)), padding: const EdgeInsets.only(left: 10.0),
], child: Text(
Row( "server_info_box_app_version".tr(),
mainAxisAlignment: MainAxisAlignment.spaceBetween, style: TextStyle(
children: [ fontSize: titleFontSize,
Expanded( color: context.textTheme.labelSmall?.color,
child: Padding( fontWeight: FontWeight.w500,
padding: const EdgeInsets.only(left: 10.0),
child: Text(
"server_info_box_app_version".tr(),
style: TextStyle(
fontSize: titleFontSize,
color: context.textTheme.labelSmall?.color,
fontWeight: FontWeight.w500,
),
),
), ),
), ),
Expanded(
flex: 0,
child: Padding(
padding: const EdgeInsets.only(right: 10.0),
child: Text(
"${appInfo.value["version"]} build.${appInfo.value["buildNumber"]}",
style: TextStyle(
fontSize: contentFontSize,
color: context.colorScheme.onSurfaceSecondary,
fontWeight: FontWeight.bold,
),
),
),
),
],
),
const Padding(padding: EdgeInsets.symmetric(horizontal: 10), child: Divider(thickness: 1)),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Text(
"server_version".tr(),
style: TextStyle(
fontSize: titleFontSize,
color: context.textTheme.labelSmall?.color,
fontWeight: FontWeight.w500,
),
),
),
),
Expanded(
flex: 0,
child: Padding(
padding: const EdgeInsets.only(right: 10.0),
child: Text(
serverInfoState.serverVersion.major > 0
? "${serverInfoState.serverVersion.major}.${serverInfoState.serverVersion.minor}.${serverInfoState.serverVersion.patch}"
: "--",
style: TextStyle(
fontSize: contentFontSize,
color: context.colorScheme.onSurfaceSecondary,
fontWeight: FontWeight.bold,
),
),
),
),
],
),
const Padding(padding: EdgeInsets.symmetric(horizontal: 10), child: Divider(thickness: 1)),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Text(
"server_info_box_server_url".tr(),
style: TextStyle(
fontSize: titleFontSize,
color: context.textTheme.labelSmall?.color,
fontWeight: FontWeight.w500,
),
),
),
),
Expanded(
flex: 0,
child: Container(
width: 200,
padding: const EdgeInsets.only(right: 10.0),
child: Tooltip(
verticalOffset: 0,
decoration: BoxDecoration(
color: context.primaryColor.withValues(alpha: 0.9),
borderRadius: const BorderRadius.all(Radius.circular(10)),
),
textStyle: TextStyle(
color: context.isDarkTheme ? Colors.black : Colors.white,
fontWeight: FontWeight.bold,
),
message: getServerUrl() ?? '--',
preferBelow: false,
triggerMode: TooltipTriggerMode.tap,
child: Text(
getServerUrl() ?? '--',
style: TextStyle(
fontSize: contentFontSize,
color: context.colorScheme.onSurfaceSecondary,
fontWeight: FontWeight.bold,
overflow: TextOverflow.ellipsis,
),
textAlign: TextAlign.end,
),
),
),
),
],
),
if (serverInfoState.latestVersion != null) ...[
const Padding(padding: EdgeInsets.symmetric(horizontal: 10), child: Divider(thickness: 1)),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Row(
children: [
if (serverInfoState.versionStatus == VersionStatus.serverOutOfDate)
const Padding(
padding: EdgeInsets.only(right: 5.0),
child: Icon(Icons.info, color: Color.fromARGB(255, 243, 188, 106), size: 12),
),
Text(
"latest_version".tr(),
style: TextStyle(
fontSize: titleFontSize,
color: context.textTheme.labelSmall?.color,
fontWeight: FontWeight.w500,
),
),
],
),
),
),
Expanded(
flex: 0,
child: Padding(
padding: const EdgeInsets.only(right: 10.0),
child: Text(
serverInfoState.latestVersion!.major > 0
? "${serverInfoState.latestVersion!.major}.${serverInfoState.latestVersion!.minor}.${serverInfoState.latestVersion!.patch}"
: "--",
style: TextStyle(
fontSize: contentFontSize,
color: context.colorScheme.onSurfaceSecondary,
fontWeight: FontWeight.bold,
),
),
),
),
],
), ),
], ),
Expanded(
flex: 0,
child: Padding(
padding: const EdgeInsets.only(right: 10.0),
child: Text(
"${appInfo.value["version"]} build.${appInfo.value["buildNumber"]}",
style: TextStyle(
fontSize: contentFontSize,
color: context.colorScheme.onSurfaceSecondary,
fontWeight: FontWeight.bold,
),
),
),
),
], ],
), ),
), const Padding(padding: EdgeInsets.symmetric(horizontal: 10), child: Divider(thickness: 1)),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Text(
"server_version".tr(),
style: TextStyle(
fontSize: titleFontSize,
color: context.textTheme.labelSmall?.color,
fontWeight: FontWeight.w500,
),
),
),
),
Expanded(
flex: 0,
child: Padding(
padding: const EdgeInsets.only(right: 10.0),
child: Text(
serverInfoState.serverVersion.major > 0
? "${serverInfoState.serverVersion.major}.${serverInfoState.serverVersion.minor}.${serverInfoState.serverVersion.patch}"
: "--",
style: TextStyle(
fontSize: contentFontSize,
color: context.colorScheme.onSurfaceSecondary,
fontWeight: FontWeight.bold,
),
),
),
),
],
),
const Padding(padding: EdgeInsets.symmetric(horizontal: 10), child: Divider(thickness: 1)),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Text(
"server_info_box_server_url".tr(),
style: TextStyle(
fontSize: titleFontSize,
color: context.textTheme.labelSmall?.color,
fontWeight: FontWeight.w500,
),
),
),
),
Expanded(
flex: 0,
child: Container(
width: 200,
padding: const EdgeInsets.only(right: 10.0),
child: Tooltip(
verticalOffset: 0,
decoration: BoxDecoration(
color: context.primaryColor.withValues(alpha: 0.9),
borderRadius: const BorderRadius.all(Radius.circular(10)),
),
textStyle: TextStyle(
color: context.isDarkTheme ? Colors.black : Colors.white,
fontWeight: FontWeight.bold,
),
message: getServerUrl() ?? '--',
preferBelow: false,
triggerMode: TooltipTriggerMode.tap,
child: Text(
getServerUrl() ?? '--',
style: TextStyle(
fontSize: contentFontSize,
color: context.colorScheme.onSurfaceSecondary,
fontWeight: FontWeight.bold,
overflow: TextOverflow.ellipsis,
),
textAlign: TextAlign.end,
),
),
),
),
],
),
if (serverInfoState.latestVersion != null) ...[
const Padding(padding: EdgeInsets.symmetric(horizontal: 10), child: Divider(thickness: 1)),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Row(
children: [
if (serverInfoState.versionStatus == VersionStatus.serverOutOfDate)
const Padding(
padding: EdgeInsets.only(right: 5.0),
child: Icon(Icons.info, color: Color.fromARGB(255, 243, 188, 106), size: 12),
),
Text(
"latest_version".tr(),
style: TextStyle(
fontSize: titleFontSize,
color: context.textTheme.labelSmall?.color,
fontWeight: FontWeight.w500,
),
),
],
),
),
),
Expanded(
flex: 0,
child: Padding(
padding: const EdgeInsets.only(right: 10.0),
child: Text(
serverInfoState.latestVersion!.major > 0
? "${serverInfoState.latestVersion!.major}.${serverInfoState.latestVersion!.minor}.${serverInfoState.latestVersion!.patch}"
: "--",
style: TextStyle(
fontSize: contentFontSize,
color: context.colorScheme.onSurfaceSecondary,
fontWeight: FontWeight.bold,
),
),
),
),
],
),
],
],
), ),
); );
} }