chore: update padding in navigation rail (#2919)
This commit is contained in:
parent
01d797e53f
commit
844155b01e
3 changed files with 75 additions and 40 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
),
|
||||
],
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue