Hydrogen/Solian
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ Post overview w/ content length limit indicator

Browse Source
This commit is contained in:
LittleSheep 2024-07-30 14:49:26 +08:00
parent 6ace977bf6
commit 6590062dcb
10 changed files with 412 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
lib/controllers/post_editor_controller.dart Normal file
View File

@ -0,0 +1,114 @@
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:solian/models/post.dart';
import 'package:solian/models/realm.dart';
import 'package:solian/widgets/attachments/attachment_publish.dart';
import 'package:solian/widgets/posts/editor/post_editor_overview.dart';
import 'package:textfield_tags/textfield_tags.dart';
class PostEditorController extends GetxController {
final titleController = TextEditingController();
final descriptionController = TextEditingController();
final contentController = TextEditingController();
final tagController = StringTagController();
RxInt mode = 0.obs;
RxInt contentLength = 0.obs;
Rx<Post?> editTo = Rx(null);
Rx<Post?> replyTo = Rx(null);
Rx<Post?> repostTo = Rx(null);
Rx<Realm?> realmZone = Rx(null);
RxList<int> attachments = RxList<int>.empty(growable: true);
RxBool isDraft = false.obs;
PostEditorController() {
contentController.addListener(() {
contentLength.value = contentController.text.length;
});
}
Future<void> editOverview(BuildContext context) {
return showDialog(
context: context,
builder: (context) => PostEditorOverviewDialog(
controller: this,
),
);
}
Future<void> editAttachment(BuildContext context) {
return showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (context) => AttachmentPublishPopup(
usage: 'i.attachment',
current: attachments,
onUpdate: (value) {
attachments.value = value;
attachments.refresh();
},
),
);
}
void toggleDraftMode() {
isDraft.value = !isDraft.value;
}
set editTarget(Post? value) {
if (value == null) {
editTo.value = null;
return;
}
editTo.value = value;
isDraft.value = value.isDraft ?? false;
titleController.text = value.body['title'] ?? '';
descriptionController.text = value.body['description'] ?? '';
contentController.text = value.body['content'] ?? '';
attachments.value = value.body['attachments']?.cast<int>() ?? List.empty();
attachments.refresh();
contentLength.value = contentController.text.length;
}
String? get title {
if (titleController.text.isEmpty) return null;
return titleController.text;
}
String? get description {
if (descriptionController.text.isEmpty) return null;
return descriptionController.text;
}
Map<String, dynamic> get payload {
return {
'title': title,
'description': description,
'content': contentController.text,
'tags': tagController.getTags?.map((x) => {'alias': x}).toList() ??
List.empty(),
'attachments': attachments,
'is_draft': isDraft.value,
if (replyTo.value != null) 'reply_to': replyTo.value!.id,
if (repostTo.value != null) 'repost_to': repostTo.value!.id,
if (realmZone.value != null) 'realm': realmZone.value!.alias,
};
}
bool get isEmpty {
if (contentController.text.isEmpty) return true;
return false;
}
@override
void dispose() {
contentController.dispose();
tagController.dispose();
super.dispose();
}
}

8
lib/models/post.dart
View File

@ -6,6 +6,7 @@ class Post {
int id;
DateTime createdAt;
DateTime updatedAt;
DateTime? editedAt;
DateTime? deletedAt;
dynamic body;
List<Tag>? tags;
@ -28,6 +29,7 @@ class Post {
required this.id,
required this.createdAt,
required this.updatedAt,
required this.editedAt,
required this.deletedAt,
required this.body,
required this.tags,
@ -69,6 +71,9 @@ class Post {
repostTo:
json['repost_to'] != null ? Post.fromJson(json['repost_to']) : null,
realm: json['realm'] != null ? Realm.fromJson(json['realm']) : null,
editedAt: json['edited_at'] != null
? DateTime.parse(json['edited_at'])
: null,
publishedAt: json['published_at'] != null
? DateTime.parse(json['published_at'])
: null,
@ -86,7 +91,8 @@ class Post {
'id': id,
'created_at': createdAt.toIso8601String(),
'updated_at': updatedAt.toIso8601String(),
'deleted_at': deletedAt,
'edited_at': editedAt?.toIso8601String(),
'deleted_at': deletedAt?.toIso8601String(),
'body': body,
'tags': tags,
'categories': categories,

345
lib/screens/posts/post_editor.dart
View File

@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:get/get.dart';
import 'package:solian/controllers/post_editor_controller.dart';
import 'package:solian/exts.dart';
import 'package:solian/models/post.dart';
import 'package:solian/models/realm.dart';
@ -10,10 +11,7 @@ import 'package:solian/router.dart';
import 'package:solian/theme.dart';
import 'package:solian/widgets/app_bar_leading.dart';
import 'package:solian/widgets/app_bar_title.dart';
import 'package:solian/widgets/attachments/attachment_publish.dart';
import 'package:solian/widgets/posts/post_item.dart';
import 'package:solian/widgets/feed/feed_tags_field.dart';
import 'package:textfield_tags/textfield_tags.dart';
import 'package:badges/badges.dart' as badges;
class PostPublishArguments {
@ -44,54 +42,30 @@ class PostPublishScreen extends StatefulWidget {
}
class _PostPublishScreenState extends State<PostPublishScreen> {
final _contentController = TextEditingController();
final _tagsController = StringTagController();
final _editorController = PostEditorController();
bool _isBusy = false;
List<int> _attachments = List.empty();
bool _isDraft = false;
void showAttachments() {
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (context) => AttachmentPublishPopup(
usage: 'i.attachment',
current: _attachments,
onUpdate: (value) {
setState(() => _attachments = value);
},
),
);
}
void applyPost() async {
void _applyPost() async {
final AuthProvider auth = Get.find();
if (auth.isAuthorized.isFalse) return;
if (_contentController.value.text.isEmpty) return;
if (_editorController.isEmpty) return;
setState(() => _isBusy = true);
final client = auth.configureClient('interactive');
final payload = {
'content': _contentController.value.text,
'tags': _tagsController.getTags?.map((x) => {'alias': x}).toList() ??
List.empty(),
'attachments': _attachments,
'is_draft': _isDraft,
if (widget.reply != null) 'reply_to': widget.reply!.id,
if (widget.repost != null) 'repost_to': widget.repost!.id,
if (widget.realm != null) 'realm': widget.realm!.alias,
};
Response resp;
if (widget.edit != null) {
resp = await client.put('/stories/${widget.edit!.id}', payload);
resp = await client.put(
'/stories/${widget.edit!.id}',
_editorController.payload,
);
} else {
resp = await client.post('/stories', payload);
resp = await client.post(
'/stories',
_editorController.payload,
);
}
if (resp.statusCode != 200) {
context.showErrorDialog(resp.bodyString);
@ -104,9 +78,7 @@ class _PostPublishScreenState extends State<PostPublishScreen> {
void syncWidget() {
if (widget.edit != null) {
_contentController.text = widget.edit!.body['content'];
_attachments = widget.edit!.body['attachments']?.cast<int>() ?? List.empty();
_isDraft = widget.edit!.isDraft ?? false;
_editorController.editTarget = widget.edit;
}
}
@ -116,8 +88,8 @@ class _PostPublishScreenState extends State<PostPublishScreen> {
@override
void initState() {
syncWidget();
super.initState();
syncWidget();
}
@override
@ -139,151 +111,195 @@ class _PostPublishScreenState extends State<PostPublishScreen> {
toolbarHeight: SolianTheme.toolbarHeight(context),
actions: [
TextButton(
onPressed: _isBusy ? null : () => applyPost(),
child: Text(
_isDraft
? 'draftSave'.tr.toUpperCase()
: 'postAction'.tr.toUpperCase(),
onPressed: _isBusy ? null : () => _applyPost(),
child: Obx(
() => Text(
_editorController.isDraft.isTrue
? 'draftSave'.tr.toUpperCase()
: 'postAction'.tr.toUpperCase(),
),
),
)
],
),
body: Stack(
body: Column(
children: [
ListView(
children: [
if (_isBusy) const LinearProgressIndicator().animate().scaleX(),
if (widget.edit != null && widget.edit!.isDraft != true)
MaterialBanner(
leading: const Icon(Icons.edit),
leadingPadding: const EdgeInsets.only(left: 10, right: 20),
dividerColor: Colors.transparent,
content: Text('postEditingNotify'.tr),
actions: notifyBannerActions,
),
if (widget.reply != null)
ExpansionTile(
leading: const FaIcon(
FontAwesomeIcons.reply,
size: 18,
).paddingOnly(left: 2),
title: Text('postReplyingNotify'.trParams(
{'username': '@${widget.reply!.author.name}'},
)),
collapsedBackgroundColor:
Theme.of(context).colorScheme.surfaceContainer,
children: [
PostItem(
item: widget.reply!,
isReactable: false,
).paddingOnly(bottom: 8),
],
),
if (widget.repost != null)
ExpansionTile(
leading: const FaIcon(
FontAwesomeIcons.retweet,
size: 18,
).paddingOnly(left: 2),
title: Text('postRepostingNotify'.trParams(
{'username': '@${widget.repost!.author.name}'},
)),
collapsedBackgroundColor:
Theme.of(context).colorScheme.surfaceContainer,
children: [
PostItem(
item: widget.repost!,
isReactable: false,
).paddingOnly(bottom: 8),
],
),
if (widget.realm != null)
MaterialBanner(
leading: const Icon(Icons.group),
leadingPadding: const EdgeInsets.only(left: 10, right: 20),
dividerColor: Colors.transparent,
content: Text(
'postInRealmNotify'
.trParams({'realm': '#${widget.realm!.alias}'}),
),
actions: notifyBannerActions,
),
const Divider(thickness: 0.3, height: 0.3)
.paddingOnly(bottom: 8),
Container(
padding:
const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: TextField(
maxLines: null,
autofocus: true,
autocorrect: true,
keyboardType: TextInputType.multiline,
controller: _contentController,
decoration: InputDecoration.collapsed(
hintText: 'postContentPlaceholder'.tr,
),
onTapOutside: (_) =>
FocusManager.instance.primaryFocus?.unfocus(),
),
),
const SizedBox(height: 120)
],
ListTile(
tileColor: Theme.of(context).colorScheme.surfaceContainerLow,
title: Text(
_editorController.title ?? 'title'.tr,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
subtitle: Text(
_editorController.description ?? 'description'.tr,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
contentPadding: const EdgeInsets.only(
left: 16,
right: 8,
top: 0,
bottom: 0,
),
trailing: IconButton(
icon: const Icon(Icons.edit),
onPressed: () {
_editorController.editOverview(context).then((_) {
setState(() {});
});
},
),
),
Positioned(
bottom: 0,
left: 0,
right: 0,
child: Material(
elevation: 8,
color: Theme.of(context).colorScheme.surface,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TagsField(
initialTags:
widget.edit?.tags?.map((x) => x.alias).toList(),
tagsController: _tagsController,
hintText: 'postTagsPlaceholder'.tr,
Expanded(
child: ListView(
children: [
if (_isBusy)
const LinearProgressIndicator().animate().scaleX(),
if (widget.edit != null && widget.edit!.isDraft != true)
MaterialBanner(
leading: const Icon(Icons.edit),
leadingPadding:
const EdgeInsets.only(left: 10, right: 20),
dividerColor: Colors.transparent,
content: Text('postEditingNotify'.tr),
actions: notifyBannerActions,
),
const Divider(thickness: 0.3, height: 0.3),
SizedBox(
height: 56,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
IconButton(
icon: _isDraft
if (widget.reply != null)
ExpansionTile(
leading: const FaIcon(
FontAwesomeIcons.reply,
size: 18,
).paddingOnly(left: 2),
title: Text('postReplyingNotify'.trParams(
{'username': '@${widget.reply!.author.name}'},
)),
collapsedBackgroundColor:
Theme.of(context).colorScheme.surfaceContainer,
children: [
PostItem(
item: widget.reply!,
isReactable: false,
).paddingOnly(bottom: 8),
],
),
if (widget.repost != null)
ExpansionTile(
leading: const FaIcon(
FontAwesomeIcons.retweet,
size: 18,
).paddingOnly(left: 2),
title: Text('postRepostingNotify'.trParams(
{'username': '@${widget.repost!.author.name}'},
)),
collapsedBackgroundColor:
Theme.of(context).colorScheme.surfaceContainer,
children: [
PostItem(
item: widget.repost!,
isReactable: false,
).paddingOnly(bottom: 8),
],
),
if (widget.realm != null)
MaterialBanner(
leading: const Icon(Icons.group),
leadingPadding:
const EdgeInsets.only(left: 10, right: 20),
dividerColor: Colors.transparent,
content: Text(
'postInRealmNotify'
.trParams({'realm': '#${widget.realm!.alias}'}),
),
actions: notifyBannerActions,
),
Container(
padding:
const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: TextField(
maxLines: null,
autofocus: true,
autocorrect: true,
keyboardType: TextInputType.multiline,
controller: _editorController.contentController,
decoration: InputDecoration.collapsed(
hintText: 'postContentPlaceholder'.tr,
),
onTapOutside: (_) =>
FocusManager.instance.primaryFocus?.unfocus(),
),
),
const SizedBox(height: 120)
],
),
),
Material(
elevation: 8,
color: Theme.of(context).colorScheme.surface,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (_editorController.mode.value == 0)
Obx(
() => TweenAnimationBuilder<double>(
tween: Tween(
begin: 0,
end: _editorController.contentLength.value / 4096,
),
duration: const Duration(milliseconds: 300),
curve: Curves.easeInOut,
builder: (context, value, _) => LinearProgressIndicator(
minHeight: 2,
color: _editorController.contentLength.value > 4096
? Colors.red[900]
: Theme.of(context).colorScheme.primary,
value: value,
),
),
),
SizedBox(
height: 56,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
Obx(
() => IconButton(
icon: _editorController.isDraft.value
? const Icon(Icons.drive_file_rename_outline)
: const Icon(Icons.public),
color: _isDraft
color: _editorController.isDraft.value
? Colors.grey.shade600
: Colors.green.shade700,
onPressed: () {
setState(() => _isDraft = !_isDraft);
_editorController.toggleDraftMode();
},
),
IconButton(
icon: badges.Badge(
),
IconButton(
icon: Obx(
() => badges.Badge(
badgeContent: Text(
_attachments.length.toString(),
_editorController.attachments.length.toString(),
style: const TextStyle(color: Colors.white),
),
showBadge: _attachments.isNotEmpty,
showBadge:
_editorController.attachments.isNotEmpty,
position: badges.BadgePosition.topEnd(
top: -12,
end: -8,
),
child: const Icon(Icons.camera_alt),
),
color: Theme.of(context).colorScheme.primary,
onPressed: () => showAttachments(),
),
],
).paddingSymmetric(horizontal: 6, vertical: 8),
),
],
).paddingOnly(bottom: MediaQuery.of(context).padding.bottom),
),
color: Theme.of(context).colorScheme.primary,
onPressed: () =>
_editorController.editAttachment(context),
),
],
).paddingSymmetric(horizontal: 6, vertical: 8),
),
],
).paddingOnly(bottom: MediaQuery.of(context).padding.bottom),
),
],
),
@ -293,8 +309,7 @@ class _PostPublishScreenState extends State<PostPublishScreen> {
@override
void dispose() {
_contentController.dispose();
_tagsController.dispose();
_editorController.dispose();
super.dispose();
}
}

2
lib/translations/en_us.dart
View File

@ -40,6 +40,7 @@ const i18nEnglish = {
'username': 'Username',
'nickname': 'Nickname',
'password': 'Password',
'title': 'Title',
'description': 'Description',
'birthday': 'Birthday',
'firstName': 'First Name',
@ -94,6 +95,7 @@ const i18nEnglish = {
'totalDownvote': 'Downvote',
'pinPost': 'Pin this post',
'unpinPost': 'Unpin this post',
'postOverview': 'Overview',
'postPinned': 'Pinned',
'postListNews': 'News',
'postListShuffle': 'Random',

2
lib/translations/zh_cn.dart
View File

@ -40,6 +40,7 @@ const i18nSimplifiedChinese = {
'username': '用户名',
'nickname': '显示名',
'password': '密码',
'title': '标题',
'description': '简介',
'birthday': '生日',
'firstName': '名称',
@ -88,6 +89,7 @@ const i18nSimplifiedChinese = {
'totalDownvote': '获踩数',
'pinPost': '置顶本帖',
'unpinPost': '取消置顶本帖',
'postOverview': '帖子概览',
'postPinned': '已置顶',
'postEditorModeStory': '发个帖子',
'postEditorModeArticle': '撰写文章',

13
lib/widgets/markdown_text_content.dart
View File

@ -1,5 +1,5 @@
import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
import 'package:flutter_markdown_selectionarea/flutter_markdown.dart';
import 'package:markdown/markdown.dart' as markdown;
import 'package:url_launcher/url_launcher_string.dart';
@ -13,8 +13,7 @@ class MarkdownTextContent extends StatelessWidget {
this.isSelectable = false,
});
@override
Widget build(BuildContext context) {
Widget _buildContent(BuildContext context) {
return Markdown(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
@ -48,4 +47,12 @@ class MarkdownTextContent extends StatelessWidget {
},
);
}
@override
Widget build(BuildContext context) {
if (isSelectable) {
return SelectionArea(child: _buildContent(context));
}
return _buildContent(context);
}
}

51
lib/widgets/posts/editor/post_editor_overview.dart Normal file
View File

@ -0,0 +1,51 @@
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:solian/controllers/post_editor_controller.dart';
class PostEditorOverviewDialog extends StatelessWidget {
final PostEditorController controller;
const PostEditorOverviewDialog({super.key, required this.controller});
@override
Widget build(BuildContext context) {
return AlertDialog(
title: Text('postOverview'.tr),
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextField(
autofocus: true,
autocorrect: true,
controller: controller.titleController,
decoration: InputDecoration(
border: const UnderlineInputBorder(),
hintText: 'title'.tr,
),
onTapOutside: (_) => FocusManager.instance.primaryFocus?.unfocus(),
),
const SizedBox(height: 16),
TextField(
enabled: controller.mode.value == 1,
maxLines: null,
autofocus: true,
autocorrect: true,
keyboardType: TextInputType.multiline,
controller: controller.descriptionController,
decoration: InputDecoration(
border: const UnderlineInputBorder(),
hintText: 'description'.tr,
),
onTapOutside: (_) => FocusManager.instance.primaryFocus?.unfocus(),
),
],
),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: Text('confirm'.tr),
),
],
);
}
}

45
lib/widgets/posts/post_item.dart
View File

@ -55,7 +55,7 @@ class _PostItemState extends State<PostItem> {
Widget _buildDate() {
if (widget.isFullDate) {
return Text(DateFormat('y/M/d H:m')
return Text(DateFormat('y/M/d HH:mm')
.format(item.publishedAt?.toLocal() ?? DateTime.now()));
} else {
return Text(
@ -75,20 +75,49 @@ class _PostItemState extends State<PostItem> {
content: item.author.avatar.toString(),
radius: 10,
).paddingOnly(left: 2),
Text(
item.author.nick,
style: const TextStyle(fontWeight: FontWeight.bold),
).paddingOnly(left: widget.isCompact ? 6 : 12),
_buildDate().paddingOnly(left: 4),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
item.author.nick,
style: const TextStyle(fontWeight: FontWeight.bold),
),
_buildDate().paddingOnly(left: 4),
],
),
if (item.body['title'] != null)
Text(
item.body['title'],
style: Theme.of(context)
.textTheme
.bodyMedium!
.copyWith(fontSize: 15),
),
if (item.body['description'] != null)
Text(
item.body['description'],
style: Theme.of(context).textTheme.bodySmall,
),
if (item.body['description'] != null ||
item.body['title'] != null)
const Divider(thickness: 0.3, height: 1).paddingSymmetric(
vertical: 8,
),
],
).paddingOnly(left: widget.isCompact ? 6 : 12),
),
],
);
}
Widget _buildFooter() {
List<String> labels = List.empty(growable: true);
if (widget.item.createdAt != widget.item.updatedAt) {
if (widget.item.editedAt != null) {
labels.add('postEdited'.trParams({
'date': DateFormat('yy/M/d H:m').format(item.updatedAt.toLocal()),
'date': DateFormat('yy/M/d HH:mm').format(item.editedAt!.toLocal()),
}));
}
if (widget.item.realm != null) {

8
pubspec.lock
View File

@ -550,6 +550,14 @@ packages:
url: "https://pub.dev"
source: hosted
version: "0.7.3"
flutter_markdown_selectionarea:
dependency: "direct main"
description:
name: flutter_markdown_selectionarea
sha256: d4bc27e70a5c40ebdab23a4b81f75d53696a214d4d1f13c12045b38a0ddc58a2
url: "https://pub.dev"
source: hosted
version: "0.6.17+1"
flutter_plugin_android_lifecycle:
dependency: transitive
description:

1
pubspec.yaml
View File

@ -58,6 +58,7 @@ dependencies:
dismissible_page: ^1.0.2
share_plus: ^10.0.0
flutter_cache_manager: ^3.3.3
flutter_markdown_selectionarea: ^0.6.17+1
dev_dependencies:
flutter_test: