💄 Better article editor

This commit is contained in:
2026-01-17 14:42:45 +08:00
parent 9ca5c63afd
commit 09767e113f
15 changed files with 1169 additions and 649 deletions

View File

@@ -1,5 +1,6 @@
import 'dart:math' as math;
import 'package:desktop_drop/desktop_drop.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
@@ -26,9 +27,11 @@ import 'package:island/models/activity.dart';
import 'package:island/screens/notification.dart';
import 'package:material_symbols_icons/material_symbols_icons.dart';
import 'package:slide_countdown/slide_countdown.dart';
import 'package:styled_widget/styled_widget.dart';
import 'package:island/widgets/share/share_sheet.dart';
import 'dart:async';
import 'package:styled_widget/styled_widget.dart';
class DashboardScreen extends HookConsumerWidget {
const DashboardScreen({super.key});
@@ -51,77 +54,129 @@ class DashboardGrid extends HookConsumerWidget {
final userInfo = ref.watch(userInfoProvider);
return Container(
constraints: BoxConstraints(
maxHeight: isWide
? math.min(640, MediaQuery.sizeOf(context).height * 0.65)
: MediaQuery.sizeOf(context).height,
),
padding: isWide
? EdgeInsets.only(top: devicePadding.top)
: EdgeInsets.only(top: 24 + devicePadding.top),
child: Column(
spacing: 16,
mainAxisAlignment: MainAxisAlignment.center,
final dragging = useState(false);
return DropTarget(
onDragDone: (detail) {
dragging.value = false;
if (detail.files.isNotEmpty) {
showModalBottomSheet(
context: context,
isScrollControlled: true,
useRootNavigator: true,
builder: (context) => ShareSheet.files(files: detail.files),
);
}
},
onDragEntered: (_) => dragging.value = true,
onDragExited: (_) => dragging.value = false,
child: Stack(
children: [
// Clock card spans full width
if (isWide)
ClockCard().padding(horizontal: 24)
else
Row(
Container(
constraints: BoxConstraints(
maxHeight: isWide
? math.min(640, MediaQuery.sizeOf(context).height * 0.65)
: MediaQuery.sizeOf(context).height,
),
padding: isWide
? EdgeInsets.only(top: devicePadding.top)
: EdgeInsets.only(top: 24 + devicePadding.top),
child: Column(
spacing: 16,
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Gap(8),
Expanded(child: ClockCard(compact: true)),
IconButton(
onPressed: () {
eventBus.fire(CommandPaletteTriggerEvent());
},
icon: const Icon(Symbols.search),
tooltip: 'searchAnything'.tr(),
),
// Clock card spans full width
if (isWide)
ClockCard().padding(horizontal: 24)
else
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Gap(8),
Expanded(child: ClockCard(compact: true)),
IconButton(
onPressed: () {
eventBus.fire(CommandPaletteTriggerEvent());
},
icon: const Icon(Symbols.search),
tooltip: 'searchAnything'.tr(),
),
],
).padding(horizontal: 24),
// Row with two cards side by side
if (isWide)
Padding(
padding: EdgeInsets.symmetric(horizontal: isWide ? 24 : 16),
child: SearchBar(
hintText: 'searchAnything'.tr(),
constraints: const BoxConstraints(minHeight: 56),
leading: const Icon(
Symbols.search,
).padding(horizontal: 24),
readOnly: true,
onTap: () {
eventBus.fire(CommandPaletteTriggerEvent());
},
),
),
if (userInfo.value != null)
Expanded(
child:
SingleChildScrollView(
padding: isWide
? const EdgeInsets.symmetric(horizontal: 24)
: EdgeInsets.only(
bottom: 64 + devicePadding.bottom,
),
scrollDirection: isWide
? Axis.horizontal
: Axis.vertical,
child: isWide
? _DashboardGridWide()
: _DashboardGridNarrow(),
)
.clipRRect(
topLeft: isWide ? 0 : 12,
topRight: isWide ? 0 : 12,
)
.padding(horizontal: isWide ? 0 : 16),
)
else
Center(
child: _UnauthorizedCard(isWide: isWide),
).padding(horizontal: isWide ? 24 : 16),
],
).padding(horizontal: 24),
// Row with two cards side by side
if (isWide)
Padding(
padding: EdgeInsets.symmetric(horizontal: isWide ? 24 : 16),
child: SearchBar(
hintText: 'searchAnything'.tr(),
constraints: const BoxConstraints(minHeight: 56),
leading: const Icon(Symbols.search).padding(horizontal: 24),
readOnly: true,
onTap: () {
eventBus.fire(CommandPaletteTriggerEvent());
},
),
),
if (dragging.value)
Positioned.fill(
child: Container(
color: Theme.of(
context,
).colorScheme.primaryContainer.withOpacity(0.9),
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Symbols.upload_file,
size: 64,
color: Theme.of(context).colorScheme.primary,
),
const Gap(16),
Text(
'dropToShare'.tr(),
style: Theme.of(context).textTheme.headlineMedium
?.copyWith(
color: Theme.of(context).colorScheme.primary,
fontWeight: FontWeight.bold,
),
),
],
),
),
),
),
if (userInfo.value != null)
Expanded(
child:
SingleChildScrollView(
padding: isWide
? const EdgeInsets.symmetric(horizontal: 24)
: EdgeInsets.only(
bottom: 64 + devicePadding.bottom,
),
scrollDirection: isWide
? Axis.horizontal
: Axis.vertical,
child: isWide
? _DashboardGridWide()
: _DashboardGridNarrow(),
)
.clipRRect(
topLeft: isWide ? 0 : 12,
topRight: isWide ? 0 : 12,
)
.padding(horizontal: isWide ? 0 : 16),
)
else
Center(
child: _UnauthorizedCard(isWide: isWide),
).padding(horizontal: isWide ? 24 : 16),
],
),
);

View File

@@ -1,4 +1,3 @@
import 'package:desktop_drop/desktop_drop.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
@@ -29,10 +28,9 @@ import 'package:island/widgets/realm/realm_card.dart';
import 'package:island/widgets/publisher/publisher_card.dart';
import 'package:island/widgets/web_article_card.dart';
import 'package:island/services/event_bus.dart';
import 'package:island/widgets/share/share_sheet.dart';
import 'package:styled_widget/styled_widget.dart';
import 'package:super_sliver_list/super_sliver_list.dart';
import 'package:island/widgets/posts/post_subscription_filter.dart';
import 'package:island/widgets/post/filters/post_subscription_filter.dart';
import 'package:island/pods/post/post_list.dart';
class ExploreScreen extends HookConsumerWidget {
@@ -193,118 +191,66 @@ class ExploreScreen extends HookConsumerWidget {
hasSubscriptionsSelected,
);
final dragging = useState(false);
return DropTarget(
onDragDone: (detail) {
dragging.value = false;
if (detail.files.isNotEmpty) {
showModalBottomSheet(
context: context,
isScrollControlled: true,
useRootNavigator: true,
builder: (context) => ShareSheet.files(files: detail.files),
);
}
},
onDragEntered: (_) => dragging.value = true,
onDragExited: (_) => dragging.value = false,
child: Stack(
children: [
AppScaffold(
isNoBackground: false,
appBar: appBar,
floatingActionButton: userInfo.value != null
? FloatingActionButton(
child: const Icon(Symbols.create),
onPressed: () {
showModalBottomSheet(
context: context,
isScrollControlled: true,
useRootNavigator: true,
builder: (context) => Column(
mainAxisSize: MainAxisSize.min,
children: [
const Gap(40),
ListTile(
contentPadding: const EdgeInsets.symmetric(
horizontal: 24,
),
leading: const Icon(Symbols.post_add_rounded),
title: Text('postCompose').tr(),
onTap: () async {
Navigator.of(context).pop();
await PostComposeSheet.show(context);
},
),
ListTile(
contentPadding: const EdgeInsets.symmetric(
horizontal: 24,
),
leading: const Icon(Symbols.article),
title: Text('articleCompose').tr(),
onTap: () async {
Navigator.of(context).pop();
GoRouter.of(
context,
).pushNamed('articleCompose');
},
),
const Gap(16),
],
),
);
},
).padding(bottom: MediaQuery.of(context).padding.bottom)
: null,
body: isWide
? _buildWideBody(
context,
ref,
filterBar,
user,
notificationCount,
query,
events,
selectedDay,
currentFilter.value,
selectedPublisherNames,
selectedCategoryIds,
selectedTagIds,
)
: _buildNarrowBody(context, ref, currentFilter.value),
),
if (dragging.value)
Positioned.fill(
child: Container(
color: Theme.of(
context,
).colorScheme.primaryContainer.withOpacity(0.9),
child: Center(
child: Column(
return AppScaffold(
isNoBackground: false,
appBar: appBar,
floatingActionButton: userInfo.value != null
? FloatingActionButton(
child: const Icon(Symbols.create),
onPressed: () {
showModalBottomSheet(
context: context,
isScrollControlled: true,
useRootNavigator: true,
builder: (context) => Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Symbols.upload_file,
size: 64,
color: Theme.of(context).colorScheme.primary,
const Gap(40),
ListTile(
contentPadding: const EdgeInsets.symmetric(
horizontal: 24,
),
leading: const Icon(Symbols.post_add_rounded),
title: Text('postCompose').tr(),
onTap: () async {
Navigator.of(context).pop();
await PostComposeSheet.show(context);
},
),
ListTile(
contentPadding: const EdgeInsets.symmetric(
horizontal: 24,
),
leading: const Icon(Symbols.article),
title: Text('articleCompose').tr(),
onTap: () async {
Navigator.of(context).pop();
GoRouter.of(context).pushNamed('articleCompose');
},
),
const Gap(16),
Text(
'dropToShare'.tr(),
style: Theme.of(context).textTheme.headlineMedium
?.copyWith(
color: Theme.of(context).colorScheme.primary,
fontWeight: FontWeight.bold,
),
),
],
),
),
),
),
],
),
);
},
).padding(bottom: MediaQuery.of(context).padding.bottom)
: null,
body: isWide
? _buildWideBody(
context,
ref,
filterBar,
user,
notificationCount,
query,
events,
selectedDay,
currentFilter.value,
selectedPublisherNames,
selectedCategoryIds,
selectedTagIds,
)
: _buildNarrowBody(context, ref, currentFilter.value),
);
}

