mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
Add mobile dark mode and user setting (#468)
* styling light and dark theme * Icon topbar * Fixed app bar title dark theme * Fixed issue with getting thumbnail for things * Refactor sharing page * Refactor scroll thumb * Refactor chip in auto backup indiation button * Refactor sharing page * Added theme toggle * Up version for testflight build * Refactor backup controller page * Refactor album selection page * refactor album pages * Refactor gradient color profile header * Added theme switcher * Register app theme correctly * Added locale to the app * Added translation key * Styling for bottomsheet colors * up server version * Fixed font size * Fixed overlapsed sliverappbar on photos screen
This commit is contained in:
Alex
GitHub
parent
30f069a5db
commit
c1b22125fd
47 changed files with 536 additions and 307 deletions
|
|
@ -24,6 +24,7 @@ class AlbumInfoCard extends HookConsumerWidget {
|
|||
ref.watch(backupProvider).selectedBackupAlbums.contains(albumInfo);
|
||||
final bool isExcluded =
|
||||
ref.watch(backupProvider).excludedBackupAlbums.contains(albumInfo);
|
||||
final isDarkTheme = Theme.of(context).brightness == Brightness.dark;
|
||||
|
||||
ColorFilter selectedFilter = ColorFilter.mode(
|
||||
Theme.of(context).primaryColor.withAlpha(100),
|
||||
|
|
@ -39,11 +40,11 @@ class AlbumInfoCard extends HookConsumerWidget {
|
|||
return Chip(
|
||||
visualDensity: VisualDensity.compact,
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
|
||||
label: const Text(
|
||||
label: Text(
|
||||
"album_info_card_backup_album_included",
|
||||
style: TextStyle(
|
||||
fontSize: 10,
|
||||
color: Colors.white,
|
||||
color: isDarkTheme ? Colors.black : Colors.white,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
).tr(),
|
||||
|
|
@ -53,11 +54,11 @@ class AlbumInfoCard extends HookConsumerWidget {
|
|||
return Chip(
|
||||
visualDensity: VisualDensity.compact,
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
|
||||
label: const Text(
|
||||
label: Text(
|
||||
"album_info_card_backup_album_excluded",
|
||||
style: TextStyle(
|
||||
fontSize: 10,
|
||||
color: Colors.white,
|
||||
color: isDarkTheme ? Colors.black : Colors.white,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
).tr(),
|
||||
|
|
@ -141,8 +142,10 @@ class AlbumInfoCard extends HookConsumerWidget {
|
|||
margin: const EdgeInsets.all(1),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12), // if you need this
|
||||
side: const BorderSide(
|
||||
color: Color(0xFFC9C9C9),
|
||||
side: BorderSide(
|
||||
color: isDarkTheme
|
||||
? const Color.fromARGB(255, 37, 35, 35)
|
||||
: const Color(0xFFC9C9C9),
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
|
|
@ -219,8 +222,9 @@ class AlbumInfoCard extends HookConsumerWidget {
|
|||
),
|
||||
IconButton(
|
||||
onPressed: () {
|
||||
AutoRouter.of(context)
|
||||
.push(AlbumPreviewRoute(album: albumInfo));
|
||||
AutoRouter.of(context).push(
|
||||
AlbumPreviewRoute(album: albumInfo),
|
||||
);
|
||||
},
|
||||
icon: Icon(
|
||||
Icons.image_outlined,
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ class BackupInfoCard extends StatelessWidget {
|
|||
padding: const EdgeInsets.only(top: 8.0),
|
||||
child: Text(
|
||||
subtitle,
|
||||
style: const TextStyle(color: Color(0xFF808080), fontSize: 12),
|
||||
style: const TextStyle(fontSize: 12),
|
||||
),
|
||||
),
|
||||
trailing: Column(
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import 'package:flutter/material.dart';
|
|||
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||
import 'package:fluttertoast/fluttertoast.dart';
|
||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||
import 'package:immich_mobile/constants/immich_colors.dart';
|
||||
import 'package:immich_mobile/modules/backup/providers/backup.provider.dart';
|
||||
import 'package:immich_mobile/modules/backup/ui/album_info_card.dart';
|
||||
import 'package:immich_mobile/shared/ui/immich_loading_indicator.dart';
|
||||
|
|
@ -16,6 +17,7 @@ class BackupAlbumSelectionPage extends HookConsumerWidget {
|
|||
final availableAlbums = ref.watch(backupProvider).availableAlbums;
|
||||
final selectedBackupAlbums = ref.watch(backupProvider).selectedBackupAlbums;
|
||||
final excludedBackupAlbums = ref.watch(backupProvider).excludedBackupAlbums;
|
||||
final isDarkTheme = Theme.of(context).brightness == Brightness.dark;
|
||||
|
||||
useEffect(
|
||||
() {
|
||||
|
|
@ -81,14 +83,16 @@ class BackupAlbumSelectionPage extends HookConsumerWidget {
|
|||
),
|
||||
label: Text(
|
||||
album.name,
|
||||
style: const TextStyle(
|
||||
style: TextStyle(
|
||||
fontSize: 10,
|
||||
color: Colors.white,
|
||||
color: Theme.of(context).brightness == Brightness.dark
|
||||
? Colors.black
|
||||
: Colors.white,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
backgroundColor: Theme.of(context).primaryColor,
|
||||
deleteIconColor: Colors.white,
|
||||
deleteIconColor: isDarkTheme ? Colors.black : Colors.white,
|
||||
deleteIcon: const Icon(
|
||||
Icons.cancel_rounded,
|
||||
size: 15,
|
||||
|
|
@ -119,14 +123,15 @@ class BackupAlbumSelectionPage extends HookConsumerWidget {
|
|||
),
|
||||
label: Text(
|
||||
album.name,
|
||||
style: const TextStyle(
|
||||
style: TextStyle(
|
||||
fontSize: 10,
|
||||
color: Colors.white,
|
||||
color: isDarkTheme ? Colors.black : immichBackgroundColor,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
backgroundColor: Colors.red[300],
|
||||
deleteIconColor: Colors.white,
|
||||
deleteIconColor:
|
||||
isDarkTheme ? Colors.black : immichBackgroundColor,
|
||||
deleteIcon: const Icon(
|
||||
Icons.cancel_rounded,
|
||||
size: 15,
|
||||
|
|
@ -154,11 +159,16 @@ class BackupAlbumSelectionPage extends HookConsumerWidget {
|
|||
physics: const ClampingScrollPhysics(),
|
||||
children: [
|
||||
Padding(
|
||||
padding:
|
||||
const EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
|
||||
padding: const EdgeInsets.symmetric(
|
||||
vertical: 8.0,
|
||||
horizontal: 16.0,
|
||||
),
|
||||
child: const Text(
|
||||
"backup_album_selection_page_selection_info",
|
||||
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
|
||||
style: TextStyle(
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 14,
|
||||
),
|
||||
).tr(),
|
||||
),
|
||||
// Selected Album Chips
|
||||
|
|
@ -178,9 +188,11 @@ class BackupAlbumSelectionPage extends HookConsumerWidget {
|
|||
child: Card(
|
||||
margin: const EdgeInsets.all(0),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(5), // if you need this
|
||||
side: const BorderSide(
|
||||
color: Color.fromARGB(255, 235, 235, 235),
|
||||
borderRadius: BorderRadius.circular(5),
|
||||
side: BorderSide(
|
||||
color: isDarkTheme
|
||||
? const Color.fromARGB(255, 0, 0, 0)
|
||||
: const Color.fromARGB(255, 235, 235, 235),
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
|
|
@ -190,12 +202,11 @@ class BackupAlbumSelectionPage extends HookConsumerWidget {
|
|||
children: [
|
||||
ListTile(
|
||||
visualDensity: VisualDensity.compact,
|
||||
title: Text(
|
||||
title: const Text(
|
||||
"backup_album_selection_page_total_assets",
|
||||
style: TextStyle(
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 14,
|
||||
color: Colors.grey[700],
|
||||
),
|
||||
).tr(),
|
||||
trailing: Text(
|
||||
|
|
@ -257,11 +268,10 @@ class BackupAlbumSelectionPage extends HookConsumerWidget {
|
|||
content: SingleChildScrollView(
|
||||
child: ListBody(
|
||||
children: [
|
||||
Text(
|
||||
const Text(
|
||||
'backup_album_selection_page_assets_scatter',
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
color: Colors.grey[700],
|
||||
),
|
||||
).tr(),
|
||||
],
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@ class BackupControllerPage extends HookConsumerWidget {
|
|||
);
|
||||
}
|
||||
|
||||
ListTile _buildBackupController() {
|
||||
ListTile _buildAutoBackupController() {
|
||||
var backUpOption = authenticationState.deviceInfo.isAutoBackup
|
||||
? "backup_controller_page_status_on".tr()
|
||||
: "backup_controller_page_status_off".tr();
|
||||
|
|
@ -114,13 +114,7 @@ class BackupControllerPage extends HookConsumerWidget {
|
|||
).tr(),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 8.0),
|
||||
child: OutlinedButton(
|
||||
style: OutlinedButton.styleFrom(
|
||||
side: const BorderSide(
|
||||
width: 1,
|
||||
color: Color.fromARGB(255, 220, 220, 220),
|
||||
),
|
||||
),
|
||||
child: ElevatedButton(
|
||||
onPressed: () {
|
||||
if (isAutoBackup) {
|
||||
ref
|
||||
|
|
@ -134,7 +128,10 @@ class BackupControllerPage extends HookConsumerWidget {
|
|||
},
|
||||
child: Text(
|
||||
backupBtnText,
|
||||
style: const TextStyle(fontWeight: FontWeight.bold),
|
||||
style: const TextStyle(
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 12,
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
|
|
@ -232,33 +229,24 @@ class BackupControllerPage extends HookConsumerWidget {
|
|||
children: [
|
||||
const Text(
|
||||
"backup_controller_page_to_backup",
|
||||
style: TextStyle(color: Color(0xFF808080), fontSize: 12),
|
||||
style: TextStyle(fontSize: 12),
|
||||
).tr(),
|
||||
_buildSelectedAlbumName(),
|
||||
_buildExcludedAlbumName()
|
||||
],
|
||||
),
|
||||
),
|
||||
trailing: OutlinedButton(
|
||||
style: OutlinedButton.styleFrom(
|
||||
enableFeedback: true,
|
||||
side: const BorderSide(
|
||||
width: 1,
|
||||
color: Color.fromARGB(255, 220, 220, 220),
|
||||
),
|
||||
),
|
||||
trailing: ElevatedButton(
|
||||
onPressed: () {
|
||||
AutoRouter.of(context).push(const BackupAlbumSelectionRoute());
|
||||
},
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
vertical: 16.0,
|
||||
child: const Text(
|
||||
"backup_controller_page_select",
|
||||
style: TextStyle(
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 12,
|
||||
),
|
||||
child: const Text(
|
||||
"backup_controller_page_select",
|
||||
style: TextStyle(fontWeight: FontWeight.bold),
|
||||
).tr(),
|
||||
),
|
||||
).tr(),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
|
@ -324,14 +312,14 @@ class BackupControllerPage extends HookConsumerWidget {
|
|||
padding: const EdgeInsets.only(top: 8.0),
|
||||
child: Table(
|
||||
border: TableBorder.all(
|
||||
color: Colors.black12,
|
||||
color: Theme.of(context).primaryColorLight,
|
||||
width: 1,
|
||||
),
|
||||
children: [
|
||||
TableRow(
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.grey[100],
|
||||
),
|
||||
decoration: const BoxDecoration(
|
||||
// color: Colors.grey[100],
|
||||
),
|
||||
children: [
|
||||
TableCell(
|
||||
verticalAlignment: TableCellVerticalAlignment.middle,
|
||||
|
|
@ -355,9 +343,9 @@ class BackupControllerPage extends HookConsumerWidget {
|
|||
],
|
||||
),
|
||||
TableRow(
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.grey[200],
|
||||
),
|
||||
decoration: const BoxDecoration(
|
||||
// color: Colors.grey[200],
|
||||
),
|
||||
children: [
|
||||
TableCell(
|
||||
verticalAlignment: TableCellVerticalAlignment.middle,
|
||||
|
|
@ -384,9 +372,9 @@ class BackupControllerPage extends HookConsumerWidget {
|
|||
],
|
||||
),
|
||||
TableRow(
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.grey[100],
|
||||
),
|
||||
decoration: const BoxDecoration(
|
||||
// color: Colors.grey[100],
|
||||
),
|
||||
children: [
|
||||
TableCell(
|
||||
child: Padding(
|
||||
|
|
@ -463,7 +451,7 @@ class BackupControllerPage extends HookConsumerWidget {
|
|||
"${backupState.allUniqueAssets.length - backupState.selectedAlbumsBackupAssetsIds.length}",
|
||||
),
|
||||
const Divider(),
|
||||
_buildBackupController(),
|
||||
_buildAutoBackupController(),
|
||||
const Divider(),
|
||||
_buildStorageInformation(),
|
||||
const Divider(),
|
||||
|
|
@ -479,7 +467,7 @@ class BackupControllerPage extends HookConsumerWidget {
|
|||
style: ElevatedButton.styleFrom(
|
||||
primary: Colors.red[300],
|
||||
onPrimary: Colors.grey[50],
|
||||
padding: const EdgeInsets.all(14),
|
||||
// padding: const EdgeInsets.all(14),
|
||||
),
|
||||
onPressed: () {
|
||||
ref.read(backupProvider.notifier).cancelBackup();
|
||||
|
|
@ -493,11 +481,6 @@ class BackupControllerPage extends HookConsumerWidget {
|
|||
).tr(),
|
||||
)
|
||||
: ElevatedButton(
|
||||
style: ElevatedButton.styleFrom(
|
||||
primary: Theme.of(context).primaryColor,
|
||||
onPrimary: Colors.grey[50],
|
||||
padding: const EdgeInsets.all(14),
|
||||
),
|
||||
onPressed: shouldBackup ? startBackup : null,
|
||||
child: const Text(
|
||||
"backup_controller_page_start_backup",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue