mirror of
https://gitlab.com/nkming2/nc-photos.git
synced 2025-01-22 08:46:18 +01:00
Simplify styling code
This commit is contained in:
parent
efc57f12c2
commit
f35860c7b6
11 changed files with 71 additions and 48 deletions
|
@ -55,33 +55,6 @@ extension ThemeExtension on ThemeData {
|
|||
tileMode: TileMode.clamp,
|
||||
);
|
||||
}
|
||||
|
||||
/// Apply surface tint to [color] based on the [elevation] level
|
||||
///
|
||||
/// This function is a temporary workaround for widgets not yet fully
|
||||
/// supported Material 3
|
||||
Color elevate(Color color, int elevation) {
|
||||
final double tintOpacity;
|
||||
switch (elevation) {
|
||||
case 1:
|
||||
tintOpacity = 0.05;
|
||||
break;
|
||||
case 2:
|
||||
tintOpacity = 0.08;
|
||||
break;
|
||||
case 3:
|
||||
tintOpacity = 0.11;
|
||||
break;
|
||||
case 4:
|
||||
tintOpacity = 0.12;
|
||||
break;
|
||||
case 5:
|
||||
default:
|
||||
tintOpacity = 0.14;
|
||||
break;
|
||||
}
|
||||
return Color.lerp(color, colorScheme.surfaceTint, tintOpacity)!;
|
||||
}
|
||||
}
|
||||
|
||||
class DarkModeSwitchTheme extends StatelessWidget {
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
import 'package:flutter/material.dart';
|
||||
import 'package:logging/logging.dart';
|
||||
import 'package:nc_photos/app_localizations.dart';
|
||||
import 'package:nc_photos/theme.dart';
|
||||
import 'package:np_codegen/np_codegen.dart';
|
||||
import 'package:np_ui/np_ui.dart';
|
||||
|
||||
part 'changelog.g.dart';
|
||||
part 'changelog/changelog_550.dart';
|
||||
|
|
|
@ -309,8 +309,10 @@ class _ScrollLabel extends StatelessWidget {
|
|||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
||||
child: DefaultTextStyle(
|
||||
style: Theme.of(context).textTheme.titleMedium!.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSecondaryContainer),
|
||||
style: Theme.of(context).textStyleColored(
|
||||
(textTheme) => textTheme.titleMedium,
|
||||
(colorScheme) => colorScheme.onSecondaryContainer,
|
||||
)!,
|
||||
child: Text(text),
|
||||
),
|
||||
);
|
||||
|
|
|
@ -27,7 +27,6 @@ import 'package:nc_photos/np_api_util.dart';
|
|||
import 'package:nc_photos/snack_bar_manager.dart';
|
||||
import 'package:nc_photos/stream_extension.dart';
|
||||
import 'package:nc_photos/stream_util.dart';
|
||||
import 'package:nc_photos/theme.dart';
|
||||
import 'package:nc_photos/theme/dimension.dart';
|
||||
import 'package:nc_photos/widget/collection_browser.dart';
|
||||
import 'package:nc_photos/widget/measure.dart';
|
||||
|
@ -37,6 +36,7 @@ import 'package:np_codegen/np_codegen.dart';
|
|||
import 'package:np_common/object_util.dart';
|
||||
import 'package:np_datetime/np_datetime.dart';
|
||||
import 'package:np_gps_map/np_gps_map.dart';
|
||||
import 'package:np_ui/np_ui.dart';
|
||||
import 'package:to_string/to_string.dart';
|
||||
|
||||
part 'map_browser.g.dart';
|
||||
|
|
|
@ -10,6 +10,7 @@ import 'package:nc_photos/k.dart' as k;
|
|||
import 'package:np_codegen/np_codegen.dart';
|
||||
import 'package:np_common/unique.dart';
|
||||
import 'package:np_string/np_string.dart';
|
||||
import 'package:np_ui/np_ui.dart';
|
||||
import 'package:to_string/to_string.dart';
|
||||
|
||||
part 'protected_page_password_auth_dialog.g.dart';
|
||||
|
|
|
@ -100,8 +100,9 @@ class _ErrorNoticeState extends State<_ErrorNotice>
|
|||
(t) => Offset(tremblingTransform(3, t) * .05, 0))),
|
||||
child: Text(
|
||||
widget.text,
|
||||
style: Theme.of(context).textTheme.bodySmall!.copyWith(
|
||||
color: Theme.of(context).colorScheme.error,
|
||||
style: Theme.of(context).textStyleColored(
|
||||
(textTheme) => textTheme.bodySmall,
|
||||
(colorScheme) => colorScheme.error,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
|
|
@ -12,6 +12,7 @@ import 'package:nc_photos/widget/protected_page_password_auth_dialog.dart';
|
|||
import 'package:nc_photos/widget/protected_page_pin_auth_dialog.dart';
|
||||
import 'package:np_codegen/np_codegen.dart';
|
||||
import 'package:np_string/np_string.dart';
|
||||
import 'package:np_ui/np_ui.dart';
|
||||
import 'package:to_string/to_string.dart';
|
||||
|
||||
part 'app_lock/bloc.dart';
|
||||
|
@ -71,10 +72,11 @@ class _WrappedAppLockSettings extends StatelessWidget {
|
|||
? L10n.global().disabledText
|
||||
: L10n.global().enabledText,
|
||||
textAlign: TextAlign.center,
|
||||
style: Theme.of(context).textTheme.titleSmall!.copyWith(
|
||||
color: appLockType == null
|
||||
? Theme.of(context).colorScheme.error
|
||||
: Theme.of(context).colorScheme.primary,
|
||||
style: Theme.of(context).textStyleColored(
|
||||
(textTheme) => textTheme.titleSmall,
|
||||
(colorScheme) => appLockType == null
|
||||
? colorScheme.error
|
||||
: colorScheme.primary,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import 'package:flutter/material.dart';
|
||||
import 'package:np_ui/np_ui.dart';
|
||||
|
||||
class SettingsListCaption extends StatelessWidget {
|
||||
const SettingsListCaption({
|
||||
|
@ -12,8 +13,9 @@ class SettingsListCaption extends StatelessWidget {
|
|||
padding: const EdgeInsets.fromLTRB(16, 16, 16, 8),
|
||||
child: Text(
|
||||
label,
|
||||
style: Theme.of(context).textTheme.titleMedium!.copyWith(
|
||||
color: Theme.of(context).colorScheme.primary,
|
||||
style: Theme.of(context).textStyleColored(
|
||||
(textTheme) => textTheme.titleMedium,
|
||||
(colorScheme) => colorScheme.primary,
|
||||
),
|
||||
),
|
||||
);
|
||||
|
|
|
@ -211,8 +211,9 @@ class _VideoViewerState extends State<VideoViewer>
|
|||
valueListenable: _controller,
|
||||
builder: (context, VideoPlayerValue value, child) => Text(
|
||||
_durationToString(value.position),
|
||||
style: Theme.of(context).textTheme.labelLarge!.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurface,
|
||||
style: Theme.of(context).textStyleColored(
|
||||
(textTheme) => textTheme.labelLarge,
|
||||
(colorScheme) => colorScheme.onSurface,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
@ -235,8 +236,9 @@ class _VideoViewerState extends State<VideoViewer>
|
|||
if (_controller.value.duration != Duration.zero)
|
||||
Text(
|
||||
_durationToString(_controller.value.duration),
|
||||
style: Theme.of(context).textTheme.labelLarge!.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurface,
|
||||
style: Theme.of(context).textStyleColored(
|
||||
(textTheme) => textTheme.labelLarge,
|
||||
(colorScheme) => colorScheme.onSurface,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
|
|
|
@ -9,5 +9,6 @@ export 'src/pixel_image_provider.dart';
|
|||
export 'src/shimmer.dart';
|
||||
export 'src/stateful_slider.dart';
|
||||
export 'src/switch_form_field.dart';
|
||||
export 'src/theme_util.dart';
|
||||
export 'src/translucent_sliver_app_bar.dart';
|
||||
export 'src/unbounded_list_tile.dart';
|
||||
|
|
39
np_ui/lib/src/theme_util.dart
Normal file
39
np_ui/lib/src/theme_util.dart
Normal file
|
@ -0,0 +1,39 @@
|
|||
import 'package:flutter/material.dart';
|
||||
|
||||
extension ThemeDataExtension on ThemeData {
|
||||
/// Apply surface tint to [color] based on the [elevation] level
|
||||
///
|
||||
/// This function is a temporary workaround for widgets not yet fully
|
||||
/// supported Material 3
|
||||
Color elevate(Color color, int elevation) {
|
||||
final double tintOpacity;
|
||||
switch (elevation) {
|
||||
case 1:
|
||||
tintOpacity = 0.05;
|
||||
break;
|
||||
case 2:
|
||||
tintOpacity = 0.08;
|
||||
break;
|
||||
case 3:
|
||||
tintOpacity = 0.11;
|
||||
break;
|
||||
case 4:
|
||||
tintOpacity = 0.12;
|
||||
break;
|
||||
case 5:
|
||||
default:
|
||||
tintOpacity = 0.14;
|
||||
break;
|
||||
}
|
||||
return Color.lerp(color, colorScheme.surfaceTint, tintOpacity)!;
|
||||
}
|
||||
|
||||
TextStyle? textStyleColored(
|
||||
TextStyle? Function(TextTheme textTheme) textStyleBuilder,
|
||||
Color? Function(ColorScheme colorScheme) colorBuilder,
|
||||
) {
|
||||
return textStyleBuilder(textTheme)?.copyWith(
|
||||
color: colorBuilder(colorScheme),
|
||||
);
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue