HyperNet/Surface
1
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

💄 Optimize post editors

Browse Source
This commit is contained in:
LittleSheep 2025-02-07 22:35:04 +08:00
parent a2d2ce4d38
commit fe028860e9
7 changed files with 241 additions and 239 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
assets/translations/en-US.json
View File

@ -166,9 +166,9 @@
"postPosted": "Post has been posted.",
"postPublishedAt": "Published At",
"postPublishedUntil": "Published Until",
"postEditingNotice": "You're about to editing a post that posted {}.",
"postReplyingNotice": "You're about to reply to a post that posted {}.",
"postRepostingNotice": "You're about to repost a post that posted {}.",
"postEditingNotice": "You're about to editing a post that posted by {}.",
"postReplyingNotice": "You're about to reply to a post that posted by {}.",
"postRepostingNotice": "You're about to repost a post that posted by {}.",
"postReact": "React",
"postReactions": "Reactions of Post",
"postReactionUpvote": {

296
lib/screens/post/post_editor.dart
View File

@ -125,6 +125,16 @@ class _PostEditorScreenState extends State<PostEditorScreen> {
});
}
void _showPublisherPopup() {
showModalBottomSheet(
context: context,
builder: (context) => _PostPublisherPopup(
controller: _writeController,
publishers: _publishers,
),
);
}
@override
void dispose() {
_writeController.dispose();
@ -198,156 +208,42 @@ class _PostEditorScreenState extends State<PostEditorScreen> {
),
body: Column(
children: [
DropdownButtonHideUnderline(
child: DropdownButton2<SnPublisher>(
isExpanded: true,
hint: Text(
'fieldPostPublisher',
style: TextStyle(
fontSize: 14,
color: Theme.of(context).hintColor,
if (_writeController.editingPost != null)
Container(
padding: const EdgeInsets.only(top: 4, bottom: 4, left: 20, right: 20),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Theme.of(context).dividerColor,
width: 1 / MediaQuery.of(context).devicePixelRatio,
),
),
),
).tr(),
items: <DropdownMenuItem<SnPublisher>>[
...(_publishers?.map(
(item) => DropdownMenuItem<SnPublisher>(
enabled: _writeController.editingPost == null,
value: item,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
AccountImage(content: item.avatar, radius: 16),
const Gap(8),
Expanded(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(item.nick).textStyle(Theme.of(context).textTheme.bodyMedium!),
Text('@${item.name}')
.textStyle(Theme.of(context).textTheme.bodySmall!)
.fontSize(12),
const Icon(Icons.edit, size: 16),
const Gap(10),
Text('postEditingNotice').tr(args: ['@${_writeController.editingPost!.publisher.name}']),
],
),
),
],
),
),
) ??
[]),
DropdownMenuItem<SnPublisher>(
value: null,
child: Row(
children: [
CircleAvatar(
radius: 16,
backgroundColor: Colors.transparent,
foregroundColor: Theme.of(context).colorScheme.onSurface,
child: const Icon(Symbols.add),
),
const Gap(8),
Expanded(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('publishersNew').tr().textStyle(Theme.of(context).textTheme.bodyMedium!),
],
),
),
],
),
),
],
value: _writeController.publisher,
onChanged: (SnPublisher? value) {
if (value == null) {
GoRouter.of(context).pushNamed('accountPublisherNew').then((value) {
if (value == true) {
_publishers = null;
_fetchPublishers();
}
});
} else {
_writeController.setPublisher(value);
final config = context.read<ConfigProvider>();
config.prefs.setInt('int_last_publisher_id', value.id);
}
},
buttonStyleData: const ButtonStyleData(
padding: EdgeInsets.only(right: 16),
height: 48,
),
menuItemStyleData: const MenuItemStyleData(
height: 48,
),
),
),
const Divider(height: 1),
Expanded(
child: Stack(
children: [
SingleChildScrollView(
padding: EdgeInsets.only(bottom: 160),
child: Column(
spacing: 8,
children: [
// Replying Notice
if (_writeController.replyingPost != null)
Column(
children: [
ExpansionTile(
minTileHeight: 48,
leading: const Icon(Symbols.reply).padding(left: 4),
title: Text('postReplyingNotice')
.fontSize(15)
.tr(args: ['@${_writeController.replyingPost!.publisher.name}']),
children: <Widget>[PostItem(data: _writeController.replyingPost!)],
child: switch (_writeController.mode) {
'stories' => _PostStoryEditor(
controller: _writeController,
onTapPublisher: _showPublisherPopup,
),
const Divider(height: 1),
],
'articles' => _PostArticleEditor(
controller: _writeController,
onTapPublisher: _showPublisherPopup,
),
// Reposting Notice
if (_writeController.repostingPost != null)
Column(
children: [
ExpansionTile(
minTileHeight: 48,
leading: const Icon(Symbols.forward).padding(left: 4),
title: Text('postRepostingNotice')
.fontSize(15)
.tr(args: ['@${_writeController.repostingPost!.publisher.name}']),
children: <Widget>[
PostItem(
data: _writeController.repostingPost!,
)
],
),
const Divider(height: 1),
],
),
// Editing Notice
if (_writeController.editingPost != null)
Column(
children: [
ExpansionTile(
minTileHeight: 48,
leading: const Icon(Symbols.edit_note).padding(left: 4),
title: Text('postEditingNotice')
.fontSize(15)
.tr(args: ['@${_writeController.editingPost!.publisher.name}']),
children: <Widget>[PostItem(data: _writeController.editingPost!)],
),
const Divider(height: 1),
],
),
// Content Input Area
switch (_writeController.mode) {
'stories' => _PostStoryEditor(controller: _writeController),
'articles' => _PostArticleEditor(controller: _writeController),
_ => const Placeholder(),
},
],
),
),
if (_writeController.attachments.isNotEmpty || _writeController.thumbnail != null)
Positioned(
@ -492,15 +388,73 @@ class _PostEditorActionScrollBehavior extends MaterialScrollBehavior {
};
}
class _PostPublisherPopup extends StatelessWidget {
final PostWriteController controller;
final List<SnPublisher>? publishers;
const _PostPublisherPopup({required this.controller, this.publishers});
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Icon(Symbols.face, size: 24),
const Gap(16),
Text('accountPublishers', style: Theme.of(context).textTheme.titleLarge).tr(),
],
).padding(horizontal: 20, top: 16, bottom: 12),
Expanded(
child: ListView.builder(
itemCount: publishers?.length ?? 0,
itemBuilder: (context, idx) {
final publisher = publishers![idx];
return ListTile(
title: Text(publisher.nick),
subtitle: Text('@${publisher.name}'),
leading: AccountImage(content: publisher.avatar, radius: 18),
onTap: () {
controller.setPublisher(publisher);
Navigator.pop(context, true);
},
);
},
),
),
],
);
}
}
class _PostStoryEditor extends StatelessWidget {
final PostWriteController controller;
final Function? onTapPublisher;
const _PostStoryEditor({required this.controller});
const _PostStoryEditor({required this.controller, this.onTapPublisher});
@override
Widget build(BuildContext context) {
return Container(
constraints: const BoxConstraints(maxWidth: 640),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Material(
elevation: 1,
borderRadius: const BorderRadius.all(Radius.circular(24)),
child: GestureDetector(
onTap: () {
onTapPublisher?.call();
},
child: AccountImage(
content: controller.publisher?.avatar,
),
),
),
Expanded(
child: TextField(
controller: controller.contentController,
maxLines: null,
@ -514,6 +468,9 @@ class _PostStoryEditor extends StatelessWidget {
border: InputBorder.none,
),
onTapOutside: (_) => FocusManager.instance.primaryFocus?.unfocus(),
).padding(top: 4),
),
],
),
);
}
@ -521,15 +478,68 @@ class _PostStoryEditor extends StatelessWidget {
class _PostArticleEditor extends StatelessWidget {
final PostWriteController controller;
final Function? onTapPublisher;
const _PostArticleEditor({required this.controller});
const _PostArticleEditor({required this.controller, this.onTapPublisher});
@override
Widget build(BuildContext context) {
final editorWidgets = <Widget>[
Material(
color: Theme.of(context).colorScheme.surfaceContainerHigh,
child: InkWell(
child: Row(
children: [
AccountImage(content: controller.publisher?.avatar, radius: 20),
const Gap(8),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(controller.publisher?.nick ?? 'loading'.tr()).bold(),
Text('@${controller.publisher?.name}'),
],
),
),
],
).padding(horizontal: 12, vertical: 8),
onTap: () {
onTapPublisher?.call();
},
),
),
const Gap(4),
TextField(
controller: controller.titleController,
decoration: InputDecoration(
labelText: 'fieldPostTitle'.tr(),
border: InputBorder.none,
),
style: Theme.of(context).textTheme.titleLarge,
onTapOutside: (_) => FocusManager.instance.primaryFocus?.unfocus(),
).padding(horizontal: 16),
const Gap(4),
TextField(
controller: controller.descriptionController,
decoration: InputDecoration(
labelText: 'fieldPostDescription'.tr(),
border: InputBorder.none,
),
maxLines: null,
keyboardType: TextInputType.multiline,
style: Theme.of(context).textTheme.bodyLarge,
onTapOutside: (_) => FocusManager.instance.primaryFocus?.unfocus(),
).padding(horizontal: 16),
const Gap(8),
];
if (ResponsiveBreakpoints.of(context).largerThan(MOBILE)) {
return Container(
constraints: const BoxConstraints(maxWidth: 640 * 2 + 8),
child: Row(
child: Column(
children: [
...editorWidgets,
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
@ -556,10 +566,16 @@ class _PostArticleEditor extends StatelessWidget {
),
],
),
],
),
);
}
return Container(
return Column(
children: [
...editorWidgets,
Container(
padding: const EdgeInsets.only(top: 8),
constraints: const BoxConstraints(maxWidth: 640),
child: TextField(
controller: controller.contentController,
@ -575,6 +591,8 @@ class _PostArticleEditor extends StatelessWidget {
),
onTapOutside: (_) => FocusManager.instance.primaryFocus?.unfocus(),
),
),
],
);
}
}

