From 01d28609485819aad2b4238e617d55c7ceb29f6b Mon Sep 17 00:00:00 2001 From: Harinandan Date: Wed, 19 Jan 2022 10:26:46 +0530 Subject: [PATCH] Basic Setup of Settings Dialog --- .../settings/settings_dialog.dart | 81 ++++++++++++++++++ .../widgets/settings_appearance_view.dart | 50 +++++++++++ .../widgets/settings_language_view.dart | 10 +++ .../settings/widgets/settings_menu.dart | 82 +++++++++++++++++++ .../widgets/menu/widget/menu_user.dart | 54 +++++------- 5 files changed, 243 insertions(+), 34 deletions(-) create mode 100644 frontend/app_flowy/lib/workspace/presentation/settings/settings_dialog.dart create mode 100644 frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart create mode 100644 frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_language_view.dart create mode 100644 frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_menu.dart diff --git a/frontend/app_flowy/lib/workspace/presentation/settings/settings_dialog.dart b/frontend/app_flowy/lib/workspace/presentation/settings/settings_dialog.dart new file mode 100644 index 0000000000..a75c410b26 --- /dev/null +++ b/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 createState() => _SettingsDialogState(); +} + +class _SettingsDialogState extends State { + int _selectedViewIndex = 0; + + final List 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, + ), + ), + ); + } +} diff --git a/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart b/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart new file mode 100644 index 0000000000..af66182d2a --- /dev/null +++ b/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(); + + return SingleChildScrollView( + child: Column( + children: [ + (theme.isDark ? _renderLightMode(context) : _renderDarkMode(context)), + ], + ), + ); + } + + Widget _renderThemeToggle(BuildContext context) { + final theme = context.watch(); + return CircleAvatar( + backgroundColor: theme.surface, + child: IconButton( + icon: Icon(theme.isDark ? Icons.dark_mode : Icons.light_mode), + color: (theme.iconColor), + onPressed: () { + context.read().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), + ); + } +} diff --git a/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_language_view.dart b/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_language_view.dart new file mode 100644 index 0000000000..4681fcc2b8 --- /dev/null +++ b/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')); + } +} diff --git a/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_menu.dart b/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_menu.dart new file mode 100644 index 0000000000..543f4fe9e0 --- /dev/null +++ b/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, + ), + ), + ); + } +} diff --git a/frontend/app_flowy/lib/workspace/presentation/widgets/menu/widget/menu_user.dart b/frontend/app_flowy/lib/workspace/presentation/widgets/menu/widget/menu_user.dart index 29775a264b..d084b864ff 100644 --- a/frontend/app_flowy/lib/workspace/presentation/widgets/menu/widget/menu_user.dart +++ b/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(); return BlocProvider( create: (context) => getIt(param1: user)..add(const MenuUserEvent.initial()), child: BlocBuilder( @@ -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(); - return CircleAvatar( - backgroundColor: theme.surface, - child: IconButton( - icon: Icon(theme.isDark ? Icons.dark_mode : Icons.light_mode), - color: (theme.iconColor), - onPressed: () { - context.read().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().state.user.name; if (name.isEmpty) { name = context.read().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,