chore: Expand role card if needed/available space

This commit is contained in:
ggurdin 2026-01-27 10:45:49 -05:00
parent 84ca5a79ee
commit af996b298c
No known key found for this signature in database
GPG key ID: A01CB41737CBB478
4 changed files with 42 additions and 29 deletions

View file

@ -45,6 +45,7 @@ class ActivityParticipantIndicator extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final borderRadius = this.borderRadius ?? BorderRadius.circular(8.0);
return MouseRegion(
cursor: SystemMouseCursors.basic,
child: GestureDetector(
@ -99,20 +100,21 @@ class ActivityParticipantIndicator extends StatelessWidget {
opacity: opacity,
child: ShimmerBackground(
enabled: shimmer,
borderRadius: borderRadius,
child: Container(
alignment: Alignment.center,
padding: padding ??
const EdgeInsets.symmetric(
vertical: 4.0,
horizontal: 8.0,
),
decoration: BoxDecoration(
borderRadius: borderRadius ?? BorderRadius.circular(8.0),
borderRadius: borderRadius,
color: (hovered || selected) && selectable
? theme.colorScheme.surfaceContainerHighest
: theme.colorScheme.surface.withAlpha(130),
),
height: 125.0,
constraints: const BoxConstraints(maxWidth: 100.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [

View file

@ -52,10 +52,9 @@ class ActivityParticipantList extends StatelessWidget {
spacing: 12.0,
mainAxisSize: MainAxisSize.min,
children: [
Wrap(
alignment: WrapAlignment.center,
spacing: 12.0,
runSpacing: 12.0,
Row(
spacing: 8.0,
mainAxisAlignment: MainAxisAlignment.center,
children: availableRoles.map((availableRole) {
final selected =
isSelected != null ? isSelected!(availableRole.id) : false;
@ -83,18 +82,21 @@ class ActivityParticipantList extends StatelessWidget {
? isShimmering!(availableRole.id)
: false;
return ActivityParticipantIndicator(
name: availableRole.name,
userId: assignedRole?.userId,
opacity: getOpacity != null ? getOpacity!(assignedRole) : 1.0,
user: user,
onTap: onTap != null && selectable
? () => onTap!(availableRole.id)
: null,
selected: selected,
selectable: selectable,
shimmer: shimmering,
room: room,
return Expanded(
child: ActivityParticipantIndicator(
name: availableRole.name,
userId: assignedRole?.userId,
opacity:
getOpacity != null ? getOpacity!(assignedRole) : 1.0,
user: user,
onTap: onTap != null && selectable
? () => onTap!(availableRole.id)
: null,
selected: selected,
selectable: selectable,
shimmer: shimmering,
room: room,
),
);
}).toList(),
),

View file

@ -290,14 +290,20 @@ class ButtonControlledCarouselView extends StatelessWidget {
(role) => role.userId == p.participantId,
);
final userRoleInfo = availableRoles[userRole.id]!;
return ActivityParticipantIndicator(
name: userRoleInfo.name,
userId: p.participantId,
user: user,
borderRadius: BorderRadius.circular(4),
selected: highlightedRole?.id == userRole.id,
onTap: () => _scrollToUser(userRole, index, cardWidth),
room: controller.room,
return SizedBox(
width: 100.0,
height: 125.0,
child: Center(
child: ActivityParticipantIndicator(
name: userRoleInfo.name,
userId: p.participantId,
user: user,
borderRadius: BorderRadius.circular(4),
selected: highlightedRole?.id == userRole.id,
onTap: () => _scrollToUser(userRole, index, cardWidth),
room: controller.room,
),
),
);
},
);

View file

@ -9,6 +9,7 @@ class ShimmerBackground extends StatelessWidget {
final Color shimmerColor;
final Color? baseColor;
final bool enabled;
final BorderRadius? borderRadius;
const ShimmerBackground({
super.key,
@ -16,10 +17,13 @@ class ShimmerBackground extends StatelessWidget {
this.shimmerColor = AppConfig.goldLight,
this.baseColor,
this.enabled = true,
this.borderRadius,
});
@override
Widget build(BuildContext context) {
final borderRadius =
this.borderRadius ?? BorderRadius.circular(AppConfig.borderRadius);
return Stack(
children: [
child,
@ -27,7 +31,7 @@ class ShimmerBackground extends StatelessWidget {
Positioned.fill(
child: IgnorePointer(
child: ClipRRect(
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
borderRadius: borderRadius,
child: Shimmer.fromColors(
baseColor: baseColor ?? shimmerColor.withValues(alpha: 0.1),
highlightColor: shimmerColor.withValues(alpha: 0.6),
@ -35,8 +39,7 @@ class ShimmerBackground extends StatelessWidget {
child: Container(
decoration: BoxDecoration(
color: shimmerColor.withValues(alpha: 0.3),
borderRadius:
BorderRadius.circular(AppConfig.borderRadius),
borderRadius: borderRadius,
),
),
),