fix: Fix scrolling bug on inbox page

This commit is contained in:
Anton Stubenbord
2023-06-03 15:20:20 +02:00
parent d2b428c05b
commit 880695e04f
12 changed files with 427 additions and 331 deletions

View File

@@ -4,18 +4,130 @@ import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:paperless_api/paperless_api.dart';
import 'package:paperless_mobile/core/database/tables/local_user_account.dart';
import 'package:paperless_mobile/core/navigation/push_routes.dart';
import 'package:paperless_mobile/core/widgets/shimmer_placeholder.dart';
import 'package:paperless_mobile/core/workarounds/colored_chip.dart';
import 'package:paperless_mobile/extensions/flutter_extensions.dart';
import 'package:paperless_mobile/features/documents/view/widgets/delete_document_confirmation_dialog.dart';
import 'package:paperless_mobile/features/documents/view/widgets/document_preview.dart';
import 'package:paperless_mobile/features/documents/view/widgets/placeholder/tags_placeholder.dart';
import 'package:paperless_mobile/features/documents/view/widgets/placeholder/text_placeholder.dart';
import 'package:paperless_mobile/features/inbox/cubit/inbox_cubit.dart';
import 'package:paperless_mobile/features/labels/tags/view/widgets/tags_widget.dart';
import 'package:paperless_mobile/features/labels/view/widgets/label_text.dart';
import 'package:paperless_mobile/generated/l10n/app_localizations.dart';
class InboxItemPlaceholder extends StatelessWidget {
const InboxItemPlaceholder({super.key});
@override
Widget build(BuildContext context) {
return ShimmerPlaceholder(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const TextPlaceholder(length: 150, fontSize: 12),
const SizedBox(
height: 16,
),
SizedBox(
height: 200,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 150,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
height: 120,
width: 90,
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: const ColoredBox(
color: Colors.white,
),
),
),
const SizedBox(width: 8),
const Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Spacer(),
TextPlaceholder(length: 200, fontSize: 14),
Spacer(),
TextPlaceholder(length: 120, fontSize: 14),
SizedBox(height: 8),
TextPlaceholder(length: 170, fontSize: 14),
Spacer(),
TagsPlaceholder(count: 3, dense: true),
Spacer(),
],
),
),
],
),
),
SizedBox(
height: 50,
child: IntrinsicHeight(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
physics: const NeverScrollableScrollPhysics(),
child: Row(
children: [
const SizedBox(
width: 50,
height: 40,
child: ColoredBox(
color: Colors.white,
),
).padded(),
const VerticalDivider(
indent: 12,
endIndent: 12,
),
SizedBox(
height: 40,
child: Row(
children: [
Container(
width: 150,
height: 48,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Colors.white,
),
),
const SizedBox(width: 4),
Container(
width: 200,
height: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Colors.white,
),
),
],
),
),
],
),
),
),
),
],
),
),
],
),
);
}
}
class InboxItem extends StatefulWidget {
static const a4AspectRatio = 1 / 1.4142;
final DocumentModel document;
const InboxItem({
super.key,
@@ -70,10 +182,14 @@ class _InboxItemState extends State<InboxItem> {
_buildTextWithLeadingIcon(
Icon(
Icons.person_outline,
size: Theme.of(context).textTheme.bodyMedium?.fontSize,
size: Theme.of(context)
.textTheme
.bodyMedium
?.fontSize,
),
LabelText<Correspondent>(
label: state.labels.correspondents[widget.document.correspondent],
label: state.labels.correspondents[
widget.document.correspondent],
style: Theme.of(context).textTheme.bodyMedium,
placeholder: "-",
),
@@ -81,10 +197,14 @@ class _InboxItemState extends State<InboxItem> {
_buildTextWithLeadingIcon(
Icon(
Icons.description_outlined,
size: Theme.of(context).textTheme.bodyMedium?.fontSize,
size: Theme.of(context)
.textTheme
.bodyMedium
?.fontSize,
),
LabelText<DocumentType>(
label: state.labels.documentTypes[widget.document.documentType],
label: state.labels.documentTypes[
widget.document.documentType],
style: Theme.of(context).textTheme.bodyMedium,
placeholder: "-",
),
@@ -139,8 +259,8 @@ class _InboxItemState extends State<InboxItem> {
onPressed: () async {
final shouldDelete = await showDialog<bool>(
context: context,
builder: (context) =>
DeleteDocumentConfirmationDialog(document: widget.document),
builder: (context) => DeleteDocumentConfirmationDialog(
document: widget.document),
) ??
false;
if (shouldDelete) {
@@ -217,7 +337,10 @@ class _InboxItemState extends State<InboxItem> {
_isAsnAssignLoading = true;
});
context.read<InboxCubit>().assignAsn(widget.document).whenComplete(
context
.read<InboxCubit>()
.assignAsn(widget.document)
.whenComplete(
() => setState(() => _isAsnAssignLoading = false),
);
}

View File

@@ -1,124 +0,0 @@
import 'package:flutter/material.dart';
import 'package:paperless_mobile/core/widgets/shimmer_placeholder.dart';
import 'package:paperless_mobile/extensions/flutter_extensions.dart';
import 'package:paperless_mobile/features/documents/view/widgets/placeholder/tags_placeholder.dart';
import 'package:paperless_mobile/features/documents/view/widgets/placeholder/text_placeholder.dart';
class InboxListLoadingWidget extends StatelessWidget {
const InboxListLoadingWidget({super.key});
@override
Widget build(BuildContext context) {
return ListView.separated(
itemCount: 20,
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (context, index) => _buildInboxItem().padded(),
separatorBuilder: (context, index) => const SizedBox(height: 16),
).paddedOnly(top: 8);
}
Widget _buildInboxItem() {
return ShimmerPlaceholder(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const TextPlaceholder(length: 150, fontSize: 12),
const SizedBox(
height: 16,
),
SizedBox(
height: 200,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 150,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
height: 120,
width: 90,
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: const ColoredBox(
color: Colors.white,
),
),
),
const SizedBox(width: 8),
const Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Spacer(),
TextPlaceholder(length: 200, fontSize: 14),
Spacer(),
TextPlaceholder(length: 120, fontSize: 14),
SizedBox(height: 8),
TextPlaceholder(length: 170, fontSize: 14),
Spacer(),
TagsPlaceholder(count: 3, dense: true),
Spacer(),
],
),
),
],
),
),
SizedBox(
height: 50,
child: IntrinsicHeight(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
physics: const NeverScrollableScrollPhysics(),
child: Row(
children: [
const SizedBox(
width: 50,
height: 40,
child: ColoredBox(
color: Colors.white,
),
).padded(),
const VerticalDivider(
indent: 12,
endIndent: 12,
),
SizedBox(
height: 40,
child: Row(
children: [
Container(
width: 150,
height: 48,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Colors.white,
),
),
const SizedBox(width: 4),
Container(
width: 200,
height: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Colors.white,
),
),
],
),
),
],
),
),
),
),
],
),
),
],
),
);
}
}