💄 Optimize article compose
This commit is contained in:
@@ -169,7 +169,17 @@ class ExploreScreen extends HookConsumerWidget {
|
||||
),
|
||||
),
|
||||
),
|
||||
floatingActionButton: FloatingActionButton(
|
||||
floatingActionButton: InkWell(
|
||||
onLongPress: () {
|
||||
context.pushNamed('postCompose', queryParameters: {'type': '1'}).then(
|
||||
(value) {
|
||||
if (value != null) {
|
||||
activitiesNotifier.forceRefresh();
|
||||
}
|
||||
},
|
||||
);
|
||||
},
|
||||
child: FloatingActionButton(
|
||||
heroTag: Key("explore-page-fab"),
|
||||
onPressed: () {
|
||||
context.pushNamed('postCompose').then((value) {
|
||||
@@ -180,6 +190,7 @@ class ExploreScreen extends HookConsumerWidget {
|
||||
},
|
||||
child: const Icon(Symbols.edit),
|
||||
),
|
||||
),
|
||||
floatingActionButtonLocation: TabbedFabLocation(context),
|
||||
body: Builder(
|
||||
builder: (context) {
|
||||
|
||||
@@ -18,7 +18,8 @@ import 'package:island/widgets/post/publishers_modal.dart';
|
||||
import 'package:island/screens/posts/post_detail.dart';
|
||||
import 'package:island/widgets/post/compose_settings_sheet.dart';
|
||||
import 'package:island/services/compose_storage_db.dart';
|
||||
import 'package:island/widgets/post/draft_manager.dart';
|
||||
// DraftManagerSheet is now imported through compose_toolbar.dart
|
||||
import 'package:island/widgets/post/compose_toolbar.dart';
|
||||
import 'package:material_symbols_icons/symbols.dart';
|
||||
import 'package:styled_widget/styled_widget.dart';
|
||||
|
||||
@@ -422,85 +423,17 @@ class PostComposeScreen extends HookConsumerWidget {
|
||||
),
|
||||
|
||||
// Bottom toolbar
|
||||
Material(
|
||||
elevation: 4,
|
||||
child: Center(
|
||||
child: ConstrainedBox(
|
||||
constraints: BoxConstraints(maxWidth: 560),
|
||||
child: Row(
|
||||
children: [
|
||||
IconButton(
|
||||
onPressed:
|
||||
() => ComposeLogic.pickPhotoMedia(ref, state),
|
||||
tooltip: 'addPhoto'.tr(),
|
||||
icon: const Icon(Symbols.add_a_photo),
|
||||
color: colorScheme.primary,
|
||||
),
|
||||
IconButton(
|
||||
onPressed:
|
||||
() => ComposeLogic.pickVideoMedia(ref, state),
|
||||
tooltip: 'addVideo'.tr(),
|
||||
icon: const Icon(Symbols.videocam),
|
||||
color: colorScheme.primary,
|
||||
),
|
||||
IconButton(
|
||||
onPressed:
|
||||
() => ComposeLogic.linkAttachment(
|
||||
ref,
|
||||
state,
|
||||
context,
|
||||
),
|
||||
icon: const Icon(Symbols.attach_file),
|
||||
tooltip: 'linkAttachment'.tr(),
|
||||
color: colorScheme.primary,
|
||||
),
|
||||
Spacer(),
|
||||
if (originalPost == null && state.isEmpty)
|
||||
IconButton(
|
||||
icon: const Icon(Symbols.draft),
|
||||
color: colorScheme.primary,
|
||||
onPressed: () {
|
||||
showModalBottomSheet(
|
||||
ComposeToolbar(
|
||||
ref: ref,
|
||||
context: context,
|
||||
isScrollControlled: true,
|
||||
builder:
|
||||
(context) => DraftManagerSheet(
|
||||
onDraftSelected: (draftId) {
|
||||
final draft =
|
||||
ref.read(
|
||||
composeStorageNotifierProvider,
|
||||
)[draftId];
|
||||
if (draft != null) {
|
||||
state.titleController.text =
|
||||
draft.title ?? '';
|
||||
state.descriptionController.text =
|
||||
draft.description ?? '';
|
||||
state.contentController.text =
|
||||
draft.content ?? '';
|
||||
state.visibility.value =
|
||||
draft.visibility;
|
||||
}
|
||||
},
|
||||
),
|
||||
);
|
||||
},
|
||||
tooltip: 'drafts'.tr(),
|
||||
)
|
||||
else if (originalPost == null)
|
||||
IconButton(
|
||||
icon: const Icon(Symbols.save),
|
||||
color: colorScheme.primary,
|
||||
onPressed: () => ComposeLogic.saveDraft(ref, state),
|
||||
tooltip: 'saveDraft'.tr(),
|
||||
),
|
||||
],
|
||||
).padding(
|
||||
bottom: MediaQuery.of(context).padding.bottom + 16,
|
||||
horizontal: 16,
|
||||
top: 8,
|
||||
),
|
||||
),
|
||||
),
|
||||
colorScheme: colorScheme,
|
||||
isEmpty: state.isEmpty,
|
||||
titleController: state.titleController,
|
||||
descriptionController: state.descriptionController,
|
||||
contentController: state.contentController,
|
||||
visibility: state.visibility,
|
||||
attachments: state.attachments,
|
||||
originalPost: originalPost,
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
@@ -19,6 +19,7 @@ import 'package:island/widgets/content/markdown.dart';
|
||||
import 'package:island/widgets/post/compose_shared.dart';
|
||||
import 'package:island/widgets/post/compose_settings_sheet.dart';
|
||||
import 'package:island/services/compose_storage_db.dart';
|
||||
import 'package:island/widgets/post/compose_toolbar.dart';
|
||||
import 'package:island/widgets/post/publishers_modal.dart';
|
||||
import 'package:island/widgets/post/draft_manager.dart';
|
||||
|
||||
@@ -233,60 +234,12 @@ class ArticleComposeScreen extends HookConsumerWidget {
|
||||
}
|
||||
|
||||
Widget buildEditorPane() {
|
||||
return Column(
|
||||
return Center(
|
||||
child: ConstrainedBox(
|
||||
constraints: const BoxConstraints(maxWidth: 560),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Publisher row
|
||||
Card(
|
||||
margin: EdgeInsets.only(top: 8),
|
||||
elevation: 1,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(12),
|
||||
child: Row(
|
||||
children: [
|
||||
GestureDetector(
|
||||
child: ProfilePictureWidget(
|
||||
fileId: state.currentPublisher.value?.picture?.id,
|
||||
radius: 20,
|
||||
fallbackIcon:
|
||||
state.currentPublisher.value == null
|
||||
? Symbols.question_mark
|
||||
: null,
|
||||
),
|
||||
onTap: () {
|
||||
showModalBottomSheet(
|
||||
isScrollControlled: true,
|
||||
context: context,
|
||||
builder: (context) => const PublisherModal(),
|
||||
).then((value) {
|
||||
if (value != null) {
|
||||
state.currentPublisher.value = value;
|
||||
}
|
||||
});
|
||||
},
|
||||
),
|
||||
const Gap(16),
|
||||
if (state.currentPublisher.value == null)
|
||||
Text(
|
||||
'postPublisherUnselected'.tr(),
|
||||
style: theme.textTheme.bodyMedium,
|
||||
)
|
||||
else
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(state.currentPublisher.value!.nick).bold(),
|
||||
Text(
|
||||
'@${state.currentPublisher.value!.name}',
|
||||
).fontSize(12),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Content field with keyboard listener
|
||||
Expanded(
|
||||
child: RawKeyboardListener(
|
||||
focusNode: FocusNode(),
|
||||
@@ -304,7 +257,10 @@ class ArticleComposeScreen extends HookConsumerWidget {
|
||||
decoration: InputDecoration(
|
||||
border: InputBorder.none,
|
||||
hintText: 'postContent'.tr(),
|
||||
contentPadding: const EdgeInsets.all(8),
|
||||
contentPadding: const EdgeInsets.symmetric(
|
||||
vertical: 16,
|
||||
horizontal: 8,
|
||||
),
|
||||
),
|
||||
maxLines: null,
|
||||
expands: true,
|
||||
@@ -382,6 +338,8 @@ class ArticleComposeScreen extends HookConsumerWidget {
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@@ -406,39 +364,27 @@ class ArticleComposeScreen extends HookConsumerWidget {
|
||||
actions: [
|
||||
// Info banner for article compose
|
||||
const SizedBox.shrink(),
|
||||
if (originalPost == null) // Only show drafts for new articles
|
||||
IconButton(
|
||||
icon: const Icon(Symbols.draft),
|
||||
icon: ProfilePictureWidget(
|
||||
fileId: state.currentPublisher.value?.picture?.id,
|
||||
radius: 12,
|
||||
fallbackIcon:
|
||||
state.currentPublisher.value == null
|
||||
? Symbols.question_mark
|
||||
: null,
|
||||
),
|
||||
onPressed: () {
|
||||
showModalBottomSheet(
|
||||
context: context,
|
||||
isScrollControlled: true,
|
||||
builder:
|
||||
(context) => DraftManagerSheet(
|
||||
onDraftSelected: (draftId) {
|
||||
final draft =
|
||||
ref.read(
|
||||
composeStorageNotifierProvider,
|
||||
)[draftId];
|
||||
if (draft != null) {
|
||||
state.titleController.text = draft.title ?? '';
|
||||
state.descriptionController.text =
|
||||
draft.description ?? '';
|
||||
state.contentController.text =
|
||||
draft.content ?? '';
|
||||
state.visibility.value = draft.visibility;
|
||||
context: context,
|
||||
builder: (context) => const PublisherModal(),
|
||||
).then((value) {
|
||||
if (value != null) {
|
||||
state.currentPublisher.value = value;
|
||||
}
|
||||
});
|
||||
},
|
||||
),
|
||||
);
|
||||
},
|
||||
tooltip: 'drafts'.tr(),
|
||||
),
|
||||
IconButton(
|
||||
icon: const Icon(Symbols.save),
|
||||
onPressed: () => ComposeLogic.saveDraft(ref, state),
|
||||
tooltip: 'saveDraft'.tr(),
|
||||
),
|
||||
IconButton(
|
||||
icon: const Icon(Symbols.settings),
|
||||
onPressed: showSettingsSheet,
|
||||
@@ -500,7 +446,12 @@ class ArticleComposeScreen extends HookConsumerWidget {
|
||||
child: buildEditorPane(),
|
||||
),
|
||||
if (showPreview.value)
|
||||
Expanded(child: buildPreviewPane()),
|
||||
Expanded(
|
||||
child: buildPreviewPane().padding(
|
||||
vertical: 16,
|
||||
horizontal: 24,
|
||||
),
|
||||
),
|
||||
],
|
||||
)
|
||||
: showPreview.value
|
||||
@@ -510,26 +461,17 @@ class ArticleComposeScreen extends HookConsumerWidget {
|
||||
),
|
||||
|
||||
// Bottom toolbar
|
||||
Material(
|
||||
elevation: 4,
|
||||
child: Row(
|
||||
children: [
|
||||
IconButton(
|
||||
onPressed: () => ComposeLogic.pickPhotoMedia(ref, state),
|
||||
icon: const Icon(Symbols.add_a_photo),
|
||||
color: colorScheme.primary,
|
||||
),
|
||||
IconButton(
|
||||
onPressed: () => ComposeLogic.pickVideoMedia(ref, state),
|
||||
icon: const Icon(Symbols.videocam),
|
||||
color: colorScheme.primary,
|
||||
),
|
||||
],
|
||||
).padding(
|
||||
bottom: MediaQuery.of(context).padding.bottom + 16,
|
||||
horizontal: 16,
|
||||
top: 8,
|
||||
),
|
||||
ComposeToolbar(
|
||||
ref: ref,
|
||||
context: context,
|
||||
colorScheme: colorScheme,
|
||||
isEmpty: state.isEmpty,
|
||||
titleController: state.titleController,
|
||||
descriptionController: state.descriptionController,
|
||||
contentController: state.contentController,
|
||||
visibility: state.visibility,
|
||||
attachments: state.attachments,
|
||||
originalPost: originalPost,
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
127
lib/widgets/post/compose_toolbar.dart
Normal file
127
lib/widgets/post/compose_toolbar.dart
Normal file
@@ -0,0 +1,127 @@
|
||||
import 'package:easy_localization/easy_localization.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||
import 'package:material_symbols_icons/symbols.dart';
|
||||
import 'package:styled_widget/styled_widget.dart';
|
||||
|
||||
import '../../models/post.dart';
|
||||
import '../../models/file.dart';
|
||||
import '../../services/compose_storage_db.dart';
|
||||
import '../../widgets/post/draft_manager.dart';
|
||||
|
||||
class ComposeToolbar extends StatelessWidget {
|
||||
final WidgetRef ref;
|
||||
final BuildContext context;
|
||||
final ColorScheme colorScheme;
|
||||
final SnPost? originalPost;
|
||||
final bool isEmpty;
|
||||
final TextEditingController titleController;
|
||||
final TextEditingController descriptionController;
|
||||
final TextEditingController contentController;
|
||||
final ValueNotifier<int> visibility;
|
||||
final ValueNotifier<List<UniversalFile>> attachments;
|
||||
|
||||
const ComposeToolbar({
|
||||
super.key,
|
||||
required this.ref,
|
||||
required this.context,
|
||||
required this.colorScheme,
|
||||
required this.isEmpty,
|
||||
required this.titleController,
|
||||
required this.descriptionController,
|
||||
required this.contentController,
|
||||
required this.visibility,
|
||||
required this.attachments,
|
||||
this.originalPost,
|
||||
});
|
||||
|
||||
void _pickPhotoMedia() {
|
||||
// TODO: Implement photo picking logic
|
||||
}
|
||||
|
||||
void _pickVideoMedia() {
|
||||
// TODO: Implement video picking logic
|
||||
}
|
||||
|
||||
void _linkAttachment() {
|
||||
// TODO: Implement link attachment logic
|
||||
}
|
||||
|
||||
void _saveDraft() {
|
||||
// TODO: Implement draft saving logic
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Material(
|
||||
elevation: 4,
|
||||
child: Center(
|
||||
child: ConstrainedBox(
|
||||
constraints: const BoxConstraints(maxWidth: 560),
|
||||
child: Row(
|
||||
children: [
|
||||
IconButton(
|
||||
onPressed: _pickPhotoMedia,
|
||||
tooltip: 'addPhoto'.tr(),
|
||||
icon: const Icon(Symbols.add_a_photo),
|
||||
color: colorScheme.primary,
|
||||
),
|
||||
IconButton(
|
||||
onPressed: _pickVideoMedia,
|
||||
tooltip: 'addVideo'.tr(),
|
||||
icon: const Icon(Symbols.videocam),
|
||||
color: colorScheme.primary,
|
||||
),
|
||||
IconButton(
|
||||
onPressed: _linkAttachment,
|
||||
icon: const Icon(Symbols.attach_file),
|
||||
tooltip: 'linkAttachment'.tr(),
|
||||
color: colorScheme.primary,
|
||||
),
|
||||
const Spacer(),
|
||||
if (originalPost == null && isEmpty)
|
||||
IconButton(
|
||||
icon: const Icon(Symbols.draft),
|
||||
color: colorScheme.primary,
|
||||
onPressed: () {
|
||||
showModalBottomSheet(
|
||||
context: context,
|
||||
isScrollControlled: true,
|
||||
builder:
|
||||
(context) => DraftManagerSheet(
|
||||
onDraftSelected: (draftId) {
|
||||
final draft =
|
||||
ref.read(
|
||||
composeStorageNotifierProvider,
|
||||
)[draftId];
|
||||
if (draft != null) {
|
||||
titleController.text = draft.title ?? '';
|
||||
descriptionController.text =
|
||||
draft.description ?? '';
|
||||
contentController.text = draft.content ?? '';
|
||||
visibility.value = draft.visibility;
|
||||
}
|
||||
},
|
||||
),
|
||||
);
|
||||
},
|
||||
tooltip: 'drafts'.tr(),
|
||||
)
|
||||
else if (originalPost == null)
|
||||
IconButton(
|
||||
icon: const Icon(Symbols.save),
|
||||
color: colorScheme.primary,
|
||||
onPressed: _saveDraft,
|
||||
tooltip: 'saveDraft'.tr(),
|
||||
),
|
||||
],
|
||||
).padding(
|
||||
bottom: MediaQuery.of(context).padding.bottom + 16,
|
||||
horizontal: 16,
|
||||
top: 8,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user