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

feat: Initial implementation of updated language selector ui based on figma

Browse Source
This commit is contained in:
sunny7dusk 2022-07-23 13:15:34 -04:00
parent 7af259c056
commit 59b511c52c
1 changed files with 82 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_language_view.dart
View File

@ -1,18 +1,37 @@
import 'package:app_flowy/generated/locale_keys.g.dart';
import 'package:app_flowy/workspace/application/appearance.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra/theme.dart';
import 'package:flutter/material.dart';
import 'package:flowy_infra/language.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:provider/provider.dart';
class SettingsLanguageView extends StatelessWidget {
const SettingsLanguageView({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [LanguageSelectorDropdown()],
context.watch<AppTheme>();
return ChangeNotifierProvider.value(
value: Provider.of<AppearanceSettingModel>(context, listen: true),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
LocaleKeys.settings_menu_language.tr(),
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
),
),
const LanguageSelectorDropdown(),
],
),
],
),
),
);
}
@ -28,22 +47,66 @@ class LanguageSelectorDropdown extends StatefulWidget {
}
class _LanguageSelectorDropdownState extends State<LanguageSelectorDropdown> {
Color currHoverColor = Colors.white.withOpacity(0.0);
late Color themedHoverColor;
void hoverExitLanguage() {
setState(() {
currHoverColor = Colors.white.withOpacity(0.0);
});
}
void hoverEnterLanguage() {
setState(() {
currHoverColor = themedHoverColor;
});
}
@override
Widget build(BuildContext context) {
return DropdownButton<Locale>(
value: context.read<AppearanceSettingModel>().locale,
onChanged: (val) {
setState(() {
context.read<AppearanceSettingModel>().setLocale(context, val!);
});
},
autofocus: true,
items: EasyLocalization.of(context)!.supportedLocales.map((locale) {
return DropdownMenuItem<Locale>(
value: locale,
child: Text(languageFromLocale(locale)),
);
}).toList(),
final theme = context.watch<AppTheme>();
themedHoverColor = theme.main2;
return MouseRegion(
onEnter: (event) => {hoverEnterLanguage()},
onExit: (event) => {hoverExitLanguage()},
child: Container(
margin: const EdgeInsets.only(left: 8, right: 8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: currHoverColor,
),
child: DropdownButtonHideUnderline(
child: DropdownButton<Locale>(
value: context.read<AppearanceSettingModel>().locale,
onChanged: (val) {
setState(() {
context.read<AppearanceSettingModel>().setLocale(context, val!);
});
},
icon: const Visibility(
child: (Icon(Icons.arrow_downward)),
visible: false,
),
borderRadius: BorderRadius.circular(8),
items: EasyLocalization.of(context)!.supportedLocales.map((locale) {
return DropdownMenuItem<Locale>(
value: locale,
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Text(
languageFromLocale(locale),
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: theme.textColor,
),
),
),
);
}).toList(),
),
),
),
);
}
}