Mirrors/nc-photos
1
0
Fork 0
mirror of https://gitlab.com/nkming2/nc-photos.git synced 2025-02-08 18:28:53 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update app theme

Browse source
This commit is contained in:
Ming Ming 2021-04-17 16:59:16 +08:00
parent 5b918b81d4
commit c22c89678b
14 changed files with 130 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
lib/theme.dart
View file

@ -19,9 +19,9 @@ class AppTheme extends StatelessWidget {
final appBarTheme = theme.appBarTheme.copyWith( final appBarTheme = theme.appBarTheme.copyWith(
brightness: Brightness.dark, brightness: Brightness.dark,
color: theme.scaffoldBackgroundColor, color: theme.scaffoldBackgroundColor,
actionsIconTheme: theme.primaryIconTheme.copyWith(color: Colors.black), actionsIconTheme: theme.primaryIconTheme.copyWith(color: Colors.black87),
iconTheme: theme.primaryIconTheme.copyWith(color: Colors.black), iconTheme: theme.primaryIconTheme.copyWith(color: Colors.black87),
textTheme: theme.primaryTextTheme.apply(bodyColor: Colors.black), textTheme: theme.primaryTextTheme.apply(bodyColor: Colors.black87),
); );
return theme.copyWith(appBarTheme: appBarTheme); return theme.copyWith(appBarTheme: appBarTheme);
} }
@ -30,9 +30,12 @@ class AppTheme extends StatelessWidget {
final appBarTheme = theme.appBarTheme.copyWith( final appBarTheme = theme.appBarTheme.copyWith(
brightness: Brightness.dark, brightness: Brightness.dark,
color: theme.scaffoldBackgroundColor, color: theme.scaffoldBackgroundColor,
actionsIconTheme: theme.primaryIconTheme.copyWith(color: Colors.white), actionsIconTheme:
iconTheme: theme.primaryIconTheme.copyWith(color: Colors.white), theme.primaryIconTheme.copyWith(color: Colors.white.withOpacity(.87)),
textTheme: theme.primaryTextTheme.apply(bodyColor: Colors.white), iconTheme:
theme.primaryIconTheme.copyWith(color: Colors.white.withOpacity(.87)),
textTheme: theme.primaryTextTheme
.apply(bodyColor: Colors.white.withOpacity(.87)),
); );
return theme.copyWith(appBarTheme: appBarTheme); return theme.copyWith(appBarTheme: appBarTheme);
} }
@ -43,17 +46,21 @@ class AppTheme extends StatelessWidget {
return theme.appBarTheme.copyWith( return theme.appBarTheme.copyWith(
brightness: Brightness.dark, brightness: Brightness.dark,
color: Colors.grey[800], color: Colors.grey[800],
actionsIconTheme: theme.primaryIconTheme.copyWith(color: Colors.white), actionsIconTheme: theme.primaryIconTheme
iconTheme: theme.primaryIconTheme.copyWith(color: Colors.white), .copyWith(color: Colors.white.withOpacity(.87)),
textTheme: theme.primaryTextTheme.apply(bodyColor: Colors.white), iconTheme: theme.primaryIconTheme
.copyWith(color: Colors.white.withOpacity(.87)),
textTheme: theme.primaryTextTheme
.apply(bodyColor: Colors.white.withOpacity(.87)),
); );
} else { } else {
return theme.appBarTheme.copyWith( return theme.appBarTheme.copyWith(
brightness: Brightness.dark, brightness: Brightness.dark,
color: Colors.grey[200], color: Colors.grey[200],
actionsIconTheme: theme.primaryIconTheme.copyWith(color: Colors.black), actionsIconTheme:
iconTheme: theme.primaryIconTheme.copyWith(color: Colors.black), theme.primaryIconTheme.copyWith(color: Colors.black87),
textTheme: theme.primaryTextTheme.apply(bodyColor: Colors.black), iconTheme: theme.primaryIconTheme.copyWith(color: Colors.black87),
textTheme: theme.primaryTextTheme.apply(bodyColor: Colors.black87),
); );
} }
} }
@ -61,13 +68,13 @@ class AppTheme extends StatelessWidget {
static Color getSelectionOverlayColor(BuildContext context) { static Color getSelectionOverlayColor(BuildContext context) {
return Theme.of(context).brightness == Brightness.light return Theme.of(context).brightness == Brightness.light
? primarySwatchLight[100].withOpacity(0.7) ? primarySwatchLight[100].withOpacity(0.7)
: primarySwatchDark[100].withOpacity(0.7); : primarySwatchDark[700].withOpacity(0.7);
} }
static Color getSelectionCheckColor(BuildContext context) { static Color getSelectionCheckColor(BuildContext context) {
return Theme.of(context).brightness == Brightness.light return Theme.of(context).brightness == Brightness.light
? Colors.grey[800] ? Colors.grey[800]
: Colors.grey[200]; : Colors.grey[350];
} }
static Color getOverscrollIndicatorColor(BuildContext context) { static Color getOverscrollIndicatorColor(BuildContext context) {
@ -80,6 +87,24 @@ class AppTheme extends StatelessWidget {
return Colors.blue[200]; return Colors.blue[200];
} }
static Color getCloudIconColor(BuildContext context) {
return Theme.of(context).brightness == Brightness.light
? primarySwatchLight
: primarySwatchDark;
}
static Color getPrimaryTextColor(BuildContext context) {
return Theme.of(context).brightness == Brightness.light
? Colors.black87
: Colors.white.withOpacity(.87);
}
static Color getSecondaryTextColor(BuildContext context) {
return Theme.of(context).brightness == Brightness.light
? Colors.black.withOpacity(.6)
: Colors.white60;
}
static const primarySwatchLight = Colors.blue; static const primarySwatchLight = Colors.blue;
static const primarySwatchDark = Colors.cyan; static const primarySwatchDark = Colors.cyan;

13
lib/widget/account_picker_dialog.dart
View file

@ -5,6 +5,7 @@ import 'package:nc_photos/account.dart';
import 'package:nc_photos/k.dart' as k; import 'package:nc_photos/k.dart' as k;
import 'package:nc_photos/pref.dart'; import 'package:nc_photos/pref.dart';
import 'package:nc_photos/snack_bar_manager.dart'; import 'package:nc_photos/snack_bar_manager.dart';
import 'package:nc_photos/theme.dart';
import 'package:nc_photos/widget/home.dart'; import 'package:nc_photos/widget/home.dart';
import 'package:nc_photos/widget/sign_in.dart'; import 'package:nc_photos/widget/sign_in.dart';
@ -37,7 +38,10 @@ class _AccountPickerDialogState extends State<AccountPickerDialog> {
title: Text(a.url), title: Text(a.url),
subtitle: Text(a.username), subtitle: Text(a.username),
trailing: IconButton( trailing: IconButton(
icon: const Icon(Icons.close), icon: Icon(
Icons.close,
color: AppTheme.getSecondaryTextColor(context),
),
onPressed: () => _onRemoveItemPressed(a)), onPressed: () => _onRemoveItemPressed(a)),
), ),
)) ))
@ -51,8 +55,11 @@ class _AccountPickerDialogState extends State<AccountPickerDialog> {
}, },
child: Tooltip( child: Tooltip(
message: AppLocalizations.of(context).addServerTooltip, message: AppLocalizations.of(context).addServerTooltip,
child: const Center( child: Center(
child: const Icon(Icons.add, color: Colors.black54), child: Icon(
Icons.add,
color: AppTheme.getSecondaryTextColor(context),
),
), ),
), ),
), ),

