chore: Follow up sign up design
This commit is contained in:
Christian Kußowski
parent
0401456481
commit
2408568f36
5 changed files with 162 additions and 159 deletions
|
|
@ -37,164 +37,165 @@ class SignInPage extends StatelessWidget {
|
|||
? L10n.of(context).createNewAccount
|
||||
: L10n.of(context).login,
|
||||
),
|
||||
bottom: PreferredSize(
|
||||
preferredSize: const Size.fromHeight(56 + 60),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: Column(
|
||||
mainAxisSize: .min,
|
||||
crossAxisAlignment: .center,
|
||||
spacing: 12,
|
||||
children: [
|
||||
SelectableText(
|
||||
signUp
|
||||
? L10n.of(context).signUpGreeting
|
||||
: L10n.of(context).signInGreeting,
|
||||
textAlign: .center,
|
||||
),
|
||||
body: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16.0),
|
||||
child: Column(
|
||||
spacing: 16,
|
||||
children: [
|
||||
SelectableText(
|
||||
signUp
|
||||
? L10n.of(context).signUpGreeting
|
||||
: L10n.of(context).signInGreeting,
|
||||
textAlign: .center,
|
||||
),
|
||||
TextField(
|
||||
readOnly:
|
||||
state.publicHomeservers.connectionState ==
|
||||
ConnectionState.waiting,
|
||||
controller: viewModel.filterTextController,
|
||||
autocorrect: false,
|
||||
keyboardType: TextInputType.url,
|
||||
decoration: InputDecoration(
|
||||
filled: true,
|
||||
fillColor: theme.colorScheme.secondaryContainer,
|
||||
border: OutlineInputBorder(
|
||||
borderSide: BorderSide.none,
|
||||
borderRadius: BorderRadius.circular(99),
|
||||
),
|
||||
TextField(
|
||||
readOnly:
|
||||
state.publicHomeservers.connectionState ==
|
||||
ConnectionState.waiting,
|
||||
controller: viewModel.filterTextController,
|
||||
autocorrect: false,
|
||||
keyboardType: TextInputType.url,
|
||||
decoration: InputDecoration(
|
||||
filled: true,
|
||||
fillColor: theme.colorScheme.secondaryContainer,
|
||||
border: OutlineInputBorder(
|
||||
borderSide: BorderSide.none,
|
||||
borderRadius: BorderRadius.circular(99),
|
||||
errorText: state.publicHomeservers.error?.toLocalizedString(
|
||||
context,
|
||||
),
|
||||
prefixIcon: const Icon(Icons.search_outlined),
|
||||
hintText: L10n.of(context).searchOrEnterHomeserverAddress,
|
||||
),
|
||||
),
|
||||
if (state.publicHomeservers.connectionState ==
|
||||
ConnectionState.done)
|
||||
Expanded(
|
||||
child: Material(
|
||||
borderRadius: BorderRadius.circular(
|
||||
AppConfig.borderRadius,
|
||||
),
|
||||
clipBehavior: Clip.hardEdge,
|
||||
color: theme.colorScheme.surfaceContainerLow,
|
||||
child: RadioGroup<PublicHomeserverData>(
|
||||
groupValue: state.selectedHomeserver,
|
||||
onChanged: viewModel.selectHomeserver,
|
||||
child: ListView.builder(
|
||||
itemCount: publicHomeservers.length,
|
||||
itemBuilder: (context, i) {
|
||||
final server = publicHomeservers[i];
|
||||
final website = server.website;
|
||||
return RadioListTile.adaptive(
|
||||
value: server,
|
||||
radioScaleFactor:
|
||||
FluffyThemes.isColumnMode(context) ||
|
||||
{
|
||||
TargetPlatform.iOS,
|
||||
TargetPlatform.macOS,
|
||||
}.contains(theme.platform)
|
||||
? 2
|
||||
: 1,
|
||||
title: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Text(server.name ?? 'Unknown'),
|
||||
),
|
||||
if (website != null)
|
||||
SizedBox.square(
|
||||
dimension: 32,
|
||||
child: IconButton(
|
||||
icon: const Icon(
|
||||
Icons.open_in_new_outlined,
|
||||
size: 16,
|
||||
),
|
||||
onPressed: () =>
|
||||
launchUrlString(website),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
subtitle: Column(
|
||||
spacing: 4.0,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
if (server.features?.isNotEmpty == true)
|
||||
Wrap(
|
||||
spacing: 4.0,
|
||||
runSpacing: 4.0,
|
||||
children: [
|
||||
...?server.languages?.map(
|
||||
(language) => Material(
|
||||
borderRadius: BorderRadius.circular(
|
||||
AppConfig.borderRadius,
|
||||
),
|
||||
color: theme
|
||||
.colorScheme
|
||||
.tertiaryContainer,
|
||||
child: Padding(
|
||||
padding:
|
||||
const EdgeInsets.symmetric(
|
||||
horizontal: 6.0,
|
||||
vertical: 3.0,
|
||||
),
|
||||
child: Text(
|
||||
language,
|
||||
style: TextStyle(
|
||||
fontSize: 10,
|
||||
color: theme
|
||||
.colorScheme
|
||||
.onTertiaryContainer,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
...server.features!.map(
|
||||
(feature) => Material(
|
||||
borderRadius: BorderRadius.circular(
|
||||
AppConfig.borderRadius,
|
||||
),
|
||||
color: theme
|
||||
.colorScheme
|
||||
.secondaryContainer,
|
||||
child: Padding(
|
||||
padding:
|
||||
const EdgeInsets.symmetric(
|
||||
horizontal: 6.0,
|
||||
vertical: 3.0,
|
||||
),
|
||||
child: Text(
|
||||
feature,
|
||||
style: TextStyle(
|
||||
fontSize: 10,
|
||||
color: theme
|
||||
.colorScheme
|
||||
.onSecondaryContainer,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
Text(
|
||||
server.description ?? 'A matrix homeserver',
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
errorText: state.publicHomeservers.error
|
||||
?.toLocalizedString(context),
|
||||
prefixIcon: const Icon(Icons.search_outlined),
|
||||
hintText: L10n.of(
|
||||
context,
|
||||
).searchOrEnterHomeserverAddress,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
)
|
||||
else
|
||||
Center(child: CircularProgressIndicator.adaptive()),
|
||||
],
|
||||
),
|
||||
),
|
||||
body: state.publicHomeservers.connectionState == ConnectionState.done
|
||||
? Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16.0),
|
||||
child: Material(
|
||||
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
|
||||
clipBehavior: Clip.hardEdge,
|
||||
color: theme.colorScheme.surfaceContainerLow,
|
||||
child: RadioGroup<PublicHomeserverData>(
|
||||
groupValue: state.selectedHomeserver,
|
||||
onChanged: viewModel.selectHomeserver,
|
||||
child: ListView.builder(
|
||||
itemCount: publicHomeservers.length,
|
||||
itemBuilder: (context, i) {
|
||||
final server = publicHomeservers[i];
|
||||
final homepage = server.homepage;
|
||||
return RadioListTile.adaptive(
|
||||
value: server,
|
||||
radioScaleFactor:
|
||||
FluffyThemes.isColumnMode(context) ||
|
||||
{
|
||||
TargetPlatform.iOS,
|
||||
TargetPlatform.macOS,
|
||||
}.contains(theme.platform)
|
||||
? 2
|
||||
: 1,
|
||||
title: Row(
|
||||
children: [
|
||||
Expanded(child: Text(server.name ?? 'Unknown')),
|
||||
if (homepage != null)
|
||||
SizedBox.square(
|
||||
dimension: 32,
|
||||
child: IconButton(
|
||||
icon: const Icon(
|
||||
Icons.open_in_new_outlined,
|
||||
size: 16,
|
||||
),
|
||||
onPressed: () =>
|
||||
launchUrlString(homepage),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
subtitle: Column(
|
||||
spacing: 4.0,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
if (server.features?.isNotEmpty == true)
|
||||
Wrap(
|
||||
spacing: 4.0,
|
||||
runSpacing: 4.0,
|
||||
children: [
|
||||
...?server.languages?.map(
|
||||
(language) => Material(
|
||||
borderRadius: BorderRadius.circular(
|
||||
AppConfig.borderRadius,
|
||||
),
|
||||
color: theme
|
||||
.colorScheme
|
||||
.tertiaryContainer,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 6.0,
|
||||
vertical: 3.0,
|
||||
),
|
||||
child: Text(
|
||||
language,
|
||||
style: TextStyle(
|
||||
fontSize: 10,
|
||||
color: theme
|
||||
.colorScheme
|
||||
.onTertiaryContainer,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
...server.features!.map(
|
||||
(feature) => Material(
|
||||
borderRadius: BorderRadius.circular(
|
||||
AppConfig.borderRadius,
|
||||
),
|
||||
color: theme
|
||||
.colorScheme
|
||||
.secondaryContainer,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 6.0,
|
||||
vertical: 3.0,
|
||||
),
|
||||
child: Text(
|
||||
feature,
|
||||
style: TextStyle(
|
||||
fontSize: 10,
|
||||
color: theme
|
||||
.colorScheme
|
||||
.onSecondaryContainer,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
Text(
|
||||
server.description ?? 'A matrix homeserver',
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
: Center(child: CircularProgressIndicator.adaptive()),
|
||||
bottomNavigationBar: AnimatedSize(
|
||||
duration: FluffyThemes.animationDuration,
|
||||
curve: FluffyThemes.animationCurve,
|
||||
|
|
@ -203,12 +204,14 @@ class SignInPage extends StatelessWidget {
|
|||
!publicHomeservers.contains(selectedHomserver)
|
||||
? const SizedBox.shrink()
|
||||
: Material(
|
||||
elevation: 8,
|
||||
shadowColor: theme.appBarTheme.shadowColor,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: SafeArea(
|
||||
child: ElevatedButton(
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: theme.colorScheme.primary,
|
||||
foregroundColor: theme.colorScheme.onPrimary,
|
||||
),
|
||||
onPressed:
|
||||
state.loginLoading.connectionState ==
|
||||
ConnectionState.waiting
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ int sortHomeservers(PublicHomeserverData a, PublicHomeserverData b) {
|
|||
int _calcHomeserverScore(PublicHomeserverData homeserver) {
|
||||
var score = 0;
|
||||
if (homeserver.description?.isNotEmpty == true) score++;
|
||||
if (homeserver.homepage?.isNotEmpty == true) score++;
|
||||
if (homeserver.website?.isNotEmpty == true) score++;
|
||||
score += (homeserver.languages?.length ?? 0);
|
||||
score += (homeserver.features?.length ?? 0);
|
||||
score += (homeserver.onlineStatus ?? 0);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
class PublicHomeserverData {
|
||||
final String? name;
|
||||
final String? clientDomain;
|
||||
final String? homepage;
|
||||
final String? website;
|
||||
final String? isp;
|
||||
final String? staffJur;
|
||||
final String? rules;
|
||||
|
|
@ -26,7 +26,7 @@ class PublicHomeserverData {
|
|||
PublicHomeserverData({
|
||||
this.name,
|
||||
this.clientDomain,
|
||||
this.homepage,
|
||||
this.website,
|
||||
this.isp,
|
||||
this.staffJur,
|
||||
this.rules,
|
||||
|
|
@ -53,7 +53,7 @@ class PublicHomeserverData {
|
|||
return PublicHomeserverData(
|
||||
name: json['name'],
|
||||
clientDomain: json['client_domain'],
|
||||
homepage: json['homepage'],
|
||||
website: json['website'],
|
||||
isp: json['isp'],
|
||||
staffJur: json['staff_jur'],
|
||||
rules: json['rules'],
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import 'package:fluffychat/config/setting_keys.dart';
|
||||
import 'package:flutter/foundation.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:go_router/go_router.dart';
|
||||
import 'package:url_launcher/url_launcher_string.dart';
|
||||
|
||||
import 'package:fluffychat/config/setting_keys.dart';
|
||||
import 'package:fluffychat/l10n/l10n.dart';
|
||||
import 'package:fluffychat/pages/sign_in/view_model/model/public_homeserver_data.dart';
|
||||
import 'package:fluffychat/utils/localized_exception_extension.dart';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue