preview selected color in customization dialog

This commit is contained in:
Adam Velebil 2024-01-11 18:17:40 +01:00
parent 7ede30b641
commit e679d501b2
No known key found for this signature in database
GPG Key ID: C9B1E4A3CBBD2E10
2 changed files with 42 additions and 41 deletions

View File

@ -171,8 +171,8 @@ class ThemeNotifier extends Notifier<ThemeData> {
static ThemeData _getDefault(ThemeMode themeMode) =>
themeMode == ThemeMode.light ? AppTheme.lightTheme : AppTheme.darkTheme;
ThemeData _get(ThemeMode themeMode, {YubiKeyData? yubiKeyData}) {
Color? primaryColor;
ThemeData _get(ThemeMode themeMode, {Color? color, YubiKeyData? yubiKeyData}) {
Color? primaryColor = color;
if (yubiKeyData != null) {
final manager = ref.read(keyCustomizationManagerProvider);
@ -198,9 +198,9 @@ class ThemeNotifier extends Notifier<ThemeData> {
: _getDefault(themeMode);
}
void setPrimaryColor(Color? primaryColor) {
_log.debug('Set primary color to $primaryColor');
state = _get(_themeMode);
void setColor(Color? color) {
_log.debug('Set color to $color');
state = _get(_themeMode, color: color);
}
}

View File

@ -42,6 +42,7 @@ class CustomizePage extends ConsumerStatefulWidget {
class _CustomizePageState extends ConsumerState<CustomizePage> {
String? _displayName;
String? _displayColor;
Color? _previewColor;
@override
void initState() {
@ -58,10 +59,8 @@ class _CustomizePageState extends ConsumerState<CustomizePage> {
void updateColor(String? colorString) {
setState(() {
_displayColor = colorString;
Color? color =
_previewColor =
colorString != null ? Color(int.parse(colorString, radix: 16)) : null;
ref.watch(darkThemeProvider.notifier).setPrimaryColor(color);
ref.watch(lightThemeProvider.notifier).setPrimaryColor(color);
});
}
@ -70,42 +69,44 @@ class _CustomizePageState extends ConsumerState<CustomizePage> {
final l10n = AppLocalizations.of(context)!;
final theme = Theme.of(context);
return ResponsiveDialog(
title: const Text('Customize key appearance'),
actions: [
TextButton(
onPressed: () async {
KeyCustomization newValue = KeyCustomization(
widget.initialCustomization!.serialNumber, <String, dynamic>{
'display_color': _displayColor,
'display_name': _displayName
});
return Theme(
// show the selected color directly in this dialog
data: theme.copyWith(
colorScheme: ColorScheme.fromSeed(
brightness: theme.brightness,
seedColor: _previewColor ?? theme.colorScheme.primary),
),
child: ResponsiveDialog(
title: const Text('Customize key appearance'),
actions: [
TextButton(
onPressed: () async {
KeyCustomization newValue = KeyCustomization(
widget.initialCustomization!.serialNumber, <String, dynamic>{
'display_color': _displayColor,
'display_name': _displayName
});
_log.debug('Saving customization for '
'${widget.initialCustomization!.serialNumber}: '
'$_displayName/$_displayColor');
_log.debug('Saving customization for '
'${widget.initialCustomization!.serialNumber}: '
'$_displayName/$_displayColor');
final manager = ref.read(keyCustomizationManagerProvider);
manager.set(newValue);
await manager.write();
final manager = ref.read(keyCustomizationManagerProvider);
manager.set(newValue);
await manager.write();
await ref.read(withContextProvider)((context) async {
FocusUtils.unfocus(context);
final nav = Navigator.of(context);
nav.pop();
});
},
child: Text(l10n.s_save),
),
],
child: Theme(
// Make the headers use the primary color to pop a bit.
// Once M3 is implemented this will probably not be needed.
data: theme.copyWith(
textTheme: theme.textTheme.copyWith(
labelLarge: theme.textTheme.labelLarge
?.copyWith(color: theme.colorScheme.primary)),
),
ref.invalidate(lightThemeProvider);
ref.invalidate(darkThemeProvider);
await ref.read(withContextProvider)((context) async {
FocusUtils.unfocus(context);
final nav = Navigator.of(context);
nav.pop();
});
},
child: Text(l10n.s_save),
),
],
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 18.0),
child: Column(