From 75ba5405bbaf4b6991e7e6c43cf9f3d734c2b5b7 Mon Sep 17 00:00:00 2001 From: Kima Date: Sun, 12 May 2024 22:05:21 +0200 Subject: [PATCH] made full new grade color picker --- .../ui/flutter_colorpicker/colorpicker.dart | 3 +- .../settings/submenu/grade_colors.dart | 381 ++++++++++++++++++ .../settings/submenu/personalize_screen.dart | 12 +- .../settings/submenu/submenu_screen.i18n.dart | 6 + .../lib/screens/settings/theme_screen.dart | 7 + 5 files changed, 406 insertions(+), 3 deletions(-) create mode 100644 refilc_mobile_ui/lib/screens/settings/submenu/grade_colors.dart diff --git a/refilc/lib/ui/flutter_colorpicker/colorpicker.dart b/refilc/lib/ui/flutter_colorpicker/colorpicker.dart index 783f363..2c689c1 100644 --- a/refilc/lib/ui/flutter_colorpicker/colorpicker.dart +++ b/refilc/lib/ui/flutter_colorpicker/colorpicker.dart @@ -295,7 +295,8 @@ class FilcColorPickerState extends State { ], ), ), - if (widget.colorMode != CustomColorMode.enterId) + if (widget.colorMode != CustomColorMode.enterId && + widget.colorMode != CustomColorMode.grade) SizedBox( height: 70 * (widget.colorMode == CustomColorMode.theme ? 2 : 1), child: BlockPicker( diff --git a/refilc_mobile_ui/lib/screens/settings/submenu/grade_colors.dart b/refilc_mobile_ui/lib/screens/settings/submenu/grade_colors.dart new file mode 100644 index 0000000..50445b3 --- /dev/null +++ b/refilc_mobile_ui/lib/screens/settings/submenu/grade_colors.dart @@ -0,0 +1,381 @@ +import 'package:refilc/models/settings.dart'; +import 'package:refilc/theme/colors/colors.dart'; +import 'package:flutter/material.dart'; +import 'package:provider/provider.dart'; +import 'package:refilc/ui/flutter_colorpicker/colorpicker.dart'; +import 'package:refilc/ui/widgets/grade/grade_tile.dart'; +import 'package:refilc_kreta_api/models/grade.dart'; +import 'package:refilc_mobile_ui/screens/settings/theme_screen.dart'; +import 'submenu_screen.i18n.dart'; + +enum SelectedGrade { one, two, three, four, five } + +class GradeColorsSettingsScreen extends StatefulWidget { + const GradeColorsSettingsScreen({super.key}); + + @override + GradeColorsSettingsScreenState createState() => + GradeColorsSettingsScreenState(); +} + +class GradeColorsSettingsScreenState extends State { + late SettingsProvider settingsProvider; + + SelectedGrade currentEditGrade = SelectedGrade.one; + + @override + Widget build(BuildContext context) { + SettingsProvider settingsProvider = Provider.of(context); + + return Scaffold( + appBar: AppBar( + surfaceTintColor: Theme.of(context).scaffoldBackgroundColor, + leading: BackButton( + color: AppColors.of(context).text, + onPressed: () { + setState(() { + // made this cuz else it will be ugly + currentEditGrade = SelectedGrade.one; + }); + Navigator.of(context).pop(); + }, + ), + title: Text( + "grade_colors".i18n, + style: TextStyle(color: AppColors.of(context).text), + ), + actions: [ + IconButton( + onPressed: () { + List colors = List.castFrom(settingsProvider.gradeColors); + var defaultColors = + SettingsProvider.defaultSettings().gradeColors; + colors[currentEditGrade.index] = + defaultColors[currentEditGrade.index]; + settingsProvider.update(gradeColors: colors); + }, + icon: const Icon( + Icons.restore, + size: 26.0, + ), + ), + const SizedBox( + width: 10.0, + ), + ], + ), + body: SizedBox( + width: double.infinity, + height: double.infinity, + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Column( + children: [ + SizedBox( + height: MediaQuery.of(context).size.height * 0.14, + ), + Stack( + children: [ + Container( + decoration: BoxDecoration( + color: Theme.of(context).colorScheme.background, + borderRadius: BorderRadius.circular(75.0), + boxShadow: [ + BoxShadow( + color: Theme.of(context) + .colorScheme + .shadow + .withOpacity(.1), + blurRadius: 10.0, + offset: const Offset(0, 5), + ), + ], + ), + padding: const EdgeInsets.all(6.0), + child: GradeValueWidget( + GradeValue(currentEditGrade.index + 1, '', '', 100), + fill: true, + size: 75.0, + // color: + // settingsProvider.gradeColors[currentEditGrade.index], + ), + ), + // before grades + if (currentEditGrade.index > 0) + Transform.translate( + offset: const Offset(-110, 16.5), + child: GradeValueWidget( + GradeValue(currentEditGrade.index, '', '', 100), + fill: true, + size: 60.0, + // color: + // settingsProvider.gradeColors[currentEditGrade.index], + ), + ), + if (currentEditGrade.index > 1) + Transform.translate( + offset: const Offset(-200, 23), + child: GradeValueWidget( + GradeValue(currentEditGrade.index - 1, '', '', 100), + fill: true, + size: 50.0, + // color: + // settingsProvider.gradeColors[currentEditGrade.index], + ), + ), + // after grades + if (currentEditGrade.index < 4) + Transform.translate( + offset: const Offset(142, 16.5), + child: GradeValueWidget( + GradeValue(currentEditGrade.index + 2, '', '', 100), + fill: true, + size: 60.0, + // color: + // settingsProvider.gradeColors[currentEditGrade.index], + ), + ), + if (currentEditGrade.index < 3) + Transform.translate( + offset: const Offset(245, 23), + child: GradeValueWidget( + GradeValue(currentEditGrade.index + 3, '', '', 100), + fill: true, + size: 50.0, + // color: + // settingsProvider.gradeColors[currentEditGrade.index], + ), + ), + ], + ), + SizedBox( + height: MediaQuery.of(context).size.height * 0.14, + ), + ], + ), + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Padding( + padding: const EdgeInsets.symmetric(horizontal: 12.0), + child: SafeArea( + child: FilcColorPicker( + colorMode: CustomColorMode.grade, + pickerColor: + settingsProvider.gradeColors[currentEditGrade.index], + onColorChanged: (c) { + setState(() { + // update grade color + settingsProvider.update( + gradeColors: settingsProvider.gradeColors + ..[currentEditGrade.index] = c); + }); + }, + onColorChangeEnd: (c, {adaptive}) { + // update grade color + }, + onThemeIdProvided: (t) {}, + ), + ), + ), + Padding( + padding: const EdgeInsets.only(bottom: 20.0, top: 16.0), + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + GestureDetector( + onTap: () => setState(() { + currentEditGrade = SelectedGrade.one; + }), + child: Container( + width: 45.0, + height: 45.0, + decoration: BoxDecoration( + border: Border.all( + color: currentEditGrade == SelectedGrade.one + ? Theme.of(context).colorScheme.secondary + : Theme.of(context) + .colorScheme + .secondary + .withOpacity(.2), + width: 1.0, + ), + borderRadius: BorderRadius.circular(50.0), + color: currentEditGrade == SelectedGrade.one + ? Theme.of(context).colorScheme.secondary + : null, + ), + child: Center( + child: Text( + '1', + style: TextStyle( + fontSize: 14.0, + fontWeight: FontWeight.w600, + color: currentEditGrade == SelectedGrade.one + ? Colors.white + : null, + ), + ), + ), + ), + ), + const SizedBox(width: 10.0), + GestureDetector( + onTap: () => setState(() { + currentEditGrade = SelectedGrade.two; + }), + child: Container( + width: 45.0, + height: 45.0, + decoration: BoxDecoration( + border: Border.all( + color: currentEditGrade == SelectedGrade.two + ? Theme.of(context).colorScheme.secondary + : Theme.of(context) + .colorScheme + .secondary + .withOpacity(.2), + width: 1.0, + ), + borderRadius: BorderRadius.circular(50.0), + color: currentEditGrade == SelectedGrade.two + ? Theme.of(context).colorScheme.secondary + : null, + ), + child: Center( + child: Text( + '2', + style: TextStyle( + fontSize: 14.0, + fontWeight: FontWeight.w600, + color: currentEditGrade == SelectedGrade.two + ? Colors.white + : null, + ), + ), + ), + ), + ), + const SizedBox(width: 10.0), + GestureDetector( + onTap: () => setState(() { + currentEditGrade = SelectedGrade.three; + }), + child: Container( + width: 45.0, + height: 45.0, + decoration: BoxDecoration( + border: Border.all( + color: currentEditGrade == SelectedGrade.three + ? Theme.of(context).colorScheme.secondary + : Theme.of(context) + .colorScheme + .secondary + .withOpacity(.2), + width: 1.0, + ), + borderRadius: BorderRadius.circular(50.0), + color: currentEditGrade == SelectedGrade.three + ? Theme.of(context).colorScheme.secondary + : null, + ), + child: Center( + child: Text( + '3', + style: TextStyle( + fontSize: 14.0, + fontWeight: FontWeight.w600, + color: currentEditGrade == SelectedGrade.three + ? Colors.white + : null, + ), + ), + ), + ), + ), + const SizedBox(width: 10.0), + GestureDetector( + onTap: () => setState(() { + currentEditGrade = SelectedGrade.four; + }), + child: Container( + width: 45.0, + height: 45.0, + decoration: BoxDecoration( + border: Border.all( + color: currentEditGrade == SelectedGrade.four + ? Theme.of(context).colorScheme.secondary + : Theme.of(context) + .colorScheme + .secondary + .withOpacity(.2), + width: 1.0, + ), + borderRadius: BorderRadius.circular(50.0), + color: currentEditGrade == SelectedGrade.four + ? Theme.of(context).colorScheme.secondary + : null, + ), + child: Center( + child: Text( + '4', + style: TextStyle( + fontSize: 14.0, + fontWeight: FontWeight.w600, + color: currentEditGrade == SelectedGrade.four + ? Colors.white + : null, + ), + ), + ), + ), + ), + const SizedBox(width: 10.0), + GestureDetector( + onTap: () => setState(() { + currentEditGrade = SelectedGrade.five; + }), + child: Container( + width: 45.0, + height: 45.0, + decoration: BoxDecoration( + border: Border.all( + color: currentEditGrade == SelectedGrade.five + ? Theme.of(context).colorScheme.secondary + : Theme.of(context) + .colorScheme + .secondary + .withOpacity(.2), + width: 1.0, + ), + borderRadius: BorderRadius.circular(50.0), + color: currentEditGrade == SelectedGrade.five + ? Theme.of(context).colorScheme.secondary + : null, + ), + child: Center( + child: Text( + '5', + style: TextStyle( + fontSize: 14.0, + fontWeight: FontWeight.w600, + color: currentEditGrade == SelectedGrade.five + ? Colors.white + : null, + ), + ), + ), + ), + ), + ], + ), + ), + ], + ), + ], + ), + ), + ); + } +} diff --git a/refilc_mobile_ui/lib/screens/settings/submenu/personalize_screen.dart b/refilc_mobile_ui/lib/screens/settings/submenu/personalize_screen.dart index d9f8bc6..5c81c42 100644 --- a/refilc_mobile_ui/lib/screens/settings/submenu/personalize_screen.dart +++ b/refilc_mobile_ui/lib/screens/settings/submenu/personalize_screen.dart @@ -30,6 +30,8 @@ import 'package:refilc_plus/providers/plus_provider.dart'; import 'package:refilc_plus/ui/mobile/plus/upsell.dart'; import 'package:google_fonts/google_fonts.dart'; +import 'grade_colors.dart'; + class MenuPersonalizeSettings extends StatelessWidget { const MenuPersonalizeSettings({ super.key, @@ -499,8 +501,14 @@ class PersonalizeSettingsScreenState extends State children: [ PanelButton( onPressed: () { - SettingsHelper.gradeColors(context); - setState(() {}); + // SettingsHelper.gradeColors(context); + // setState(() {}); + Navigator.of(context, rootNavigator: true).push( + CupertinoPageRoute( + builder: (context) => + const GradeColorsSettingsScreen(), + ), + ); }, title: Text( "grade_colors".i18n, diff --git a/refilc_mobile_ui/lib/screens/settings/submenu/submenu_screen.i18n.dart b/refilc_mobile_ui/lib/screens/settings/submenu/submenu_screen.i18n.dart index ed30e3d..277ba5b 100644 --- a/refilc_mobile_ui/lib/screens/settings/submenu/submenu_screen.i18n.dart +++ b/refilc_mobile_ui/lib/screens/settings/submenu/submenu_screen.i18n.dart @@ -17,6 +17,8 @@ extension SettingsLocalization on String { "rare": "Rare", "epic": "Epic", "legendary": "Legendary", + // grade colors + "grade_colors": "Grade Colors", }, "hu_hu": { "general": "Általános", @@ -32,6 +34,8 @@ extension SettingsLocalization on String { "rare": "Ritka", "epic": "Epikus", "legendary": "Legendás", + // grade colors + "grade_colors": "Jegyek színei", }, "de_de": { "general": "Allgemeine", @@ -47,6 +51,8 @@ extension SettingsLocalization on String { "rare": "Selten", "epic": "Episch", "legendary": "Legendär", + // grade colors + "grade_colors": "Notenfarben", }, }; diff --git a/refilc_mobile_ui/lib/screens/settings/theme_screen.dart b/refilc_mobile_ui/lib/screens/settings/theme_screen.dart index 101b0e3..38ed316 100644 --- a/refilc_mobile_ui/lib/screens/settings/theme_screen.dart +++ b/refilc_mobile_ui/lib/screens/settings/theme_screen.dart @@ -44,6 +44,7 @@ enum CustomColorMode { text, icon, enterId, + grade, } class _PremiumCustomAccentColorSettingState @@ -158,6 +159,9 @@ class _PremiumCustomAccentColorSettingState case CustomColorMode.enterId: // do nothing here lol break; + case CustomColorMode.grade: + // do nothing here as well + break; } } @@ -218,6 +222,9 @@ class _PremiumCustomAccentColorSettingState settings.update(customAccentColor: accent, store: store); settings.update(customIconColor: icon, store: store); break; + case CustomColorMode.grade: + // do nothing + break; } }