chore: fix overflow in space analytics page (#3743)

pull/2245/head
ggurdin 3 months ago committed by GitHub
parent 7ca87a9179
commit 9fe26b9566
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -5192,7 +5192,7 @@
}
}
},
"noDataFound": "No data found",
"noDataFound": "Not found",
"activityFinishedMessage": "All Finished!",
"endForAll": "End for all"
}

@ -4,7 +4,6 @@ import 'package:collection/collection.dart';
import 'package:dropdown_button2/dropdown_button2.dart';
import 'package:material_symbols_icons/symbols.dart';
import 'package:fluffychat/config/themes.dart';
import 'package:fluffychat/l10n/l10n.dart';
import 'package:fluffychat/pangea/common/widgets/dropdown_text_button.dart';
import 'package:fluffychat/pangea/learning_settings/models/language_model.dart';
@ -24,25 +23,22 @@ class SpaceAnalyticsView extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final isColumnMode = FluffyThemes.isColumnMode(context);
final rowPadding = isColumnMode ? 12.0 : 4.0;
return Scaffold(
appBar: AppBar(
title: Text(L10n.of(context).spaceAnalyticsPage),
),
body: Padding(
padding: EdgeInsets.all(isColumnMode ? 16.0 : 8.0),
child: MaxWidthBody(
maxWidth: 1000,
showBorder: false,
child: Column(
spacing: isColumnMode ? 24.0 : 12.0,
children: [
LayoutBuilder(
builder: (context, constraints) {
final mini = constraints.maxWidth <= 550;
return Row(
body: LayoutBuilder(
builder: (context, constraints) {
final mini = constraints.maxWidth <= 550;
return Padding(
padding: EdgeInsets.all(!mini ? 16.0 : 8.0),
child: MaxWidthBody(
maxWidth: 1000,
showBorder: false,
child: Column(
spacing: !mini ? 24.0 : 12.0,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
@ -159,139 +155,146 @@ class SpaceAnalyticsView extends StatelessWidget {
],
),
],
);
},
),
controller.initialized
? Table(
columnWidths: const {0: FlexColumnWidth(2.5)},
children: [
TableRow(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: theme.dividerColor),
),
),
),
controller.initialized
? Table(
columnWidths: const {0: FlexColumnWidth(2.5)},
children: [
_TableHeaderCell(
text: L10n.of(context).viewingAnalytics(
controller.completedDownloads,
controller.downloads.length,
TableRow(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: theme.dividerColor),
),
),
icon: Icons.group_outlined,
),
_TableHeaderCell(
text: L10n.of(context).level,
icon: Icons.star,
),
_TableHeaderCell(
text: L10n.of(context).vocab,
icon: Symbols.dictionary,
),
_TableHeaderCell(
text: L10n.of(context).grammar,
icon: Symbols.toys_and_games,
),
_TableHeaderCell(
text: L10n.of(context).activities,
icon: Icons.radar,
),
],
),
...controller.sortedDownloads.mapIndexed(
(index, entry) {
final download = entry.value;
return TableRow(
children: [
TableCell(
child: Opacity(
opacity: download.requestStatus.opacity,
child: Padding(
padding: EdgeInsets.symmetric(
vertical: rowPadding,
),
child: Row(
spacing: isColumnMode ? 16.0 : 8.0,
children: [
Avatar(
size: isColumnMode ? 64.0 : 40.0,
mxContent: entry.key.avatarUrl,
name: entry.key.calcDisplayname(),
userId: entry.key.id,
presenceUserId: entry.key.id,
),
Flexible(
child: Column(
spacing: 4.0,
mainAxisSize: MainAxisSize.min,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
SizedBox(
height:
index == 0 ? 8.0 : 0.0,
),
Text(
entry.key.id,
maxLines: 1,
overflow:
TextOverflow.ellipsis,
style: TextStyle(
fontSize: isColumnMode
? 16.0
: 12.0,
fontWeight: FontWeight.w500,
),
),
_RequestButton(
status:
download.requestStatus,
onPressed: () => controller
.requestAnalytics(
entry.key,
),
),
const SizedBox(height: 8.0),
],
),
),
],
),
),
_TableHeaderCell(
text: L10n.of(context).viewingAnalytics(
controller.completedDownloads,
controller.downloads.length,
),
icon: Icons.group_outlined,
),
_TableContentCell(
text: download.summary?.level?.toString(),
downloadStatus: download.downloadStatus,
requestStatus: download.requestStatus,
_TableHeaderCell(
text: L10n.of(context).level,
icon: Icons.star,
),
_TableContentCell(
text: download.summary?.numLemmas.toString(),
downloadStatus: download.downloadStatus,
requestStatus: download.requestStatus,
_TableHeaderCell(
text: L10n.of(context).vocab,
icon: Symbols.dictionary,
),
_TableContentCell(
text: download.summary?.numMorphConstructs
.toString(),
downloadStatus: download.downloadStatus,
requestStatus: download.requestStatus,
_TableHeaderCell(
text: L10n.of(context).grammar,
icon: Symbols.toys_and_games,
),
_TableContentCell(
text: download.summary?.numCompletedActivities
.toString(),
downloadStatus: download.downloadStatus,
requestStatus: download.requestStatus,
_TableHeaderCell(
text: L10n.of(context).activities,
icon: Icons.radar,
),
],
);
},
),
],
)
: const CircularProgressIndicator.adaptive(),
],
),
),
),
...controller.sortedDownloads.mapIndexed(
(index, entry) {
final download = entry.value;
return TableRow(
children: [
TableCell(
child: Opacity(
opacity: download.requestStatus.opacity,
child: Padding(
padding: EdgeInsets.symmetric(
vertical: !mini ? 12.0 : 4.0,
),
child: Row(
spacing: !mini ? 16.0 : 8.0,
children: [
Avatar(
size: !mini ? 64.0 : 40.0,
mxContent: entry.key.avatarUrl,
name:
entry.key.calcDisplayname(),
userId: entry.key.id,
presenceUserId: entry.key.id,
),
Flexible(
child: Column(
spacing: 4.0,
mainAxisSize:
MainAxisSize.min,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
SizedBox(
height: index == 0
? 8.0
: 0.0,
),
Text(
entry.key.id,
maxLines: 1,
overflow:
TextOverflow.ellipsis,
style: TextStyle(
fontSize:
!mini ? 16.0 : 12.0,
fontWeight:
FontWeight.w500,
),
),
_RequestButton(
status: download
.requestStatus,
onPressed: () =>
controller
.requestAnalytics(
entry.key,
),
mini: mini,
),
const SizedBox(height: 8.0),
],
),
),
],
),
),
),
),
_TableContentCell(
text: download.summary?.level?.toString(),
downloadStatus: download.downloadStatus,
requestStatus: download.requestStatus,
),
_TableContentCell(
text: download.summary?.numLemmas
.toString(),
downloadStatus: download.downloadStatus,
requestStatus: download.requestStatus,
),
_TableContentCell(
text: download.summary?.numMorphConstructs
.toString(),
downloadStatus: download.downloadStatus,
requestStatus: download.requestStatus,
),
_TableContentCell(
text: download
.summary?.numCompletedActivities
.toString(),
downloadStatus: download.downloadStatus,
requestStatus: download.requestStatus,
),
],
);
},
),
],
)
: const CircularProgressIndicator.adaptive(),
],
),
),
);
},
),
);
}
@ -362,14 +365,16 @@ class _MenuButton extends StatelessWidget {
class _TableHeaderCell extends StatelessWidget {
final String text;
final IconData icon;
final bool mini;
const _TableHeaderCell({
required this.text,
required this.icon,
this.mini = false,
});
@override
Widget build(BuildContext context) {
final isColumnMode = FluffyThemes.isColumnMode(context);
return Padding(
padding: const EdgeInsets.symmetric(
vertical: 6.0,
@ -382,7 +387,7 @@ class _TableHeaderCell extends StatelessWidget {
Text(
text,
style: TextStyle(
fontSize: isColumnMode ? 12.0 : 8.0,
fontSize: !mini ? 12.0 : 8.0,
),
),
],
@ -395,11 +400,13 @@ class _TableContentCell extends StatelessWidget {
final String? text;
final DownloadStatus downloadStatus;
final RequestStatus requestStatus;
final bool mini;
const _TableContentCell({
required this.text,
required this.downloadStatus,
required this.requestStatus,
this.mini = false,
});
@override
@ -411,7 +418,6 @@ class _TableContentCell extends StatelessWidget {
);
}
final isColumnMode = FluffyThemes.isColumnMode(context);
return TableCell(
verticalAlignment: TableCellVerticalAlignment.fill,
child: Opacity(
@ -421,7 +427,7 @@ class _TableContentCell extends StatelessWidget {
child: Text(
text!,
style: TextStyle(
fontSize: isColumnMode ? 16.0 : 12.0,
fontSize: !mini ? 16.0 : 12.0,
fontWeight: FontWeight.w500,
),
),
@ -469,18 +475,17 @@ class _MissingContentCell extends StatelessWidget {
class _RequestButton extends StatelessWidget {
final RequestStatus status;
final VoidCallback onPressed;
final bool mini;
const _RequestButton({
required this.status,
required this.onPressed,
this.mini = false,
});
@override
Widget build(BuildContext context) {
if (!status.showButton) return const SizedBox.shrink();
final isColumnMode = FluffyThemes.isColumnMode(context);
return MouseRegion(
cursor: status.enabled ? SystemMouseCursors.click : MouseCursor.defer,
child: GestureDetector(
@ -499,11 +504,11 @@ class _RequestButton extends StatelessWidget {
children: [
Icon(
status.icon,
size: isColumnMode ? 12.0 : 8.0,
size: !mini ? 12.0 : 8.0,
),
Text(
status.label(context),
style: TextStyle(fontSize: isColumnMode ? 12.0 : 8.0),
style: TextStyle(fontSize: !mini ? 12.0 : 8.0),
),
],
),

Loading…
Cancel
Save