From 11b2e2a6e28f82aa48b3a19b114b9bd19b6db115 Mon Sep 17 00:00:00 2001 From: Alex Date: Sun, 12 Feb 2023 23:05:31 -0600 Subject: [PATCH] chore(mobile): additional MD3 styling and refactor some code (#1741) --- .../modules/backup/ui/backup_info_card.dart | 10 +- .../backup/views/backup_controller_page.dart | 131 ++++++++++-------- mobile/lib/utils/immich_app_theme.dart | 21 ++- 3 files changed, 97 insertions(+), 65 deletions(-) diff --git a/mobile/lib/modules/backup/ui/backup_info_card.dart b/mobile/lib/modules/backup/ui/backup_info_card.dart index 697b9795cc..aa9629cd38 100644 --- a/mobile/lib/modules/backup/ui/backup_info_card.dart +++ b/mobile/lib/modules/backup/ui/backup_info_card.dart @@ -14,11 +14,15 @@ class BackupInfoCard extends StatelessWidget { @override Widget build(BuildContext context) { + var isDarkMode = Theme.of(context).brightness == Brightness.dark; + return Card( shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(5), // if you need this - side: const BorderSide( - color: Colors.black12, + borderRadius: BorderRadius.circular(20), // if you need this + side: BorderSide( + color: isDarkMode + ? const Color.fromARGB(255, 101, 101, 101) + : Colors.black12, width: 1, ), ), diff --git a/mobile/lib/modules/backup/views/backup_controller_page.dart b/mobile/lib/modules/backup/views/backup_controller_page.dart index 5674bbe4ed..8fc9b035e5 100644 --- a/mobile/lib/modules/backup/views/backup_controller_page.dart +++ b/mobile/lib/modules/backup/views/backup_controller_page.dart @@ -31,6 +31,7 @@ class BackupControllerPage extends HookConsumerWidget { !hasExclusiveAccess ? false : true; + var isDarkMode = Theme.of(context).brightness == Brightness.dark; useEffect( () { @@ -421,9 +422,11 @@ class BackupControllerPage extends HookConsumerWidget { buildFolderSelectionTile() { return Card( shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(5), // if you need this - side: const BorderSide( - color: Colors.black12, + borderRadius: BorderRadius.circular(20), + side: BorderSide( + color: isDarkMode + ? const Color.fromARGB(255, 101, 101, 101) + : Colors.black12, width: 1, ), ), @@ -476,6 +479,69 @@ class BackupControllerPage extends HookConsumerWidget { } } + Widget buildBackupButton() { + return Padding( + padding: const EdgeInsets.only( + top: 24, + ), + child: Container( + child: backupState.backupProgress == BackUpProgressEnum.inProgress + ? ElevatedButton( + style: ElevatedButton.styleFrom( + foregroundColor: Colors.grey[50], + backgroundColor: Colors.red[300], + // padding: const EdgeInsets.all(14), + ), + onPressed: () { + ref.read(backupProvider.notifier).cancelBackup(); + }, + child: const Text( + "backup_controller_page_cancel", + style: TextStyle( + fontSize: 14, + fontWeight: FontWeight.bold, + ), + ).tr(), + ) + : ElevatedButton( + onPressed: shouldBackup ? startBackup : null, + child: const Text( + "backup_controller_page_start_backup", + style: TextStyle( + fontSize: 14, + fontWeight: FontWeight.bold, + ), + ).tr(), + ), + ), + ); + } + + buildBackgroundBackupInfo() { + return hasExclusiveAccess + ? const SizedBox.shrink() + : Card( + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(20), // if you need this + side: BorderSide( + color: isDarkMode + ? const Color.fromARGB(255, 101, 101, 101) + : Colors.black12, + width: 1, + ), + ), + elevation: 0, + borderOnForeground: false, + child: const Padding( + padding: EdgeInsets.all(16.0), + child: Text( + "Background backup is currently running, some actions are disabled", + style: TextStyle(fontWeight: FontWeight.bold), + ), + ), + ); + } + return Scaffold( appBar: AppBar( elevation: 0, @@ -506,27 +572,7 @@ class BackupControllerPage extends HookConsumerWidget { style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16), ).tr(), ), - hasExclusiveAccess - ? const SizedBox.shrink() - : Card( - shape: RoundedRectangleBorder( - borderRadius: - BorderRadius.circular(5), // if you need this - side: const BorderSide( - color: Colors.black12, - width: 1, - ), - ), - elevation: 0, - borderOnForeground: false, - child: const Padding( - padding: EdgeInsets.all(16.0), - child: Text( - "Background backup is currently running, some actions are disabled", - style: TextStyle(fontWeight: FontWeight.bold), - ), - ), - ), + buildBackgroundBackupInfo(), buildFolderSelectionTile(), BackupInfoCard( title: "backup_controller_page_total".tr(), @@ -552,42 +598,7 @@ class BackupControllerPage extends HookConsumerWidget { buildStorageInformation(), const Divider(), const CurrentUploadingAssetInfoBox(), - Padding( - padding: const EdgeInsets.only( - top: 24, - ), - child: Container( - child: - backupState.backupProgress == BackUpProgressEnum.inProgress - ? ElevatedButton( - style: ElevatedButton.styleFrom( - foregroundColor: Colors.grey[50], - backgroundColor: Colors.red[300], - // padding: const EdgeInsets.all(14), - ), - onPressed: () { - ref.read(backupProvider.notifier).cancelBackup(); - }, - child: const Text( - "backup_controller_page_cancel", - style: TextStyle( - fontSize: 14, - fontWeight: FontWeight.bold, - ), - ).tr(), - ) - : ElevatedButton( - onPressed: shouldBackup ? startBackup : null, - child: const Text( - "backup_controller_page_start_backup", - style: TextStyle( - fontSize: 14, - fontWeight: FontWeight.bold, - ), - ).tr(), - ), - ), - ) + buildBackupButton() ], ), ), diff --git a/mobile/lib/utils/immich_app_theme.dart b/mobile/lib/utils/immich_app_theme.dart index 44fba6f6d8..c60b14c233 100644 --- a/mobile/lib/utils/immich_app_theme.dart +++ b/mobile/lib/utils/immich_app_theme.dart @@ -92,8 +92,18 @@ ThemeData immichLightTheme = ThemeData( ), navigationBarTheme: NavigationBarThemeData( indicatorColor: Colors.indigo.withOpacity(0.15), + iconTheme: MaterialStatePropertyAll( + IconThemeData(color: Colors.grey[700]), + ), backgroundColor: immichBackgroundColor, surfaceTintColor: Colors.transparent, + labelTextStyle: MaterialStatePropertyAll( + TextStyle( + fontSize: 12, + fontWeight: FontWeight.w600, + color: Colors.grey[700], + ), + ), ), ); @@ -166,10 +176,17 @@ ThemeData immichDarkTheme = ThemeData( ), navigationBarTheme: NavigationBarThemeData( indicatorColor: immichDarkThemePrimaryColor.withOpacity(0.4), - iconTheme: const MaterialStatePropertyAll( - IconThemeData(color: Colors.white), + iconTheme: MaterialStatePropertyAll( + IconThemeData(color: Colors.grey[500]), ), backgroundColor: Colors.grey[900], surfaceTintColor: Colors.transparent, + labelTextStyle: MaterialStatePropertyAll( + TextStyle( + fontSize: 12, + fontWeight: FontWeight.w600, + color: Colors.grey[500], + ), + ), ), );