2ndbeam/fluffychat-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: Adjust navrail design

Browse source
This commit is contained in:
Krille 2025-02-05 12:14:05 +01:00
commit 1147ddf91d
No known key found for this signature in database
GPG key ID: E067ECD60F1A0652
4 changed files with 105 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

2
lib/config/themes.dart
View file

@ -6,7 +6,7 @@ import 'app_config.dart';
abstract class FluffyThemes { abstract class FluffyThemes {
static const double columnWidth = 380.0; static const double columnWidth = 380.0;
static const double navRailWidth = 64.0; static const double navRailWidth = 80.0;
static bool isColumnModeByWidth(double width) => static bool isColumnModeByWidth(double width) =>
width > columnWidth * 2 + navRailWidth; width > columnWidth * 2 + navRailWidth;

123
lib/pages/chat_list/chat_list_view.dart
View file

@ -62,52 +62,85 @@ class ChatListView extends StatelessWidget {
return SizedBox( return SizedBox(
width: FluffyThemes.navRailWidth, width: FluffyThemes.navRailWidth,
child: ListView.builder( child: Column(
scrollDirection: Axis.vertical, children: [
itemCount: rootSpaces.length + 2, Expanded(
itemBuilder: (context, i) { child: ListView.builder(
if (i == 0) { scrollDirection: Axis.vertical,
return NaviRailItem( itemCount: rootSpaces.length + 2,
isSelected: controller.activeSpaceId == null, itemBuilder: (context, i) {
onTap: controller.clearActiveSpace, if (i == 0) {
icon: const Icon(Icons.forum_outlined), return NaviRailItem(
selectedIcon: const Icon(Icons.forum), isSelected: controller.activeSpaceId == null,
toolTip: L10n.of(context).chats, onTap: controller.clearActiveSpace,
unreadBadgeFilter: (room) => true, icon: const Padding(
); padding: EdgeInsets.all(10.0),
} child: Icon(Icons.forum_outlined),
i--; ),
if (i == rootSpaces.length) { selectedIcon: const Padding(
return NaviRailItem( padding: EdgeInsets.all(10.0),
isSelected: false, child: Icon(Icons.forum),
onTap: () => context.go('/rooms/newspace'), ),
icon: const Icon(Icons.add), toolTip: L10n.of(context).chats,
toolTip: L10n.of(context).createNewSpace, unreadBadgeFilter: (room) => true,
); );
} }
final space = rootSpaces[i]; i--;
final displayname = rootSpaces[i].getLocalizedDisplayname( if (i == rootSpaces.length) {
MatrixLocals(L10n.of(context)), return NaviRailItem(
); isSelected: false,
final spaceChildrenIds = onTap: () => context.go('/rooms/newspace'),
space.spaceChildren.map((c) => c.roomId).toSet(); icon: const Padding(
return NaviRailItem( padding: EdgeInsets.all(8.0),
toolTip: displayname, child: Icon(Icons.add),
isSelected: controller.activeSpaceId == space.id, ),
onTap: () => toolTip: L10n.of(context).createNewSpace,
controller.setActiveSpace(rootSpaces[i].id), );
unreadBadgeFilter: (room) => }
spaceChildrenIds.contains(room.id), final space = rootSpaces[i];
icon: Avatar( final displayname =
mxContent: rootSpaces[i].avatar, rootSpaces[i].getLocalizedDisplayname(
name: displayname, MatrixLocals(L10n.of(context)),
size: 32, );
borderRadius: BorderRadius.circular( final spaceChildrenIds = space.spaceChildren
AppConfig.borderRadius / 4, .map((c) => c.roomId)
), .toSet();
return NaviRailItem(
toolTip: displayname,
isSelected: controller.activeSpaceId == space.id,
onTap: () =>
controller.setActiveSpace(rootSpaces[i].id),
unreadBadgeFilter: (room) =>
spaceChildrenIds.contains(room.id),
icon: Avatar(
mxContent: rootSpaces[i].avatar,
name: displayname,
border: BorderSide(
width: 1,
color: Theme.of(context).dividerColor,
),
borderRadius: BorderRadius.circular(
AppConfig.borderRadius / 2,
),
),
);
},
), ),
); ),
}, NaviRailItem(
isSelected: false,
onTap: () => context.go('/rooms/settings'),
icon: const Padding(
padding: EdgeInsets.all(10.0),
child: Icon(Icons.settings_outlined),
),
selectedIcon: const Padding(
padding: EdgeInsets.all(10.0),
child: Icon(Icons.settings),
),
toolTip: L10n.of(context).settings,
),
],
), ),
); );
}, },

36
lib/pages/chat_list/navi_rail_item.dart
View file

@ -35,16 +35,16 @@ class NaviRailItem extends StatelessWidget {
return HoverBuilder( return HoverBuilder(
builder: (context, hovered) { builder: (context, hovered) {
return SizedBox( return SizedBox(
height: FluffyThemes.navRailWidth, height: 72,
width: FluffyThemes.navRailWidth, width: FluffyThemes.navRailWidth,
child: Stack( child: Stack(
children: [ children: [
Positioned( Positioned(
top: 16, top: 8,
bottom: 16, bottom: 8,
left: 0, left: 0,
child: AnimatedContainer( child: AnimatedContainer(
width: isSelected ? 4 : 0, width: isSelected ? 8 : 0,
duration: FluffyThemes.animationDuration, duration: FluffyThemes.animationDuration,
curve: FluffyThemes.animationCurve, curve: FluffyThemes.animationCurve,
decoration: BoxDecoration( decoration: BoxDecoration(
@ -58,35 +58,29 @@ class NaviRailItem extends StatelessWidget {
), ),
Center( Center(
child: AnimatedScale( child: AnimatedScale(
scale: hovered ? 1.2 : 1.0, scale: hovered ? 1.1 : 1.0,
duration: FluffyThemes.animationDuration, duration: FluffyThemes.animationDuration,
curve: FluffyThemes.animationCurve, curve: FluffyThemes.animationCurve,
child: Material( child: Material(
borderRadius: borderRadius, borderRadius: borderRadius,
color: isSelected color: isSelected
? theme.colorScheme.primaryContainer ? theme.colorScheme.primaryContainer
: theme.colorScheme.surface, : theme.colorScheme.surfaceBright,
child: Tooltip( child: Tooltip(
message: toolTip, message: toolTip,
child: InkWell( child: InkWell(
borderRadius: borderRadius, borderRadius: borderRadius,
onTap: onTap, onTap: onTap,
child: Padding( child: unreadBadgeFilter == null
padding: const EdgeInsets.symmetric( ? icon
horizontal: 8.0, : UnreadRoomsBadge(
vertical: 8.0, filter: unreadBadgeFilter,
), badgePosition: BadgePosition.topEnd(
child: unreadBadgeFilter == null top: -12,
? icon end: -8,
: UnreadRoomsBadge(
filter: unreadBadgeFilter,
badgePosition: BadgePosition.topEnd(
top: -12,
end: -8,
),
child: icon,
), ),
), child: icon,
),
), ),
), ),
), ),

17
lib/pages/chat_list/space_view.dart
View file

@ -7,6 +7,7 @@ import 'package:matrix/matrix.dart' as sdk;
import 'package:matrix/matrix.dart'; import 'package:matrix/matrix.dart';
import 'package:fluffychat/config/app_config.dart'; import 'package:fluffychat/config/app_config.dart';
import 'package:fluffychat/config/themes.dart';
import 'package:fluffychat/pages/chat_list/chat_list_item.dart'; import 'package:fluffychat/pages/chat_list/chat_list_item.dart';
import 'package:fluffychat/pages/chat_list/search_title.dart'; import 'package:fluffychat/pages/chat_list/search_title.dart';
import 'package:fluffychat/utils/adaptive_bottom_sheet.dart'; import 'package:fluffychat/utils/adaptive_bottom_sheet.dart';
@ -231,17 +232,21 @@ class _SpaceViewState extends State<SpaceView> {
room?.getLocalizedDisplayname() ?? L10n.of(context).nothingFound; room?.getLocalizedDisplayname() ?? L10n.of(context).nothingFound;
return Scaffold( return Scaffold(
appBar: AppBar( appBar: AppBar(
leading: Center( leading: FluffyThemes.isColumnMode(context)
child: CloseButton( ? null
onPressed: widget.onBack, : Center(
), child: CloseButton(
), onPressed: widget.onBack,
titleSpacing: 0, ),
),
automaticallyImplyLeading: false,
titleSpacing: FluffyThemes.isColumnMode(context) ? null : 0,
title: ListTile( title: ListTile(
contentPadding: EdgeInsets.zero, contentPadding: EdgeInsets.zero,
leading: Avatar( leading: Avatar(
mxContent: room?.avatar, mxContent: room?.avatar,
name: displayname, name: displayname,
border: BorderSide(width: 1, color: theme.dividerColor),
borderRadius: BorderRadius.circular(AppConfig.borderRadius / 2), borderRadius: BorderRadius.circular(AppConfig.borderRadius / 2),
), ),
title: Text( title: Text(