Merge branch 'krille/new-experimental-design' into 'main'
feat: New experimental design See merge request famedly/fluffychat!387onboarding
Krille Fear
4 years ago
commit
d4cf12a9ea
@ -0,0 +1,65 @@
|
|||||||
|
import 'package:flutter/cupertino.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:adaptive_page_layout/adaptive_page_layout.dart';
|
||||||
|
import 'package:flutter_gen/gen_l10n/l10n.dart';
|
||||||
|
|
||||||
|
class DefaultBottomNavigationBar extends StatelessWidget {
|
||||||
|
final int currentIndex;
|
||||||
|
|
||||||
|
const DefaultBottomNavigationBar({Key key, this.currentIndex = 1})
|
||||||
|
: super(key: key);
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return BottomNavigationBar(
|
||||||
|
onTap: (i) {
|
||||||
|
if (i == currentIndex) return;
|
||||||
|
switch (i) {
|
||||||
|
case 0:
|
||||||
|
AdaptivePageLayout.of(context)
|
||||||
|
.pushNamedAndRemoveUntilIsFirst('/contacts');
|
||||||
|
break;
|
||||||
|
case 1:
|
||||||
|
AdaptivePageLayout.of(context).pushNamedAndRemoveAllOthers('/');
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
AdaptivePageLayout.of(context)
|
||||||
|
.pushNamedAndRemoveUntilIsFirst('/discover');
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
AdaptivePageLayout.of(context)
|
||||||
|
.pushNamedAndRemoveUntilIsFirst('/settings');
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
|
||||||
|
selectedItemColor: Theme.of(context).accentColor,
|
||||||
|
currentIndex: currentIndex,
|
||||||
|
//unselectedItemColor: Theme.of(context).textTheme.bodyText1.color,
|
||||||
|
type: BottomNavigationBarType.fixed,
|
||||||
|
showUnselectedLabels: false,
|
||||||
|
items: [
|
||||||
|
BottomNavigationBarItem(
|
||||||
|
icon: Icon(currentIndex == 0 ? Icons.people : Icons.people_outlined),
|
||||||
|
label: L10n.of(context).contacts,
|
||||||
|
),
|
||||||
|
BottomNavigationBarItem(
|
||||||
|
icon: Icon(currentIndex == 1
|
||||||
|
? CupertinoIcons.chat_bubble_2_fill
|
||||||
|
: CupertinoIcons.chat_bubble_2),
|
||||||
|
label: L10n.of(context).messages,
|
||||||
|
),
|
||||||
|
BottomNavigationBarItem(
|
||||||
|
icon: Icon(currentIndex == 2
|
||||||
|
? CupertinoIcons.compass_fill
|
||||||
|
: CupertinoIcons.compass),
|
||||||
|
label: L10n.of(context).discover,
|
||||||
|
),
|
||||||
|
BottomNavigationBarItem(
|
||||||
|
icon: Icon(
|
||||||
|
currentIndex == 3 ? Icons.settings : Icons.settings_outlined),
|
||||||
|
label: L10n.of(context).settings,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,162 +0,0 @@
|
|||||||
import 'dart:async';
|
|
||||||
|
|
||||||
import 'package:adaptive_dialog/adaptive_dialog.dart';
|
|
||||||
import 'package:famedlysdk/famedlysdk.dart';
|
|
||||||
import 'package:fluffychat/components/matrix.dart';
|
|
||||||
import 'package:flutter/material.dart';
|
|
||||||
import 'package:adaptive_page_layout/adaptive_page_layout.dart';
|
|
||||||
import '../utils/client_presence_extension.dart';
|
|
||||||
import '../utils/presence_extension.dart';
|
|
||||||
import 'package:flutter_gen/gen_l10n/l10n.dart';
|
|
||||||
import 'avatar.dart';
|
|
||||||
|
|
||||||
class HorizontalStoriesList extends StatefulWidget {
|
|
||||||
final String searchQuery;
|
|
||||||
|
|
||||||
const HorizontalStoriesList({Key key, this.searchQuery = ''})
|
|
||||||
: super(key: key);
|
|
||||||
@override
|
|
||||||
_HorizontalStoriesListState createState() => _HorizontalStoriesListState();
|
|
||||||
}
|
|
||||||
|
|
||||||
class _HorizontalStoriesListState extends State<HorizontalStoriesList> {
|
|
||||||
StreamSubscription _onSync;
|
|
||||||
|
|
||||||
@override
|
|
||||||
void dispose() {
|
|
||||||
_onSync?.cancel();
|
|
||||||
super.dispose();
|
|
||||||
}
|
|
||||||
|
|
||||||
DateTime _lastSetState = DateTime.now();
|
|
||||||
Timer _coolDown;
|
|
||||||
|
|
||||||
void _updateView() {
|
|
||||||
_lastSetState = DateTime.now();
|
|
||||||
setState(() => null);
|
|
||||||
}
|
|
||||||
|
|
||||||
static const double height = 68.0;
|
|
||||||
|
|
||||||
@override
|
|
||||||
Widget build(BuildContext context) {
|
|
||||||
_onSync ??= Matrix.of(context).client.onSync.stream.listen((_) {
|
|
||||||
if (DateTime.now().millisecondsSinceEpoch -
|
|
||||||
_lastSetState.millisecondsSinceEpoch <
|
|
||||||
1000) {
|
|
||||||
_coolDown?.cancel();
|
|
||||||
_coolDown = Timer(Duration(seconds: 1), _updateView);
|
|
||||||
} else {
|
|
||||||
_updateView();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
final contactList = Matrix.of(context)
|
|
||||||
.client
|
|
||||||
.contactList
|
|
||||||
.where((p) =>
|
|
||||||
p.senderId.toLowerCase().contains(widget.searchQuery.toLowerCase()))
|
|
||||||
.toList();
|
|
||||||
return AnimatedContainer(
|
|
||||||
height: contactList.isEmpty ? 0 : height,
|
|
||||||
duration: Duration(milliseconds: 300),
|
|
||||||
child: contactList.isEmpty
|
|
||||||
? null
|
|
||||||
: ListView.builder(
|
|
||||||
scrollDirection: Axis.horizontal,
|
|
||||||
itemCount: contactList.length,
|
|
||||||
itemBuilder: (context, i) =>
|
|
||||||
_StoriesListTile(story: contactList[i]),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class _StoriesListTile extends StatelessWidget {
|
|
||||||
final Presence story;
|
|
||||||
|
|
||||||
const _StoriesListTile({
|
|
||||||
Key key,
|
|
||||||
@required this.story,
|
|
||||||
}) : super(key: key);
|
|
||||||
@override
|
|
||||||
Widget build(BuildContext context) {
|
|
||||||
final hasStatusMessage = story.presence.statusMsg?.isNotEmpty ?? false;
|
|
||||||
return FutureBuilder<Profile>(
|
|
||||||
future: Matrix.of(context).client.getProfileFromUserId(story.senderId),
|
|
||||||
builder: (context, snapshot) {
|
|
||||||
final displayname =
|
|
||||||
snapshot.data?.displayname ?? story.senderId.localpart;
|
|
||||||
final avatarUrl = snapshot.data?.avatarUrl;
|
|
||||||
return Container(
|
|
||||||
width: Avatar.defaultSize + 32,
|
|
||||||
height: _HorizontalStoriesListState.height,
|
|
||||||
child: InkWell(
|
|
||||||
borderRadius: BorderRadius.circular(8),
|
|
||||||
onTap: () async {
|
|
||||||
if (story.senderId == Matrix.of(context).client.userID) {
|
|
||||||
await showOkAlertDialog(
|
|
||||||
context: context,
|
|
||||||
title: displayname,
|
|
||||||
message: story.presence.statusMsg,
|
|
||||||
okLabel: L10n.of(context).close,
|
|
||||||
);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (hasStatusMessage) {
|
|
||||||
if (OkCancelResult.ok !=
|
|
||||||
await showOkCancelAlertDialog(
|
|
||||||
context: context,
|
|
||||||
title: displayname,
|
|
||||||
message: story.presence.statusMsg,
|
|
||||||
okLabel: L10n.of(context).sendAMessage,
|
|
||||||
cancelLabel: L10n.of(context).close,
|
|
||||||
)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
final roomId = await Matrix.of(context)
|
|
||||||
.client
|
|
||||||
.startDirectChat(story.senderId);
|
|
||||||
await AdaptivePageLayout.of(context)
|
|
||||||
.pushNamedAndRemoveUntilIsFirst('/rooms/${roomId}');
|
|
||||||
},
|
|
||||||
child: Column(
|
|
||||||
crossAxisAlignment: CrossAxisAlignment.center,
|
|
||||||
mainAxisAlignment: MainAxisAlignment.center,
|
|
||||||
children: [
|
|
||||||
Container(
|
|
||||||
width: Avatar.defaultSize,
|
|
||||||
height: Avatar.defaultSize,
|
|
||||||
child: Stack(
|
|
||||||
children: [
|
|
||||||
Center(child: Avatar(avatarUrl, displayname)),
|
|
||||||
Align(
|
|
||||||
alignment: Alignment.bottomRight,
|
|
||||||
child: Icon(
|
|
||||||
Icons.circle,
|
|
||||||
color: story.color,
|
|
||||||
size: 12,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
Padding(
|
|
||||||
padding:
|
|
||||||
const EdgeInsets.only(left: 4.0, right: 4.0, top: 4.0),
|
|
||||||
child: Text(displayname.split(' ').first,
|
|
||||||
maxLines: 1,
|
|
||||||
style: TextStyle(
|
|
||||||
fontWeight: hasStatusMessage ? FontWeight.bold : null,
|
|
||||||
color: hasStatusMessage
|
|
||||||
? Theme.of(context).accentColor
|
|
||||||
: null,
|
|
||||||
)),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -0,0 +1,204 @@
|
|||||||
|
import 'dart:async';
|
||||||
|
|
||||||
|
import 'package:adaptive_dialog/adaptive_dialog.dart';
|
||||||
|
import 'package:famedlysdk/famedlysdk.dart';
|
||||||
|
import 'package:fluffychat/components/avatar.dart';
|
||||||
|
import 'package:fluffychat/components/default_app_bar_search_field.dart';
|
||||||
|
import 'package:fluffychat/components/default_bottom_navigation_bar.dart';
|
||||||
|
import 'package:fluffychat/components/matrix.dart';
|
||||||
|
import 'package:fluffychat/utils/fluffy_share.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:flutter_gen/gen_l10n/l10n.dart';
|
||||||
|
import 'package:future_loading_dialog/future_loading_dialog.dart';
|
||||||
|
import '../utils/client_presence_extension.dart';
|
||||||
|
import '../utils/presence_extension.dart';
|
||||||
|
import 'package:adaptive_page_layout/adaptive_page_layout.dart';
|
||||||
|
|
||||||
|
class Contacts extends StatefulWidget {
|
||||||
|
@override
|
||||||
|
_ContactsState createState() => _ContactsState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _ContactsState extends State<Contacts> {
|
||||||
|
StreamSubscription _onSync;
|
||||||
|
final TextEditingController _controller = TextEditingController();
|
||||||
|
|
||||||
|
@override
|
||||||
|
void dispose() {
|
||||||
|
_onSync?.cancel();
|
||||||
|
super.dispose();
|
||||||
|
}
|
||||||
|
|
||||||
|
DateTime _lastSetState = DateTime.now();
|
||||||
|
Timer _coolDown;
|
||||||
|
|
||||||
|
void _updateView() {
|
||||||
|
_lastSetState = DateTime.now();
|
||||||
|
setState(() => null);
|
||||||
|
}
|
||||||
|
|
||||||
|
void _setStatus(BuildContext context) async {
|
||||||
|
final input = await showTextInputDialog(
|
||||||
|
context: context,
|
||||||
|
title: L10n.of(context).setStatus,
|
||||||
|
okLabel: L10n.of(context).ok,
|
||||||
|
cancelLabel: L10n.of(context).cancel,
|
||||||
|
textFields: [
|
||||||
|
DialogTextField(
|
||||||
|
hintText: L10n.of(context).statusExampleMessage,
|
||||||
|
),
|
||||||
|
]);
|
||||||
|
if (input == null) return;
|
||||||
|
await showFutureLoadingDialog(
|
||||||
|
context: context,
|
||||||
|
future: () => Matrix.of(context).client.sendPresence(
|
||||||
|
Matrix.of(context).client.userID,
|
||||||
|
PresenceType.online,
|
||||||
|
statusMsg: input.single,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
_onSync ??= Matrix.of(context).client.onSync.stream.listen((_) {
|
||||||
|
if (DateTime.now().millisecondsSinceEpoch -
|
||||||
|
_lastSetState.millisecondsSinceEpoch <
|
||||||
|
1000) {
|
||||||
|
_coolDown?.cancel();
|
||||||
|
_coolDown = Timer(Duration(seconds: 1), _updateView);
|
||||||
|
} else {
|
||||||
|
_updateView();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
final contactList = Matrix.of(context)
|
||||||
|
.client
|
||||||
|
.contactList
|
||||||
|
.where((p) =>
|
||||||
|
p.senderId.toLowerCase().contains(_controller.text.toLowerCase()))
|
||||||
|
.toList();
|
||||||
|
return Scaffold(
|
||||||
|
appBar: AppBar(
|
||||||
|
automaticallyImplyLeading: false,
|
||||||
|
elevation: 1,
|
||||||
|
title: Text(L10n.of(context).contacts),
|
||||||
|
actions: [
|
||||||
|
TextButton.icon(
|
||||||
|
label: Text(
|
||||||
|
L10n.of(context).status,
|
||||||
|
style: TextStyle(color: Theme.of(context).accentColor),
|
||||||
|
),
|
||||||
|
icon:
|
||||||
|
Icon(Icons.edit_outlined, color: Theme.of(context).accentColor),
|
||||||
|
onPressed: () => _setStatus(context),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
body: ListView.builder(
|
||||||
|
itemCount: contactList.length + 1,
|
||||||
|
itemBuilder: (_, i) => i == 0
|
||||||
|
? Column(
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
children: [
|
||||||
|
Padding(
|
||||||
|
padding: EdgeInsets.all(12),
|
||||||
|
child: DefaultAppBarSearchField(
|
||||||
|
hintText: L10n.of(context).search,
|
||||||
|
prefixIcon: Icon(Icons.search_outlined),
|
||||||
|
searchController: _controller,
|
||||||
|
onChanged: (_) => setState(() => null),
|
||||||
|
padding: EdgeInsets.zero,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
ListTile(
|
||||||
|
leading: CircleAvatar(
|
||||||
|
radius: Avatar.defaultSize / 2,
|
||||||
|
child: Icon(Icons.person_add_outlined),
|
||||||
|
backgroundColor: Theme.of(context).primaryColor,
|
||||||
|
foregroundColor: Colors.white,
|
||||||
|
),
|
||||||
|
title: Text(L10n.of(context).addNewContact),
|
||||||
|
onTap: () => AdaptivePageLayout.of(context)
|
||||||
|
.pushNamed('/newprivatechat'),
|
||||||
|
),
|
||||||
|
Divider(height: 1),
|
||||||
|
if (contactList.isEmpty)
|
||||||
|
Column(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.center,
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
children: <Widget>[
|
||||||
|
SizedBox(height: 16),
|
||||||
|
Icon(
|
||||||
|
Icons.share_outlined,
|
||||||
|
size: 80,
|
||||||
|
color: Colors.grey,
|
||||||
|
),
|
||||||
|
Center(
|
||||||
|
child: RaisedButton(
|
||||||
|
elevation: 7,
|
||||||
|
color: Theme.of(context).scaffoldBackgroundColor,
|
||||||
|
shape: RoundedRectangleBorder(
|
||||||
|
borderRadius: BorderRadius.circular(6),
|
||||||
|
),
|
||||||
|
child: Text(
|
||||||
|
L10n.of(context).inviteContact,
|
||||||
|
style: TextStyle(
|
||||||
|
color: Theme.of(context).accentColor),
|
||||||
|
),
|
||||||
|
onPressed: () => FluffyShare.share(
|
||||||
|
L10n.of(context).inviteText(
|
||||||
|
Matrix.of(context).client.userID,
|
||||||
|
'https://matrix.to/#/${Matrix.of(context).client.userID}'),
|
||||||
|
context),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
],
|
||||||
|
)
|
||||||
|
: _ContactListTile(contact: contactList[i - 1]),
|
||||||
|
),
|
||||||
|
bottomNavigationBar: DefaultBottomNavigationBar(currentIndex: 0),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class _ContactListTile extends StatelessWidget {
|
||||||
|
final Presence contact;
|
||||||
|
|
||||||
|
const _ContactListTile({Key key, @required this.contact}) : super(key: key);
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return FutureBuilder<Profile>(
|
||||||
|
future:
|
||||||
|
Matrix.of(context).client.getProfileFromUserId(contact.senderId),
|
||||||
|
builder: (context, snapshot) {
|
||||||
|
final displayname =
|
||||||
|
snapshot.data?.displayname ?? contact.senderId.localpart;
|
||||||
|
final avatarUrl = snapshot.data?.avatarUrl;
|
||||||
|
return ListTile(
|
||||||
|
leading: Container(
|
||||||
|
width: Avatar.defaultSize,
|
||||||
|
height: Avatar.defaultSize,
|
||||||
|
child: Stack(
|
||||||
|
children: [
|
||||||
|
Center(child: Avatar(avatarUrl, displayname)),
|
||||||
|
Align(
|
||||||
|
alignment: Alignment.bottomRight,
|
||||||
|
child: Icon(
|
||||||
|
Icons.circle,
|
||||||
|
color: contact.color,
|
||||||
|
size: 12,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
title: Text(displayname),
|
||||||
|
subtitle: Text(contact.getLocalizedStatusMessage(context)),
|
||||||
|
onTap: () => AdaptivePageLayout.of(context).pushNamed(
|
||||||
|
'/rooms/${Matrix.of(context).client.getDirectChatFromUserId(contact.senderId)}'),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue