From aef809030dc2d121cba4e77b1db148de82abc8ae Mon Sep 17 00:00:00 2001 From: Christian Pauly Date: Sun, 24 Jan 2021 17:26:59 +0100 Subject: [PATCH] chore: Redesign textfields --- .../default_app_bar_search_field.dart | 61 ++++++++----------- lib/config/themes.dart | 5 ++ lib/views/chat.dart | 1 + lib/views/homeserver_picker.dart | 4 +- lib/views/login.dart | 29 ++++----- lib/views/new_group.dart | 3 +- lib/views/new_private_chat.dart | 3 +- lib/views/sign_up.dart | 42 ++++++------- lib/views/sign_up_password.dart | 17 +++--- 9 files changed, 74 insertions(+), 91 deletions(-) diff --git a/lib/components/default_app_bar_search_field.dart b/lib/components/default_app_bar_search_field.dart index 6ce2ff33..ca5428fe 100644 --- a/lib/components/default_app_bar_search_field.dart +++ b/lib/components/default_app_bar_search_field.dart @@ -64,41 +64,34 @@ class _DefaultAppBarSearchFieldState extends State { return Container( height: 40, padding: widget.padding ?? EdgeInsets.only(right: 12), - child: Material( - color: Theme.of(context).secondaryHeaderColor, - borderRadius: BorderRadius.circular(32), - child: TextField( - autofocus: widget.autofocus, - autocorrect: false, - controller: _searchController, - onChanged: widget.onChanged, - focusNode: _focusNode, - readOnly: widget.readOnly, - decoration: InputDecoration( - prefixText: widget.prefixText, - contentPadding: EdgeInsets.only( - top: 8, - bottom: 8, - left: 16, - ), - border: OutlineInputBorder( - borderRadius: BorderRadius.circular(32), - ), - hintText: widget.hintText, - suffixIcon: !widget.readOnly && - (_focusNode.hasFocus || - (widget.suffix == null && - (_searchController.text?.isNotEmpty ?? false))) - ? IconButton( - icon: Icon(Icons.backspace_outlined), - onPressed: () { - _searchController.clear(); - widget.onChanged?.call(''); - _focusNode.unfocus(); - }, - ) - : widget.suffix, + child: TextField( + autofocus: widget.autofocus, + autocorrect: false, + controller: _searchController, + onChanged: widget.onChanged, + focusNode: _focusNode, + readOnly: widget.readOnly, + decoration: InputDecoration( + prefixText: widget.prefixText, + contentPadding: EdgeInsets.only( + top: 8, + bottom: 8, + left: 16, ), + hintText: widget.hintText, + suffixIcon: !widget.readOnly && + (_focusNode.hasFocus || + (widget.suffix == null && + (_searchController.text?.isNotEmpty ?? false))) + ? IconButton( + icon: Icon(Icons.backspace_outlined), + onPressed: () { + _searchController.clear(); + widget.onChanged?.call(''); + _focusNode.unfocus(); + }, + ) + : widget.suffix, ), ), ); diff --git a/lib/config/themes.dart b/lib/config/themes.dart index a16009a0..e1435f3c 100644 --- a/lib/config/themes.dart +++ b/lib/config/themes.dart @@ -53,6 +53,11 @@ abstract class FluffyThemes { backgroundColor: AppConfig.primaryColor, foregroundColor: Colors.white, ), + inputDecorationTheme: InputDecorationTheme( + border: OutlineInputBorder(borderRadius: BorderRadius.circular(12)), + filled: true, + fillColor: Color(0xFFECECF2), + ), appBarTheme: AppBarTheme( brightness: Brightness.light, color: Colors.white, diff --git a/lib/views/chat.dart b/lib/views/chat.dart index c5b3c61b..b516a7c3 100644 --- a/lib/views/chat.dart +++ b/lib/views/chat.dart @@ -1085,6 +1085,7 @@ class _ChatState extends State { L10n.of(context).writeAMessage, hintMaxLines: 1, border: InputBorder.none, + filled: false, ), onChanged: (String text) { typingCoolDown?.cancel(); diff --git a/lib/views/homeserver_picker.dart b/lib/views/homeserver_picker.dart index a559186a..553a4be7 100644 --- a/lib/views/homeserver_picker.dart +++ b/lib/views/homeserver_picker.dart @@ -108,13 +108,13 @@ class _HomeserverPickerState extends State { tag: 'loginButton', child: Container( width: double.infinity, - height: 50, + height: 56, padding: EdgeInsets.symmetric(horizontal: 12), child: RaisedButton( elevation: 7, color: Theme.of(context).primaryColor, shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(6), + borderRadius: BorderRadius.circular(12), ), child: _isLoading ? LinearProgressIndicator() diff --git a/lib/views/login.dart b/lib/views/login.dart index 04475097..6a142a56 100644 --- a/lib/views/login.dart +++ b/lib/views/login.dart @@ -172,39 +172,32 @@ class _LoginState extends State { horizontal: max((MediaQuery.of(context).size.width - 600) / 2, 0)), children: [ - ListTile( - leading: CircleAvatar( - child: Icon(Icons.account_box_outlined, - color: Theme.of(context).primaryColor), - ), - title: TextField( + Padding( + padding: const EdgeInsets.all(12.0), + child: TextField( readOnly: loading, autocorrect: false, autofocus: true, onChanged: (t) => _checkWellKnownWithCoolDown(t, context), controller: usernameController, decoration: InputDecoration( + prefixIcon: Icon(Icons.account_box_outlined), hintText: '@${L10n.of(context).username.toLowerCase()}:domain', errorText: usernameError, labelText: L10n.of(context).username), ), ), - ListTile( - leading: CircleAvatar( - backgroundColor: Theme.of(context).brightness == Brightness.dark - ? Color(0xff121212) - : Colors.white, - child: Icon(Icons.lock_outlined, - color: Theme.of(context).primaryColor), - ), - title: TextField( + Padding( + padding: const EdgeInsets.all(12.0), + child: TextField( readOnly: loading, autocorrect: false, controller: passwordController, obscureText: !showPassword, onSubmitted: (t) => login(context), decoration: InputDecoration( + prefixIcon: Icon(Icons.lock_outlined), hintText: '****', errorText: passwordError, suffixIcon: IconButton( @@ -217,17 +210,17 @@ class _LoginState extends State { labelText: L10n.of(context).password), ), ), - SizedBox(height: 20), + SizedBox(height: 12), Hero( tag: 'loginButton', child: Container( - height: 50, + height: 56, padding: EdgeInsets.symmetric(horizontal: 12), child: RaisedButton( elevation: 7, color: Theme.of(context).primaryColor, shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(6), + borderRadius: BorderRadius.circular(12), ), child: loading ? LinearProgressIndicator() diff --git a/lib/views/new_group.dart b/lib/views/new_group.dart index b28f587e..a3a6270b 100644 --- a/lib/views/new_group.dart +++ b/lib/views/new_group.dart @@ -48,7 +48,7 @@ class _NewGroupState extends State { mainAxisSize: MainAxisSize.min, children: [ Padding( - padding: const EdgeInsets.all(16.0), + padding: const EdgeInsets.all(12.0), child: TextField( controller: controller, autofocus: true, @@ -56,7 +56,6 @@ class _NewGroupState extends State { textInputAction: TextInputAction.go, onSubmitted: (s) => submitAction(context), decoration: InputDecoration( - border: OutlineInputBorder(), labelText: L10n.of(context).optionalGroupName, prefixIcon: Icon(Icons.people_outlined), hintText: L10n.of(context).enterAGroupName), diff --git a/lib/views/new_private_chat.dart b/lib/views/new_private_chat.dart index 131cb45f..f5888184 100644 --- a/lib/views/new_private_chat.dart +++ b/lib/views/new_private_chat.dart @@ -93,7 +93,7 @@ class _NewPrivateChatState extends State { body: Column( children: [ Padding( - padding: const EdgeInsets.all(16.0), + padding: const EdgeInsets.all(12.0), child: Form( key: _formKey, child: TextFormField( @@ -121,7 +121,6 @@ class _NewPrivateChatState extends State { return null; }, decoration: InputDecoration( - border: OutlineInputBorder(), labelText: L10n.of(context).enterAUsername, prefixIcon: loading ? Container( diff --git a/lib/views/sign_up.dart b/lib/views/sign_up.dart index c62847ab..2c820694 100644 --- a/lib/views/sign_up.dart +++ b/lib/views/sign_up.dart @@ -88,6 +88,22 @@ class _SignUpState extends State { tag: 'loginBanner', child: Image.asset('assets/banner.png'), ), + SizedBox(height: 16), + Padding( + padding: const EdgeInsets.symmetric(horizontal: 12.0), + child: TextField( + autocorrect: false, + controller: usernameController, + onSubmitted: (s) => signUpAction(context), + decoration: InputDecoration( + prefixIcon: Icon(Icons.account_circle_outlined), + hintText: L10n.of(context).username, + errorText: usernameError, + labelText: L10n.of(context).chooseAUsername, + ), + ), + ), + SizedBox(height: 8), ListTile( leading: CircleAvatar( backgroundImage: @@ -115,37 +131,17 @@ class _SignUpState extends State { ? setAvatarAction : () => setState(() => avatar = null), ), - ListTile( - leading: CircleAvatar( - backgroundColor: Theme.of(context).brightness == Brightness.dark - ? Color(0xff121212) - : Colors.white, - child: Icon( - Icons.account_circle_outlined, - color: Theme.of(context).primaryColor, - ), - ), - title: TextField( - autocorrect: false, - controller: usernameController, - onSubmitted: (s) => signUpAction(context), - decoration: InputDecoration( - hintText: L10n.of(context).username, - errorText: usernameError, - labelText: L10n.of(context).chooseAUsername), - ), - ), - SizedBox(height: 20), + SizedBox(height: 16), Hero( tag: 'loginButton', child: Container( - height: 50, + height: 56, padding: EdgeInsets.symmetric(horizontal: 12), child: RaisedButton( elevation: 7, color: Theme.of(context).primaryColor, shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(6), + borderRadius: BorderRadius.circular(12), ), child: loading ? LinearProgressIndicator() diff --git a/lib/views/sign_up_password.dart b/lib/views/sign_up_password.dart index 0cd58421..6e4cb989 100644 --- a/lib/views/sign_up_password.dart +++ b/lib/views/sign_up_password.dart @@ -127,19 +127,16 @@ class _SignUpPasswordState extends State { padding: EdgeInsets.symmetric( horizontal: max((MediaQuery.of(context).size.width - 600) / 2, 0)), children: [ - ListTile( - leading: CircleAvatar( - backgroundColor: Colors.white, - child: Icon(Icons.lock_outlined, - color: Theme.of(context).primaryColor), - ), - title: TextField( + Padding( + padding: const EdgeInsets.all(12.0), + child: TextField( controller: passwordController, obscureText: !showPassword, autofocus: true, autocorrect: false, onSubmitted: (t) => _signUpAction(context), decoration: InputDecoration( + prefixIcon: Icon(Icons.lock_outlined), hintText: '****', errorText: passwordError, suffixIcon: IconButton( @@ -152,17 +149,17 @@ class _SignUpPasswordState extends State { labelText: L10n.of(context).password), ), ), - SizedBox(height: 20), + SizedBox(height: 12), Hero( tag: 'loginButton', child: Container( - height: 50, + height: 56, padding: EdgeInsets.symmetric(horizontal: 12), child: RaisedButton( elevation: 7, color: Theme.of(context).primaryColor, shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(6), + borderRadius: BorderRadius.circular(12), ), child: loading ? LinearProgressIndicator()