chore: make space nav bar narrower on mobile and ensure space nav bar matches user's theme
This commit is contained in:
parent
87c2639625
commit
fef96359c9
3 changed files with 110 additions and 100 deletions
|
|
@ -44,7 +44,11 @@ class NaviRailItem extends StatelessWidget {
|
||||||
bottom: 8,
|
bottom: 8,
|
||||||
left: 0,
|
left: 0,
|
||||||
child: AnimatedContainer(
|
child: AnimatedContainer(
|
||||||
width: isSelected ? 8 : 0,
|
width: isSelected
|
||||||
|
? FluffyThemes.isColumnMode(context)
|
||||||
|
? 8
|
||||||
|
: 4
|
||||||
|
: 0,
|
||||||
duration: FluffyThemes.animationDuration,
|
duration: FluffyThemes.animationDuration,
|
||||||
curve: FluffyThemes.animationCurve,
|
curve: FluffyThemes.animationCurve,
|
||||||
decoration: BoxDecoration(
|
decoration: BoxDecoration(
|
||||||
|
|
|
||||||
|
|
@ -34,8 +34,7 @@ class SettingsView extends StatelessWidget {
|
||||||
?.tryGet<String>('account');
|
?.tryGet<String>('account');
|
||||||
return Row(
|
return Row(
|
||||||
children: [
|
children: [
|
||||||
if (FluffyThemes.isColumnMode(context) ||
|
if (FluffyThemes.isColumnMode(context)) ...[
|
||||||
AppConfig.displayNavigationRail) ...[
|
|
||||||
SpacesNavigationRail(
|
SpacesNavigationRail(
|
||||||
activeSpaceId: null,
|
activeSpaceId: null,
|
||||||
onGoToChats: () => context.go('/rooms'),
|
onGoToChats: () => context.go('/rooms'),
|
||||||
|
|
|
||||||
|
|
@ -33,105 +33,112 @@ class SpacesNavigationRail extends StatelessWidget {
|
||||||
.uri
|
.uri
|
||||||
.path
|
.path
|
||||||
.startsWith('/rooms/settings');
|
.startsWith('/rooms/settings');
|
||||||
return StreamBuilder(
|
return Material(
|
||||||
key: ValueKey(
|
child: SafeArea(
|
||||||
client.userID.toString(),
|
child: StreamBuilder(
|
||||||
),
|
key: ValueKey(
|
||||||
stream: client.onSync.stream
|
client.userID.toString(),
|
||||||
.where((s) => s.hasRoomUpdate)
|
|
||||||
.rateLimit(const Duration(seconds: 1)),
|
|
||||||
builder: (context, _) {
|
|
||||||
final allSpaces = client.rooms.where((room) => room.isSpace);
|
|
||||||
final rootSpaces = allSpaces
|
|
||||||
.where(
|
|
||||||
(space) => !allSpaces.any(
|
|
||||||
(parentSpace) => parentSpace.spaceChildren
|
|
||||||
.any((child) => child.roomId == space.id),
|
|
||||||
),
|
|
||||||
)
|
|
||||||
.toList();
|
|
||||||
|
|
||||||
return SizedBox(
|
|
||||||
width: FluffyThemes.navRailWidth,
|
|
||||||
child: Column(
|
|
||||||
children: [
|
|
||||||
Expanded(
|
|
||||||
child: ListView.builder(
|
|
||||||
scrollDirection: Axis.vertical,
|
|
||||||
itemCount: rootSpaces.length + 2,
|
|
||||||
itemBuilder: (context, i) {
|
|
||||||
if (i == 0) {
|
|
||||||
return NaviRailItem(
|
|
||||||
isSelected: activeSpaceId == null && !isSettings,
|
|
||||||
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),
|
|
||||||
),
|
|
||||||
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: activeSpaceId == space.id,
|
|
||||||
onTap: () => onGoToSpaceId(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: 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),
|
|
||||||
),
|
|
||||||
toolTip: L10n.of(context).settings,
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
),
|
||||||
);
|
stream: client.onSync.stream
|
||||||
},
|
.where((s) => s.hasRoomUpdate)
|
||||||
|
.rateLimit(const Duration(seconds: 1)),
|
||||||
|
builder: (context, _) {
|
||||||
|
final allSpaces = client.rooms.where((room) => room.isSpace);
|
||||||
|
final rootSpaces = allSpaces
|
||||||
|
.where(
|
||||||
|
(space) => !allSpaces.any(
|
||||||
|
(parentSpace) => parentSpace.spaceChildren
|
||||||
|
.any((child) => child.roomId == space.id),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
.toList();
|
||||||
|
|
||||||
|
return SizedBox(
|
||||||
|
width: FluffyThemes.isColumnMode(context)
|
||||||
|
? FluffyThemes.navRailWidth
|
||||||
|
: FluffyThemes.navRailWidth * 0.75,
|
||||||
|
child: Column(
|
||||||
|
children: [
|
||||||
|
Expanded(
|
||||||
|
child: ListView.builder(
|
||||||
|
scrollDirection: Axis.vertical,
|
||||||
|
itemCount: rootSpaces.length + 2,
|
||||||
|
itemBuilder: (context, i) {
|
||||||
|
if (i == 0) {
|
||||||
|
return NaviRailItem(
|
||||||
|
isSelected: activeSpaceId == null && !isSettings,
|
||||||
|
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),
|
||||||
|
),
|
||||||
|
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: activeSpaceId == space.id,
|
||||||
|
onTap: () => onGoToSpaceId(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: 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),
|
||||||
|
),
|
||||||
|
toolTip: L10n.of(context).settings,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue