Basic post editor

This commit is contained in:
LittleSheep 2024-11-10 12:41:56 +08:00
parent c02b95c9ac
commit 302691f557
9 changed files with 420 additions and 12 deletions

View File

@ -66,5 +66,10 @@
"publisherNewSubtitle": "Create a new publisher identity.",
"publisherSyncWithAccount": "Sync with account",
"writePostTypeStory": "Post a story",
"writePostTypeArticle": "Write an article"
"writePostTypeArticle": "Write an article",
"fieldPostPublisher": "Post publisher",
"fieldPostContent": "What happened?!",
"fieldPostTitle": "Title",
"fieldPostDescription": "Description",
"postPublish": "Publish"
}

View File

@ -66,5 +66,10 @@
"publisherNewSubtitle": "创建一个新的公共身份。",
"publisherSyncWithAccount": "同步账户信息",
"writePostTypeStory": "发动态",
"writePostTypeArticle": "写文章"
"writePostTypeArticle": "写文章",
"fieldPostPublisher": "帖子发布者",
"fieldPostContent": "发生什么事了?!",
"fieldPostTitle": "标题",
"fieldPostDescription": "描述",
"postPublish": "发布"
}

View File

@ -44,7 +44,9 @@ final appRouter = GoRouter(
GoRoute(
path: '/post/write/:mode',
name: 'postEditor',
builder: (context, state) => const PostEditorScreen(),
builder: (context, state) => PostEditorScreen(
mode: state.pathParameters['mode']!,
),
),
],
),

View File

