208 lines
9.7 KiB
Dart
208 lines
9.7 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
|
import 'package:mangayomi/providers/l10n_providers.dart';
|
|
import 'package:mangayomi/utils/colors.dart';
|
|
import 'package:mangayomi/utils/date.dart';
|
|
import 'package:mangayomi/utils/media_query.dart';
|
|
import 'package:mangayomi/modules/more/settings/appearance/providers/date_format_state_provider.dart';
|
|
import 'package:mangayomi/modules/more/settings/appearance/providers/pure_black_dark_mode_state_provider.dart';
|
|
import 'package:mangayomi/modules/more/settings/appearance/widgets/blend_level_slider.dart';
|
|
import 'package:mangayomi/modules/more/settings/appearance/widgets/dark_mode_button.dart';
|
|
import 'package:mangayomi/modules/more/settings/appearance/widgets/theme_selector.dart';
|
|
|
|
class AppearanceScreen extends ConsumerWidget {
|
|
const AppearanceScreen({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
|
final l10n = l10nLocalizations(context);
|
|
final dateFormatState = ref.watch(dateFormatStateProvider);
|
|
final relativeTimestamps = ref.watch(relativeTimesTampsStateProvider);
|
|
final pureBlackDarkMode = ref.watch(pureBlackDarkModeStateProvider);
|
|
return Scaffold(
|
|
appBar: AppBar(
|
|
title: Text(l10n!.appearance),
|
|
),
|
|
body: SingleChildScrollView(
|
|
child: Column(
|
|
children: [
|
|
Padding(
|
|
padding: const EdgeInsets.only(bottom: 30),
|
|
child: Column(
|
|
children: [
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 15),
|
|
child: Row(
|
|
children: [
|
|
Text(l10n.theme,
|
|
style: TextStyle(
|
|
fontSize: 13, color: primaryColor(context))),
|
|
],
|
|
),
|
|
),
|
|
const DarkModeButton(),
|
|
const ThemeSelector(),
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(vertical: 10),
|
|
child: SwitchListTile(
|
|
title: Text(l10n.pure_black_dark_mode),
|
|
value: pureBlackDarkMode,
|
|
onChanged: (value) {
|
|
ref
|
|
.read(pureBlackDarkModeStateProvider.notifier)
|
|
.set(value);
|
|
}),
|
|
),
|
|
if (!pureBlackDarkMode) const BlendLevelSlider()
|
|
],
|
|
),
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.only(bottom: 10),
|
|
child: Column(
|
|
children: [
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 15),
|
|
child: Row(
|
|
children: [
|
|
Text(l10n.timestamp,
|
|
style: TextStyle(
|
|
fontSize: 13, color: primaryColor(context))),
|
|
],
|
|
),
|
|
),
|
|
ListTile(
|
|
onTap: () {
|
|
showDialog(
|
|
context: context,
|
|
builder: (context) {
|
|
return AlertDialog(
|
|
title: Text(
|
|
l10n.relative_timestamp,
|
|
),
|
|
content: SizedBox(
|
|
width: mediaWidth(context, 0.8),
|
|
child: ListView.builder(
|
|
shrinkWrap: true,
|
|
itemCount:
|
|
relativeTimestampsList(context).length,
|
|
itemBuilder: (context, index) {
|
|
return RadioListTile(
|
|
dense: true,
|
|
contentPadding: const EdgeInsets.all(0),
|
|
value: index,
|
|
groupValue: relativeTimestamps,
|
|
onChanged: (value) {
|
|
ref
|
|
.read(
|
|
relativeTimesTampsStateProvider
|
|
.notifier)
|
|
.set(value!);
|
|
Navigator.pop(context);
|
|
},
|
|
title: Row(
|
|
children: [
|
|
Text(relativeTimestampsList(
|
|
context)[index])
|
|
],
|
|
),
|
|
);
|
|
},
|
|
)),
|
|
actions: [
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.end,
|
|
children: [
|
|
TextButton(
|
|
onPressed: () async {
|
|
Navigator.pop(context);
|
|
},
|
|
child: Text(
|
|
l10n.cancel,
|
|
style: TextStyle(
|
|
color: primaryColor(context)),
|
|
)),
|
|
],
|
|
)
|
|
],
|
|
);
|
|
});
|
|
},
|
|
title: Text(l10n.relative_timestamp),
|
|
subtitle: Text(
|
|
relativeTimestampsList(context)[relativeTimestamps],
|
|
style:
|
|
TextStyle(fontSize: 11, color: secondaryColor(context)),
|
|
),
|
|
),
|
|
ListTile(
|
|
onTap: () {
|
|
showDialog(
|
|
context: context,
|
|
builder: (context) {
|
|
return AlertDialog(
|
|
title: Text(
|
|
l10n.date_format,
|
|
),
|
|
content: SizedBox(
|
|
width: mediaWidth(context, 0.8),
|
|
child: ListView.builder(
|
|
shrinkWrap: true,
|
|
itemCount: dateFormatsList.length,
|
|
itemBuilder: (context, index) {
|
|
return RadioListTile(
|
|
dense: true,
|
|
contentPadding: const EdgeInsets.all(0),
|
|
value: dateFormatsList[index],
|
|
groupValue: dateFormatState,
|
|
onChanged: (value) {
|
|
ref
|
|
.read(dateFormatStateProvider
|
|
.notifier)
|
|
.set(value!);
|
|
Navigator.pop(context);
|
|
},
|
|
title: Row(
|
|
children: [
|
|
Text(
|
|
"${dateFormatsList[index]} (${dateFormat(context: context, DateTime.now().millisecondsSinceEpoch.toString(), useRelativeTimesTamps: false, dateFormat: dateFormatsList[index], ref: ref)})")
|
|
],
|
|
),
|
|
);
|
|
},
|
|
)),
|
|
actions: [
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.end,
|
|
children: [
|
|
TextButton(
|
|
onPressed: () async {
|
|
Navigator.pop(context);
|
|
},
|
|
child: Text(
|
|
l10n.cancel,
|
|
style: TextStyle(
|
|
color: primaryColor(context)),
|
|
)),
|
|
],
|
|
)
|
|
],
|
|
);
|
|
});
|
|
},
|
|
title: Text(l10n.date_format),
|
|
subtitle: Text(
|
|
"$dateFormatState (${dateFormat(context: context, DateTime.now().millisecondsSinceEpoch.toString(), useRelativeTimesTamps: false, dateFormat: dateFormatState, ref: ref)})",
|
|
style:
|
|
TextStyle(fontSize: 11, color: secondaryColor(context)),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|