refactor: room details page redesign
ggurdin
6 months ago
committed by
GitHub
parent
bbd3d29f55
commit
bc77056b96
@ -1,40 +0,0 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:flutter_gen/gen_l10n/l10n.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
|
||||
import 'package:fluffychat/pages/chat/chat.dart';
|
||||
import 'package:fluffychat/pangea/extensions/pangea_room_extension.dart';
|
||||
|
||||
class ActivityPlanPageLaunchIconButton extends StatelessWidget {
|
||||
const ActivityPlanPageLaunchIconButton({
|
||||
super.key,
|
||||
required this.controller,
|
||||
});
|
||||
|
||||
final ChatController controller;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
if (!controller.room.canSendDefaultStates) {
|
||||
return const SizedBox();
|
||||
}
|
||||
|
||||
return FutureBuilder<bool>(
|
||||
future: controller.room.isBotDM,
|
||||
builder: (BuildContext context, snapshot) {
|
||||
final isBotDM = snapshot.data;
|
||||
if (isBotDM == true || isBotDM == null) {
|
||||
return const SizedBox();
|
||||
}
|
||||
return IconButton(
|
||||
icon: const Icon(Icons.event_note_outlined),
|
||||
tooltip: L10n.of(context).activityPlannerTitle,
|
||||
onPressed: () {
|
||||
context.go('/rooms/${controller.room.id}/planner');
|
||||
},
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,71 +0,0 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:matrix/matrix.dart';
|
||||
|
||||
import 'package:fluffychat/pangea/spaces/pages/pangea_space_page_view.dart';
|
||||
import 'package:fluffychat/pangea/spaces/utils/load_participants_util.dart';
|
||||
|
||||
class PangeaSpacePage extends StatefulWidget {
|
||||
final Room space;
|
||||
|
||||
const PangeaSpacePage({
|
||||
required this.space,
|
||||
super.key,
|
||||
});
|
||||
|
||||
@override
|
||||
State<PangeaSpacePage> createState() => PangeaSpacePageState();
|
||||
}
|
||||
|
||||
class PangeaSpacePageState extends State<PangeaSpacePage> {
|
||||
bool expanded = true;
|
||||
|
||||
final TextEditingController searchController = TextEditingController();
|
||||
final FocusNode searchFocusNode = FocusNode();
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
searchController.addListener(() {
|
||||
if (mounted) {
|
||||
setState(() {});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
searchController.dispose();
|
||||
searchFocusNode.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
void startSearch() {
|
||||
setState(() {});
|
||||
searchFocusNode.requestFocus();
|
||||
}
|
||||
|
||||
void cancelSearch({bool unfocus = true}) {
|
||||
setState(() {
|
||||
searchController.clear();
|
||||
});
|
||||
if (unfocus) searchFocusNode.unfocus();
|
||||
}
|
||||
|
||||
void toggleExpanded() {
|
||||
setState(() {
|
||||
expanded = !expanded;
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return LoadParticipantsUtil(
|
||||
space: widget.space,
|
||||
builder: (util) => PangeaSpacePageView(
|
||||
this,
|
||||
participantsLoader: util,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,622 +0,0 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:collection/collection.dart';
|
||||
import 'package:flutter_gen/gen_l10n/l10n.dart';
|
||||
import 'package:flutter_linkify/flutter_linkify.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
import 'package:material_symbols_icons/symbols.dart';
|
||||
import 'package:matrix/matrix.dart';
|
||||
|
||||
import 'package:fluffychat/config/app_config.dart';
|
||||
import 'package:fluffychat/config/themes.dart';
|
||||
import 'package:fluffychat/pages/chat_details/participant_list_item.dart';
|
||||
import 'package:fluffychat/pangea/bot/utils/bot_name.dart';
|
||||
import 'package:fluffychat/pangea/spaces/pages/pangea_space_page.dart';
|
||||
import 'package:fluffychat/pangea/spaces/utils/load_participants_util.dart';
|
||||
import 'package:fluffychat/utils/fluffy_share.dart';
|
||||
import 'package:fluffychat/utils/matrix_sdk_extensions/matrix_locals.dart';
|
||||
import 'package:fluffychat/utils/url_launcher.dart';
|
||||
import 'package:fluffychat/widgets/adaptive_dialogs/user_dialog.dart';
|
||||
import 'package:fluffychat/widgets/avatar.dart';
|
||||
import 'package:fluffychat/widgets/layouts/max_width_body.dart';
|
||||
|
||||
class PangeaSpacePageView extends StatelessWidget {
|
||||
final PangeaSpacePageState controller;
|
||||
final LoadParticipantsUtilState participantsLoader;
|
||||
const PangeaSpacePageView(
|
||||
this.controller, {
|
||||
required this.participantsLoader,
|
||||
super.key,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final room = controller.widget.space;
|
||||
|
||||
final displayname = room.getLocalizedDisplayname(
|
||||
MatrixLocals(L10n.of(context)),
|
||||
);
|
||||
|
||||
final filteredParticipants = participantsLoader
|
||||
.filteredParticipants("")
|
||||
.where((u) => u.id != BotName.byEnvironment)
|
||||
.toList();
|
||||
|
||||
final bool showMedals = !participantsLoader.loading &&
|
||||
controller.searchController.text.isEmpty &&
|
||||
filteredParticipants.isNotEmpty;
|
||||
|
||||
final Widget leaderboardHeader = ListTile(
|
||||
tileColor: Color.lerp(AppConfig.gold, Colors.black, 0.3),
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 16.0),
|
||||
visualDensity: const VisualDensity(vertical: -4.0),
|
||||
title: Text(
|
||||
L10n.of(context).leaderboard,
|
||||
style: Theme.of(context).textTheme.headlineSmall,
|
||||
),
|
||||
trailing: Icon(
|
||||
controller.expanded
|
||||
? Icons.keyboard_arrow_down_outlined
|
||||
: Icons.keyboard_arrow_right_outlined,
|
||||
),
|
||||
onTap: controller.toggleExpanded,
|
||||
);
|
||||
|
||||
return LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
automaticallyImplyLeading: false,
|
||||
elevation: theme.appBarTheme.elevation,
|
||||
backgroundColor: theme.appBarTheme.backgroundColor,
|
||||
actions: [
|
||||
IconButton(
|
||||
icon: const Icon(Icons.settings_outlined),
|
||||
onPressed: () => context.go(
|
||||
'/rooms/${room.id}/details',
|
||||
),
|
||||
),
|
||||
],
|
||||
shape: Border(
|
||||
bottom: BorderSide(
|
||||
color: theme.dividerColor,
|
||||
),
|
||||
),
|
||||
),
|
||||
body: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Expanded(
|
||||
child: MaxWidthBody(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: <Widget>[
|
||||
Row(
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(32.0),
|
||||
child: Avatar(
|
||||
mxContent: room.avatar,
|
||||
name: displayname,
|
||||
size: Avatar.defaultSize * 2.5,
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
TextButton.icon(
|
||||
onPressed: () => FluffyShare.share(
|
||||
displayname,
|
||||
context,
|
||||
copyOnly: true,
|
||||
),
|
||||
icon: const Icon(
|
||||
Icons.copy_outlined,
|
||||
size: 16,
|
||||
),
|
||||
style: TextButton.styleFrom(
|
||||
foregroundColor:
|
||||
theme.colorScheme.onSurface,
|
||||
),
|
||||
label: Text(
|
||||
displayname,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(fontSize: 18),
|
||||
),
|
||||
),
|
||||
Row(
|
||||
spacing: 8.0,
|
||||
children: [
|
||||
TextButton.icon(
|
||||
onPressed: () => context.push(
|
||||
'/rooms/${room.id}/details/members',
|
||||
),
|
||||
icon: const Icon(
|
||||
Icons.group_outlined,
|
||||
size: 14,
|
||||
),
|
||||
style: TextButton.styleFrom(
|
||||
foregroundColor:
|
||||
theme.colorScheme.secondary,
|
||||
),
|
||||
label: Text(
|
||||
L10n.of(context).countParticipants(
|
||||
(room.summary.mInvitedMemberCount ??
|
||||
0) +
|
||||
(room.summary
|
||||
.mJoinedMemberCount ??
|
||||
0),
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
TextButton.icon(
|
||||
onPressed: () => context.push(
|
||||
'/rooms/${room.id}/details/invite',
|
||||
),
|
||||
icon: const Icon(
|
||||
Icons.group_add_outlined,
|
||||
size: 14,
|
||||
),
|
||||
style: TextButton.styleFrom(
|
||||
foregroundColor:
|
||||
theme.colorScheme.secondary,
|
||||
),
|
||||
label: Text(
|
||||
L10n.of(context).invite,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
Divider(color: theme.dividerColor, height: 1),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
left: 24.0,
|
||||
right: 24.0,
|
||||
top: 16.0,
|
||||
bottom: 16.0,
|
||||
),
|
||||
child: SelectableLinkify(
|
||||
text: room.topic.isEmpty
|
||||
? room.isSpace
|
||||
? L10n.of(context).noSpaceDescriptionYet
|
||||
: L10n.of(context).noChatDescriptionYet
|
||||
: room.topic,
|
||||
options: const LinkifyOptions(humanize: false),
|
||||
linkStyle: const TextStyle(
|
||||
color: Colors.blueAccent,
|
||||
decorationColor: Colors.blueAccent,
|
||||
),
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
fontStyle: room.topic.isEmpty
|
||||
? FontStyle.italic
|
||||
: FontStyle.normal,
|
||||
color: theme.textTheme.bodyMedium!.color,
|
||||
decorationColor: theme.textTheme.bodyMedium!.color,
|
||||
),
|
||||
onOpen: (url) =>
|
||||
UrlLauncher(context, url.url).launchUrl(),
|
||||
),
|
||||
),
|
||||
if (constraints.maxWidth <= 800) leaderboardHeader,
|
||||
if (constraints.maxWidth <= 800 && controller.expanded)
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: Row(
|
||||
spacing: 16.0,
|
||||
children: [
|
||||
SizedBox(
|
||||
width: 200.0,
|
||||
child: LeaderboardMedals(
|
||||
isVisible: showMedals,
|
||||
participants: filteredParticipants,
|
||||
smallRadius: Avatar.defaultSize * 0.7,
|
||||
largeRadius: Avatar.defaultSize,
|
||||
),
|
||||
),
|
||||
if (filteredParticipants.isNotEmpty)
|
||||
Expanded(
|
||||
child: Column(
|
||||
children: filteredParticipants
|
||||
.take(3)
|
||||
.mapIndexed((i, user) {
|
||||
return TrophyParticipantListItem(
|
||||
index: i,
|
||||
user: user,
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
if (constraints.maxWidth > 800)
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
border: Border(
|
||||
left: BorderSide(
|
||||
color: theme.dividerColor,
|
||||
width: 1.0,
|
||||
),
|
||||
),
|
||||
),
|
||||
width: 350.0,
|
||||
child: Column(
|
||||
spacing: 16.0,
|
||||
children: [
|
||||
leaderboardHeader,
|
||||
if (controller.expanded)
|
||||
Expanded(
|
||||
child: Column(
|
||||
children: [
|
||||
LeaderboardMedals(
|
||||
isVisible: showMedals,
|
||||
participants: filteredParticipants,
|
||||
padding: EdgeInsets.only(
|
||||
top: showMedals ? 16.0 : 0,
|
||||
left: showMedals ? 42.0 : 0,
|
||||
right: showMedals ? 42.0 : 0,
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: Column(
|
||||
children: [
|
||||
Row(
|
||||
mainAxisAlignment:
|
||||
MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 8.0,
|
||||
),
|
||||
child: participantsLoader.loading
|
||||
? const CircularProgressIndicator
|
||||
.adaptive()
|
||||
: Text(
|
||||
L10n.of(context)
|
||||
.countParticipants(
|
||||
participantsLoader
|
||||
.participants.length,
|
||||
),
|
||||
),
|
||||
),
|
||||
IconButton(
|
||||
icon: const Icon(
|
||||
Icons.group_add_outlined,
|
||||
),
|
||||
iconSize: 20.0,
|
||||
onPressed: () => context.push(
|
||||
'/rooms/${room.id}/details/members',
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
TextField(
|
||||
controller: controller.searchController,
|
||||
focusNode: controller.searchFocusNode,
|
||||
textInputAction: TextInputAction.search,
|
||||
decoration: InputDecoration(
|
||||
filled: true,
|
||||
fillColor: theme
|
||||
.colorScheme.secondaryContainer,
|
||||
border: OutlineInputBorder(
|
||||
borderSide: BorderSide.none,
|
||||
borderRadius:
|
||||
BorderRadius.circular(99),
|
||||
),
|
||||
contentPadding: EdgeInsets.zero,
|
||||
hintText: L10n.of(context).search,
|
||||
hintStyle: TextStyle(
|
||||
color: theme
|
||||
.colorScheme.onPrimaryContainer,
|
||||
fontWeight: FontWeight.normal,
|
||||
),
|
||||
prefixIcon: controller.searchController
|
||||
.text.isNotEmpty
|
||||
? IconButton(
|
||||
tooltip:
|
||||
L10n.of(context).cancel,
|
||||
icon: const Icon(
|
||||
Icons.close_outlined,
|
||||
),
|
||||
onPressed:
|
||||
controller.cancelSearch,
|
||||
color: theme.colorScheme
|
||||
.onPrimaryContainer,
|
||||
)
|
||||
: IconButton(
|
||||
onPressed:
|
||||
controller.startSearch,
|
||||
icon: Icon(
|
||||
Icons.search_outlined,
|
||||
color: theme.colorScheme
|
||||
.onPrimaryContainer,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: Builder(
|
||||
builder: (context) {
|
||||
if (participantsLoader.loading) {
|
||||
return const Column(
|
||||
children: [
|
||||
CircularProgressIndicator.adaptive(),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
if (participantsLoader.error != null) {
|
||||
return Text(
|
||||
L10n.of(context).oopsSomethingWentWrong,
|
||||
style: TextStyle(
|
||||
color: theme.colorScheme.error,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return ListView.builder(
|
||||
itemCount: filteredParticipants.length,
|
||||
itemBuilder: (context, index) {
|
||||
return TrophyParticipantListItem(
|
||||
index: index,
|
||||
user: filteredParticipants[index],
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class LeaderboardMedal extends StatelessWidget {
|
||||
final User user;
|
||||
final Color color;
|
||||
final double radius;
|
||||
final double iconSize;
|
||||
final double iconRadius;
|
||||
|
||||
final double? top;
|
||||
final double? left;
|
||||
final double? right;
|
||||
final double? bottom;
|
||||
|
||||
const LeaderboardMedal(
|
||||
this.user, {
|
||||
required this.color,
|
||||
required this.radius,
|
||||
required this.iconSize,
|
||||
required this.iconRadius,
|
||||
this.top,
|
||||
this.left,
|
||||
this.right,
|
||||
this.bottom,
|
||||
super.key,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Stack(
|
||||
children: [
|
||||
Positioned(
|
||||
top: top,
|
||||
left: left,
|
||||
right: right,
|
||||
bottom: bottom != null ? bottom! + 10.0 : null,
|
||||
child: CircleAvatar(
|
||||
radius: radius + 3.0,
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
gradient: LinearGradient(
|
||||
begin: const Alignment(0.5, -0.5),
|
||||
end: const Alignment(-0.5, 0.5),
|
||||
colors: <Color>[
|
||||
color,
|
||||
Colors.white,
|
||||
color,
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Positioned(
|
||||
top: top != null ? 3.0 : null,
|
||||
left: left != null ? 3.0 : null,
|
||||
right: right != null ? 3.0 : null,
|
||||
bottom: bottom != null ? bottom! + 10.0 + 3.0 : null,
|
||||
child: MouseRegion(
|
||||
cursor: SystemMouseCursors.click,
|
||||
child: GestureDetector(
|
||||
onTap: () => UserDialog.show(
|
||||
context: context,
|
||||
profile: Profile(
|
||||
userId: user.id,
|
||||
displayName: user.displayName,
|
||||
avatarUrl: user.avatarUrl,
|
||||
),
|
||||
),
|
||||
child: Center(
|
||||
child: Avatar(
|
||||
mxContent: user.avatarUrl,
|
||||
name: user.calcDisplayname(),
|
||||
size: radius * 2,
|
||||
presenceUserId: user.id,
|
||||
showPresence: false,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Positioned(
|
||||
top: top != null ? ((radius + 3.0) * 2) - iconRadius : null,
|
||||
left: left != null ? radius + 3.0 - iconRadius : null,
|
||||
right: right != null ? radius + 3.0 - iconRadius : null,
|
||||
bottom: bottom,
|
||||
child: CircleAvatar(
|
||||
backgroundColor: color,
|
||||
radius: iconRadius,
|
||||
child: Icon(
|
||||
Symbols.trophy,
|
||||
color: Colors.white,
|
||||
size: iconSize,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class LeaderboardMedals extends StatelessWidget {
|
||||
final bool isVisible;
|
||||
final List<User> participants;
|
||||
final EdgeInsets? padding;
|
||||
|
||||
final double? largeRadius;
|
||||
final double? smallRadius;
|
||||
|
||||
const LeaderboardMedals({
|
||||
super.key,
|
||||
required this.isVisible,
|
||||
required this.participants,
|
||||
this.largeRadius,
|
||||
this.smallRadius,
|
||||
this.padding,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return AnimatedContainer(
|
||||
duration: FluffyThemes.animationDuration,
|
||||
height: isVisible ? Avatar.defaultSize * 3.5 : 0.0,
|
||||
// padding: EdgeInsets.only(
|
||||
// top: isVisible ? 16.0 : 0,
|
||||
// left: isVisible ? 42.0 : 0,
|
||||
// right: isVisible ? 42.0 : 0,
|
||||
// ),
|
||||
padding: padding,
|
||||
child: !isVisible
|
||||
? const SizedBox.shrink()
|
||||
: Stack(
|
||||
children: [
|
||||
if (participants.length > 1)
|
||||
LeaderboardMedal(
|
||||
participants[1],
|
||||
color: Colors.grey[400]!,
|
||||
radius: smallRadius ?? Avatar.defaultSize * 0.75,
|
||||
iconSize: 16.0,
|
||||
iconRadius: 10.0,
|
||||
bottom: 0.0,
|
||||
left: 0.0,
|
||||
),
|
||||
if (participants.isNotEmpty)
|
||||
LeaderboardMedal(
|
||||
participants[0],
|
||||
color: AppConfig.gold,
|
||||
radius: largeRadius ?? Avatar.defaultSize * 1.25,
|
||||
iconSize: 20.0,
|
||||
iconRadius: 16.0,
|
||||
top: 0.0,
|
||||
right: 0.0,
|
||||
left: 0.0,
|
||||
),
|
||||
if (participants.length > 2)
|
||||
LeaderboardMedal(
|
||||
participants[2],
|
||||
color: Colors.brown[400]!,
|
||||
radius: smallRadius ?? Avatar.defaultSize * 0.75,
|
||||
bottom: 0.0,
|
||||
right: 0.0,
|
||||
iconSize: 16.0,
|
||||
iconRadius: 10.0,
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class TrophyParticipantListItem extends StatelessWidget {
|
||||
final int index;
|
||||
final User user;
|
||||
|
||||
const TrophyParticipantListItem({
|
||||
required this.index,
|
||||
required this.user,
|
||||
super.key,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return InkWell(
|
||||
onTap: () => UserDialog.show(
|
||||
context: context,
|
||||
profile: Profile(
|
||||
userId: user.id,
|
||||
displayName: user.displayName,
|
||||
avatarUrl: user.avatarUrl,
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Container(
|
||||
alignment: Alignment.centerRight,
|
||||
width: 32.0,
|
||||
child: (index < 3)
|
||||
? Icon(
|
||||
Symbols.trophy,
|
||||
color: index == 0
|
||||
? AppConfig.gold
|
||||
: index == 1
|
||||
? Colors.grey[400]
|
||||
: index == 2
|
||||
? Colors.brown[400]
|
||||
: null,
|
||||
)
|
||||
: null,
|
||||
),
|
||||
Expanded(
|
||||
child: AbsorbPointer(
|
||||
child: ParticipantListItem(user),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,96 +0,0 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:collection/collection.dart';
|
||||
import 'package:flutter_gen/gen_l10n/l10n.dart';
|
||||
import 'package:matrix/matrix.dart';
|
||||
|
||||
import 'package:fluffychat/config/app_config.dart';
|
||||
import 'package:fluffychat/config/themes.dart';
|
||||
import 'package:fluffychat/pangea/bot/utils/bot_name.dart';
|
||||
import 'package:fluffychat/pangea/spaces/pages/pangea_space_page_view.dart';
|
||||
import 'package:fluffychat/pangea/spaces/utils/load_participants_util.dart';
|
||||
import 'package:fluffychat/widgets/avatar.dart';
|
||||
|
||||
class SpaceViewLeaderboard extends StatefulWidget {
|
||||
final Room space;
|
||||
|
||||
const SpaceViewLeaderboard({
|
||||
required this.space,
|
||||
super.key,
|
||||
});
|
||||
|
||||
@override
|
||||
State<SpaceViewLeaderboard> createState() => SpaceViewLeaderboardState();
|
||||
}
|
||||
|
||||
class SpaceViewLeaderboardState extends State<SpaceViewLeaderboard> {
|
||||
bool _expanded = true;
|
||||
|
||||
void _toggleExpanded() {
|
||||
setState(() => _expanded = !_expanded);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
if (FluffyThemes.isColumnMode(context)) {
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
|
||||
return LoadParticipantsUtil(
|
||||
space: widget.space,
|
||||
builder: (participantsLoader) {
|
||||
final filteredParticipants = participantsLoader
|
||||
.filteredParticipants("")
|
||||
.where((u) => u.id != BotName.byEnvironment)
|
||||
.toList();
|
||||
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
spacing: 16.0,
|
||||
children: [
|
||||
ListTile(
|
||||
tileColor: Color.lerp(AppConfig.gold, Colors.black, 0.3),
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 16.0),
|
||||
visualDensity: const VisualDensity(vertical: -4.0),
|
||||
title: Text(
|
||||
L10n.of(context).leaderboard,
|
||||
style: Theme.of(context).textTheme.headlineSmall,
|
||||
),
|
||||
trailing: Icon(
|
||||
_expanded
|
||||
? Icons.keyboard_arrow_down_outlined
|
||||
: Icons.keyboard_arrow_right_outlined,
|
||||
),
|
||||
onTap: _toggleExpanded,
|
||||
),
|
||||
if (_expanded)
|
||||
Column(
|
||||
children: [
|
||||
SizedBox(
|
||||
width: 225.0,
|
||||
child: LeaderboardMedals(
|
||||
isVisible: !participantsLoader.loading &&
|
||||
filteredParticipants.isNotEmpty,
|
||||
participants: filteredParticipants,
|
||||
smallRadius: Avatar.defaultSize * 0.7,
|
||||
largeRadius: Avatar.defaultSize,
|
||||
),
|
||||
),
|
||||
Column(
|
||||
children: filteredParticipants.take(3).mapIndexed(
|
||||
(index, user) {
|
||||
return TrophyParticipantListItem(
|
||||
index: index,
|
||||
user: filteredParticipants[index],
|
||||
);
|
||||
},
|
||||
).toList(),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue