chore: Adjust navrail design

pull/1595/head
Krille 9 months ago
parent f23e7f43b9
commit 1147ddf91d
No known key found for this signature in database
GPG Key ID: E067ECD60F1A0652

@ -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;

@ -62,6 +62,9 @@ class ChatListView extends StatelessWidget {
return SizedBox( return SizedBox(
width: FluffyThemes.navRailWidth, width: FluffyThemes.navRailWidth,
child: Column(
children: [
Expanded(
child: ListView.builder( child: ListView.builder(
scrollDirection: Axis.vertical, scrollDirection: Axis.vertical,
itemCount: rootSpaces.length + 2, itemCount: rootSpaces.length + 2,
@ -70,8 +73,14 @@ class ChatListView extends StatelessWidget {
return NaviRailItem( return NaviRailItem(
isSelected: controller.activeSpaceId == null, isSelected: controller.activeSpaceId == null,
onTap: controller.clearActiveSpace, onTap: controller.clearActiveSpace,
icon: const Icon(Icons.forum_outlined), icon: const Padding(
selectedIcon: const Icon(Icons.forum), 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, toolTip: L10n.of(context).chats,
unreadBadgeFilter: (room) => true, unreadBadgeFilter: (room) => true,
); );
@ -81,16 +90,21 @@ class ChatListView extends StatelessWidget {
return NaviRailItem( return NaviRailItem(
isSelected: false, isSelected: false,
onTap: () => context.go('/rooms/newspace'), onTap: () => context.go('/rooms/newspace'),
icon: const Icon(Icons.add), icon: const Padding(
padding: EdgeInsets.all(8.0),
child: Icon(Icons.add),
),
toolTip: L10n.of(context).createNewSpace, toolTip: L10n.of(context).createNewSpace,
); );
} }
final space = rootSpaces[i]; final space = rootSpaces[i];
final displayname = rootSpaces[i].getLocalizedDisplayname( final displayname =
rootSpaces[i].getLocalizedDisplayname(
MatrixLocals(L10n.of(context)), MatrixLocals(L10n.of(context)),
); );
final spaceChildrenIds = final spaceChildrenIds = space.spaceChildren
space.spaceChildren.map((c) => c.roomId).toSet(); .map((c) => c.roomId)
.toSet();
return NaviRailItem( return NaviRailItem(
toolTip: displayname, toolTip: displayname,
isSelected: controller.activeSpaceId == space.id, isSelected: controller.activeSpaceId == space.id,
@ -101,14 +115,33 @@ class ChatListView extends StatelessWidget {
icon: Avatar( icon: Avatar(
mxContent: rootSpaces[i].avatar, mxContent: rootSpaces[i].avatar,
name: displayname, name: displayname,
size: 32, border: BorderSide(
width: 1,
color: Theme.of(context).dividerColor,
),
borderRadius: BorderRadius.circular( borderRadius: BorderRadius.circular(
AppConfig.borderRadius / 4, 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,
),
],
),
); );
}, },
), ),

@ -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,24 +58,19 @@ 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(
padding: const EdgeInsets.symmetric(
horizontal: 8.0,
vertical: 8.0,
),
child: unreadBadgeFilter == null child: unreadBadgeFilter == null
? icon ? icon
: UnreadRoomsBadge( : UnreadRoomsBadge(
@ -91,7 +86,6 @@ class NaviRailItem extends StatelessWidget {
), ),
), ),
), ),
),
], ],
), ),
); );

@ -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)
? null
: Center(
child: CloseButton( child: CloseButton(
onPressed: widget.onBack, 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(

Loading…
Cancel
Save