chore: fix overflow in space analytics page (#3743)
This commit is contained in:
ggurdin
GitHub
parent
7ca87a9179
commit
9fe26b9566
2 changed files with 154 additions and 149 deletions
|
|
@ -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…
Add table
Reference in a new issue