feat: New design for new chat page
This commit is contained in:
Christian Pauly
parent
1f5fd4fc74
commit
b5c3d7b1e3
|
|
@ -1428,6 +1428,10 @@
|
|||
"server2": {}
|
||||
}
|
||||
},
|
||||
"createNewChatExplaination": "Just scan the QR code or share your invite link if you are not next to each other.",
|
||||
"shareYourInviteLink": "Share your invite link",
|
||||
"typeInInviteLinkManually": "Type in invite link manually...",
|
||||
"scanQrCode": "Scan QR code",
|
||||
"noMegolmBootstrap": "Please turn on online key backup from within Element instead.",
|
||||
"@noMegolmBootstrap": {
|
||||
"type": "text",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
import 'dart:async';
|
||||
|
||||
import 'package:matrix/matrix.dart';
|
||||
import 'package:fluffychat/utils/fluffy_share.dart';
|
||||
import 'package:fluffychat/pages/views/new_private_chat_view.dart';
|
||||
|
|
@ -18,84 +16,56 @@ class NewPrivateChatController extends State<NewPrivateChat> {
|
|||
TextEditingController controller = TextEditingController();
|
||||
final formKey = GlobalKey<FormState>();
|
||||
bool loading = false;
|
||||
String currentSearchTerm;
|
||||
List<Profile> foundProfiles = [];
|
||||
Timer coolDown;
|
||||
Profile get foundProfile =>
|
||||
foundProfiles.firstWhere((user) => user.userId == '@$currentSearchTerm',
|
||||
orElse: () => null);
|
||||
bool get correctMxId =>
|
||||
foundProfiles
|
||||
.indexWhere((user) => user.userId == '@$currentSearchTerm') !=
|
||||
-1;
|
||||
|
||||
static const Set<String> supportedSigils = {'@', '!', '#'};
|
||||
|
||||
void submitAction([_]) async {
|
||||
controller.text = controller.text.replaceAll('@', '').trim();
|
||||
if (controller.text.isEmpty) return;
|
||||
controller.text = controller.text.trim();
|
||||
if (!formKey.currentState.validate()) return;
|
||||
final matrix = Matrix.of(context);
|
||||
final client = Matrix.of(context).client;
|
||||
|
||||
if ('@' + controller.text == matrix.client.userID) return;
|
||||
LoadingDialogResult roomIdResult;
|
||||
|
||||
final user = User(
|
||||
'@' + controller.text,
|
||||
room: Room(id: '', client: matrix.client),
|
||||
);
|
||||
final roomID = await showFutureLoadingDialog(
|
||||
context: context,
|
||||
future: () => user.startDirectChat(),
|
||||
);
|
||||
|
||||
if (roomID.error == null) {
|
||||
VRouter.of(context).toSegments(['rooms', roomID.result]);
|
||||
switch (controller.text.sigil) {
|
||||
case '@':
|
||||
roomIdResult = await showFutureLoadingDialog(
|
||||
context: context,
|
||||
future: () => client.startDirectChat(controller.text),
|
||||
);
|
||||
break;
|
||||
case '#':
|
||||
case '!':
|
||||
roomIdResult = await showFutureLoadingDialog(
|
||||
context: context,
|
||||
future: () async {
|
||||
final roomId = await client.joinRoom(controller.text);
|
||||
if (client.getRoomById(roomId) == null) {
|
||||
await client.onSync.stream
|
||||
.where((s) => s.rooms.join.containsKey(roomId))
|
||||
.first;
|
||||
}
|
||||
return roomId;
|
||||
},
|
||||
);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
void searchUserWithCoolDown([_]) async {
|
||||
coolDown?.cancel();
|
||||
coolDown = Timer(
|
||||
Duration(milliseconds: 500),
|
||||
() => searchUser(controller.text),
|
||||
);
|
||||
}
|
||||
|
||||
void searchUser(String text) async {
|
||||
if (text.isEmpty) {
|
||||
setState(() {
|
||||
foundProfiles = [];
|
||||
});
|
||||
if (roomIdResult.error == null) {
|
||||
VRouter.of(context).toSegments(['rooms', roomIdResult.result]);
|
||||
}
|
||||
currentSearchTerm = text;
|
||||
if (currentSearchTerm.isEmpty) return;
|
||||
if (loading) return;
|
||||
setState(() => loading = true);
|
||||
final matrix = Matrix.of(context);
|
||||
SearchUserDirectoryResponse response;
|
||||
try {
|
||||
response = await matrix.client.searchUserDirectory(text, limit: 10);
|
||||
} catch (_) {}
|
||||
setState(() => loading = false);
|
||||
if (response?.results?.isEmpty ?? true) return;
|
||||
setState(() {
|
||||
foundProfiles = List<Profile>.from(response.results);
|
||||
});
|
||||
}
|
||||
|
||||
String validateForm(String value) {
|
||||
if (value.isEmpty) {
|
||||
return L10n.of(context).pleaseEnterAMatrixIdentifier;
|
||||
}
|
||||
final matrix = Matrix.of(context);
|
||||
final mxid = '@' + controller.text.trim();
|
||||
if (mxid == matrix.client.userID) {
|
||||
if (!controller.text.isValidMatrixId ||
|
||||
!supportedSigils.contains(controller.text.sigil)) {
|
||||
return L10n.of(context).makeSureTheIdentifierIsValid;
|
||||
}
|
||||
if (controller.text == Matrix.of(context).client.userID) {
|
||||
return L10n.of(context).youCannotInviteYourself;
|
||||
}
|
||||
if (!mxid.contains('@')) {
|
||||
return L10n.of(context).makeSureTheIdentifierIsValid;
|
||||
}
|
||||
if (!mxid.contains(':')) {
|
||||
return L10n.of(context).makeSureTheIdentifierIsValid;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
|
|
@ -105,11 +75,6 @@ class NewPrivateChatController extends State<NewPrivateChat> {
|
|||
context,
|
||||
);
|
||||
|
||||
void pickUser(Profile foundProfile) => setState(
|
||||
() => controller.text =
|
||||
currentSearchTerm = foundProfile.userId.substring(1),
|
||||
);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => NewPrivateChatView(this);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
import 'dart:math';
|
||||
|
||||
import 'package:fluffychat/config/app_config.dart';
|
||||
import 'package:fluffychat/pages/new_private_chat.dart';
|
||||
import 'package:fluffychat/widgets/avatar.dart';
|
||||
import 'package:fluffychat/widgets/contacts_list.dart';
|
||||
import 'package:fluffychat/widgets/layouts/max_width_body.dart';
|
||||
import 'package:fluffychat/widgets/matrix.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_gen/gen_l10n/l10n.dart';
|
||||
import 'package:matrix/matrix.dart';
|
||||
import 'package:qr_flutter/qr_flutter.dart';
|
||||
import 'package:vrouter/vrouter.dart';
|
||||
|
||||
class NewPrivateChatView extends StatelessWidget {
|
||||
|
|
@ -13,8 +14,12 @@ class NewPrivateChatView extends StatelessWidget {
|
|||
|
||||
const NewPrivateChatView(this.controller, {Key key}) : super(key: key);
|
||||
|
||||
static const double _qrCodePadding = 8;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final qrCodeSize = min(AppConfig.columnWidth - _qrCodePadding * 6,
|
||||
MediaQuery.of(context).size.width - _qrCodePadding * 6);
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
leading: BackButton(),
|
||||
|
|
@ -31,103 +36,80 @@ class NewPrivateChatView extends StatelessWidget {
|
|||
],
|
||||
),
|
||||
body: MaxWidthBody(
|
||||
child: Column(
|
||||
children: <Widget>[
|
||||
child: ListView(
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(12.0),
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: _qrCodePadding * 2,
|
||||
),
|
||||
child: Text(
|
||||
L10n.of(context).createNewChatExplaination,
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(fontSize: 16),
|
||||
),
|
||||
),
|
||||
Container(
|
||||
margin: EdgeInsets.all(_qrCodePadding),
|
||||
alignment: Alignment.center,
|
||||
padding: EdgeInsets.all(_qrCodePadding * 2),
|
||||
child: Material(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
elevation: 4,
|
||||
child: QrImage(
|
||||
data:
|
||||
'https://matrix.to/#/${Matrix.of(context).client.userID}',
|
||||
version: QrVersions.auto,
|
||||
size: qrCodeSize,
|
||||
),
|
||||
),
|
||||
),
|
||||
Divider(),
|
||||
ListTile(
|
||||
title: Text(L10n.of(context).shareYourInviteLink),
|
||||
trailing: Padding(
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
child: Icon(Icons.share_outlined),
|
||||
),
|
||||
onTap: controller.inviteAction,
|
||||
),
|
||||
Divider(),
|
||||
Padding(
|
||||
padding: EdgeInsets.all(12),
|
||||
child: Form(
|
||||
key: controller.formKey,
|
||||
child: TextFormField(
|
||||
controller: controller.controller,
|
||||
autocorrect: false,
|
||||
onChanged: controller.searchUserWithCoolDown,
|
||||
textInputAction: TextInputAction.go,
|
||||
onFieldSubmitted: controller.submitAction,
|
||||
validator: controller.validateForm,
|
||||
decoration: InputDecoration(
|
||||
labelText: L10n.of(context).enterAUsername,
|
||||
prefixIcon: controller.loading
|
||||
? Container(
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
width: 12,
|
||||
height: 12,
|
||||
child: CircularProgressIndicator(),
|
||||
)
|
||||
: controller.correctMxId
|
||||
? Padding(
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
child: Avatar(
|
||||
controller.foundProfile.avatarUrl,
|
||||
controller.foundProfile.displayName ??
|
||||
controller.foundProfile.userId,
|
||||
size: 12,
|
||||
),
|
||||
)
|
||||
: Icon(Icons.account_circle_outlined),
|
||||
prefixText: '@',
|
||||
labelText: L10n.of(context).typeInInviteLinkManually,
|
||||
hintText: '@username',
|
||||
prefixText: 'https://matrix.to/#/',
|
||||
suffixIcon: IconButton(
|
||||
icon: Icon(Icons.send_outlined),
|
||||
onPressed: controller.submitAction,
|
||||
icon: Icon(Icons.arrow_forward_outlined),
|
||||
),
|
||||
hintText: '${L10n.of(context).username.toLowerCase()}',
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Divider(height: 1),
|
||||
ListTile(
|
||||
leading: CircleAvatar(
|
||||
radius: Avatar.defaultSize / 2,
|
||||
foregroundColor: Theme.of(context).colorScheme.secondary,
|
||||
backgroundColor: Theme.of(context).secondaryHeaderColor,
|
||||
child: Icon(Icons.share_outlined),
|
||||
),
|
||||
onTap: controller.inviteAction,
|
||||
title: Text('${L10n.of(context).yourOwnUsername}:'),
|
||||
subtitle: Text(
|
||||
Matrix.of(context).client.userID,
|
||||
style:
|
||||
TextStyle(color: Theme.of(context).colorScheme.secondary),
|
||||
Center(
|
||||
child: Image.asset(
|
||||
'assets/private_chat_wallpaper.png',
|
||||
width: qrCodeSize,
|
||||
height: qrCodeSize,
|
||||
),
|
||||
),
|
||||
Divider(height: 1),
|
||||
if (controller.foundProfiles.isNotEmpty)
|
||||
Expanded(
|
||||
child: ListView.builder(
|
||||
itemCount: controller.foundProfiles.length,
|
||||
itemBuilder: (BuildContext context, int i) {
|
||||
final foundProfile = controller.foundProfiles[i];
|
||||
return ListTile(
|
||||
onTap: () => controller.pickUser(foundProfile),
|
||||
leading: Avatar(
|
||||
foundProfile.avatarUrl,
|
||||
foundProfile.displayName ?? foundProfile.userId,
|
||||
//size: 24,
|
||||
),
|
||||
title: Text(
|
||||
foundProfile.displayName ??
|
||||
foundProfile.userId.localpart,
|
||||
style: TextStyle(),
|
||||
maxLines: 1,
|
||||
),
|
||||
subtitle: Text(
|
||||
foundProfile.userId,
|
||||
maxLines: 1,
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
if (controller.foundProfiles.isEmpty)
|
||||
Expanded(
|
||||
child: ContactsList(searchController: controller.controller),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
floatingActionButton: FloatingActionButton.extended(
|
||||
onPressed: () {},
|
||||
label: Text(L10n.of(context).scanQrCode),
|
||||
icon: Icon(Icons.camera_alt_outlined),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
14
pubspec.lock
14
pubspec.lock
|
|
@ -1012,6 +1012,20 @@ packages:
|
|||
url: "https://pub.dartlang.org"
|
||||
source: hosted
|
||||
version: "1.0.0"
|
||||
qr:
|
||||
dependency: transitive
|
||||
description:
|
||||
name: qr
|
||||
url: "https://pub.dartlang.org"
|
||||
source: hosted
|
||||
version: "2.1.0"
|
||||
qr_flutter:
|
||||
dependency: "direct main"
|
||||
description:
|
||||
name: qr_flutter
|
||||
url: "https://pub.dartlang.org"
|
||||
source: hosted
|
||||
version: "4.0.0"
|
||||
quiver:
|
||||
dependency: transitive
|
||||
description:
|
||||
|
|
|
|||
|
|
@ -56,6 +56,7 @@ dependencies:
|
|||
pin_code_text_field: ^1.8.0
|
||||
provider: ^5.0.0
|
||||
punycode: ^1.0.0
|
||||
qr_flutter: ^4.0.0
|
||||
receive_sharing_intent: ^1.4.5
|
||||
record: ^3.0.0
|
||||
scroll_to_index: ^2.0.0
|
||||
|
|
|
|||
Loading…
Reference in New Issue