14
lib/widgets/account/account_select.dart
View File

@ -1,5 +1,7 @@
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:material_symbols_icons/symbols.dart';
import 'package:provider/provider.dart';
import 'package:styled_widget/styled_widget.dart';
import 'package:surface/providers/sn_network.dart';
@ -96,10 +98,14 @@ class _AccountSelectState extends State<AccountSelect> {
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
widget.title,
style: Theme.of(context).textTheme.headlineSmall,
).padding(left: 24, right: 24, top: 16, bottom: 16),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Icon(Symbols.group, size: 24),
const Gap(16),
Text(widget.title, style: Theme.of(context).textTheme.titleLarge),
],
).padding(horizontal: 20, top: 16, bottom: 12),
Container(
color: Theme.of(context).colorScheme.secondaryContainer,
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),

1
lib/widgets/chat/chat_message_input.dart
View File

@ -336,6 +336,7 @@ class ChatMessageInputState extends State<ChatMessageInput> {
: 'fieldChatMessage'.tr(args: [widget.controller.channel?.name ?? 'loading'.tr()]),
border: InputBorder.none,
),
textInputAction: TextInputAction.send,
onTapOutside: (_) => FocusManager.instance.primaryFocus?.unfocus(),
onSubmitted: (_) {
if (_isBusy) return;

10
lib/widgets/post/post_item.dart
View File

@ -833,7 +833,7 @@ class _PostContentHeader extends StatelessWidget {
onTap: () {
showModalBottomSheet(
context: context,
builder: (context) => _PostGetInsightSheet(postId: data.id),
builder: (context) => _PostGetInsightPopup(postId: data.id),
);
},
),
@ -1292,16 +1292,16 @@ class _PostAbuseReportDialogState extends State<_PostAbuseReportDialog> {
}
}
class _PostGetInsightSheet extends StatefulWidget {
class _PostGetInsightPopup extends StatefulWidget {
final int postId;
const _PostGetInsightSheet({required this.postId});
const _PostGetInsightPopup({required this.postId});
@override
State<_PostGetInsightSheet> createState() => _PostGetInsightSheetState();
State<_PostGetInsightPopup> createState() => _PostGetInsightPopupState();
}
class _PostGetInsightSheetState extends State<_PostGetInsightSheet> {
class _PostGetInsightPopupState extends State<_PostGetInsightPopup> {
String? _response;
String? _thinkingProcess;

13
lib/widgets/post/post_media_pending_list.dart
View File

@ -292,7 +292,7 @@ class PostMediaPendingList extends StatelessWidget {
constraints: const BoxConstraints(maxHeight: 120),
child: Row(
children: [
const Gap(8),
const Gap(16),
if (thumbnail != null)
ContextMenuArea(
contextMenu: _createContextMenu(context, -1, thumbnail!),
@ -337,15 +337,10 @@ class _PostMediaPendingItem extends StatelessWidget {
final sn = context.read<SnNetworkProvider>();
return Container(
decoration: BoxDecoration(
border: Border.all(
color: Theme.of(context).dividerColor,
width: 1,
),
borderRadius: BorderRadius.circular(8),
return Material(
elevation: 4,
color: Theme.of(context).colorScheme.surfaceContainer,
),
borderRadius: BorderRadius.circular(8),
child: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(8)),
child: Row(

34
lib/widgets/post/post_meta_editor.dart
View File

@ -19,6 +19,7 @@ const Map<int, String> kPostVisibilityLevel = {
class PostMetaEditor extends StatelessWidget {
final PostWriteController controller;
const PostMetaEditor({super.key, required this.controller});
Future<DateTime?> _selectDate(
@ -87,26 +88,14 @@ class PostMetaEditor extends StatelessWidget {
padding: EdgeInsets.only(bottom: MediaQuery.of(context).padding.bottom + 8),
child: Column(
children: [
if (controller.mode == 'stories')
TextField(
controller: controller.titleController,
decoration: InputDecoration(
labelText: 'fieldPostTitle'.tr(),
border: UnderlineInputBorder(),
),
onTapOutside: (_) =>
FocusManager.instance.primaryFocus?.unfocus(),
).padding(horizontal: 24),
if (controller.mode == 'articles') const Gap(4),
if (controller.mode == 'articles')
TextField(
controller: controller.descriptionController,
maxLines: null,
decoration: InputDecoration(
labelText: 'fieldPostDescription'.tr(),
border: UnderlineInputBorder(),
),
onTapOutside: (_) =>
FocusManager.instance.primaryFocus?.unfocus(),
onTapOutside: (_) => FocusManager.instance.primaryFocus?.unfocus(),
).padding(horizontal: 24),
const Gap(4),
PostTagsField(
@ -133,8 +122,7 @@ class PostMetaEditor extends StatelessWidget {
helperMaxLines: 2,
border: UnderlineInputBorder(),
),
onTapOutside: (_) =>
FocusManager.instance.primaryFocus?.unfocus(),
onTapOutside: (_) => FocusManager.instance.primaryFocus?.unfocus(),
).padding(horizontal: 24),
const Gap(12),
ListTile(
@ -182,8 +170,7 @@ class PostMetaEditor extends StatelessWidget {
leading: Icon(Symbols.person),
trailing: Icon(Symbols.chevron_right),
title: Text('postVisibleUsers').tr(),
subtitle: Text('postSelectedUsers')
.plural(controller.visibleUsers.length),
subtitle: Text('postSelectedUsers').plural(controller.visibleUsers.length),
onTap: () {
_selectVisibleUser(context);
},
@ -194,8 +181,7 @@ class PostMetaEditor extends StatelessWidget {
leading: Icon(Symbols.person),
trailing: Icon(Symbols.chevron_right),
title: Text('postInvisibleUsers').tr(),
subtitle: Text('postSelectedUsers')
.plural(controller.invisibleUsers.length),
subtitle: Text('postSelectedUsers').plural(controller.invisibleUsers.length),
onTap: () {
_selectInvisibleUser(context);
},
@ -204,9 +190,7 @@ class PostMetaEditor extends StatelessWidget {
leading: const Icon(Symbols.event_available),
title: Text('postPublishedAt').tr(),
subtitle: Text(
controller.publishedAt != null
? dateFormatter.format(controller.publishedAt!)
: 'unset'.tr(),
controller.publishedAt != null ? dateFormatter.format(controller.publishedAt!) : 'unset'.tr(),
),
trailing: controller.publishedAt != null
? IconButton(
@ -230,9 +214,7 @@ class PostMetaEditor extends StatelessWidget {
leading: const Icon(Symbols.event_busy),
title: Text('postPublishedUntil').tr(),
subtitle: Text(
controller.publishedUntil != null
? dateFormatter.format(controller.publishedUntil!)
: 'unset'.tr(),
controller.publishedUntil != null ? dateFormatter.format(controller.publishedUntil!) : 'unset'.tr(),
),
trailing: controller.publishedUntil != null
? IconButton(