Basic Setup of Settings Dialog

frontend/app_flowy/lib/workspace/presentation/settings/settings_dialog.dart

@@ -0,0 +1,81 @@
+import 'package:app_flowy/workspace/presentation/settings/widgets/settings_appearance_view.dart';
+import 'package:app_flowy/workspace/presentation/settings/widgets/settings_language_view.dart';
+import 'package:app_flowy/workspace/presentation/settings/widgets/settings_menu.dart';
+import 'package:flutter/material.dart';
+
+class SettingsDialog extends StatefulWidget {
+  const SettingsDialog({Key? key}) : super(key: key);
+
+  @override
+  State<SettingsDialog> createState() => _SettingsDialogState();
+}
+
+class _SettingsDialogState extends State<SettingsDialog> {
+  int _selectedViewIndex = 0;
+
+  final List<Widget> settingsViews = const [
+    SettingsAppearanceView(),
+    SettingsLanguageView(),
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    return AlertDialog(
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(10),
+      ),
+      title: SizedBox(
+        height: 600,
+        width: 800,
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            const SettingsPanelHeader(),
+            Expanded(
+              child: Row(
+                children: [
+                  Expanded(
+                    flex: 1,
+                    child: SettingsMenu(
+                      changeSelectedIndex: (index) {
+                        setState(() {
+                          _selectedViewIndex = index;
+                        });
+                      },
+                      currentIndex: _selectedViewIndex,
+                    ),
+                  ),
+                  Expanded(
+                    flex: 4,
+                    child: settingsViews[_selectedViewIndex],
+                  )
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class SettingsPanelHeader extends StatelessWidget {
+  const SettingsPanelHeader({
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return const Padding(
+      padding: EdgeInsets.all(16.0),
+      child: Text(
+        //TODO: Change to i10n
+        'Settings',
+        style: TextStyle(
+          fontWeight: FontWeight.bold,
+          fontSize: 24,
+        ),
+      ),
+    );
+  }
+}

frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart

@@ -0,0 +1,50 @@
+import 'package:flowy_infra/theme.dart';
+import 'package:flutter/material.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:app_flowy/workspace/presentation/theme/theme_model.dart';
+import 'package:app_flowy/generated/locale_keys.g.dart';
+
+class SettingsAppearanceView extends StatelessWidget {
+  const SettingsAppearanceView({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = context.watch<AppTheme>();
+
+    return SingleChildScrollView(
+      child: Column(
+        children: [
+          (theme.isDark ? _renderLightMode(context) : _renderDarkMode(context)),
+        ],
+      ),
+    );
+  }
+
+  Widget _renderThemeToggle(BuildContext context) {
+    final theme = context.watch<AppTheme>();
+    return CircleAvatar(
+      backgroundColor: theme.surface,
+      child: IconButton(
+          icon: Icon(theme.isDark ? Icons.dark_mode : Icons.light_mode),
+          color: (theme.iconColor),
+          onPressed: () {
+            context.read<ThemeModel>().swapTheme();
+          }),
+    );
+  }
+
+  Widget _renderDarkMode(BuildContext context) {
+    return Tooltip(
+      message: LocaleKeys.tooltip_darkMode.tr(),
+      child: _renderThemeToggle(context),
+    );
+  }
+
+  Widget _renderLightMode(BuildContext context) {
+    return Tooltip(
+      message: LocaleKeys.tooltip_lightMode.tr(),
+      child: _renderThemeToggle(context),
+    );
+  }
+}

frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_language_view.dart

@@ -0,0 +1,10 @@
+import 'package:flutter/material.dart';
+
+class SettingsLanguageView extends StatelessWidget {
+  const SettingsLanguageView({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return const Center(child: Text('Work In Progress'));
+  }
+}

frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_menu.dart

@@ -0,0 +1,82 @@
+import 'package:flutter/material.dart';
+
+class SettingsMenu extends StatelessWidget {
+  const SettingsMenu({
+    Key? key,
+    required this.changeSelectedIndex,
+    required this.currentIndex,
+  }) : super(key: key);
+
+  final Function changeSelectedIndex;
+  final int currentIndex;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        SettingsMenuElement(
+          index: 0,
+          currentIndex: currentIndex,
+          label: 'Appearance',
+          icon: Icons.brightness_4,
+          changeSelectedIndex: changeSelectedIndex,
+        ),
+        const SizedBox(
+          height: 10,
+        ),
+        SettingsMenuElement(
+          index: 1,
+          currentIndex: currentIndex,
+          label: 'Language',
+          icon: Icons.translate,
+          changeSelectedIndex: changeSelectedIndex,
+        ),
+      ],
+    );
+  }
+}
+
+class SettingsMenuElement extends StatelessWidget {
+  const SettingsMenuElement({
+    Key? key,
+    required this.index,
+    required this.label,
+    required this.icon,
+    required this.changeSelectedIndex,
+    required this.currentIndex,
+  }) : super(key: key);
+
+  final int index;
+  final int currentIndex;
+  final String label;
+  final IconData icon;
+  final Function changeSelectedIndex;
+
+  @override
+  Widget build(BuildContext context) {
+    return ListTile(
+      leading: Icon(
+        icon,
+        size: 16,
+        color: Colors.black,
+      ),
+      onTap: () {
+        changeSelectedIndex(index);
+      },
+      selected: index == currentIndex,
+      selectedColor: Colors.black,
+      selectedTileColor: Colors.blue.shade700,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(5),
+      ),
+      minLeadingWidth: 0,
+      title: Text(
+        label,
+        style: const TextStyle(
+          fontSize: 14,
+          fontWeight: FontWeight.w600,
+        ),
+      ),
+    );
+  }
+}

frontend/app_flowy/lib/workspace/presentation/widgets/menu/widget/menu_user.dart

@@ -1,5 +1,6 @@
 import 'package:app_flowy/startup/startup.dart';
 import 'package:app_flowy/workspace/application/menu/menu_user_bloc.dart';
+import 'package:app_flowy/workspace/presentation/settings/settings_dialog.dart';
 import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
@@ -17,7 +18,6 @@ class MenuUser extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final theme = context.watch<AppTheme>();
     return BlocProvider<MenuUserBloc>(
       create: (context) => getIt<MenuUserBloc>(param1: user)..add(const MenuUserEvent.initial()),
       child: BlocBuilder<MenuUserBloc, MenuUserState>(
@@ -26,14 +26,12 @@ class MenuUser extends StatelessWidget {
             _renderAvatar(context),
             const HSpace(10),
             _renderUserName(context),
-            const HSpace(80),
-            (theme.isDark ? _renderLightMode(context) : _renderDarkMode(context)),
-
+            const Spacer(),
+            (_renderSettingsButton(context)),
             //ToDo: when the user is allowed to create another workspace,
             //we get the below block back
             //_renderDropButton(context),
           ],
-          mainAxisAlignment: MainAxisAlignment.start,
           crossAxisAlignment: CrossAxisAlignment.center,
         ),
       ),
@@ -59,40 +57,28 @@ class MenuUser extends StatelessWidget {
     );
   }
 
-  Widget _renderThemeToggle(BuildContext context) {
-    final theme = context.watch<AppTheme>();
-    return CircleAvatar(
-      backgroundColor: theme.surface,
-      child: IconButton(
-          icon: Icon(theme.isDark ? Icons.dark_mode : Icons.light_mode),
-          color: (theme.iconColor),
-          onPressed: () {
-            context.read<ThemeModel>().swapTheme();
-          }),
-    );
-  }
-
-  Widget _renderDarkMode(BuildContext context) {
-    return Tooltip(
-      message: LocaleKeys.tooltip_darkMode.tr(),
-      child: _renderThemeToggle(context),
-    );
-  }
-
-  Widget _renderLightMode(BuildContext context) {
-    return Tooltip(
-      message: LocaleKeys.tooltip_lightMode.tr(),
-      child: _renderThemeToggle(context),
-    );
-  }
-
   Widget _renderUserName(BuildContext context) {
     String name = context.read<MenuUserBloc>().state.user.name;
     if (name.isEmpty) {
       name = context.read<MenuUserBloc>().state.user.email;
     }
-    return Flexible(
-      child: FlowyText(name, fontSize: 12),
+    return FlowyText(name, fontSize: 12);
+  }
+
+  Widget _renderSettingsButton(BuildContext context) {
+    return Tooltip(
+      message: 'Open Settings',
+      child: IconButton(
+        onPressed: () {
+          showDialog(
+            context: context,
+            builder: (context) {
+              return const SettingsDialog();
+            },
+          );
+        },
+        icon: const Icon(Icons.settings),
+      ),
     );
   }
   //ToDo: when the user is allowed to create another workspace,