GitLab
/
fluffychat
mirror of https://gitlab.com/famedly/fluffychat.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

chore: Redesign textfields

This commit is contained in:
Christian Pauly 2021-01-24 17:26:59 +01:00
parent 0bd0e58b95
commit aef809030d
9 changed files with 74 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
lib/components/default_app_bar_search_field.dart
View File

@ -64,41 +64,34 @@ class _DefaultAppBarSearchFieldState extends State<DefaultAppBarSearchField> {
return Container( return Container(
height: 40, height: 40,
padding: widget.padding ?? EdgeInsets.only(right: 12), padding: widget.padding ?? EdgeInsets.only(right: 12),
child: Material( child: TextField(
color: Theme.of(context).secondaryHeaderColor, autofocus: widget.autofocus,
borderRadius: BorderRadius.circular(32), autocorrect: false,
child: TextField( controller: _searchController,
autofocus: widget.autofocus, onChanged: widget.onChanged,
autocorrect: false, focusNode: _focusNode,
controller: _searchController, readOnly: widget.readOnly,
onChanged: widget.onChanged, decoration: InputDecoration(
focusNode: _focusNode, prefixText: widget.prefixText,
readOnly: widget.readOnly, contentPadding: EdgeInsets.only(
decoration: InputDecoration( top: 8,
prefixText: widget.prefixText, bottom: 8,
contentPadding: EdgeInsets.only( left: 16,
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,
), ),
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,
), ),
), ),
); );

5
lib/config/themes.dart
View File

@ -53,6 +53,11 @@ abstract class FluffyThemes {
backgroundColor: AppConfig.primaryColor, backgroundColor: AppConfig.primaryColor,
foregroundColor: Colors.white, foregroundColor: Colors.white,
), ),
inputDecorationTheme: InputDecorationTheme(
border: OutlineInputBorder(borderRadius: BorderRadius.circular(12)),
filled: true,
fillColor: Color(0xFFECECF2),
),
appBarTheme: AppBarTheme( appBarTheme: AppBarTheme(
brightness: Brightness.light, brightness: Brightness.light,
color: Colors.white, color: Colors.white,

1
lib/views/chat.dart
View File

@ -1085,6 +1085,7 @@ class _ChatState extends State<Chat> {
L10n.of(context).writeAMessage, L10n.of(context).writeAMessage,
hintMaxLines: 1, hintMaxLines: 1,
border: InputBorder.none, border: InputBorder.none,
filled: false,
), ),
onChanged: (String text) { onChanged: (String text) {
typingCoolDown?.cancel(); typingCoolDown?.cancel();

4
lib/views/homeserver_picker.dart
View File

@ -108,13 +108,13 @@ class _HomeserverPickerState extends State<HomeserverPicker> {
tag: 'loginButton', tag: 'loginButton',
child: Container( child: Container(
width: double.infinity, width: double.infinity,
height: 50, height: 56,
padding: EdgeInsets.symmetric(horizontal: 12), padding: EdgeInsets.symmetric(horizontal: 12),
child: RaisedButton( child: RaisedButton(
elevation: 7, elevation: 7,
color: Theme.of(context).primaryColor, color: Theme.of(context).primaryColor,
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(6), borderRadius: BorderRadius.circular(12),
), ),
child: _isLoading child: _isLoading
? LinearProgressIndicator() ? LinearProgressIndicator()

29
lib/views/login.dart
View File

@ -172,39 +172,32 @@ class _LoginState extends State<Login> {
horizontal: horizontal:
max((MediaQuery.of(context).size.width - 600) / 2, 0)), max((MediaQuery.of(context).size.width - 600) / 2, 0)),
children: <Widget>[ children: <Widget>[
ListTile( Padding(
leading: CircleAvatar( padding: const EdgeInsets.all(12.0),
child: Icon(Icons.account_box_outlined, child: TextField(
color: Theme.of(context).primaryColor),
),
title: TextField(
readOnly: loading, readOnly: loading,
autocorrect: false, autocorrect: false,
autofocus: true, autofocus: true,
onChanged: (t) => _checkWellKnownWithCoolDown(t, context), onChanged: (t) => _checkWellKnownWithCoolDown(t, context),
controller: usernameController, controller: usernameController,
decoration: InputDecoration( decoration: InputDecoration(
prefixIcon: Icon(Icons.account_box_outlined),
hintText: hintText:
'@${L10n.of(context).username.toLowerCase()}:domain', '@${L10n.of(context).username.toLowerCase()}:domain',
errorText: usernameError, errorText: usernameError,
labelText: L10n.of(context).username), labelText: L10n.of(context).username),
), ),
), ),
ListTile( Padding(
leading: CircleAvatar( padding: const EdgeInsets.all(12.0),
backgroundColor: Theme.of(context).brightness == Brightness.dark child: TextField(
? Color(0xff121212)
: Colors.white,
child: Icon(Icons.lock_outlined,
color: Theme.of(context).primaryColor),
),
title: TextField(
readOnly: loading, readOnly: loading,
autocorrect: false, autocorrect: false,
controller: passwordController, controller: passwordController,
obscureText: !showPassword, obscureText: !showPassword,
onSubmitted: (t) => login(context), onSubmitted: (t) => login(context),
decoration: InputDecoration( decoration: InputDecoration(
prefixIcon: Icon(Icons.lock_outlined),
hintText: '****', hintText: '****',
errorText: passwordError, errorText: passwordError,
suffixIcon: IconButton( suffixIcon: IconButton(
@ -217,17 +210,17 @@ class _LoginState extends State<Login> {
labelText: L10n.of(context).password), labelText: L10n.of(context).password),
), ),
), ),
SizedBox(height: 20), SizedBox(height: 12),
Hero( Hero(
tag: 'loginButton', tag: 'loginButton',
child: Container( child: Container(
height: 50, height: 56,
padding: EdgeInsets.symmetric(horizontal: 12), padding: EdgeInsets.symmetric(horizontal: 12),
child: RaisedButton( child: RaisedButton(
elevation: 7, elevation: 7,
color: Theme.of(context).primaryColor, color: Theme.of(context).primaryColor,
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(6), borderRadius: BorderRadius.circular(12),
), ),
child: loading child: loading
? LinearProgressIndicator() ? LinearProgressIndicator()

3
lib/views/new_group.dart
View File

@ -48,7 +48,7 @@ class _NewGroupState extends State<NewGroup> {
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: <Widget>[ children: <Widget>[
Padding( Padding(
padding: const EdgeInsets.all(16.0), padding: const EdgeInsets.all(12.0),
child: TextField( child: TextField(
controller: controller, controller: controller,
autofocus: true, autofocus: true,
@ -56,7 +56,6 @@ class _NewGroupState extends State<NewGroup> {
textInputAction: TextInputAction.go, textInputAction: TextInputAction.go,
onSubmitted: (s) => submitAction(context), onSubmitted: (s) => submitAction(context),
decoration: InputDecoration( decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: L10n.of(context).optionalGroupName, labelText: L10n.of(context).optionalGroupName,
prefixIcon: Icon(Icons.people_outlined), prefixIcon: Icon(Icons.people_outlined),
hintText: L10n.of(context).enterAGroupName), hintText: L10n.of(context).enterAGroupName),

3
lib/views/new_private_chat.dart
View File

@ -93,7 +93,7 @@ class _NewPrivateChatState extends State<NewPrivateChat> {
body: Column( body: Column(
children: <Widget>[ children: <Widget>[
Padding( Padding(
padding: const EdgeInsets.all(16.0), padding: const EdgeInsets.all(12.0),
child: Form( child: Form(
key: _formKey, key: _formKey,
child: TextFormField( child: TextFormField(
@ -121,7 +121,6 @@ class _NewPrivateChatState extends State<NewPrivateChat> {
return null; return null;
}, },
decoration: InputDecoration( decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: L10n.of(context).enterAUsername, labelText: L10n.of(context).enterAUsername,
prefixIcon: loading prefixIcon: loading
? Container( ? Container(

42
lib/views/sign_up.dart
View File

@ -88,6 +88,22 @@ class _SignUpState extends State<SignUp> {
tag: 'loginBanner', tag: 'loginBanner',
child: Image.asset('assets/banner.png'), 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( ListTile(
leading: CircleAvatar( leading: CircleAvatar(
backgroundImage: backgroundImage:
@ -115,37 +131,17 @@ class _SignUpState extends State<SignUp> {
? setAvatarAction ? setAvatarAction
: () => setState(() => avatar = null), : () => setState(() => avatar = null),
), ),
ListTile( SizedBox(height: 16),
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),
Hero( Hero(
tag: 'loginButton', tag: 'loginButton',
child: Container( child: Container(
height: 50, height: 56,
padding: EdgeInsets.symmetric(horizontal: 12), padding: EdgeInsets.symmetric(horizontal: 12),
child: RaisedButton( child: RaisedButton(
elevation: 7, elevation: 7,
color: Theme.of(context).primaryColor, color: Theme.of(context).primaryColor,
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(6), borderRadius: BorderRadius.circular(12),
), ),
child: loading child: loading
? LinearProgressIndicator() ? LinearProgressIndicator()

17
lib/views/sign_up_password.dart
View File

@ -127,19 +127,16 @@ class _SignUpPasswordState extends State<SignUpPassword> {
padding: EdgeInsets.symmetric( padding: EdgeInsets.symmetric(
horizontal: max((MediaQuery.of(context).size.width - 600) / 2, 0)), horizontal: max((MediaQuery.of(context).size.width - 600) / 2, 0)),
children: <Widget>[ children: <Widget>[
ListTile( Padding(
leading: CircleAvatar( padding: const EdgeInsets.all(12.0),
backgroundColor: Colors.white, child: TextField(
child: Icon(Icons.lock_outlined,
color: Theme.of(context).primaryColor),
),
title: TextField(
controller: passwordController, controller: passwordController,
obscureText: !showPassword, obscureText: !showPassword,
autofocus: true, autofocus: true,
autocorrect: false, autocorrect: false,
onSubmitted: (t) => _signUpAction(context), onSubmitted: (t) => _signUpAction(context),
decoration: InputDecoration( decoration: InputDecoration(
prefixIcon: Icon(Icons.lock_outlined),
hintText: '****', hintText: '****',
errorText: passwordError, errorText: passwordError,
suffixIcon: IconButton( suffixIcon: IconButton(
@ -152,17 +149,17 @@ class _SignUpPasswordState extends State<SignUpPassword> {
labelText: L10n.of(context).password), labelText: L10n.of(context).password),
), ),
), ),
SizedBox(height: 20), SizedBox(height: 12),
Hero( Hero(
tag: 'loginButton', tag: 'loginButton',
child: Container( child: Container(
height: 50, height: 56,
padding: EdgeInsets.symmetric(horizontal: 12), padding: EdgeInsets.symmetric(horizontal: 12),
child: RaisedButton( child: RaisedButton(
elevation: 7, elevation: 7,
color: Theme.of(context).primaryColor, color: Theme.of(context).primaryColor,
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(6), borderRadius: BorderRadius.circular(12),
), ),
child: loading child: loading
? LinearProgressIndicator() ? LinearProgressIndicator()