From 02e3e7c49adce11959df93aac58aed35901ecb46 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Mon, 25 Jul 2022 13:58:03 -0300 Subject: [PATCH 1/3] feat: implement new toggle --- .../widgets/settings_appearance_view.dart | 6 ++- .../presentation/widgets/toggle/toggle.dart | 52 +++++++++++++++++++ .../widgets/toggle/toggle_style.dart | 35 +++++++++++++ 3 files changed, 92 insertions(+), 1 deletion(-) create mode 100644 frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle.dart create mode 100644 frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle_style.dart 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 index e03f1fbc3b..85b78ae3b0 100644 --- 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 @@ -1,10 +1,13 @@ import 'package:app_flowy/generated/locale_keys.g.dart'; import 'package:app_flowy/workspace/application/appearance.dart'; +import 'package:app_flowy/workspace/presentation/widgets/toggle/toggle_style.dart'; import 'package:easy_localization/easy_localization.dart'; import 'package:flowy_infra/theme.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; +import '../../widgets/toggle/toggle.dart'; + class SettingsAppearanceView extends StatelessWidget { const SettingsAppearanceView({Key? key}) : super(key: key); @@ -25,11 +28,12 @@ class SettingsAppearanceView extends StatelessWidget { fontWeight: FontWeight.w500, ), ), - Switch( + Toggle( value: theme.isDark, onChanged: (val) { context.read().swapTheme(); }, + style: ToggleStyle.big(theme), ), Text( LocaleKeys.settings_appearance_darkLabel.tr(), diff --git a/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle.dart b/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle.dart new file mode 100644 index 0000000000..9b0d8de891 --- /dev/null +++ b/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle.dart @@ -0,0 +1,52 @@ +import 'package:app_flowy/workspace/presentation/widgets/toggle/toggle_style.dart'; +import 'package:flutter/widgets.dart'; + +class Toggle extends StatelessWidget { + final ToggleStyle style; + final bool value; + final void Function(bool) onChanged; + final EdgeInsets padding; + + const Toggle({ + Key? key, + required this.value, + required this.onChanged, + required this.style, + this.padding = const EdgeInsets.all(8.0), + }) : super(key: key); + + @override + Widget build(BuildContext context) { + return GestureDetector( + onTap: (() => onChanged(value)), + child: Padding( + padding: padding, + child: Stack( + children: [ + Container( + height: style.height, + width: style.width, + decoration: BoxDecoration( + color: style.backgroundColor, + borderRadius: BorderRadius.circular(style.height / 2), + ), + ), + AnimatedPositioned( + duration: const Duration(milliseconds: 150), + top: (style.height - style.thumbRadius) / 2, + left: value ? 1 : style.width - style.thumbRadius - 1, + child: Container( + height: style.thumbRadius, + width: style.thumbRadius, + decoration: BoxDecoration( + color: style.thumbColor, + borderRadius: BorderRadius.circular(style.thumbRadius / 2), + ), + ), + ), + ], + ), + ), + ); + } +} diff --git a/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle_style.dart b/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle_style.dart new file mode 100644 index 0000000000..f20344ccf8 --- /dev/null +++ b/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle_style.dart @@ -0,0 +1,35 @@ +import 'package:flowy_infra/theme.dart'; +import 'package:flutter/painting.dart'; +import 'package:flutter/widgets.dart'; + +class ToggleStyle { + final double height; + final double width; + + final double thumbRadius; + + final Color backgroundColor; + final Color thumbColor; + + ToggleStyle({ + required this.height, + required this.width, + required this.thumbRadius, + required this.backgroundColor, + required this.thumbColor, + }); + + ToggleStyle.big(AppTheme theme) + : height = 16, + width = 27, + thumbRadius = 14, + backgroundColor = theme.main1, + thumbColor = theme.surface; + + ToggleStyle.small(AppTheme theme) + : height = 10, + width = 16, + thumbRadius = 8, + backgroundColor = theme.main1, + thumbColor = theme.surface; +} From 07f300f0327f51145fd1354a91075735f6dd5bac Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Mon, 25 Jul 2022 14:20:32 -0300 Subject: [PATCH 2/3] fix: change the animation logic --- .../lib/workspace/presentation/widgets/toggle/toggle.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle.dart b/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle.dart index 9b0d8de891..1d76083485 100644 --- a/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle.dart +++ b/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle.dart @@ -34,7 +34,7 @@ class Toggle extends StatelessWidget { AnimatedPositioned( duration: const Duration(milliseconds: 150), top: (style.height - style.thumbRadius) / 2, - left: value ? 1 : style.width - style.thumbRadius - 1, + left: value ? style.width - style.thumbRadius - 1 : 1, child: Container( height: style.thumbRadius, width: style.thumbRadius, From 729555435538f5fe75bc65af949f51cb5f50f25b Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Mon, 25 Jul 2022 14:45:37 -0300 Subject: [PATCH 3/3] fix: inative background color --- .../presentation/widgets/toggle/toggle.dart | 2 +- .../presentation/widgets/toggle/toggle_style.dart | 13 ++++++++----- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle.dart b/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle.dart index 1d76083485..4de1c7d376 100644 --- a/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle.dart +++ b/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle.dart @@ -27,7 +27,7 @@ class Toggle extends StatelessWidget { height: style.height, width: style.width, decoration: BoxDecoration( - color: style.backgroundColor, + color: value ? style.activeBackgroundColor : style.inactiveBackgroundColor, borderRadius: BorderRadius.circular(style.height / 2), ), ), diff --git a/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle_style.dart b/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle_style.dart index f20344ccf8..683abfab5f 100644 --- a/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle_style.dart +++ b/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle_style.dart @@ -7,29 +7,32 @@ class ToggleStyle { final double width; final double thumbRadius; - - final Color backgroundColor; final Color thumbColor; + final Color activeBackgroundColor; + final Color inactiveBackgroundColor; ToggleStyle({ required this.height, required this.width, required this.thumbRadius, - required this.backgroundColor, required this.thumbColor, + required this.activeBackgroundColor, + required this.inactiveBackgroundColor, }); ToggleStyle.big(AppTheme theme) : height = 16, width = 27, thumbRadius = 14, - backgroundColor = theme.main1, + activeBackgroundColor = theme.main1, + inactiveBackgroundColor = theme.shader5, thumbColor = theme.surface; ToggleStyle.small(AppTheme theme) : height = 10, width = 16, thumbRadius = 8, - backgroundColor = theme.main1, + activeBackgroundColor = theme.main1, + inactiveBackgroundColor = theme.shader5, thumbColor = theme.surface; }