chore: Add unread badge to navigation rail and adjust design
This commit is contained in:
Christian Pauly
parent
cdd5a9e821
commit
17dc6ee3a8
8 changed files with 171 additions and 142 deletions
|
|
@ -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),
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
),
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue