✨ Basic post editor
This commit is contained in:
parent
c02b95c9ac
commit
302691f557
@ -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"
|
||||
}
|
||||
|
@ -66,5 +66,10 @@
|
||||
"publisherNewSubtitle": "创建一个新的公共身份。",
|
||||
"publisherSyncWithAccount": "同步账户信息",
|
||||
"writePostTypeStory": "发动态",
|
||||
"writePostTypeArticle": "写文章"
|
||||
"writePostTypeArticle": "写文章",
|
||||
"fieldPostPublisher": "帖子发布者",
|
||||
"fieldPostContent": "发生什么事了?!",
|
||||
"fieldPostTitle": "标题",
|
||||
"fieldPostDescription": "描述",
|
||||
"postPublish": "发布"
|
||||
}
|
||||
|
@ -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']!,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
@ -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();
|
||||
|
@ -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,
|
||||
};
|
||||
}
|
||||
|
@ -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),
|
||||
);
|
||||
}
|
||||
|
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"
|
||||
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:
|
||||
|
@ -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:
|
||||
|
Loading…
Reference in New Issue
Block a user