mirror of
https://git.selfprivacy.org/kherel/selfprivacy.org.app.git
synced 2025-01-08 00:51:20 +00:00
feat: Automatic day/night theme
This commit is contained in:
parent
54513998ce
commit
befdc0286e
|
@ -63,6 +63,9 @@ class BNames {
|
|||
/// A boolean field of [appSettingsBox] box.
|
||||
static String isDarkModeOn = 'isDarkModeOn';
|
||||
|
||||
/// A boolean field of [appSettingsBox] box.
|
||||
static String isAutoDarkModeOn = 'isAutoDarkModeOn';
|
||||
|
||||
/// A boolean field of [appSettingsBox] box.
|
||||
static String isOnboardingShowing = 'isOnboardingShowing';
|
||||
|
||||
|
|
|
@ -15,10 +15,12 @@ part 'app_settings_state.dart';
|
|||
class AppSettingsCubit extends Cubit<AppSettingsState> {
|
||||
AppSettingsCubit({
|
||||
required final bool isDarkModeOn,
|
||||
required final bool isAutoDarkModeOn,
|
||||
required final bool isOnboardingShowing,
|
||||
}) : super(
|
||||
AppSettingsState(
|
||||
isDarkModeOn: isDarkModeOn,
|
||||
isAutoDarkModeOn: isAutoDarkModeOn,
|
||||
isOnboardingShowing: isOnboardingShowing,
|
||||
),
|
||||
);
|
||||
|
@ -27,10 +29,12 @@ class AppSettingsCubit extends Cubit<AppSettingsState> {
|
|||
|
||||
void load() async {
|
||||
final bool? isDarkModeOn = box.get(BNames.isDarkModeOn);
|
||||
final bool? isAutoDarkModeOn = box.get(BNames.isAutoDarkModeOn);
|
||||
final bool? isOnboardingShowing = box.get(BNames.isOnboardingShowing);
|
||||
emit(
|
||||
state.copyWith(
|
||||
isDarkModeOn: isDarkModeOn,
|
||||
isAutoDarkModeOn: isAutoDarkModeOn,
|
||||
isOnboardingShowing: isOnboardingShowing,
|
||||
),
|
||||
);
|
||||
|
@ -49,9 +53,14 @@ class AppSettingsCubit extends Cubit<AppSettingsState> {
|
|||
emit(state.copyWith(isDarkModeOn: isDarkModeOn));
|
||||
}
|
||||
|
||||
void turnOffOnboarding() {
|
||||
box.put(BNames.isOnboardingShowing, false);
|
||||
void updateAutoDarkMode({required final bool isAutoDarkModeOn}) {
|
||||
box.put(BNames.isAutoDarkModeOn, isAutoDarkModeOn);
|
||||
emit(state.copyWith(isAutoDarkModeOn: isAutoDarkModeOn));
|
||||
}
|
||||
|
||||
emit(state.copyWith(isOnboardingShowing: false));
|
||||
void turnOffOnboarding({final bool isOnboardingShowing = false}) {
|
||||
box.put(BNames.isOnboardingShowing, isOnboardingShowing);
|
||||
|
||||
emit(state.copyWith(isOnboardingShowing: isOnboardingShowing));
|
||||
}
|
||||
}
|
||||
|
|
|
@ -3,21 +3,25 @@ part of 'app_settings_cubit.dart';
|
|||
class AppSettingsState extends Equatable {
|
||||
const AppSettingsState({
|
||||
required this.isDarkModeOn,
|
||||
required this.isAutoDarkModeOn,
|
||||
required this.isOnboardingShowing,
|
||||
this.corePalette,
|
||||
});
|
||||
|
||||
final bool isDarkModeOn;
|
||||
final bool isAutoDarkModeOn;
|
||||
final bool isOnboardingShowing;
|
||||
final color_utils.CorePalette? corePalette;
|
||||
|
||||
AppSettingsState copyWith({
|
||||
final bool? isDarkModeOn,
|
||||
final bool? isAutoDarkModeOn,
|
||||
final bool? isOnboardingShowing,
|
||||
final color_utils.CorePalette? corePalette,
|
||||
}) =>
|
||||
AppSettingsState(
|
||||
isDarkModeOn: isDarkModeOn ?? this.isDarkModeOn,
|
||||
isAutoDarkModeOn: isAutoDarkModeOn ?? this.isAutoDarkModeOn,
|
||||
isOnboardingShowing: isOnboardingShowing ?? this.isOnboardingShowing,
|
||||
corePalette: corePalette ?? this.corePalette,
|
||||
);
|
||||
|
@ -26,5 +30,6 @@ class AppSettingsState extends Equatable {
|
|||
corePalette ?? color_utils.CorePalette.of(BrandColors.primary.value);
|
||||
|
||||
@override
|
||||
List<dynamic> get props => [isDarkModeOn, isOnboardingShowing, corePalette];
|
||||
List<dynamic> get props =>
|
||||
[isDarkModeOn, isAutoDarkModeOn, isOnboardingShowing, corePalette];
|
||||
}
|
||||
|
|
|
@ -87,11 +87,11 @@ class MyApp extends StatelessWidget {
|
|||
title: 'SelfPrivacy',
|
||||
theme: lightThemeData,
|
||||
darkTheme: darkThemeData,
|
||||
themeMode:
|
||||
appSettings.isDarkModeOn ? ThemeMode.dark : ThemeMode.light,
|
||||
home: appSettings.isOnboardingShowing
|
||||
? const OnboardingPage(nextPage: InitializingPage())
|
||||
: const RootPage(),
|
||||
themeMode: appSettings.isAutoDarkModeOn
|
||||
? ThemeMode.system
|
||||
: appSettings.isDarkModeOn
|
||||
? ThemeMode.dark
|
||||
: ThemeMode.light,
|
||||
builder: (final BuildContext context, final Widget? widget) {
|
||||
Widget error = const Text('...rendering error...');
|
||||
if (widget is Scaffold || widget is Navigator) {
|
||||
|
|
|
@ -1,229 +0,0 @@
|
|||
import 'package:flutter/material.dart';
|
||||
import 'package:selfprivacy/config/brand_colors.dart';
|
||||
import 'package:selfprivacy/config/brand_theme.dart';
|
||||
import 'package:selfprivacy/logic/cubit/app_settings/app_settings_cubit.dart';
|
||||
import 'package:selfprivacy/logic/cubit/server_installation/server_installation_cubit.dart';
|
||||
import 'package:selfprivacy/ui/components/action_button/action_button.dart';
|
||||
import 'package:selfprivacy/ui/components/brand_alert/brand_alert.dart';
|
||||
import 'package:selfprivacy/ui/components/brand_header/brand_header.dart';
|
||||
import 'package:selfprivacy/ui/components/brand_switch/brand_switch.dart';
|
||||
import 'package:selfprivacy/ui/components/brand_text/brand_text.dart';
|
||||
import 'package:selfprivacy/utils/named_font_weight.dart';
|
||||
import 'package:easy_localization/easy_localization.dart';
|
||||
|
||||
class AppSettingsPage extends StatefulWidget {
|
||||
const AppSettingsPage({super.key});
|
||||
|
||||
@override
|
||||
State<AppSettingsPage> createState() => _AppSettingsPageState();
|
||||
}
|
||||
|
||||
class _AppSettingsPageState extends State<AppSettingsPage> {
|
||||
@override
|
||||
Widget build(final BuildContext context) {
|
||||
final bool isDarkModeOn =
|
||||
context.watch<AppSettingsCubit>().state.isDarkModeOn;
|
||||
|
||||
return SafeArea(
|
||||
child: Builder(
|
||||
builder: (final context) => Scaffold(
|
||||
appBar: PreferredSize(
|
||||
preferredSize: const Size.fromHeight(52),
|
||||
child: BrandHeader(
|
||||
title: 'application_settings.title'.tr(),
|
||||
hasBackButton: true,
|
||||
),
|
||||
),
|
||||
body: ListView(
|
||||
padding: paddingH15V0,
|
||||
children: [
|
||||
const Divider(height: 1),
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(vertical: 16),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Flexible(
|
||||
child: _TextColumn(
|
||||
title: 'application_settings.dark_theme_title'.tr(),
|
||||
value:
|
||||
'application_settings.dark_theme_description'.tr(),
|
||||
hasWarning: false,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 5),
|
||||
BrandSwitch(
|
||||
value: Theme.of(context).brightness == Brightness.dark,
|
||||
onChanged: (final value) => context
|
||||
.read<AppSettingsCubit>()
|
||||
.updateDarkMode(isDarkModeOn: !isDarkModeOn),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const Divider(height: 0),
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(vertical: 16),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Flexible(
|
||||
child: _TextColumn(
|
||||
title: 'application_settings.reset_config_title'.tr(),
|
||||
value: 'application_settings.reset_config_description'
|
||||
.tr(),
|
||||
hasWarning: false,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 5),
|
||||
ElevatedButton(
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: BrandColors.red1,
|
||||
),
|
||||
child: Text(
|
||||
'basis.reset'.tr(),
|
||||
style: const TextStyle(
|
||||
color: BrandColors.white,
|
||||
fontWeight: NamedFontWeight.demiBold,
|
||||
),
|
||||
),
|
||||
onPressed: () {
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (final _) => BrandAlert(
|
||||
title: 'modals.are_you_sure'.tr(),
|
||||
contentText: 'modals.purge_all_keys'.tr(),
|
||||
actions: [
|
||||
ActionButton(
|
||||
text: 'modals.purge_all_keys_confirm'.tr(),
|
||||
isRed: true,
|
||||
onPressed: () {
|
||||
context
|
||||
.read<ServerInstallationCubit>()
|
||||
.clearAppConfig();
|
||||
Navigator.of(context).pop();
|
||||
},
|
||||
),
|
||||
ActionButton(
|
||||
text: 'basis.cancel'.tr(),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const Divider(height: 0),
|
||||
_deleteServer(context)
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _deleteServer(final BuildContext context) {
|
||||
final bool isDisabled =
|
||||
context.watch<ServerInstallationCubit>().state.serverDetails == null;
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(vertical: 16),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Flexible(
|
||||
child: _TextColumn(
|
||||
title: 'application_settings.delete_server_title'.tr(),
|
||||
value: 'application_settings.delete_server_description'.tr(),
|
||||
hasWarning: false,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 5),
|
||||
ElevatedButton(
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: BrandColors.red1,
|
||||
),
|
||||
onPressed: isDisabled
|
||||
? null
|
||||
: () {
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (final _) => BrandAlert(
|
||||
title: 'modals.are_you_sure'.tr(),
|
||||
contentText: 'modals.delete_server_volume'.tr(),
|
||||
actions: [
|
||||
ActionButton(
|
||||
text: 'modals.yes'.tr(),
|
||||
isRed: true,
|
||||
onPressed: () async {
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (final context) => Container(
|
||||
alignment: Alignment.center,
|
||||
child: const CircularProgressIndicator(),
|
||||
),
|
||||
);
|
||||
await context
|
||||
.read<ServerInstallationCubit>()
|
||||
.serverDelete();
|
||||
if (!mounted) {
|
||||
return;
|
||||
}
|
||||
Navigator.of(context).pop();
|
||||
},
|
||||
),
|
||||
ActionButton(
|
||||
text: 'basis.cancel'.tr(),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
child: Text(
|
||||
'basis.delete'.tr(),
|
||||
style: const TextStyle(
|
||||
color: BrandColors.white,
|
||||
fontWeight: NamedFontWeight.demiBold,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _TextColumn extends StatelessWidget {
|
||||
const _TextColumn({
|
||||
required this.title,
|
||||
required this.value,
|
||||
this.hasWarning = false,
|
||||
});
|
||||
|
||||
final String title;
|
||||
final String value;
|
||||
final bool hasWarning;
|
||||
@override
|
||||
Widget build(final BuildContext context) => Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
BrandText.body1(
|
||||
title,
|
||||
style: TextStyle(color: hasWarning ? BrandColors.warning : null),
|
||||
),
|
||||
const SizedBox(height: 5),
|
||||
BrandText.body1(
|
||||
value,
|
||||
style: const TextStyle(
|
||||
fontSize: 13,
|
||||
height: 1.53,
|
||||
color: BrandColors.gray1,
|
||||
).merge(TextStyle(color: hasWarning ? BrandColors.warning : null)),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
146
lib/ui/pages/more/app_settings/app_settings.dart
Normal file
146
lib/ui/pages/more/app_settings/app_settings.dart
Normal file
|
@ -0,0 +1,146 @@
|
|||
import 'package:flutter/material.dart';
|
||||
import 'package:selfprivacy/logic/cubit/app_settings/app_settings_cubit.dart';
|
||||
import 'package:selfprivacy/logic/cubit/server_installation/server_installation_cubit.dart';
|
||||
import 'package:selfprivacy/ui/components/action_button/action_button.dart';
|
||||
import 'package:selfprivacy/ui/components/brand_alert/brand_alert.dart';
|
||||
import 'package:selfprivacy/ui/layouts/brand_hero_screen.dart';
|
||||
import 'package:easy_localization/easy_localization.dart';
|
||||
|
||||
class AppSettingsPage extends StatefulWidget {
|
||||
const AppSettingsPage({super.key});
|
||||
|
||||
@override
|
||||
State<AppSettingsPage> createState() => _AppSettingsPageState();
|
||||
}
|
||||
|
||||
class _AppSettingsPageState extends State<AppSettingsPage> {
|
||||
@override
|
||||
Widget build(final BuildContext context) {
|
||||
final bool isDarkModeOn =
|
||||
context.watch<AppSettingsCubit>().state.isDarkModeOn;
|
||||
|
||||
final bool isSystemDarkModeOn =
|
||||
context.watch<AppSettingsCubit>().state.isAutoDarkModeOn;
|
||||
|
||||
return BrandHeroScreen(
|
||||
hasBackButton: true,
|
||||
hasFlashButton: false,
|
||||
bodyPadding: const EdgeInsets.symmetric(vertical: 16),
|
||||
heroTitle: 'application_settings.title'.tr(),
|
||||
children: [
|
||||
SwitchListTile(
|
||||
title: Text('application_settings.system_dark_theme_title'.tr()),
|
||||
subtitle:
|
||||
Text('application_settings.system_dark_theme_description'.tr()),
|
||||
value: isSystemDarkModeOn,
|
||||
onChanged: (final value) => context
|
||||
.read<AppSettingsCubit>()
|
||||
.updateAutoDarkMode(isAutoDarkModeOn: !isSystemDarkModeOn),
|
||||
),
|
||||
SwitchListTile(
|
||||
title: Text('application_settings.dark_theme_title'.tr()),
|
||||
subtitle: Text('application_settings.dark_theme_description'.tr()),
|
||||
value: Theme.of(context).brightness == Brightness.dark,
|
||||
onChanged: isSystemDarkModeOn
|
||||
? null
|
||||
: (final value) => context
|
||||
.read<AppSettingsCubit>()
|
||||
.updateDarkMode(isDarkModeOn: !isDarkModeOn),
|
||||
),
|
||||
const Divider(height: 0),
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Text(
|
||||
'application_settings.dangerous_settings'.tr(),
|
||||
style: Theme.of(context).textTheme.labelLarge!.copyWith(
|
||||
color: Theme.of(context).colorScheme.error,
|
||||
),
|
||||
),
|
||||
),
|
||||
const _ResetAppTile(),
|
||||
// const Divider(height: 0),
|
||||
_deleteServer(context)
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _deleteServer(final BuildContext context) {
|
||||
final bool isDisabled =
|
||||
context.watch<ServerInstallationCubit>().state.serverDetails == null;
|
||||
return ListTile(
|
||||
title: Text('application_settings.delete_server_title'.tr()),
|
||||
subtitle: Text('application_settings.delete_server_description'.tr()),
|
||||
textColor: isDisabled
|
||||
? Theme.of(context).colorScheme.onBackground.withOpacity(0.5)
|
||||
: Theme.of(context).colorScheme.onBackground,
|
||||
onTap: isDisabled
|
||||
? null
|
||||
: () {
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (final _) => BrandAlert(
|
||||
title: 'modals.are_you_sure'.tr(),
|
||||
contentText: 'modals.delete_server_volume'.tr(),
|
||||
actions: [
|
||||
ActionButton(
|
||||
text: 'modals.yes'.tr(),
|
||||
isRed: true,
|
||||
onPressed: () async {
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (final context) => Container(
|
||||
alignment: Alignment.center,
|
||||
child: const CircularProgressIndicator(),
|
||||
),
|
||||
);
|
||||
await context
|
||||
.read<ServerInstallationCubit>()
|
||||
.serverDelete();
|
||||
if (!mounted) {
|
||||
return;
|
||||
}
|
||||
Navigator.of(context).pop();
|
||||
},
|
||||
),
|
||||
ActionButton(
|
||||
text: 'basis.cancel'.tr(),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _ResetAppTile extends StatelessWidget {
|
||||
const _ResetAppTile();
|
||||
|
||||
@override
|
||||
Widget build(final BuildContext context) => ListTile(
|
||||
title: Text('application_settings.reset_config_title'.tr()),
|
||||
subtitle: Text('application_settings.reset_config_description'.tr()),
|
||||
onTap: () {
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (final _) => BrandAlert(
|
||||
title: 'modals.are_you_sure'.tr(),
|
||||
contentText: 'modals.purge_all_keys'.tr(),
|
||||
actions: [
|
||||
ActionButton(
|
||||
text: 'modals.purge_all_keys_confirm'.tr(),
|
||||
isRed: true,
|
||||
onPressed: () {
|
||||
context.read<ServerInstallationCubit>().clearAppConfig();
|
||||
Navigator.of(context).pop();
|
||||
},
|
||||
),
|
||||
ActionButton(
|
||||
text: 'basis.cancel'.tr(),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
Loading…
Reference in a new issue