diff --git a/app_flowy/lib/user/infrastructure/i_auth_impl.dart b/app_flowy/lib/user/infrastructure/i_auth_impl.dart index ba968021e1..dc113799b9 100644 --- a/app_flowy/lib/user/infrastructure/i_auth_impl.dart +++ b/app_flowy/lib/user/infrastructure/i_auth_impl.dart @@ -1,5 +1,7 @@ import 'package:app_flowy/workspace/presentation/home/home_screen.dart'; import 'package:dartz/dartz.dart'; +import 'package:flowy_infra/time/duration.dart'; +import 'package:flowy_infra_ui/widget/route/animation.dart'; import 'package:flowy_sdk/protobuf/flowy-user/protobuf.dart'; import 'package:app_flowy/user/domain/i_auth.dart'; import 'package:app_flowy/user/infrastructure/repos/auth_repo.dart'; @@ -37,14 +39,7 @@ class AuthRouterImpl extends IAuthRouter { @override void showHomeScreen(BuildContext context, UserDetail user) { - Navigator.pushReplacement( - context, - MaterialPageRoute( - builder: (context) { - return HomeScreen(user); - }, - ), - ); + Navigator.of(context).push(PageRoutes.fade(() => HomeScreen(user))); } @override diff --git a/app_flowy/lib/user/presentation/sign_in/sign_in_screen.dart b/app_flowy/lib/user/presentation/sign_in/sign_in_screen.dart index cd9a27c82e..7c5e9a98c3 100644 --- a/app_flowy/lib/user/presentation/sign_in/sign_in_screen.dart +++ b/app_flowy/lib/user/presentation/sign_in/sign_in_screen.dart @@ -121,7 +121,7 @@ class LoginButton extends StatelessWidget { @override Widget build(BuildContext context) { - return RoundedButton( + return RoundedTextButton( title: 'Login', height: 65, borderRadius: BorderRadius.circular(10), diff --git a/app_flowy/packages/flowy_infra/lib/time/duration.dart b/app_flowy/packages/flowy_infra/lib/time/duration.dart index b880cc4f18..5763ce1d46 100644 --- a/app_flowy/packages/flowy_infra/lib/time/duration.dart +++ b/app_flowy/packages/flowy_infra/lib/time/duration.dart @@ -13,4 +13,5 @@ class Durations { class RouteDurations { static Duration get slow => .7.seconds; + static Duration get medium => .35.seconds; } diff --git a/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_button.dart b/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_button.dart index eced9d0ab6..6eac0a72c5 100644 --- a/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_button.dart +++ b/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_button.dart @@ -1,6 +1,6 @@ import 'package:flutter/material.dart'; -class RoundedButton extends StatelessWidget { +class RoundedTextButton extends StatelessWidget { final VoidCallback? press; final String? title; final double? width; @@ -10,7 +10,7 @@ class RoundedButton extends StatelessWidget { final Color color; final Color textColor; - const RoundedButton({ + const RoundedTextButton({ Key? key, this.press, this.title, @@ -48,3 +48,39 @@ class RoundedButton extends StatelessWidget { ); } } + +class RoundedImageButton extends StatelessWidget { + final VoidCallback? press; + final double size; + final BorderRadius borderRadius; + final Color borderColor; + final Color color; + final Widget child; + + const RoundedImageButton({ + Key? key, + this.press, + required this.size, + this.borderRadius = BorderRadius.zero, + this.borderColor = Colors.transparent, + this.color = Colors.transparent, + required this.child, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + return SizedBox( + width: size, + height: size, + child: TextButton( + onPressed: press, + style: ButtonStyle( + shape: MaterialStateProperty.all( + RoundedRectangleBorder( + borderRadius: borderRadius, + ))), + child: child, + ), + ); + } +} diff --git a/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_input_field.dart b/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_input_field.dart index 323347e472..a1d7c7f329 100644 --- a/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_input_field.dart +++ b/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_input_field.dart @@ -1,8 +1,10 @@ +import 'package:flowy_infra_ui/widget/rounded_button.dart'; import 'package:flowy_infra_ui/widget/text_field_container.dart'; import 'package:flutter/material.dart'; import 'package:flowy_infra/time/duration.dart'; -class RoundedInputField extends StatelessWidget { +// ignore: must_be_immutable +class RoundedInputField extends StatefulWidget { final String? hintText; final IconData? icon; final bool obscureText; @@ -10,8 +12,9 @@ class RoundedInputField extends StatelessWidget { final Color highlightBorderColor; final String errorText; final ValueChanged? onChanged; + late bool enableObscure; - const RoundedInputField({ + RoundedInputField({ Key? key, this.hintText, this.icon, @@ -20,20 +23,27 @@ class RoundedInputField extends StatelessWidget { this.normalBorderColor = Colors.transparent, this.highlightBorderColor = Colors.transparent, this.errorText = "", - }) : super(key: key); + }) : super(key: key) { + enableObscure = obscureText; + } + @override + State createState() => _RoundedInputFieldState(); +} + +class _RoundedInputFieldState extends State { @override Widget build(BuildContext context) { - final Icon? newIcon = icon == null + final Icon? newIcon = widget.icon == null ? null : Icon( - icon!, + widget.icon!, color: const Color(0xFF6F35A5), ); - var borderColor = normalBorderColor; - if (errorText.isNotEmpty) { - borderColor = highlightBorderColor; + var borderColor = widget.normalBorderColor; + if (widget.errorText.isNotEmpty) { + borderColor = widget.highlightBorderColor; } List children = [ @@ -41,28 +51,46 @@ class RoundedInputField extends StatelessWidget { borderRadius: BorderRadius.circular(10), borderColor: borderColor, child: TextFormField( - onChanged: onChanged, + onChanged: widget.onChanged, cursorColor: const Color(0xFF6F35A5), - obscureText: obscureText, + obscureText: widget.enableObscure, decoration: InputDecoration( icon: newIcon, - hintText: hintText, + hintText: widget.hintText, border: InputBorder.none, + suffixIcon: suffixIcon(), ), ), ), ]; - if (errorText.isNotEmpty) { - children - .add(Text(errorText, style: TextStyle(color: highlightBorderColor))); + if (widget.errorText.isNotEmpty) { + children.add(Text( + widget.errorText, + style: TextStyle(color: widget.highlightBorderColor), + )); } - return AnimatedContainer( - duration: .3.seconds, + return AnimatedSize( + duration: .4.seconds, + curve: Curves.easeInOut, child: Column( children: children, ), ); } + + Widget? suffixIcon() { + if (widget.obscureText == false) { + return null; + } + return RoundedImageButton( + size: 20, + press: () { + widget.enableObscure = !widget.enableObscure; + setState(() {}); + }, + child: const Icon(Icons.password, size: 15), + ); + } } diff --git a/app_flowy/packages/flowy_infra_ui/lib/widget/text_field_container.dart b/app_flowy/packages/flowy_infra_ui/lib/widget/text_field_container.dart index d6116b4c7c..7c1bf131a1 100644 --- a/app_flowy/packages/flowy_infra_ui/lib/widget/text_field_container.dart +++ b/app_flowy/packages/flowy_infra_ui/lib/widget/text_field_container.dart @@ -5,22 +5,24 @@ class TextFieldContainer extends StatelessWidget { final Widget child; final BorderRadius borderRadius; final Color borderColor; - final Size? size; + final double? height; + final double? width; const TextFieldContainer({ Key? key, required this.child, this.borderRadius = BorderRadius.zero, this.borderColor = Colors.white, - this.size, + this.height, + this.width, }) : super(key: key); @override Widget build(BuildContext context) { - double height = size == null ? 50 : size!.height; return Container( margin: const EdgeInsets.symmetric(vertical: 10), padding: const EdgeInsets.symmetric(horizontal: 15), height: height, + width: width, decoration: BoxDecoration( border: Border.all(color: borderColor), color: Colors.white,