View File

@@ -15,6 +15,7 @@ import 'package:island/services/responsive.dart';
import 'package:island/widgets/app_scaffold.dart';
import 'package:island/widgets/content/cloud_files.dart';
import 'package:island/widgets/content/markdown.dart';
import 'package:island/widgets/common/responsive_sidebar.dart';
import 'package:island/widgets/post/compose_form_fields.dart';
import 'package:island/widgets/post/compose_shared.dart';
import 'package:island/widgets/post/compose_attachments.dart';
@@ -87,6 +88,7 @@ class ArticleComposeScreen extends HookConsumerWidget {
}, [state]);
final showPreview = useState(false);
final showSidebar = useState(false);
// Initialize publisher once when data is available
useEffect(() {
@@ -140,17 +142,9 @@ class ArticleComposeScreen extends HookConsumerWidget {
}, []);
// Helper methods
void showSettingsSheet() {
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (context) => ComposeSettingsSheet(state: state),
);
}
Widget buildPreviewPane() {
final widgetItem = SingleChildScrollView(
padding: const EdgeInsets.symmetric(vertical: 14, horizontal: 8),
padding: const EdgeInsets.symmetric(vertical: 24, horizontal: 24),
child: ValueListenableBuilder<TextEditingValue>(
valueListenable: state.titleController,
builder: (context, titleValue, _) {
@@ -170,7 +164,7 @@ class ArticleComposeScreen extends HookConsumerWidget {
fontWeight: FontWeight.bold,
),
),
const Gap(16),
const Gap(20),
],
if (descriptionValue.text.isNotEmpty) ...[
Text(
@@ -179,7 +173,7 @@ class ArticleComposeScreen extends HookConsumerWidget {
color: colorScheme.onSurface.withOpacity(0.7),
),
),
const Gap(16),
const Gap(20),
],
if (contentValue.text.isNotEmpty)
MarkdownTextContent(
@@ -233,7 +227,7 @@ class ArticleComposeScreen extends HookConsumerWidget {
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
padding: const EdgeInsets.symmetric(horizontal: 16),
child: widgetItem,
),
),
@@ -251,6 +245,7 @@ class ArticleComposeScreen extends HookConsumerWidget {
children: [
Expanded(
child: SingleChildScrollView(
padding: const EdgeInsets.all(24),
child: ComposeFormFields(
state: state,
showPublisherAvatar: false,
@@ -265,12 +260,9 @@ class ArticleComposeScreen extends HookConsumerWidget {
}
});
},
).padding(top: 16),
),
),
),
// Attachments preview
ArticleComposeAttachments(state: state),
],
),
),
@@ -290,8 +282,15 @@ class ArticleComposeScreen extends HookConsumerWidget {
title: ValueListenableBuilder<TextEditingValue>(
valueListenable: state.titleController,
builder: (context, titleValue, _) {
return Text(
titleValue.text.isEmpty ? 'postTitle'.tr() : titleValue.text,
return AnimatedSwitcher(
duration: const Duration(milliseconds: 150),
switchInCurve: Curves.fastEaseInToSlowEaseOut,
switchOutCurve: Curves.fastEaseInToSlowEaseOut,
child: Text(
titleValue.text.isEmpty ? 'postTitle'.tr() : titleValue.text,
key: ValueKey(titleValue.text),
overflow: TextOverflow.ellipsis,
),
);
},
),
@@ -319,9 +318,9 @@ class ArticleComposeScreen extends HookConsumerWidget {
},
),
IconButton(
icon: const Icon(Symbols.settings),
onPressed: showSettingsSheet,
tooltip: 'postSettings'.tr(),
icon: const Icon(Symbols.tune),
onPressed: () => showSidebar.value = !showSidebar.value,
tooltip: 'sidebar'.tr(),
),
Tooltip(
message: 'togglePreview'.tr(),
@@ -333,17 +332,26 @@ class ArticleComposeScreen extends HookConsumerWidget {
ValueListenableBuilder<bool>(
valueListenable: state.submitting,
builder: (context, submitting, _) {
return IconButton(
onPressed: submitting
? null
: () => ComposeLogic.performAction(
ref,
state,
context,
originalPost: originalPost,
),
icon: submitting
return AnimatedSwitcher(
duration: const Duration(milliseconds: 200),
switchInCurve: Curves.easeOut,
switchOutCurve: Curves.easeIn,
transitionBuilder:
(Widget child, Animation<double> animation) {
return FadeTransition(
opacity: animation,
child: ScaleTransition(
scale: Tween<double>(
begin: 0.8,
end: 1.0,
).animate(animation),
child: child,
),
);
},
child: submitting
? SizedBox(
key: const ValueKey('submitting'),
width: 28,
height: 28,
child: const CircularProgressIndicator(
@@ -351,8 +359,19 @@ class ArticleComposeScreen extends HookConsumerWidget {
strokeWidth: 2.5,
),
).center()
: Icon(
originalPost != null ? Symbols.edit : Symbols.upload,
: IconButton(
key: const ValueKey('icon'),
onPressed: () => ComposeLogic.performAction(
ref,
state,
context,
originalPost: originalPost,
),
icon: Icon(
originalPost != null
? Symbols.edit
: Symbols.upload,
),
),
);
},
@@ -363,24 +382,53 @@ class ArticleComposeScreen extends HookConsumerWidget {
body: Column(
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 16, right: 16),
child: isWideScreen(context)
? Row(
spacing: 16,
children: [
Expanded(
flex: showPreview.value ? 1 : 2,
child: buildEditorPane(),
child: ResponsiveSidebar(
sidebarWidth: 480,
attachmentsContent: ArticleComposeAttachments(state: state),
settingsContent: ComposeSettingsSheet(state: state),
showSidebar: showSidebar,
mainContent: Padding(
padding: const EdgeInsets.only(left: 16, right: 16),
child: AnimatedSwitcher(
duration: const Duration(milliseconds: 250),
switchInCurve: Curves.easeOutCubic,
switchOutCurve: Curves.easeOutCubic,
transitionBuilder:
(Widget child, Animation<double> animation) {
return FadeTransition(
opacity: animation,
child: SlideTransition(
position:
Tween<Offset>(
begin: const Offset(0, 0.05),
end: Offset.zero,
).animate(
CurvedAnimation(
parent: animation,
curve: Curves.easeOutCubic,
),
),
child: child,
),
);
},
child: isWideScreen(context)
? Row(
spacing: 16,
children: [
Expanded(child: buildEditorPane()),
if (showPreview.value)
Expanded(child: buildPreviewPane()),
],
)
: Container(
key: ValueKey('narrow-${showPreview.value}'),
child: showPreview.value
? buildPreviewPane()
: buildEditorPane(),
),
if (showPreview.value) const VerticalDivider(),
if (showPreview.value)
Expanded(child: buildPreviewPane()),
],
)
: showPreview.value
? buildPreviewPane()
: buildEditorPane(),
),
),
),
),
@@ -391,4 +439,4 @@ class ArticleComposeScreen extends HookConsumerWidget {
),
);
}
}
}

View File

@@ -25,7 +25,7 @@ import 'package:island/widgets/content/markdown.dart';
import 'package:island/widgets/post/post_list.dart';
import 'package:island/widgets/post/post_item.dart';
import 'package:island/widgets/activity_heatmap.dart';
import 'package:island/widgets/posts/post_filter.dart';
import 'package:island/widgets/post/filters/post_filter.dart';
import 'package:material_symbols_icons/symbols.dart';
import 'package:island/services/color_extraction.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';

View File

@@ -15,7 +15,7 @@ import 'package:island/widgets/extended_refresh_indicator.dart';
import 'package:island/widgets/paging/pagination_list.dart';
import 'package:island/widgets/post/post_item.dart';
import 'package:island/widgets/post/post_item_skeleton.dart';
import 'package:island/widgets/posts/post_filter.dart';
import 'package:island/widgets/post/filters/post_filter.dart';
import 'package:material_symbols_icons/symbols.dart';
import 'package:styled_widget/styled_widget.dart';