From 844155b01e8356ea1da297d3cd6349813b2a2ac7 Mon Sep 17 00:00:00 2001 From: ggurdin <46800240+ggurdin@users.noreply.github.com> Date: Tue, 3 Jun 2025 16:12:20 -0400 Subject: [PATCH] chore: update padding in navigation rail (#2919) --- lib/config/themes.dart | 5 ++- lib/pages/chat_list/navi_rail_item.dart | 51 ++++++++++++++------- lib/widgets/navigation_rail.dart | 59 +++++++++++++++---------- 3 files changed, 75 insertions(+), 40 deletions(-) diff --git a/lib/config/themes.dart b/lib/config/themes.dart index 728695131..e98624faa 100644 --- a/lib/config/themes.dart +++ b/lib/config/themes.dart @@ -7,7 +7,10 @@ import 'app_config.dart'; abstract class FluffyThemes { static const double columnWidth = 380.0; - static const double navRailWidth = 80.0; + // #Pangea + // static const double navRailWidth = 80.0; + static const double navRailWidth = 72.0; + // Pangea# static bool isColumnModeByWidth(double width) => width > columnWidth * 2 + navRailWidth; diff --git a/lib/pages/chat_list/navi_rail_item.dart b/lib/pages/chat_list/navi_rail_item.dart index 5b4677dd6..620d23cf2 100644 --- a/lib/pages/chat_list/navi_rail_item.dart +++ b/lib/pages/chat_list/navi_rail_item.dart @@ -3,7 +3,6 @@ import 'package:flutter/material.dart'; import 'package:badges/badges.dart'; import 'package:matrix/matrix.dart'; -import 'package:fluffychat/config/app_config.dart'; import 'package:fluffychat/widgets/hover_builder.dart'; import 'package:fluffychat/widgets/unread_rooms_badge.dart'; import '../../config/themes.dart'; @@ -35,14 +34,27 @@ class NaviRailItem extends StatelessWidget { Widget build(BuildContext context) { final theme = Theme.of(context); - final borderRadius = BorderRadius.circular(AppConfig.borderRadius); + // #Pangea + // final borderRadius = BorderRadius.circular(AppConfig.borderRadius); + final borderRadius = BorderRadius.circular(10.0); + + final isColumnMode = FluffyThemes.isColumnMode(context); + final width = isColumnMode + ? FluffyThemes.navRailWidth + : FluffyThemes.navRailWidth - 8.0; + // Pangea# final icon = isSelected ? selectedIcon ?? this.icon : this.icon; final unreadBadgeFilter = this.unreadBadgeFilter; return HoverBuilder( builder: (context, hovered) { + // #Pangea + // return SizedBox( + // height: 72, return SizedBox( - height: 72, - width: FluffyThemes.navRailWidth, + height: width - (isColumnMode ? 16.0 : 12.0), + width: width, + // width: FluffyThemes.navRailWidth, + // Pangea# child: Stack( children: [ Positioned( @@ -53,7 +65,7 @@ class NaviRailItem extends StatelessWidget { // #Pangea // width: isSelected ? 8 : 0, width: isSelected - ? FluffyThemes.isColumnMode(context) + ? isColumnMode ? 8 : 4 : 0, @@ -74,16 +86,25 @@ class NaviRailItem extends StatelessWidget { scale: hovered ? 1.1 : 1.0, duration: FluffyThemes.animationDuration, curve: FluffyThemes.animationCurve, - child: Material( - borderRadius: borderRadius, - // #Pangea - // color: isSelected - // ? theme.colorScheme.primaryContainer - // : theme.colorScheme.surfaceContainerHigh, - color: backgroundColor ?? - (isSelected - ? theme.colorScheme.primaryContainer - : theme.colorScheme.surfaceContainerHigh), + // #Pangea + // child: Material( + // borderRadius: borderRadius, + // color: isSelected + // ? theme.colorScheme.primaryContainer + // : theme.colorScheme.surfaceContainerHigh, + child: Container( + alignment: Alignment.center, + decoration: BoxDecoration( + color: backgroundColor ?? + (isSelected + ? theme.colorScheme.primaryContainer + : theme.colorScheme.surfaceContainerHigh), + borderRadius: borderRadius, + ), + margin: EdgeInsets.symmetric( + horizontal: isColumnMode ? 16.0 : 12.0, + vertical: isColumnMode ? 8.0 : 6.0, + ), // Pangea# child: Tooltip( message: toolTip, diff --git a/lib/widgets/navigation_rail.dart b/lib/widgets/navigation_rail.dart index 2599dcb15..7462caecb 100644 --- a/lib/widgets/navigation_rail.dart +++ b/lib/widgets/navigation_rail.dart @@ -44,6 +44,10 @@ class SpacesNavigationRail extends StatelessWidget { final isHomepage = path.contains('homepage'); final isCommunities = path.contains('communities'); final isColumnMode = FluffyThemes.isColumnMode(context); + + final width = isColumnMode + ? FluffyThemes.navRailWidth + : FluffyThemes.navRailWidth - 8.0; // return StreamBuilder( return Material( child: SafeArea( @@ -69,9 +73,7 @@ class SpacesNavigationRail extends StatelessWidget { return SizedBox( // #Pangea // width: FluffyThemes.navRailWidth, - width: isColumnMode - ? FluffyThemes.navRailWidth - : FluffyThemes.navRailWidth * 0.75, + width: width, // Pangea# child: Column( children: [ @@ -112,7 +114,8 @@ class SpacesNavigationRail extends StatelessWidget { mxContent: snapshot.data?.avatarUrl, name: snapshot.data?.displayName ?? client.userID!.localpart, - size: 45, + size: + width - (isColumnMode ? 32.0 : 24.0), ), ), ], @@ -135,14 +138,18 @@ class SpacesNavigationRail extends StatelessWidget { !isCommunities, // Pangea# onTap: onGoToChats, - 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), - ), + // #Pangea + // 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), + // ), + icon: const Icon(Icons.forum_outlined), + selectedIcon: const Icon(Icons.forum), + // Pangea# toolTip: L10n.of(context).chats, unreadBadgeFilter: (room) => true, ); @@ -163,10 +170,7 @@ class SpacesNavigationRail extends StatelessWidget { clearActiveSpace?.call(); context.go('/rooms/communities'); }, - icon: const Padding( - padding: EdgeInsets.all(10.0), - child: Icon(Icons.groups), - ), + icon: const Icon(Icons.groups), toolTip: L10n.of(context).findYourPeople, // Pangea# ); @@ -194,6 +198,9 @@ class SpacesNavigationRail extends StatelessWidget { borderRadius: BorderRadius.circular( AppConfig.borderRadius / 2, ), + // #Pangea + size: width - (isColumnMode ? 32.0 : 24.0), + // Pangea# ), ); }, @@ -202,14 +209,18 @@ class SpacesNavigationRail extends StatelessWidget { NaviRailItem( isSelected: isSettings, 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), - ), + // #Pangea + // 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), + // ), + icon: const Icon(Icons.settings_outlined), + selectedIcon: const Icon(Icons.settings), + // Pangea# toolTip: L10n.of(context).settings, ), ],