feat: Display progress value for initial sync

pull/444/head
Krille 2 years ago
parent f4107a8344
commit 4f55561269

@ -32,6 +32,11 @@ class ChatListViewBody extends StatelessWidget {
final roomSearchResult = controller.roomSearchResult; final roomSearchResult = controller.roomSearchResult;
final userSearchResult = controller.userSearchResult; final userSearchResult = controller.userSearchResult;
final client = Matrix.of(context).client; final client = Matrix.of(context).client;
const dummyChatCount = 4;
final titleColor =
Theme.of(context).textTheme.bodyLarge!.color!.withAlpha(100);
final subtitleColor =
Theme.of(context).textTheme.bodyLarge!.color!.withAlpha(50);
return PageTransitionSwitcher( return PageTransitionSwitcher(
transitionBuilder: ( transitionBuilder: (
@ -65,157 +70,214 @@ class ChatListViewBody extends StatelessWidget {
key: Key(controller.activeSpaceId ?? 'Spaces'), key: Key(controller.activeSpaceId ?? 'Spaces'),
); );
} }
if (controller.waitForFirstSync && client.prevBatch != null) { final rooms = controller.filteredRooms;
final rooms = controller.filteredRooms; final displayStoriesHeader = {
final displayStoriesHeader = { ActiveFilter.allChats,
ActiveFilter.allChats, ActiveFilter.messages,
ActiveFilter.messages, }.contains(controller.activeFilter) &&
}.contains(controller.activeFilter) && client.storiesRooms.isNotEmpty;
client.storiesRooms.isNotEmpty; return SafeArea(
return SafeArea( child: CustomScrollView(
child: CustomScrollView( controller: controller.scrollController,
controller: controller.scrollController, slivers: [
slivers: [ ChatListHeader(controller: controller),
ChatListHeader(controller: controller), SliverList(
SliverList( delegate: SliverChildListDelegate(
delegate: SliverChildListDelegate( [
[ if (controller.isSearchMode) ...[
if (controller.isSearchMode) ...[ SearchTitle(
SearchTitle( title: L10n.of(context)!.publicRooms,
title: L10n.of(context)!.publicRooms, icon: const Icon(Icons.explore_outlined),
icon: const Icon(Icons.explore_outlined), ),
), AnimatedContainer(
AnimatedContainer( clipBehavior: Clip.hardEdge,
clipBehavior: Clip.hardEdge, decoration: const BoxDecoration(),
decoration: const BoxDecoration(), height: roomSearchResult == null ||
height: roomSearchResult == null || roomSearchResult.chunk.isEmpty
roomSearchResult.chunk.isEmpty ? 0
? 0 : 106,
: 106, duration: FluffyThemes.animationDuration,
duration: FluffyThemes.animationDuration, curve: FluffyThemes.animationCurve,
curve: FluffyThemes.animationCurve, child: roomSearchResult == null
child: roomSearchResult == null ? null
? null : ListView.builder(
: ListView.builder( scrollDirection: Axis.horizontal,
scrollDirection: Axis.horizontal, itemCount: roomSearchResult.chunk.length,
itemCount: roomSearchResult.chunk.length, itemBuilder: (context, i) => _SearchItem(
itemBuilder: (context, i) => _SearchItem( title: roomSearchResult.chunk[i].name ??
title: roomSearchResult.chunk[i].name ?? roomSearchResult.chunk[i].canonicalAlias
roomSearchResult.chunk[i] ?.localpart ??
.canonicalAlias?.localpart ?? L10n.of(context)!.group,
L10n.of(context)!.group, avatar: roomSearchResult.chunk[i].avatarUrl,
avatar: onPressed: () => showAdaptiveBottomSheet(
roomSearchResult.chunk[i].avatarUrl, context: context,
onPressed: () => showAdaptiveBottomSheet( builder: (c) => PublicRoomBottomSheet(
context: context, roomAlias: roomSearchResult
builder: (c) => PublicRoomBottomSheet( .chunk[i].canonicalAlias ??
roomAlias: roomSearchResult roomSearchResult.chunk[i].roomId,
.chunk[i].canonicalAlias ?? outerContext: context,
roomSearchResult.chunk[i].roomId, chunk: roomSearchResult.chunk[i],
outerContext: context,
chunk: roomSearchResult.chunk[i],
),
), ),
), ),
), ),
), ),
SearchTitle( ),
title: L10n.of(context)!.users, SearchTitle(
icon: const Icon(Icons.group_outlined), title: L10n.of(context)!.users,
), icon: const Icon(Icons.group_outlined),
AnimatedContainer( ),
clipBehavior: Clip.hardEdge, AnimatedContainer(
decoration: const BoxDecoration(), clipBehavior: Clip.hardEdge,
height: userSearchResult == null || decoration: const BoxDecoration(),
userSearchResult.results.isEmpty height: userSearchResult == null ||
? 0 userSearchResult.results.isEmpty
: 106, ? 0
duration: FluffyThemes.animationDuration, : 106,
curve: FluffyThemes.animationCurve, duration: FluffyThemes.animationDuration,
child: userSearchResult == null curve: FluffyThemes.animationCurve,
? null child: userSearchResult == null
: ListView.builder( ? null
scrollDirection: Axis.horizontal, : ListView.builder(
itemCount: userSearchResult.results.length, scrollDirection: Axis.horizontal,
itemBuilder: (context, i) => _SearchItem( itemCount: userSearchResult.results.length,
title: userSearchResult itemBuilder: (context, i) => _SearchItem(
.results[i].displayName ?? title: userSearchResult
userSearchResult .results[i].displayName ??
.results[i].userId.localpart ?? userSearchResult
L10n.of(context)!.unknownDevice, .results[i].userId.localpart ??
avatar: L10n.of(context)!.unknownDevice,
userSearchResult.results[i].avatarUrl, avatar:
onPressed: () => showAdaptiveBottomSheet( userSearchResult.results[i].avatarUrl,
context: context, onPressed: () => showAdaptiveBottomSheet(
builder: (c) => ProfileBottomSheet( context: context,
userId: userSearchResult builder: (c) => ProfileBottomSheet(
.results[i].userId, userId:
outerContext: context, userSearchResult.results[i].userId,
), outerContext: context,
), ),
), ),
), ),
),
),
SearchTitle(
title: L10n.of(context)!.stories,
icon: const Icon(Icons.camera_alt_outlined),
),
],
if (displayStoriesHeader)
StoriesHeader(
key: const Key('stories_header'),
filter: controller.searchController.text,
),
const ConnectionStatusHeader(),
AnimatedContainer(
height: controller.isTorBrowser ? 64 : 0,
duration: FluffyThemes.animationDuration,
curve: FluffyThemes.animationCurve,
clipBehavior: Clip.hardEdge,
decoration: const BoxDecoration(),
child: Material(
color: Theme.of(context).colorScheme.surface,
child: ListTile(
leading: const Icon(Icons.vpn_key),
title: Text(L10n.of(context)!.dehydrateTor),
subtitle: Text(L10n.of(context)!.dehydrateTorLong),
trailing: const Icon(Icons.chevron_right_outlined),
onTap: controller.dehydrate,
), ),
SearchTitle( ),
title: L10n.of(context)!.stories, ),
icon: const Icon(Icons.camera_alt_outlined), if (controller.isSearchMode)
), SearchTitle(
], title: L10n.of(context)!.chats,
if (displayStoriesHeader) icon: const Icon(Icons.forum_outlined),
StoriesHeader( ),
key: const Key('stories_header'), if (client.prevBatch != null &&
filter: controller.searchController.text, rooms.isEmpty &&
!controller.isSearchMode) ...[
Padding(
padding: const EdgeInsets.all(32.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
'assets/start_chat.png',
height: 256,
),
const Divider(height: 1),
],
), ),
const ConnectionStatusHeader(), ),
AnimatedContainer( Center(
height: controller.isTorBrowser ? 64 : 0, child: StartChatFloatingActionButton(
duration: FluffyThemes.animationDuration, activeFilter: controller.activeFilter,
curve: FluffyThemes.animationCurve, roomsIsEmpty: true,
clipBehavior: Clip.hardEdge, scrolledToTop: controller.scrolledToTop,
decoration: const BoxDecoration(),
child: Material(
color: Theme.of(context).colorScheme.surface,
child: ListTile(
leading: const Icon(Icons.vpn_key),
title: Text(L10n.of(context)!.dehydrateTor),
subtitle:
Text(L10n.of(context)!.dehydrateTorLong),
trailing:
const Icon(Icons.chevron_right_outlined),
onTap: controller.dehydrate,
),
), ),
), ),
if (controller.isSearchMode) ],
SearchTitle( ],
title: L10n.of(context)!.chats, ),
icon: const Icon(Icons.forum_outlined), ),
if (client.prevBatch == null)
SliverList(
delegate: SliverChildBuilderDelegate(
(context, i) => Opacity(
opacity: (dummyChatCount - i) / dummyChatCount,
child: ListTile(
leading: CircleAvatar(
backgroundColor: titleColor,
child: CircularProgressIndicator(
strokeWidth: 1,
color:
Theme.of(context).textTheme.bodyLarge!.color,
),
), ),
if (rooms.isEmpty && !controller.isSearchMode) ...[ title: Row(
Padding( children: [
padding: const EdgeInsets.all(32.0), Expanded(
child: Column( child: Container(
mainAxisAlignment: MainAxisAlignment.center, height: 14,
children: [ decoration: BoxDecoration(
Image.asset( color: titleColor,
'assets/start_chat.png', borderRadius: BorderRadius.circular(3),
height: 256, ),
), ),
const Divider(height: 1), ),
], const SizedBox(width: 36),
), Container(
height: 14,
width: 14,
decoration: BoxDecoration(
color: subtitleColor,
borderRadius: BorderRadius.circular(14),
),
),
const SizedBox(width: 12),
Container(
height: 14,
width: 14,
decoration: BoxDecoration(
color: subtitleColor,
borderRadius: BorderRadius.circular(14),
),
),
],
), ),
Center( subtitle: Container(
child: StartChatFloatingActionButton( decoration: BoxDecoration(
activeFilter: controller.activeFilter, color: subtitleColor,
roomsIsEmpty: true, borderRadius: BorderRadius.circular(3),
scrolledToTop: controller.scrolledToTop,
), ),
height: 12,
margin: const EdgeInsets.only(right: 22),
), ),
], ),
], ),
childCount: dummyChatCount,
), ),
), ),
if (client.prevBatch != null)
SliverList( SliverList(
delegate: SliverChildBuilderDelegate( delegate: SliverChildBuilderDelegate(
(BuildContext context, int i) { (BuildContext context, int i) {
@ -245,68 +307,7 @@ class ChatListViewBody extends StatelessWidget {
childCount: rooms.length, childCount: rooms.length,
), ),
), ),
], ],
),
);
}
const dummyChatCount = 5;
final titleColor =
Theme.of(context).textTheme.bodyLarge!.color!.withAlpha(100);
final subtitleColor =
Theme.of(context).textTheme.bodyLarge!.color!.withAlpha(50);
return ListView.builder(
key: const Key('dummychats'),
itemCount: dummyChatCount,
itemBuilder: (context, i) => Opacity(
opacity: (dummyChatCount - i) / dummyChatCount,
child: ListTile(
leading: CircleAvatar(
backgroundColor: titleColor,
child: CircularProgressIndicator(
strokeWidth: 1,
color: Theme.of(context).textTheme.bodyLarge!.color,
),
),
title: Row(
children: [
Expanded(
child: Container(
height: 14,
decoration: BoxDecoration(
color: titleColor,
borderRadius: BorderRadius.circular(3),
),
),
),
const SizedBox(width: 36),
Container(
height: 14,
width: 14,
decoration: BoxDecoration(
color: subtitleColor,
borderRadius: BorderRadius.circular(14),
),
),
const SizedBox(width: 12),
Container(
height: 14,
width: 14,
decoration: BoxDecoration(
color: subtitleColor,
borderRadius: BorderRadius.circular(14),
),
),
],
),
subtitle: Container(
decoration: BoxDecoration(
color: subtitleColor,
borderRadius: BorderRadius.circular(3),
),
height: 12,
margin: const EdgeInsets.only(right: 22),
),
),
), ),
); );
}, },

Loading…
Cancel
Save