diff --git a/lib/config/themes.dart b/lib/config/themes.dart index 50416a3ed..dbb557ae3 100644 --- a/lib/config/themes.dart +++ b/lib/config/themes.dart @@ -6,7 +6,7 @@ import 'app_config.dart'; abstract class FluffyThemes { static const double columnWidth = 380.0; - static const double navRailWidth = 64.0; + static const double navRailWidth = 80.0; static bool isColumnModeByWidth(double width) => width > columnWidth * 2 + navRailWidth; diff --git a/lib/pages/chat_list/chat_list_view.dart b/lib/pages/chat_list/chat_list_view.dart index aecb98c15..81150cb20 100644 --- a/lib/pages/chat_list/chat_list_view.dart +++ b/lib/pages/chat_list/chat_list_view.dart @@ -62,52 +62,85 @@ class ChatListView extends StatelessWidget { return SizedBox( width: FluffyThemes.navRailWidth, - child: ListView.builder( - scrollDirection: Axis.vertical, - itemCount: rootSpaces.length + 2, - itemBuilder: (context, i) { - if (i == 0) { - return NaviRailItem( - isSelected: controller.activeSpaceId == null, - onTap: controller.clearActiveSpace, - icon: const Icon(Icons.forum_outlined), - selectedIcon: const Icon(Icons.forum), - toolTip: L10n.of(context).chats, - unreadBadgeFilter: (room) => true, - ); - } - i--; - if (i == rootSpaces.length) { - return NaviRailItem( - isSelected: false, - onTap: () => context.go('/rooms/newspace'), - icon: const Icon(Icons.add), - toolTip: L10n.of(context).createNewSpace, - ); - } - final space = rootSpaces[i]; - final displayname = rootSpaces[i].getLocalizedDisplayname( - MatrixLocals(L10n.of(context)), - ); - final spaceChildrenIds = - space.spaceChildren.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, - size: 32, - borderRadius: BorderRadius.circular( - AppConfig.borderRadius / 4, - ), + child: Column( + children: [ + Expanded( + child: ListView.builder( + scrollDirection: Axis.vertical, + itemCount: rootSpaces.length + 2, + itemBuilder: (context, i) { + if (i == 0) { + return NaviRailItem( + isSelected: controller.activeSpaceId == null, + onTap: controller.clearActiveSpace, + icon: const Padding( + padding: EdgeInsets.all(10.0), + child: Icon(Icons.forum_outlined), + ), + selectedIcon: const Padding( + padding: EdgeInsets.all(10.0), + child: Icon(Icons.forum), + ), + toolTip: L10n.of(context).chats, + unreadBadgeFilter: (room) => true, + ); + } + i--; + if (i == rootSpaces.length) { + return NaviRailItem( + isSelected: false, + onTap: () => context.go('/rooms/newspace'), + icon: const Padding( + padding: EdgeInsets.all(8.0), + child: Icon(Icons.add), + ), + toolTip: L10n.of(context).createNewSpace, + ); + } + final space = rootSpaces[i]; + final displayname = + rootSpaces[i].getLocalizedDisplayname( + MatrixLocals(L10n.of(context)), + ); + final spaceChildrenIds = space.spaceChildren + .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, + ), + ], ), ); }, diff --git a/lib/pages/chat_list/navi_rail_item.dart b/lib/pages/chat_list/navi_rail_item.dart index 77837bfef..acb29ab64 100644 --- a/lib/pages/chat_list/navi_rail_item.dart +++ b/lib/pages/chat_list/navi_rail_item.dart @@ -35,16 +35,16 @@ class NaviRailItem extends StatelessWidget { return HoverBuilder( builder: (context, hovered) { return SizedBox( - height: FluffyThemes.navRailWidth, + height: 72, width: FluffyThemes.navRailWidth, child: Stack( children: [ Positioned( - top: 16, - bottom: 16, + top: 8, + bottom: 8, left: 0, child: AnimatedContainer( - width: isSelected ? 4 : 0, + width: isSelected ? 8 : 0, duration: FluffyThemes.animationDuration, curve: FluffyThemes.animationCurve, decoration: BoxDecoration( @@ -58,35 +58,29 @@ class NaviRailItem extends StatelessWidget { ), Center( child: AnimatedScale( - scale: hovered ? 1.2 : 1.0, + scale: hovered ? 1.1 : 1.0, duration: FluffyThemes.animationDuration, curve: FluffyThemes.animationCurve, child: Material( borderRadius: borderRadius, color: isSelected ? theme.colorScheme.primaryContainer - : theme.colorScheme.surface, + : theme.colorScheme.surfaceBright, child: Tooltip( message: toolTip, child: InkWell( borderRadius: borderRadius, onTap: onTap, - child: Padding( - padding: const EdgeInsets.symmetric( - horizontal: 8.0, - vertical: 8.0, - ), - child: unreadBadgeFilter == null - ? icon - : UnreadRoomsBadge( - filter: unreadBadgeFilter, - badgePosition: BadgePosition.topEnd( - top: -12, - end: -8, - ), - child: icon, + child: unreadBadgeFilter == null + ? icon + : UnreadRoomsBadge( + filter: unreadBadgeFilter, + badgePosition: BadgePosition.topEnd( + top: -12, + end: -8, ), - ), + child: icon, + ), ), ), ), diff --git a/lib/pages/chat_list/space_view.dart b/lib/pages/chat_list/space_view.dart index 5d4f51f69..b39d96a6d 100644 --- a/lib/pages/chat_list/space_view.dart +++ b/lib/pages/chat_list/space_view.dart @@ -7,6 +7,7 @@ import 'package:matrix/matrix.dart' as sdk; import 'package:matrix/matrix.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/search_title.dart'; import 'package:fluffychat/utils/adaptive_bottom_sheet.dart'; @@ -231,17 +232,21 @@ class _SpaceViewState extends State { room?.getLocalizedDisplayname() ?? L10n.of(context).nothingFound; return Scaffold( appBar: AppBar( - leading: Center( - child: CloseButton( - onPressed: widget.onBack, - ), - ), - titleSpacing: 0, + leading: FluffyThemes.isColumnMode(context) + ? null + : Center( + child: CloseButton( + onPressed: widget.onBack, + ), + ), + automaticallyImplyLeading: false, + titleSpacing: FluffyThemes.isColumnMode(context) ? null : 0, title: ListTile( contentPadding: EdgeInsets.zero, leading: Avatar( mxContent: room?.avatar, name: displayname, + border: BorderSide(width: 1, color: theme.dividerColor), borderRadius: BorderRadius.circular(AppConfig.borderRadius / 2), ), title: Text(