@ -113,7 +113,7 @@ class _ExploreScreenState extends State<ExploreScreen> {
tooltip: 'writePostTypeStory'.tr(),
onPressed: () {
GoRouter.of(context).pushNamed('postEditor', pathParameters: {
'mode': 'story',
'mode': 'stories',
}).then((value) {
if (value == true) {
_posts.clear();
@ -135,7 +135,7 @@ class _ExploreScreenState extends State<ExploreScreen> {
tooltip: 'writePostTypeArticle'.tr(),
onPressed: () {
GoRouter.of(context).pushNamed('postEditor', pathParameters: {
'mode': 'article',
'mode': 'articles',
}).then((value) {
if (value == true) {
_posts.clear();

View File

@ -1,10 +1,309 @@
import 'package:dropdown_button2/dropdown_button2.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:go_router/go_router.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';
import 'package:surface/types/post.dart';
import 'package:surface/widgets/account/account_image.dart';
import 'package:surface/widgets/dialog.dart';
import 'package:surface/widgets/navigation/app_scaffold.dart';
import 'package:surface/widgets/post/post_meta_editor.dart';
class PostEditorScreen extends StatelessWidget {
const PostEditorScreen({super.key});
class PostEditorScreen extends StatefulWidget {
final String mode;
const PostEditorScreen({super.key, required this.mode});
@override
State<PostEditorScreen> createState() => _PostEditorScreenState();
}
class _PostEditorScreenState extends State<PostEditorScreen> {
static const Map<String, String> _kTitleMap = {
'stories': 'writePostTypeStory',
'articles': 'writePostTypeArticle',
};
bool _isBusy = false;
SnPublisher? _publisher;
List<SnPublisher>? _publishers;
void _fetchPublishers() async {
final sn = context.read<SnNetworkProvider>();
final resp = await sn.client.get('/cgi/co/publishers');
_publishers = List<SnPublisher>.from(
resp.data?.map((e) => SnPublisher.fromJson(e)) ?? [],
);
setState(() {
_publisher = _publishers?.first;
});
}
String? _title;
String? _description;
final TextEditingController _contentController = TextEditingController();
void _performAction() async {
if (_isBusy || _publisher == null) return;
final sn = context.read<SnNetworkProvider>();
setState(() => _isBusy = true);
try {
await sn.client.post('/cgi/co/${widget.mode}', data: {
'publisher': _publisher!.id,
'content': _contentController.value.text,
'title': _title,
'description': _description,
});
Navigator.pop(context, true);
} catch (err) {
context.showErrorDialog(err);
} finally {
setState(() => _isBusy = false);
}
}
void _updateMeta() {
showModalBottomSheet<PostMetaResult?>(
context: context,
builder: (context) => PostMetaEditor(
initialTitle: _title,
initialDescription: _description,
),
useRootNavigator: true,
).then((value) {
if (value is PostMetaResult) {
_title = value.title;
_description = value.description;
setState(() {});
}
});
}
@override
void dispose() {
_contentController.dispose();
super.dispose();
}
@override
void initState() {
super.initState();
if (!_kTitleMap.keys.contains(widget.mode)) {
context.showErrorDialog('Unknown post type');
Navigator.pop(context);
}
_fetchPublishers();
}
@override
Widget build(BuildContext context) {
return const Placeholder();
return AppScaffold(
appBar: AppBar(
leading: BackButton(
onPressed: () {
Navigator.pop(context);
},
),
flexibleSpace: Column(
children: [
Text(_title ?? 'Untitled')
.textStyle(Theme.of(context).textTheme.titleLarge!)
.textColor(Colors.white),
Text(_kTitleMap[widget.mode]!)
.tr()
.textColor(Colors.white.withAlpha((255 * 0.9).round())),
],
).padding(top: MediaQuery.of(context).padding.top),
actions: [
IconButton(
icon: const Icon(Symbols.tune),
onPressed: _isBusy ? null : _updateMeta,
),
],
),
body: Column(
children: [
DropdownButtonHideUnderline(
child: DropdownButton2<SnPublisher>(
isExpanded: true,
hint: Text(
'fieldPostPublisher',
style: TextStyle(
fontSize: 14,
color: Theme.of(context).hintColor,
),
).tr(),
items: <DropdownMenuItem<SnPublisher>>[
...(_publishers?.map(
(item) => DropdownMenuItem<SnPublisher>(
value: item,
child: Row(
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),
],
),
),
],
),
),
) ??
[]),
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: _publisher,
onChanged: (SnPublisher? value) {
if (value == null) {
GoRouter.of(context)
.pushNamed('accountPublisherNew')
.then((value) {
if (value == true) {
_publisher = null;
_publishers = null;
_fetchPublishers();
}
});
} else {
setState(() {
_publisher = value;
});
}
},
buttonStyleData: const ButtonStyleData(
padding: EdgeInsets.only(right: 16),
height: 48,
),
menuItemStyleData: const MenuItemStyleData(
height: 48,
),
),
),
const Divider(height: 1),
Expanded(
child: SingleChildScrollView(
padding: const EdgeInsets.symmetric(vertical: 8),
child: Column(
children: [
TextField(
controller: _contentController,
maxLines: null,
decoration: InputDecoration(
hintText: 'fieldPostContent'.tr(),
hintStyle: TextStyle(fontSize: 14),
isCollapsed: true,
contentPadding: const EdgeInsets.symmetric(
horizontal: 16,
),
border: InputBorder.none,
),
onTapOutside: (_) =>
FocusManager.instance.primaryFocus?.unfocus(),
)
],
),
),
),
Material(
elevation: 2,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (_isBusy)
const LinearProgressIndicator(
minHeight: 2,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: ScrollConfiguration(
behavior: _PostEditorActionScrollBehavior(),
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Row(
children: [
IconButton(
onPressed: () {},
icon: Icon(
Symbols.add_photo_alternate,
color: Theme.of(context).colorScheme.primary,
),
),
],
),
),
),
),
TextButton.icon(
onPressed: (_isBusy || _publisher == null)
? null
: _performAction,
icon: const Icon(Symbols.send),
label: Text('postPublish').tr(),
),
],
).padding(horizontal: 16),
],
).padding(
bottom: MediaQuery.of(context).padding.bottom,
top: 4,
),
),
],
),
);
}
}
class _PostEditorActionScrollBehavior extends MaterialScrollBehavior {
@override
Set<PointerDeviceKind> get dragDevices => {
PointerDeviceKind.touch,
PointerDeviceKind.mouse,
};
}

View File

@ -9,18 +9,19 @@ class ThemeSet {
ThemeSet createAppThemeSet() {
return ThemeSet(
light: createAppTheme(),
dark: createAppTheme(),
light: createAppTheme(Brightness.light),
dark: createAppTheme(Brightness.dark),
);
}
ThemeData createAppTheme() {
ThemeData createAppTheme(Brightness brightness) {
return ThemeData(
useMaterial3: false,
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.indigo,
brightness: Brightness.light,
brightness: brightness,
),
brightness: brightness,
iconTheme: const IconThemeData(fill: 0, weight: 400, opticalSize: 20),
);
}

View File

@ -0,0 +1,87 @@
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:styled_widget/styled_widget.dart';
class PostMetaResult {
final String title;
final String description;
PostMetaResult({required this.title, required this.description});
}
class PostMetaEditor extends StatefulWidget {
final String? initialTitle;
final String? initialDescription;
const PostMetaEditor({super.key, this.initialTitle, this.initialDescription});
@override
State<PostMetaEditor> createState() => _PostMetaEditorState();
}
class _PostMetaEditorState extends State<PostMetaEditor> {
final TextEditingController _titleController = TextEditingController();
final TextEditingController _descriptionController = TextEditingController();
void _applyChanges() {
Navigator.pop(
context,
PostMetaResult(
title: _titleController.text,
description: _descriptionController.text,
),
);
}
@override
void initState() {
super.initState();
_titleController.text = widget.initialTitle ?? '';
_descriptionController.text = widget.initialDescription ?? '';
}
@override
void dispose() {
_titleController.dispose();
_descriptionController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Column(
children: [
TextField(
controller: _titleController,
decoration: InputDecoration(
labelText: 'fieldPostTitle'.tr(),
border: UnderlineInputBorder(),
),
onTapOutside: (_) => FocusManager.instance.primaryFocus?.unfocus(),
),
const Gap(4),
TextField(
controller: _descriptionController,
maxLines: null,
decoration: InputDecoration(
labelText: 'fieldPostDescription'.tr(),
border: UnderlineInputBorder(),
),
onTapOutside: (_) => FocusManager.instance.primaryFocus?.unfocus(),
),
const Gap(12),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
ElevatedButton.icon(
onPressed: _applyChanges,
icon: const Icon(Symbols.save),
label: Text('apply').tr(),
),
],
)
],
).padding(horizontal: 24, vertical: 8);
}
}

View File

@ -334,6 +334,14 @@ packages:
url: "https://pub.dev"
source: hosted
version: "2.0.0"
dropdown_button2:
dependency: "direct main"
description:
name: dropdown_button2
sha256: b0fe8d49a030315e9eef6c7ac84ca964250155a6224d491c1365061bc974a9e1
url: "https://pub.dev"
source: hosted
version: "2.3.9"
easy_localization:
dependency: "direct main"
description:

View File

@ -65,6 +65,7 @@ dependencies:
flutter_image_compress: ^2.3.0
croppy: ^1.3.1
flutter_expandable_fab: ^2.3.0
dropdown_button2: ^2.3.9
dev_dependencies:
flutter_test: