✨ Basic post editor
This commit is contained in:
parent
c02b95c9ac
commit
302691f557
@ -66,5 +66,10 @@
|
|||||||
"publisherNewSubtitle": "Create a new publisher identity.",
|
"publisherNewSubtitle": "Create a new publisher identity.",
|
||||||
"publisherSyncWithAccount": "Sync with account",
|
"publisherSyncWithAccount": "Sync with account",
|
||||||
"writePostTypeStory": "Post a story",
|
"writePostTypeStory": "Post a story",
|
||||||
"writePostTypeArticle": "Write an article"
|
"writePostTypeArticle": "Write an article",
|
||||||
|
"fieldPostPublisher": "Post publisher",
|
||||||
|
"fieldPostContent": "What happened?!",
|
||||||
|
"fieldPostTitle": "Title",
|
||||||
|
"fieldPostDescription": "Description",
|
||||||
|
"postPublish": "Publish"
|
||||||
}
|
}
|
||||||
|
@ -66,5 +66,10 @@
|
|||||||
"publisherNewSubtitle": "创建一个新的公共身份。",
|
"publisherNewSubtitle": "创建一个新的公共身份。",
|
||||||
"publisherSyncWithAccount": "同步账户信息",
|
"publisherSyncWithAccount": "同步账户信息",
|
||||||
"writePostTypeStory": "发动态",
|
"writePostTypeStory": "发动态",
|
||||||
"writePostTypeArticle": "写文章"
|
"writePostTypeArticle": "写文章",
|
||||||
|
"fieldPostPublisher": "帖子发布者",
|
||||||
|
"fieldPostContent": "发生什么事了?!",
|
||||||
|
"fieldPostTitle": "标题",
|
||||||
|
"fieldPostDescription": "描述",
|
||||||
|
"postPublish": "发布"
|
||||||
}
|
}
|
||||||
|
@ -44,7 +44,9 @@ final appRouter = GoRouter(
|
|||||||
GoRoute(
|
GoRoute(
|
||||||
path: '/post/write/:mode',
|
path: '/post/write/:mode',
|
||||||
name: 'postEditor',
|
name: 'postEditor',
|
||||||
builder: (context, state) => const PostEditorScreen(),
|
builder: (context, state) => PostEditorScreen(
|
||||||
|
mode: state.pathParameters['mode']!,
|
||||||
|
),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
|
@ -113,7 +113,7 @@ class _ExploreScreenState extends State<ExploreScreen> {
|
|||||||
tooltip: 'writePostTypeStory'.tr(),
|
tooltip: 'writePostTypeStory'.tr(),
|
||||||
onPressed: () {
|
onPressed: () {
|
||||||
GoRouter.of(context).pushNamed('postEditor', pathParameters: {
|
GoRouter.of(context).pushNamed('postEditor', pathParameters: {
|
||||||
'mode': 'story',
|
'mode': 'stories',
|
||||||
}).then((value) {
|
}).then((value) {
|
||||||
if (value == true) {
|
if (value == true) {
|
||||||
_posts.clear();
|
_posts.clear();
|
||||||
@ -135,7 +135,7 @@ class _ExploreScreenState extends State<ExploreScreen> {
|
|||||||
tooltip: 'writePostTypeArticle'.tr(),
|
tooltip: 'writePostTypeArticle'.tr(),
|
||||||
onPressed: () {
|
onPressed: () {
|
||||||
GoRouter.of(context).pushNamed('postEditor', pathParameters: {
|
GoRouter.of(context).pushNamed('postEditor', pathParameters: {
|
||||||
'mode': 'article',
|
'mode': 'articles',
|
||||||
}).then((value) {
|
}).then((value) {
|
||||||
if (value == true) {
|
if (value == true) {
|
||||||
_posts.clear();
|
_posts.clear();
|
||||||
|
@ -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: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 {
|
class PostEditorScreen extends StatefulWidget {
|
||||||
const PostEditorScreen({super.key});
|
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
|
@override
|
||||||
Widget build(BuildContext context) {
|
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,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
@ -9,18 +9,19 @@ class ThemeSet {
|
|||||||
|
|
||||||
ThemeSet createAppThemeSet() {
|
ThemeSet createAppThemeSet() {
|
||||||
return ThemeSet(
|
return ThemeSet(
|
||||||
light: createAppTheme(),
|
light: createAppTheme(Brightness.light),
|
||||||
dark: createAppTheme(),
|
dark: createAppTheme(Brightness.dark),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
ThemeData createAppTheme() {
|
ThemeData createAppTheme(Brightness brightness) {
|
||||||
return ThemeData(
|
return ThemeData(
|
||||||
useMaterial3: false,
|
useMaterial3: false,
|
||||||
colorScheme: ColorScheme.fromSeed(
|
colorScheme: ColorScheme.fromSeed(
|
||||||
seedColor: Colors.indigo,
|
seedColor: Colors.indigo,
|
||||||
brightness: Brightness.light,
|
brightness: brightness,
|
||||||
),
|
),
|
||||||
|
brightness: brightness,
|
||||||
iconTheme: const IconThemeData(fill: 0, weight: 400, opticalSize: 20),
|
iconTheme: const IconThemeData(fill: 0, weight: 400, opticalSize: 20),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
87
lib/widgets/post/post_meta_editor.dart
Normal file
87
lib/widgets/post/post_meta_editor.dart
Normal 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);
|
||||||
|
}
|
||||||
|
}
|
@ -334,6 +334,14 @@ packages:
|
|||||||
url: "https://pub.dev"
|
url: "https://pub.dev"
|
||||||
source: hosted
|
source: hosted
|
||||||
version: "2.0.0"
|
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:
|
easy_localization:
|
||||||
dependency: "direct main"
|
dependency: "direct main"
|
||||||
description:
|
description:
|
||||||
|
@ -65,6 +65,7 @@ dependencies:
|
|||||||
flutter_image_compress: ^2.3.0
|
flutter_image_compress: ^2.3.0
|
||||||
croppy: ^1.3.1
|
croppy: ^1.3.1
|
||||||
flutter_expandable_fab: ^2.3.0
|
flutter_expandable_fab: ^2.3.0
|
||||||
|
dropdown_button2: ^2.3.9
|
||||||
|
|
||||||
dev_dependencies:
|
dev_dependencies:
|
||||||
flutter_test:
|
flutter_test:
|
||||||
|
Loading…
Reference in New Issue
Block a user