Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Basic Setup of Settings Dialog

Browse Source
This commit is contained in:
Harinandan 2022-01-19 10:26:46 +05:30
parent 554cfb53e5
commit 01d2860948
5 changed files with 243 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
frontend/app_flowy/lib/workspace/presentation/settings/settings_dialog.dart Normal file
View File

@ -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,
),
),
);
}
}

50
frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart Normal file
View File

@ -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),
);
}
}

10
frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_language_view.dart Normal file
View File

@ -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'));
}
}

82
frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_menu.dart Normal file
View File

@ -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,
),
),
);
}
}

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

@ -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,