6
lib/widget/album_grid_item.dart
View file

@ -29,7 +29,9 @@ class AlbumGridItem extends StatelessWidget {
const SizedBox(height: 8), const SizedBox(height: 8),
Text( Text(
title ?? "", title ?? "",
style: Theme.of(context).textTheme.bodyText1, style: Theme.of(context).textTheme.bodyText1.copyWith(
color: AppTheme.getPrimaryTextColor(context),
),
textAlign: TextAlign.start, textAlign: TextAlign.start,
maxLines: 1, maxLines: 1,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
@ -39,7 +41,7 @@ class AlbumGridItem extends StatelessWidget {
subtitle ?? "", subtitle ?? "",
style: Theme.of(context).textTheme.bodyText2.copyWith( style: Theme.of(context).textTheme.bodyText2.copyWith(
fontSize: 10, fontSize: 10,
color: Colors.grey, color: AppTheme.getSecondaryTextColor(context),
), ),
textAlign: TextAlign.start, textAlign: TextAlign.start,
maxLines: 1, maxLines: 1,

8
lib/widget/album_picker_dialog.dart
View file

@ -10,6 +10,7 @@ import 'package:nc_photos/entity/album.dart';
import 'package:nc_photos/exception_util.dart' as exception_util; import 'package:nc_photos/exception_util.dart' as exception_util;
import 'package:nc_photos/k.dart' as k; import 'package:nc_photos/k.dart' as k;
import 'package:nc_photos/snack_bar_manager.dart'; import 'package:nc_photos/snack_bar_manager.dart';
import 'package:nc_photos/theme.dart';
import 'package:nc_photos/widget/new_album_dialog.dart'; import 'package:nc_photos/widget/new_album_dialog.dart';
class AlbumPickerDialog extends StatefulWidget { class AlbumPickerDialog extends StatefulWidget {
@ -74,8 +75,11 @@ class _AlbumPickerDialogState extends State<AlbumPickerDialog> {
onPressed: () => _onNewAlbumPressed(context), onPressed: () => _onNewAlbumPressed(context),
child: Tooltip( child: Tooltip(
message: AppLocalizations.of(context).createAlbumTooltip, message: AppLocalizations.of(context).createAlbumTooltip,
child: const Center( child: Center(
child: const Icon(Icons.add, color: Colors.black54), child: Icon(
Icons.add,
color: AppTheme.getSecondaryTextColor(context),
),
), ),
), ),
), ),

5
lib/widget/album_viewer.dart
View file

@ -153,7 +153,8 @@ class _AlbumViewerState extends State<AlbumViewer>
try { try {
if (_coverPreviewUrl != null) { if (_coverPreviewUrl != null) {
cover = Opacity( cover = Opacity(
opacity: 0.25, opacity:
Theme.of(context).brightness == Brightness.light ? 0.25 : 0.35,
child: FittedBox( child: FittedBox(
clipBehavior: Clip.hardEdge, clipBehavior: Clip.hardEdge,
fit: BoxFit.cover, fit: BoxFit.cover,
@ -179,7 +180,7 @@ class _AlbumViewerState extends State<AlbumViewer>
title: Text( title: Text(
_album.name, _album.name,
style: TextStyle( style: TextStyle(
color: Theme.of(context).textTheme.headline6.color, color: AppTheme.getPrimaryTextColor(context),
), ),
), ),
), ),

4
lib/widget/connect.dart
View file

@ -71,10 +71,10 @@ class _ConnectState extends State<Connect> {
crossAxisAlignment: CrossAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
const Icon( Icon(
Icons.cloud, Icons.cloud,
size: 128, size: 128,
color: Colors.blue, color: AppTheme.getCloudIconColor(context),
), ),
Text( Text(
AppLocalizations.of(context) AppLocalizations.of(context)

16
lib/widget/home_albums.dart
View file

@ -212,9 +212,9 @@ class _HomeAlbumsState extends State<HomeAlbums> {
), ),
); );
} catch (_) { } catch (_) {
cover = const Icon( cover = Icon(
Icons.panorama, Icons.panorama,
color: Colors.white, color: Colors.white.withOpacity(.8),
size: 96, size: 96,
); );
} }
@ -223,8 +223,8 @@ class _HomeAlbumsState extends State<HomeAlbums> {
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(8),
child: Container( child: Container(
color: Theme.of(context).brightness == Brightness.light color: Theme.of(context).brightness == Brightness.light
? Colors.black.withAlpha(40) ? Colors.black26
: Colors.white.withAlpha(40), : Colors.white24,
constraints: const BoxConstraints.expand(), constraints: const BoxConstraints.expand(),
child: cover, child: cover,
), ),
@ -237,12 +237,12 @@ class _HomeAlbumsState extends State<HomeAlbums> {
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(8),
child: Container( child: Container(
color: Theme.of(context).brightness == Brightness.light color: Theme.of(context).brightness == Brightness.light
? Colors.black.withAlpha(40) ? Colors.black26
: Colors.white.withAlpha(40), : Colors.white24,
constraints: const BoxConstraints.expand(), constraints: const BoxConstraints.expand(),
child: const Icon( child: Icon(
Icons.add, Icons.add,
color: Colors.white, color: Colors.white.withOpacity(.8),
size: 96, size: 96,
), ),
), ),

8
lib/widget/home_app_bar.dart
View file

@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart'; import 'package:flutter/widgets.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart'; import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:nc_photos/account.dart'; import 'package:nc_photos/account.dart';
import 'package:nc_photos/theme.dart';
import 'package:nc_photos/widget/account_picker_dialog.dart'; import 'package:nc_photos/widget/account_picker_dialog.dart';
import 'package:nc_photos/widget/settings.dart'; import 'package:nc_photos/widget/settings.dart';
@ -33,7 +34,7 @@ class HomeSliverAppBar extends StatelessWidget {
children: [ children: [
Icon( Icon(
Icons.cloud, Icons.cloud,
color: Theme.of(context).primaryColor, color: AppTheme.getCloudIconColor(context),
), ),
const SizedBox(width: 8), const SizedBox(width: 8),
Expanded( Expanded(
@ -46,7 +47,10 @@ class HomeSliverAppBar extends StatelessWidget {
), ),
Text( Text(
account.username, account.username,
style: const TextStyle(fontSize: 14, color: Colors.grey), style: TextStyle(
fontSize: 14,
color: AppTheme.getSecondaryTextColor(context),
),
), ),
], ],
), ),

2
lib/widget/home_photos.dart
View file

@ -211,7 +211,7 @@ class _HomePhotosState extends State<HomePhotos> {
child: Text( child: Text(
item.subtitle, item.subtitle,
style: Theme.of(context).textTheme.caption.copyWith( style: Theme.of(context).textTheme.caption.copyWith(
color: Theme.of(context).textTheme.bodyText1.color, color: AppTheme.getPrimaryTextColor(context),
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
), ),
), ),

10
lib/widget/my_app.dart
View file

@ -24,7 +24,7 @@ class MyApp extends StatelessWidget implements SnackBarHandler {
return MaterialApp( return MaterialApp(
onGenerateTitle: (context) => AppLocalizations.of(context).appTitle, onGenerateTitle: (context) => AppLocalizations.of(context).appTitle,
theme: _getLightTheme(), theme: _getLightTheme(),
// darkTheme: _getDarkTheme(), darkTheme: _getDarkTheme(),
initialRoute: Splash.routeName, initialRoute: Splash.routeName,
onGenerateRoute: _onGenerateRoute, onGenerateRoute: _onGenerateRoute,
scaffoldMessengerKey: _scaffoldMessengerKey, scaffoldMessengerKey: _scaffoldMessengerKey,
@ -43,10 +43,10 @@ class MyApp extends StatelessWidget implements SnackBarHandler {
primarySwatch: AppTheme.primarySwatchLight, primarySwatch: AppTheme.primarySwatchLight,
); );
// ThemeData _getDarkTheme() => ThemeData( ThemeData _getDarkTheme() => ThemeData(
// brightness: Brightness.dark, brightness: Brightness.dark,
// primarySwatch: AppTheme.primarySwatchDark, primarySwatch: AppTheme.primarySwatchDark,
// ); );
Map<String, WidgetBuilder> _getRouter() => { Map<String, WidgetBuilder> _getRouter() => {
Setup.routeName: (context) => Setup(), Setup.routeName: (context) => Setup(),

2
lib/widget/sign_in.dart
View file

@ -110,7 +110,7 @@ class _SignInState extends State<SignIn> {
Center( Center(
child: Icon( child: Icon(
Icons.cloud, Icons.cloud,
color: Theme.of(context).primaryColor, color: AppTheme.getCloudIconColor(context),
size: 72, size: 72,
), ),
), ),

2
lib/widget/splash.dart
View file

@ -52,7 +52,7 @@ class _SplashState extends State<Splash> {
Icon( Icon(
Icons.cloud, Icons.cloud,
size: 96, size: 96,
color: Theme.of(context).primaryColor, color: AppTheme.getCloudIconColor(context),
), ),
const SizedBox(height: 8), const SizedBox(height: 8),
Text( Text(

26
lib/widget/viewer.dart
View file

@ -201,10 +201,12 @@ class _ViewerState extends State<Viewer> with TickerProviderStateMixin {
backgroundColor: Colors.transparent, backgroundColor: Colors.transparent,
shadowColor: Colors.transparent, shadowColor: Colors.transparent,
brightness: Brightness.dark, brightness: Brightness.dark,
iconTheme: iconTheme: Theme.of(context).iconTheme.copyWith(
Theme.of(context).iconTheme.copyWith(color: Colors.white), color: Colors.white.withOpacity(.87),
actionsIconTheme: ),
Theme.of(context).iconTheme.copyWith(color: Colors.white), actionsIconTheme: Theme.of(context).iconTheme.copyWith(
color: Colors.white.withOpacity(.87),
),
actions: [ actions: [
if (!_isDetailPaneActive && _canOpenDetailPane()) if (!_isDetailPaneActive && _canOpenDetailPane())
IconButton( IconButton(
@ -252,8 +254,10 @@ class _ViewerState extends State<Viewer> with TickerProviderStateMixin {
Expanded( Expanded(
flex: 1, flex: 1,
child: IconButton( child: IconButton(
icon: const Icon(Icons.download_outlined, icon: Icon(
color: Colors.white), Icons.download_outlined,
color: Colors.white.withOpacity(.87),
),
tooltip: AppLocalizations.of(context).downloadTooltip, tooltip: AppLocalizations.of(context).downloadTooltip,
onPressed: () => _onDownloadPressed(context), onPressed: () => _onDownloadPressed(context),
), ),
@ -261,8 +265,10 @@ class _ViewerState extends State<Viewer> with TickerProviderStateMixin {
Expanded( Expanded(
flex: 1, flex: 1,
child: IconButton( child: IconButton(
icon: const Icon(Icons.delete_outlined, icon: Icon(
color: Colors.white), Icons.delete_outlined,
color: Colors.white.withOpacity(.87),
),
tooltip: AppLocalizations.of(context).deleteTooltip, tooltip: AppLocalizations.of(context).deleteTooltip,
onPressed: () => _onDeletePressed(context), onPressed: () => _onDeletePressed(context),
), ),
@ -316,8 +322,8 @@ class _ViewerState extends State<Viewer> with TickerProviderStateMixin {
alignment: Alignment.topLeft, alignment: Alignment.topLeft,
constraints: BoxConstraints( constraints: BoxConstraints(
minHeight: MediaQuery.of(context).size.height), minHeight: MediaQuery.of(context).size.height),
decoration: const BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: Theme.of(context).scaffoldBackgroundColor,
borderRadius: const BorderRadius.vertical( borderRadius: const BorderRadius.vertical(
top: const Radius.circular(4)), top: const Radius.circular(4)),
), ),

38
lib/widget/viewer_detail_pane.dart
View file

@ -114,28 +114,43 @@ class _ViewerDetailPaneState extends State<ViewerDetailPane> {
child: const Divider(), child: const Divider(),
), ),
ListTile( ListTile(
leading: const Icon(Icons.image_outlined), leading: Icon(
Icons.image_outlined,
color: AppTheme.getSecondaryTextColor(context),
),
title: Text(basenameWithoutExtension(widget.file.path)), title: Text(basenameWithoutExtension(widget.file.path)),
subtitle: Text(widget.file.strippedPath), subtitle: Text(widget.file.strippedPath),
), ),
ListTile( ListTile(
leading: const Icon(Icons.calendar_today_outlined), leading: Icon(
Icons.calendar_today_outlined,
color: AppTheme.getSecondaryTextColor(context),
),
title: Text("$dateStr $timeStr"), title: Text("$dateStr $timeStr"),
), ),
if (_width != null && _height != null) if (_width != null && _height != null)
ListTile( ListTile(
leading: const Icon(Icons.aspect_ratio), leading: Icon(
Icons.aspect_ratio,
color: AppTheme.getSecondaryTextColor(context),
),
title: Text("$_width x $_height"), title: Text("$_width x $_height"),
subtitle: Text(sizeSubStr), subtitle: Text(sizeSubStr),
) )
else else
ListTile( ListTile(
leading: const Icon(Icons.aspect_ratio), leading: Icon(
Icons.aspect_ratio,
color: AppTheme.getSecondaryTextColor(context),
),
title: Text(_byteSizeToString(widget.file.contentLength)), title: Text(_byteSizeToString(widget.file.contentLength)),
), ),
if (_model != null) if (_model != null)
ListTile( ListTile(
leading: const Icon(Icons.camera_outlined), leading: Icon(
Icons.camera_outlined,
color: AppTheme.getSecondaryTextColor(context),
),
title: Text(_model), title: Text(_model),
subtitle: cameraSubStr.isNotEmpty ? Text(cameraSubStr) : null, subtitle: cameraSubStr.isNotEmpty ? Text(cameraSubStr) : null,
), ),
@ -369,9 +384,6 @@ class _DetailPaneButton extends StatelessWidget {
build(BuildContext context) { build(BuildContext context) {
return TextButton( return TextButton(
onPressed: onPressed, onPressed: onPressed,
style: AppTheme.flatButtonStyle.copyWith(
foregroundColor: MaterialStateProperty.all<Color>(Colors.grey[700]),
),
child: SizedBox( child: SizedBox(
width: 96, width: 96,
height: 96, height: 96,
@ -379,12 +391,18 @@ class _DetailPaneButton extends StatelessWidget {
padding: const EdgeInsets.all(16), padding: const EdgeInsets.all(16),
child: Column( child: Column(
children: [ children: [
Icon(icon), Icon(
icon,
color: AppTheme.getPrimaryTextColor(context),
),
const SizedBox(height: 4), const SizedBox(height: 4),
Text( Text(
label, label,
textAlign: TextAlign.center, textAlign: TextAlign.center,
style: const TextStyle(fontSize: 12), style: TextStyle(
fontSize: 12,
color: AppTheme.getSecondaryTextColor(context),
),
), ),
], ],
), ),