coop-cloud-chaos-patchs
/
fluffychat
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: Add unread badge to navigation rail and adjust design

This commit is contained in:
Christian Pauly 2022-09-11 11:07:04 +02:00
parent dc0f067b0a
commit d6c7dadb24
8 changed files with 171 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
lib/config/themes.dart
View File

@ -4,7 +4,6 @@ import 'package:flutter/services.dart';
import 'package:vrouter/vrouter.dart';
import 'package:fluffychat/utils/platform_infos.dart';
import '../widgets/matrix.dart';
import 'app_config.dart';
abstract class FluffyThemes {
@ -16,9 +15,7 @@ abstract class FluffyThemes {
isColumnModeByWidth(MediaQuery.of(context).size.width);
static bool getDisplayNavigationRail(BuildContext context) =>
!VRouter.of(context).path.startsWith('/settings') &&
(Matrix.of(context).client.rooms.any((room) => room.isSpace) ||
AppConfig.separateChatTypes);
!VRouter.of(context).path.startsWith('/settings');
static const fallbackTextStyle = TextStyle(
fontFamily: 'Roboto',

9
lib/pages/chat/chat_view.dart
View File

@ -1,5 +1,6 @@
import 'package:flutter/material.dart';
import 'package:badges/badges.dart';
import 'package:desktop_drop/desktop_drop.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart';
import 'package:future_loading_dialog/future_loading_dialog.dart';
@ -19,7 +20,7 @@ import 'package:fluffychat/pages/chat/tombstone_display.dart';
import 'package:fluffychat/widgets/chat_settings_popup_menu.dart';
import 'package:fluffychat/widgets/connection_status_header.dart';
import 'package:fluffychat/widgets/matrix.dart';
import 'package:fluffychat/widgets/unread_badge_back_button.dart';
import 'package:fluffychat/widgets/unread_rooms_badge.dart';
import '../../utils/stream_extension.dart';
import '../../widgets/m2_popup_menu_button.dart';
import 'chat_emoji_picker.dart';
@ -179,7 +180,11 @@ class ChatView extends StatelessWidget {
tooltip: L10n.of(context)!.close,
color: Theme.of(context).colorScheme.primary,
)
: UnreadBadgeBackButton(roomId: controller.roomId!),
: UnreadRoomsBadge(
filter: (r) => r.id != controller.roomId!,
badgePosition: BadgePosition.topEnd(end: 8, top: 4),
child: const Center(child: BackButton()),
),
titleSpacing: 0,
title: ChatAppBarTitle(controller),
actions: _appBarActions(context),

67
lib/pages/chat_list/chat_list.dart
View File

@ -101,64 +101,55 @@ class ChatListController extends State<ChatList>
}
}
void onDestinationSelected(int? i) {
ActiveFilter getActiveFilterByDestination(int? i) {
switch (i) {
case 0:
if (AppConfig.separateChatTypes) {
setState(() {
activeFilter = ActiveFilter.groups;
});
} else {
setState(() {
activeFilter = ActiveFilter.allChats;
});
}
break;
case 1:
if (AppConfig.separateChatTypes) {
setState(() {
activeFilter = ActiveFilter.messages;
});
} else {
setState(() {
activeFilter = ActiveFilter.spaces;
});
return ActiveFilter.messages;
}
break;
return ActiveFilter.spaces;
case 2:
setState(() {
activeFilter = ActiveFilter.spaces;
});
break;
return ActiveFilter.spaces;
case 0:
default:
if (AppConfig.separateChatTypes) {
return ActiveFilter.groups;
}
return ActiveFilter.allChats;
}
}
void onDestinationSelected(int? i) {
setState(() {
activeFilter = getActiveFilterByDestination(i);
});
}
ActiveFilter activeFilter = AppConfig.separateChatTypes
? ActiveFilter.messages
: ActiveFilter.allChats;
List<Room> get filteredRooms {
final rooms = Matrix.of(context).client.rooms;
bool Function(Room) getRoomFilterByActiveFilter(ActiveFilter activeFilter) {
switch (activeFilter) {
case ActiveFilter.allChats:
return rooms
.where((room) => !room.isSpace && !room.isStoryRoom)
.toList();
return (room) => !room.isSpace && !room.isStoryRoom;
case ActiveFilter.groups:
return rooms
.where((room) =>
!room.isSpace && !room.isDirectChat && !room.isStoryRoom)
.toList();
return (room) =>
!room.isSpace && !room.isDirectChat && !room.isStoryRoom;
case ActiveFilter.messages:
return rooms
.where((room) =>
!room.isSpace && room.isDirectChat && !room.isStoryRoom)
.toList();
return (room) =>
!room.isSpace && room.isDirectChat && !room.isStoryRoom;
case ActiveFilter.spaces:
return rooms.where((room) => room.isSpace).toList();
return (r) => r.isSpace;
}
}
List<Room> get filteredRooms => Matrix.of(context)
.client
.rooms
.where(getRoomFilterByActiveFilter(activeFilter))
.toList();
bool isSearchMode = false;
Future<QueryPublicRoomsResponse>? publicRoomsResponse;
String? searchServer;

108
lib/pages/chat_list/chat_list_view.dart
View File

@ -1,6 +1,7 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:badges/badges.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart';
import 'package:keyboard_shortcuts/keyboard_shortcuts.dart';
import 'package:vrouter/vrouter.dart';
@ -9,6 +10,7 @@ import 'package:fluffychat/config/app_config.dart';
import 'package:fluffychat/config/themes.dart';
import 'package:fluffychat/pages/chat_list/chat_list.dart';
import 'package:fluffychat/widgets/avatar.dart';
import 'package:fluffychat/widgets/unread_rooms_badge.dart';
import '../../widgets/matrix.dart';
import 'chat_list_body.dart';
import 'chat_list_header.dart';
@ -19,32 +21,62 @@ class ChatListView extends StatelessWidget {
const ChatListView(this.controller, {Key? key}) : super(key: key);
List<NavigationDestination> getNavigationDestinations(BuildContext context) =>
[
if (AppConfig.separateChatTypes) ...[
NavigationDestination(
icon: const Icon(Icons.groups_outlined),
selectedIcon: const Icon(Icons.groups),
label: L10n.of(context)!.groups,
List<NavigationDestination> getNavigationDestinations(BuildContext context) {
final badgePosition = BadgePosition.topEnd(top: -12, end: -8);
return [
if (AppConfig.separateChatTypes) ...[
NavigationDestination(
icon: UnreadRoomsBadge(
badgePosition: badgePosition,
filter: controller.getRoomFilterByActiveFilter(ActiveFilter.groups),
child: const Icon(Icons.groups_outlined),
),
NavigationDestination(
icon: const Icon(Icons.chat_outlined),
selectedIcon: const Icon(Icons.chat),
label: L10n.of(context)!.messages,
selectedIcon: UnreadRoomsBadge(
badgePosition: badgePosition,
filter: controller.getRoomFilterByActiveFilter(ActiveFilter.groups),
child: const Icon(Icons.groups),
),
] else
NavigationDestination(
icon: const Icon(Icons.chat_outlined),
selectedIcon: const Icon(Icons.chat),
label: L10n.of(context)!.chats,
label: L10n.of(context)!.groups,
),
NavigationDestination(
icon: UnreadRoomsBadge(
badgePosition: badgePosition,
filter:
controller.getRoomFilterByActiveFilter(ActiveFilter.messages),
child: const Icon(Icons.chat_outlined),
),
if (controller.spaces.isNotEmpty)
const NavigationDestination(
icon: Icon(Icons.workspaces_outlined),
selectedIcon: Icon(Icons.workspaces),
label: 'Spaces',
selectedIcon: UnreadRoomsBadge(
badgePosition: badgePosition,
filter:
controller.getRoomFilterByActiveFilter(ActiveFilter.messages),
child: const Icon(Icons.chat),
),
];
label: L10n.of(context)!.messages,
),
] else
NavigationDestination(
icon: UnreadRoomsBadge(
badgePosition: badgePosition,
filter:
controller.getRoomFilterByActiveFilter(ActiveFilter.allChats),
child: const Icon(Icons.chat_outlined),
),
selectedIcon: UnreadRoomsBadge(
badgePosition: badgePosition,
filter:
controller.getRoomFilterByActiveFilter(ActiveFilter.allChats),
child: const Icon(Icons.chat),
),
label: L10n.of(context)!.chats,
),
if (controller.spaces.isNotEmpty)
const NavigationDestination(
icon: Icon(Icons.workspaces_outlined),
selectedIcon: Icon(Icons.workspaces),
label: 'Spaces',
),
];
}
@override
Widget build(BuildContext context) {
@ -102,11 +134,6 @@ class ChatListView extends StatelessWidget {
height: 64,
width: 64,
decoration: BoxDecoration(
color: isSelected
? Theme.of(context)
.colorScheme
.secondaryContainer
: Theme.of(context).colorScheme.background,
border: Border(
bottom: i == (destinations.length - 1)
? BorderSide(
@ -129,15 +156,21 @@ class ChatListView extends StatelessWidget {
alignment: Alignment.center,
child: IconButton(
color: isSelected
? Theme.of(context).colorScheme.primary
? Theme.of(context).colorScheme.secondary
: null,
icon: CircleAvatar(
backgroundColor: Theme.of(context)
.colorScheme
.secondaryContainer,
foregroundColor: Theme.of(context)
.colorScheme
.onSecondaryContainer,
backgroundColor: isSelected
? Theme.of(context).colorScheme.secondary
: Theme.of(context)
.colorScheme
.background,
foregroundColor: isSelected
? Theme.of(context)
.colorScheme
.onSecondary
: Theme.of(context)
.colorScheme
.onBackground,
child: i == controller.selectedIndex
? destinations[i].selectedIcon ??
destinations[i].icon
@ -156,15 +189,10 @@ class ChatListView extends StatelessWidget {
height: 64,
width: 64,
decoration: BoxDecoration(
color: isSelected
? Theme.of(context)
.colorScheme
.secondaryContainer
: Theme.of(context).colorScheme.background,
border: Border(
left: BorderSide(
color: isSelected
? Theme.of(context).colorScheme.primary
? Theme.of(context).colorScheme.secondary
: Colors.transparent,
width: 4,
),

58
lib/widgets/unread_badge_back_button.dart
View File

@ -1,58 +0,0 @@
import 'package:flutter/material.dart';
import 'package:matrix/matrix.dart';
import '../config/app_config.dart';
import 'matrix.dart';
class UnreadBadgeBackButton extends StatelessWidget {
final String roomId;
const UnreadBadgeBackButton({
Key? key,
required this.roomId,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Stack(
children: [
StreamBuilder(
stream: Matrix.of(context).client.onSync.stream,
builder: (context, _) {
final unreadCount = Matrix.of(context)
.client
.rooms
.where((r) =>
r.id != roomId &&
(r.isUnread || r.membership == Membership.invite))
.length;
return unreadCount > 0
? Align(
alignment: Alignment.bottomRight,
child: Container(
padding: const EdgeInsets.all(4),
margin: const EdgeInsets.only(bottom: 4, right: 8),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.primaryContainer,
borderRadius:
BorderRadius.circular(AppConfig.borderRadius),
),
child: Text(
'$unreadCount',
style: TextStyle(
fontSize: 12,
color: Theme.of(context)
.colorScheme
.onPrimaryContainer,
),
),
),
)
: Container();
}),
const Center(child: BackButton()),
],
);
}
}

58
lib/widgets/unread_rooms_badge.dart Normal file
View File

@ -0,0 +1,58 @@
import 'package:flutter/material.dart';
import 'package:badges/badges.dart';
import 'package:matrix/matrix.dart';
import 'matrix.dart';
class UnreadRoomsBadge extends StatelessWidget {
final bool Function(Room) filter;
final BadgePosition? badgePosition;
final Widget? child;
const UnreadRoomsBadge({
Key? key,
required this.filter,
this.badgePosition,
this.child,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return StreamBuilder(
stream: Matrix.of(context)
.client
.onSync
.stream
.where((syncUpdate) => syncUpdate.hasRoomUpdate),
builder: (context, _) {
final unreadCount = Matrix.of(context)
.client
.rooms
.where(filter)
.where((r) => (r.isUnread || r.membership == Membership.invite))
.length;
return Badge(
alignment: Alignment.bottomRight,
badgeContent: Text(
unreadCount.toString(),
style: TextStyle(
color: Theme.of(context).colorScheme.onPrimary,
fontSize: 12,
),
),
showBadge: unreadCount != 0,
animationType: BadgeAnimationType.scale,
badgeColor: Theme.of(context).colorScheme.primary,
position: badgePosition,
elevation: 4,
borderSide: BorderSide(
color: Theme.of(context).colorScheme.background,
width: 2,
strokeAlign: StrokeAlign.outside,
),
child: child,
);
});
}
}

7
pubspec.lock
View File

@ -85,6 +85,13 @@ packages:
url: "https://pub.dartlang.org"
source: hosted
version: "0.1.6+1"
badges:
dependency: "direct main"
description:
name: badges
url: "https://pub.dartlang.org"
source: hosted
version: "2.0.3"
base58check:
dependency: transitive
description:

1
pubspec.yaml
View File

@ -11,6 +11,7 @@ dependencies:
adaptive_theme: ^3.0.0
animations: ^2.0.2
async: ^2.8.2
badges: ^2.0.3
blurhash_dart: ^1.1.0
callkeep: ^0.3.2
chewie: ^1.2.2