From 67a5130ac0f114967596297032cc494359d1f8fa Mon Sep 17 00:00:00 2001
From: Jakob Meier <comcloudway@ccw.icu>
Date: Sat, 25 Mar 2023 15:24:12 +0100
Subject: [PATCH] Moved theme selector into dialog

FIXES: Bug where text would wrap
after a couple of characters on mobile,
because flutter keeps the SegmentedButton at full width
---
 lib/screens/settings/main.dart | 65 +++++++++++++++++++++++-----------
 1 file changed, 44 insertions(+), 21 deletions(-)

diff --git a/lib/screens/settings/main.dart b/lib/screens/settings/main.dart
index c069085..7424bce 100644
--- a/lib/screens/settings/main.dart
+++ b/lib/screens/settings/main.dart
@@ -112,23 +112,50 @@ class _SettingsPageState extends State<SettingsPage> {
                 title: const Text('Change Theme'),
                 subtitle: const Text(
                   'You can change between a light theme, a dark theme and automatic theme selection'),
-                // NOTE: have the trailing item be a value select widget
-                trailing: SegmentedButton<AppTheme>(
-                  selected: {context.watch<AppTheme>()},
-                  selectedIcon: Icon(context.watch<AppTheme>().icon),
-                  showSelectedIcon: true,
-                  multiSelectionEnabled: false,
-                  emptySelectionAllowed: false,
-                  segments: AppTheme.list().map((item) {
-                      return ButtonSegment<AppTheme>(
-                        value: item, icon: Icon(item.icon), label: Text(item.name));
-                  }).toList(),
-                  onSelectionChanged: (item) async {
-                    try {
-                      await item.first.toDisk();
-                    } catch(_) {}
-                  },
-                ),
+                trailing: const Icon(Icons.chevron_right),
+                onTap: () {
+                  showDialog(
+                    context: context,
+                    builder: (context) => AlertDialog(
+                      title: const Text('Change Theme'),
+                      content: SingleChildScrollView(
+                        child: Column(
+                          children: [
+                            const Padding(
+                              padding: EdgeInsets.all(8),
+                              child: Text('Choose your preferred theme'),
+                            ),
+                            SegmentedButton<AppTheme>(
+                              selected: {context.watch<AppTheme>()},
+                              selectedIcon: Icon(context.watch<AppTheme>().icon),
+                              showSelectedIcon: true,
+                              multiSelectionEnabled: false,
+                              emptySelectionAllowed: false,
+                              segments: AppTheme.list().map((item) {
+                                  return ButtonSegment<AppTheme>(
+                                    value: item,
+                                    icon: Icon(item.icon),
+                                    label: Text(item.name));
+                              }).toList(),
+                              onSelectionChanged: (item) async {
+                                try {
+                                  await item.first.toDisk();
+                                } catch (_) {}
+                              },
+                            ),
+                          ]
+                        )
+                      ),
+                      actions: [
+                        FilledButton(
+                          child: const Text('Close'),
+                          onPressed: () {
+                            Navigator.of(context).pop();
+                          },
+                        )
+                      ],
+                  ));
+                },
               ),
 
               // change password button
@@ -136,10 +163,6 @@ class _SettingsPageState extends State<SettingsPage> {
                 title: const Text('Change password'),
                 subtitle: const Text('Choose a new password for your account'),
                 onTap: () {
-                  // TODO: show confirm dialog
-                  // NOTE: needs an input field for the current password
-                  // NOTE: might want to show a message explaining,
-                  // that there is no way to reset the password
                   showDialog(
                     context: context,
                     builder: (context) => const ChangePasswordDialog());