SolarNetwork/App
3
3
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

💄 Optimize the article editor

Browse Source
This commit is contained in:
LittleSheep
2026-01-17 14:50:16 +08:00
parent 09767e113f
commit c5d667ecf3
3 changed files with 99 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
lib/screens/posts/compose_article.dart
View File

@@ -201,6 +201,7 @@ class ArticleComposeScreen extends HookConsumerWidget {
return Container(
decoration: BoxDecoration(
color: colorScheme.surface,
border: Border.all(color: colorScheme.outline.withOpacity(0.3)),
borderRadius: BorderRadius.circular(8),
),
@@ -225,19 +226,14 @@ class ArticleComposeScreen extends HookConsumerWidget {
],
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: widgetItem,
),
),
Expanded(child: widgetItem),
],
),
);
}
Widget buildEditorPane() {
return Center(
final editorContent = Center(
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 560),
child: Column(
@@ -267,6 +263,20 @@ class ArticleComposeScreen extends HookConsumerWidget {
),
),
);
// Add background color for mobile editor pane
if (!isWideScreen(context)) {
return Container(
decoration: BoxDecoration(
color: colorScheme.surface,
borderRadius: BorderRadius.circular(8),
),
margin: const EdgeInsets.symmetric(vertical: 8),
child: editorContent,
);
}
return editorContent;
}
return PopScope(
@@ -325,7 +335,9 @@ class ArticleComposeScreen extends HookConsumerWidget {
Tooltip(
message: 'togglePreview'.tr(),
child: IconButton(
icon: Icon(showPreview.value ? Symbols.edit : Symbols.preview),
icon: Icon(
showPreview.value ? Symbols.preview_off : Symbols.preview,
),
onPressed: () => showPreview.value = !showPreview.value,
),
),
@@ -395,12 +407,25 @@ class ArticleComposeScreen extends HookConsumerWidget {
switchOutCurve: Curves.easeOutCubic,
transitionBuilder:
(Widget child, Animation<double> animation) {
return FadeTransition(
opacity: animation,
child: SlideTransition(
final isWide = isWideScreen(context);
if (isWide) {
// Desktop: scale animation
return ScaleTransition(
scale: Tween<double>(begin: 0.95, end: 1.0)
.animate(
CurvedAnimation(
parent: animation,
curve: Curves.easeOutCubic,
),
),
child: child,
);
} else {
// Mobile: horizontal slide animation
return SlideTransition(
position:
Tween<Offset>(
begin: const Offset(0, 0.05),
begin: const Offset(0.05, 0),
end: Offset.zero,
).animate(
CurvedAnimation(
@@ -409,8 +434,8 @@ class ArticleComposeScreen extends HookConsumerWidget {
),
),
child: child,
),
);
);
}
},
child: isWideScreen(context)
? Row(

2
lib/widgets/common/responsive_sidebar.dart
View File

@@ -44,7 +44,7 @@ class ResponsiveSidebar extends HookConsumerWidget {
showDrawer.value = true;
animationController.forward();
} else if (!showSidebar.value && showDrawer.value) {
showDrawer.value = false;
// Don't set showDrawer.value = false here - let animation complete first
animationController.reverse();
}
} else {

128
lib/widgets/post/compose_card.dart
View File

@@ -121,11 +121,10 @@ class PostComposeCard extends HookConsumerWidget {
content: composeState.contentController.text,
visibility: composeState.visibility.value,
type: composeState.postType,
attachments:
composeState.attachments.value
.where((e) => e.isOnCloud)
.map((e) => e.data as SnCloudFile)
.toList(),
attachments: composeState.attachments.value
.where((e) => e.isOnCloud)
.map((e) => e.data as SnCloudFile)
.toList(),
publisher: composeState.currentPublisher.value!,
updatedAt: DateTime.now(),
);
@@ -218,27 +217,25 @@ class PostComposeCard extends HookConsumerWidget {
IconButton(
onPressed:
(composeState.submitting.value ||
composeState.currentPublisher.value == null)
? null
: performSubmit,
icon:
composeState.submitting.value
? SizedBox(
width: 24,
height: 24,
child: const CircularProgressIndicator(
strokeWidth: 2,
),
)
: Icon(
originalPost != null
? Symbols.edit
: Symbols.upload,
composeState.currentPublisher.value == null)
? null
: performSubmit,
icon: composeState.submitting.value
? SizedBox(
width: 24,
height: 24,
child: const CircularProgressIndicator(
strokeWidth: 2,
),
tooltip:
originalPost != null
? 'postUpdate'.tr()
: 'postPublish'.tr(),
)
: Icon(
originalPost != null
? Symbols.edit
: Symbols.upload,
),
tooltip: originalPost != null
? 'postUpdate'.tr()
: 'postPublish'.tr(),
visualDensity: const VisualDensity(
horizontal: -4,
vertical: -2,
@@ -268,13 +265,10 @@ class PostComposeCard extends HookConsumerWidget {
context: context,
isScrollControlled: true,
useRootNavigator: true,
builder:
(context) => SheetScaffold(
titleText: 'Post Preview',
child: SingleChildScrollView(
child: PostItem(item: post),
),
),
builder: (context) => SheetScaffold(
titleText: 'Post Preview',
child: SingleChildScrollView(child: PostItem(item: post)),
),
);
},
),
@@ -283,16 +277,15 @@ class PostComposeCard extends HookConsumerWidget {
Expanded(
child: KeyboardListener(
focusNode: FocusNode(),
onKeyEvent:
(event) => ComposeLogic.handleKeyPress(
event,
composeState,
ref,
context,
originalPost: originalPost,
repliedPost: repliedPost,
forwardedPost: forwardedPost,
),
onKeyEvent: (event) => ComposeLogic.handleKeyPress(
event,
composeState,
ref,
context,
originalPost: originalPost,
repliedPost: repliedPost,
forwardedPost: forwardedPost,
),
child: SingleChildScrollView(
padding: const EdgeInsets.all(16),
child: ConstrainedBox(
@@ -304,17 +297,16 @@ class PostComposeCard extends HookConsumerWidget {
// Publisher profile picture
GestureDetector(
child: ProfilePictureWidget(
fileId:
composeState
.currentPublisher
.value
?.picture
?.id,
fileId: composeState
.currentPublisher
.value
?.picture
?.id,
radius: 20,
fallbackIcon:
composeState.currentPublisher.value == null
? Symbols.question_mark
: null,
? Symbols.question_mark
: null,
),
onTap: () {
if (composeState.currentPublisher.value == null) {
@@ -326,8 +318,8 @@ class PostComposeCard extends HookConsumerWidget {
context: context,
isScrollControlled: true,
useRootNavigator: true,
builder:
(context) => const NewPublisherScreen(),
builder: (context) =>
const NewPublisherScreen(),
).then((value) {
if (value != null) {
composeState.currentPublisher.value =
@@ -370,9 +362,8 @@ class PostComposeCard extends HookConsumerWidget {
context: context,
isScrollControlled: true,
useRootNavigator: true,
builder:
(context) =>
const NewPublisherScreen(),
builder: (context) =>
const NewPublisherScreen(),
).then((value) {
if (value != null) {
composeState.currentPublisher.value =
@@ -388,8 +379,8 @@ class PostComposeCard extends HookConsumerWidget {
isScrollControlled: true,
useRootNavigator: true,
context: context,
builder:
(context) => const PublisherModal(),
builder: (context) =>
const PublisherModal(),
).then((value) {
if (value != null) {
composeState.currentPublisher.value =
@@ -415,19 +406,16 @@ class PostComposeCard extends HookConsumerWidget {
),
// Bottom toolbar
SizedBox(
height: 65,
child: ClipRRect(
borderRadius: const BorderRadius.only(
bottomLeft: Radius.circular(8),
bottomRight: Radius.circular(8),
),
child: ComposeToolbar(
state: composeState,
originalPost: originalPost,
isCompact: true,
useSafeArea: isContained,
),
ClipRRect(
borderRadius: const BorderRadius.only(
bottomLeft: Radius.circular(8),
bottomRight: Radius.circular(8),
),
child: ComposeToolbar(
state: composeState,
originalPost: originalPost,
isCompact: true,
useSafeArea: isContained,
),
),
],