💄 Optimize post reply preview
This commit is contained in:
@@ -1,3 +1,5 @@
|
|||||||
|
import 'dart:math' as math;
|
||||||
|
|
||||||
import 'package:easy_localization/easy_localization.dart';
|
import 'package:easy_localization/easy_localization.dart';
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:flutter_hooks/flutter_hooks.dart';
|
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||||
@@ -66,6 +68,7 @@ class PostReplyPreview extends HookConsumerWidget {
|
|||||||
final bool isOpenable;
|
final bool isOpenable;
|
||||||
final bool isCompact;
|
final bool isCompact;
|
||||||
final bool isAutoload;
|
final bool isAutoload;
|
||||||
|
final double? itemMaxWidth;
|
||||||
final VoidCallback? onOpen;
|
final VoidCallback? onOpen;
|
||||||
const PostReplyPreview({
|
const PostReplyPreview({
|
||||||
super.key,
|
super.key,
|
||||||
@@ -73,6 +76,7 @@ class PostReplyPreview extends HookConsumerWidget {
|
|||||||
this.isOpenable = false,
|
this.isOpenable = false,
|
||||||
this.isCompact = false,
|
this.isCompact = false,
|
||||||
this.isAutoload = true,
|
this.isAutoload = true,
|
||||||
|
this.itemMaxWidth,
|
||||||
this.onOpen,
|
this.onOpen,
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -114,17 +118,22 @@ class PostReplyPreview extends HookConsumerWidget {
|
|||||||
return null;
|
return null;
|
||||||
}, [parent]);
|
}, [parent]);
|
||||||
|
|
||||||
final featuredReply =
|
final featuredReply = isOpenable
|
||||||
isOpenable ? null : ref.watch(postFeaturedReplyProvider(parent.id));
|
? null
|
||||||
|
: ref.watch(postFeaturedReplyProvider(parent.id));
|
||||||
|
|
||||||
final itemWidget =
|
Widget itemBuilder(double maxWidth) {
|
||||||
isOpenable
|
return isOpenable
|
||||||
? Column(
|
? Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
children: [
|
children: [
|
||||||
for (final post in posts.value)
|
for (final post in posts.value)
|
||||||
Column(
|
Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
children: [
|
children: [
|
||||||
InkWell(
|
InkWell(
|
||||||
|
child: ConstrainedBox(
|
||||||
|
constraints: BoxConstraints(maxWidth: maxWidth),
|
||||||
child: Row(
|
child: Row(
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
spacing: 8,
|
spacing: 8,
|
||||||
@@ -142,12 +151,17 @@ class PostReplyPreview extends HookConsumerWidget {
|
|||||||
)
|
)
|
||||||
else
|
else
|
||||||
Expanded(
|
Expanded(
|
||||||
child: Text(
|
child:
|
||||||
|
Text(
|
||||||
'postHasAttachments',
|
'postHasAttachments',
|
||||||
).plural(post.attachments.length),
|
style: TextStyle(height: 2),
|
||||||
|
)
|
||||||
|
.plural(post.attachments.length)
|
||||||
|
.padding(top: 2),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
|
),
|
||||||
onTap: () {
|
onTap: () {
|
||||||
onOpen?.call();
|
onOpen?.call();
|
||||||
context.pushNamed(
|
context.pushNamed(
|
||||||
@@ -162,12 +176,14 @@ class PostReplyPreview extends HookConsumerWidget {
|
|||||||
isOpenable: true,
|
isOpenable: true,
|
||||||
isCompact: true,
|
isCompact: true,
|
||||||
isAutoload: false,
|
isAutoload: false,
|
||||||
|
itemMaxWidth: math.max(maxWidth - 24, 200),
|
||||||
onOpen: onOpen,
|
onOpen: onOpen,
|
||||||
).padding(left: 24),
|
).padding(left: 24),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
if (loading.value)
|
if (loading.value)
|
||||||
Row(
|
Row(
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
spacing: 8,
|
spacing: 8,
|
||||||
children: [
|
children: [
|
||||||
SizedBox(
|
SizedBox(
|
||||||
@@ -179,8 +195,9 @@ class PostReplyPreview extends HookConsumerWidget {
|
|||||||
],
|
],
|
||||||
)
|
)
|
||||||
else if (posts.value.length < parent.repliesCount)
|
else if (posts.value.length < parent.repliesCount)
|
||||||
InkWell(
|
GestureDetector(
|
||||||
child: Row(
|
child: Row(
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
spacing: 8,
|
spacing: 8,
|
||||||
children: [
|
children: [
|
||||||
const Icon(Symbols.keyboard_arrow_down, size: 20),
|
const Icon(Symbols.keyboard_arrow_down, size: 20),
|
||||||
@@ -194,8 +211,9 @@ class PostReplyPreview extends HookConsumerWidget {
|
|||||||
],
|
],
|
||||||
)
|
)
|
||||||
: (featuredReply!).map(
|
: (featuredReply!).map(
|
||||||
data:
|
data: (data) => ConstrainedBox(
|
||||||
(data) => Row(
|
constraints: BoxConstraints(maxWidth: maxWidth),
|
||||||
|
child: Row(
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
spacing: 8,
|
spacing: 8,
|
||||||
children: [
|
children: [
|
||||||
@@ -218,16 +236,15 @@ class PostReplyPreview extends HookConsumerWidget {
|
|||||||
),
|
),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
error:
|
),
|
||||||
(e) => Row(
|
error: (e) => Row(
|
||||||
spacing: 8,
|
spacing: 8,
|
||||||
children: [
|
children: [
|
||||||
const Icon(Symbols.close, size: 18),
|
const Icon(Symbols.close, size: 18),
|
||||||
Text(e.error.toString()),
|
Text(e.error.toString()),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
loading:
|
loading: (_) => Row(
|
||||||
(_) => Row(
|
|
||||||
spacing: 8,
|
spacing: 8,
|
||||||
children: [
|
children: [
|
||||||
SizedBox(
|
SizedBox(
|
||||||
@@ -239,10 +256,10 @@ class PostReplyPreview extends HookConsumerWidget {
|
|||||||
],
|
],
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
}
|
||||||
|
|
||||||
final contentWidget =
|
final contentWidget = isCompact
|
||||||
isCompact
|
? itemBuilder(itemMaxWidth ?? MediaQuery.of(context).size.width)
|
||||||
? itemWidget
|
|
||||||
: Container(
|
: Container(
|
||||||
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
||||||
decoration: BoxDecoration(
|
decoration: BoxDecoration(
|
||||||
@@ -252,8 +269,10 @@ class PostReplyPreview extends HookConsumerWidget {
|
|||||||
),
|
),
|
||||||
borderRadius: BorderRadius.all(Radius.circular(8)),
|
borderRadius: BorderRadius.all(Radius.circular(8)),
|
||||||
),
|
),
|
||||||
child: Column(
|
child: LayoutBuilder(
|
||||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
builder: (context, constraints) {
|
||||||
|
return Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
spacing: 4,
|
spacing: 4,
|
||||||
children: [
|
children: [
|
||||||
Text('repliesCount')
|
Text('repliesCount')
|
||||||
@@ -261,13 +280,17 @@ class PostReplyPreview extends HookConsumerWidget {
|
|||||||
.fontSize(15)
|
.fontSize(15)
|
||||||
.bold()
|
.bold()
|
||||||
.padding(horizontal: 5),
|
.padding(horizontal: 5),
|
||||||
itemWidget,
|
SingleChildScrollView(
|
||||||
|
scrollDirection: Axis.horizontal,
|
||||||
|
child: itemBuilder(constraints.maxWidth),
|
||||||
|
),
|
||||||
],
|
],
|
||||||
|
);
|
||||||
|
},
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
return InkWell(
|
return GestureDetector(
|
||||||
borderRadius: const BorderRadius.all(Radius.circular(8)),
|
|
||||||
onTap: () {
|
onTap: () {
|
||||||
showModalBottomSheet(
|
showModalBottomSheet(
|
||||||
context: context,
|
context: context,
|
||||||
@@ -479,8 +502,9 @@ class ReferencedPostWidget extends StatelessWidget {
|
|||||||
referencePost.description!,
|
referencePost.description!,
|
||||||
style: TextStyle(
|
style: TextStyle(
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
color:
|
color: Theme.of(
|
||||||
Theme.of(context).colorScheme.onSurfaceVariant,
|
context,
|
||||||
|
).colorScheme.onSurfaceVariant,
|
||||||
),
|
),
|
||||||
maxLines: 2,
|
maxLines: 2,
|
||||||
overflow: TextOverflow.ellipsis,
|
overflow: TextOverflow.ellipsis,
|
||||||
@@ -490,8 +514,7 @@ class ReferencedPostWidget extends StatelessWidget {
|
|||||||
content: referencePost.content!,
|
content: referencePost.content!,
|
||||||
textStyle: const TextStyle(fontSize: 14),
|
textStyle: const TextStyle(fontSize: 14),
|
||||||
isSelectable: false,
|
isSelectable: false,
|
||||||
linesMargin:
|
linesMargin: referencePost.type == 0
|
||||||
referencePost.type == 0
|
|
||||||
? const EdgeInsets.only(bottom: 4)
|
? const EdgeInsets.only(bottom: 4)
|
||||||
: null,
|
: null,
|
||||||
attachments: item.attachments,
|
attachments: item.attachments,
|
||||||
@@ -537,8 +560,7 @@ class ReferencedPostWidget extends StatelessWidget {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return content.gestures(
|
return content.gestures(
|
||||||
onTap:
|
onTap: () => context.pushNamed(
|
||||||
() => context.pushNamed(
|
|
||||||
'postDetail',
|
'postDetail',
|
||||||
pathParameters: {'id': referencePost!.id},
|
pathParameters: {'id': referencePost!.id},
|
||||||
),
|
),
|
||||||
@@ -577,8 +599,7 @@ class PostHeader extends StatelessWidget {
|
|||||||
spacing: 12,
|
spacing: 12,
|
||||||
children: [
|
children: [
|
||||||
GestureDetector(
|
GestureDetector(
|
||||||
onTap:
|
onTap: isInteractive
|
||||||
isInteractive
|
|
||||||
? () {
|
? () {
|
||||||
context.pushNamed(
|
context.pushNamed(
|
||||||
'publisherProfile',
|
'publisherProfile',
|
||||||
@@ -627,8 +648,7 @@ class PostHeader extends StatelessWidget {
|
|||||||
),
|
),
|
||||||
if (item.realm == null)
|
if (item.realm == null)
|
||||||
Flexible(
|
Flexible(
|
||||||
child:
|
child: isCompact
|
||||||
isCompact
|
|
||||||
? const SizedBox.shrink()
|
? const SizedBox.shrink()
|
||||||
: Text(
|
: Text(
|
||||||
'@${item.publisher.name}',
|
'@${item.publisher.name}',
|
||||||
@@ -734,8 +754,7 @@ class PostBody extends ConsumerWidget {
|
|||||||
const Icon(Symbols.label, size: 16).padding(top: 2),
|
const Icon(Symbols.label, size: 16).padding(top: 2),
|
||||||
for (final tag in isFullPost ? item.tags : item.tags.take(3))
|
for (final tag in isFullPost ? item.tags : item.tags.take(3))
|
||||||
InkWell(
|
InkWell(
|
||||||
onTap:
|
onTap: isInteractive
|
||||||
isInteractive
|
|
||||||
? () {
|
? () {
|
||||||
GoRouter.of(context).pushNamed(
|
GoRouter.of(context).pushNamed(
|
||||||
'postTagDetail',
|
'postTagDetail',
|
||||||
@@ -761,8 +780,7 @@ class PostBody extends ConsumerWidget {
|
|||||||
for (final category
|
for (final category
|
||||||
in isFullPost ? item.categories : item.categories.take(2))
|
in isFullPost ? item.categories : item.categories.take(2))
|
||||||
InkWell(
|
InkWell(
|
||||||
onTap:
|
onTap: isInteractive
|
||||||
isInteractive
|
|
||||||
? () {
|
? () {
|
||||||
GoRouter.of(context).pushNamed(
|
GoRouter.of(context).pushNamed(
|
||||||
'postCategoryDetail',
|
'postCategoryDetail',
|
||||||
@@ -798,8 +816,7 @@ class PostBody extends ConsumerWidget {
|
|||||||
hideOverlay
|
hideOverlay
|
||||||
? text
|
? text
|
||||||
: Tooltip(
|
: Tooltip(
|
||||||
message:
|
message: !isFullPost && isRelativeTime
|
||||||
!isFullPost && isRelativeTime
|
|
||||||
? item.editedAt!.formatSystem()
|
? item.editedAt!.formatSystem()
|
||||||
: item.editedAt!.formatRelative(context),
|
: item.editedAt!.formatRelative(context),
|
||||||
child: text,
|
child: text,
|
||||||
@@ -936,8 +953,7 @@ class PostBody extends ConsumerWidget {
|
|||||||
],
|
],
|
||||||
).padding(bottom: 4),
|
).padding(bottom: 4),
|
||||||
MarkdownTextContent(
|
MarkdownTextContent(
|
||||||
content:
|
content: item.isTruncated
|
||||||
item.isTruncated
|
|
||||||
? '${item.content!}...'
|
? '${item.content!}...'
|
||||||
: item.content ?? '',
|
: item.content ?? '',
|
||||||
isSelectable: isTextSelectable,
|
isSelectable: isTextSelectable,
|
||||||
|
|||||||
Reference in New Issue
Block a user