💄 Better article editor
This commit is contained in:
@@ -1594,5 +1594,8 @@
|
||||
"other": "{} tasks"
|
||||
},
|
||||
"setAsThumbnail": "Set as thumbnail",
|
||||
"unsetAsThumbnail": "Unset as thumbnail"
|
||||
"unsetAsThumbnail": "Unset as thumbnail",
|
||||
"sidebar": "Sidebar",
|
||||
"dropFilesHere": "Drop your files here",
|
||||
"dragAndDropToAttach": "Drag your files here to attach it"
|
||||
}
|
||||
|
||||
@@ -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),
|
||||
],
|
||||
),
|
||||
);
|
||||
|
||||
@@ -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),
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -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 {
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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';
|
||||
|
||||
@@ -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';
|
||||
|
||||
|
||||
177
lib/widgets/common/responsive_sidebar.dart
Normal file
177
lib/widgets/common/responsive_sidebar.dart
Normal file
@@ -0,0 +1,177 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||
import 'package:island/services/responsive.dart';
|
||||
import 'package:island/widgets/post/article_sidebar_panel.dart';
|
||||
|
||||
class ResponsiveSidebar extends HookConsumerWidget {
|
||||
final Widget attachmentsContent;
|
||||
final Widget settingsContent;
|
||||
final Widget mainContent;
|
||||
final double sidebarWidth;
|
||||
final ValueNotifier<bool> showSidebar;
|
||||
|
||||
const ResponsiveSidebar({
|
||||
super.key,
|
||||
required this.attachmentsContent,
|
||||
required this.settingsContent,
|
||||
required this.mainContent,
|
||||
this.sidebarWidth = 480,
|
||||
required this.showSidebar,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final isWide = isWideScreen(context);
|
||||
final animationController = useAnimationController(
|
||||
duration: const Duration(milliseconds: 300),
|
||||
);
|
||||
final animation = useMemoized(
|
||||
() => Tween<double>(begin: 0, end: 1).animate(
|
||||
CurvedAnimation(parent: animationController, curve: Curves.easeInOut),
|
||||
),
|
||||
[animationController],
|
||||
);
|
||||
|
||||
final showDrawer = useState(false);
|
||||
final scaffoldKey = useMemoized(() => GlobalKey<ScaffoldState>());
|
||||
|
||||
useEffect(() {
|
||||
void listener() {
|
||||
final currentIsWide = isWideScreen(context);
|
||||
if (currentIsWide) {
|
||||
if (showSidebar.value && !showDrawer.value) {
|
||||
showDrawer.value = true;
|
||||
animationController.forward();
|
||||
} else if (!showSidebar.value && showDrawer.value) {
|
||||
showDrawer.value = false;
|
||||
animationController.reverse();
|
||||
}
|
||||
} else {
|
||||
if (showSidebar.value) {
|
||||
scaffoldKey.currentState?.openEndDrawer();
|
||||
} else {
|
||||
Navigator.of(context).pop();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
showSidebar.addListener(listener);
|
||||
// Set initial state after first frame
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) => listener());
|
||||
|
||||
return () => showSidebar.removeListener(listener);
|
||||
}, []);
|
||||
|
||||
useEffect(() {
|
||||
void listener() {
|
||||
if (!animationController.isAnimating &&
|
||||
animationController.value == 0) {
|
||||
showDrawer.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
animationController.addListener(listener);
|
||||
return () => animationController.removeListener(listener);
|
||||
}, [animationController]);
|
||||
|
||||
void closeSidebar() {
|
||||
showSidebar.value = false;
|
||||
}
|
||||
|
||||
if (isWide) {
|
||||
return LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
return AnimatedBuilder(
|
||||
animation: animation,
|
||||
builder: (context, child) {
|
||||
return Stack(
|
||||
children: [
|
||||
_buildWideScreenContent(
|
||||
context,
|
||||
constraints,
|
||||
animation,
|
||||
mainContent,
|
||||
),
|
||||
if (showDrawer.value)
|
||||
Positioned(
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
width: sidebarWidth,
|
||||
child: _buildWideScreenSidebar(
|
||||
context,
|
||||
animation,
|
||||
attachmentsContent,
|
||||
settingsContent,
|
||||
closeSidebar,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
);
|
||||
} else {
|
||||
return Scaffold(
|
||||
key: scaffoldKey,
|
||||
endDrawer: Drawer(
|
||||
width: sidebarWidth,
|
||||
child: ArticleSidebarPanelWidget(
|
||||
attachmentsContent: attachmentsContent,
|
||||
settingsContent: settingsContent,
|
||||
onClose: () {
|
||||
showSidebar.value = false;
|
||||
Navigator.of(context).pop();
|
||||
},
|
||||
isWide: false,
|
||||
width: sidebarWidth,
|
||||
),
|
||||
),
|
||||
body: mainContent,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Widget _buildWideScreenContent(
|
||||
BuildContext context,
|
||||
BoxConstraints constraints,
|
||||
Animation<double> animation,
|
||||
Widget mainContent,
|
||||
) {
|
||||
return Positioned(
|
||||
left: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
width: constraints.maxWidth - animation.value * sidebarWidth,
|
||||
child: mainContent,
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildWideScreenSidebar(
|
||||
BuildContext context,
|
||||
Animation<double> animation,
|
||||
Widget attachmentsContent,
|
||||
Widget settingsContent,
|
||||
VoidCallback onClose,
|
||||
) {
|
||||
return Transform.translate(
|
||||
offset: Offset((1 - animation.value) * sidebarWidth, 0),
|
||||
child: SizedBox(
|
||||
width: sidebarWidth,
|
||||
child: Material(
|
||||
elevation: 8,
|
||||
color: Theme.of(context).colorScheme.surfaceContainer,
|
||||
child: ArticleSidebarPanelWidget(
|
||||
attachmentsContent: attachmentsContent,
|
||||
settingsContent: settingsContent,
|
||||
onClose: onClose,
|
||||
isWide: true,
|
||||
width: sidebarWidth,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -95,6 +95,7 @@ class AttachmentPreview extends HookConsumerWidget {
|
||||
final bool isCompact;
|
||||
final String? thumbnailId;
|
||||
final Function(String?)? onSetThumbnail;
|
||||
final bool bordered;
|
||||
|
||||
const AttachmentPreview({
|
||||
super.key,
|
||||
@@ -109,6 +110,7 @@ class AttachmentPreview extends HookConsumerWidget {
|
||||
this.isCompact = false,
|
||||
this.thumbnailId,
|
||||
this.onSetThumbnail,
|
||||
this.bordered = false,
|
||||
});
|
||||
|
||||
// GlobalKey for selector
|
||||
@@ -475,7 +477,7 @@ class AttachmentPreview extends HookConsumerWidget {
|
||||
item.isOnCloud &&
|
||||
(item.data as SnCloudFile).id == thumbnailId)
|
||||
Positioned(
|
||||
top: 8,
|
||||
bottom: 8,
|
||||
right: 8,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(6),
|
||||
@@ -493,10 +495,19 @@ class AttachmentPreview extends HookConsumerWidget {
|
||||
],
|
||||
);
|
||||
|
||||
final contentWidget = ClipRRect(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
child: Container(
|
||||
final contentWidget = Container(
|
||||
decoration: BoxDecoration(
|
||||
color: Theme.of(context).colorScheme.surfaceContainer,
|
||||
border: bordered
|
||||
? Border.all(
|
||||
color: Theme.of(context).colorScheme.outline.withOpacity(0.5),
|
||||
width: 1,
|
||||
)
|
||||
: null,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
child: Stack(
|
||||
children: [
|
||||
if (ratio != null)
|
||||
|
||||
@@ -3,6 +3,7 @@ import 'package:flutter/services.dart';
|
||||
import 'package:flutter_cache_manager/flutter_cache_manager.dart';
|
||||
import 'package:gap/gap.dart';
|
||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||
import 'package:island/pods/audio.dart';
|
||||
import 'package:island/pods/message.dart';
|
||||
import 'package:island/pods/network.dart';
|
||||
import 'package:island/services/update_service.dart';
|
||||
@@ -77,7 +78,7 @@ class DebugSheet extends HookConsumerWidget {
|
||||
minTileHeight: 48,
|
||||
leading: const Icon(Symbols.update),
|
||||
trailing: const Icon(Symbols.chevron_right),
|
||||
title: Text('Force Update'),
|
||||
title: Text('Force update'),
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 24),
|
||||
onTap: () async {
|
||||
// Fetch latest release and show the unified sheet
|
||||
@@ -102,7 +103,7 @@ class DebugSheet extends HookConsumerWidget {
|
||||
minTileHeight: 48,
|
||||
leading: const Icon(Symbols.wifi),
|
||||
trailing: const Icon(Symbols.chevron_right),
|
||||
title: Text('Connection Status'),
|
||||
title: Text('Connection status'),
|
||||
contentPadding: EdgeInsets.symmetric(horizontal: 24),
|
||||
onTap: () {
|
||||
showModalBottomSheet(
|
||||
@@ -128,6 +129,23 @@ class DebugSheet extends HookConsumerWidget {
|
||||
},
|
||||
),
|
||||
const Divider(height: 8),
|
||||
ListTile(
|
||||
minTileHeight: 48,
|
||||
leading: const Icon(Symbols.play_arrow),
|
||||
trailing: const Icon(Symbols.chevron_right),
|
||||
contentPadding: EdgeInsets.symmetric(horizontal: 24),
|
||||
title: Text('Play untitled'),
|
||||
onTap: () async {
|
||||
final synth = MiniSampleSynth(
|
||||
sampleAsset: 'assets/audio/messages.mp3',
|
||||
baseNote: 60,
|
||||
);
|
||||
await synth.playMidiAsset(
|
||||
'assets/midi/never-gonna-give-you-up.mid',
|
||||
);
|
||||
},
|
||||
),
|
||||
const Divider(height: 8),
|
||||
ListTile(
|
||||
minTileHeight: 48,
|
||||
leading: const Icon(Symbols.copy_all),
|
||||
|
||||
127
lib/widgets/post/article_sidebar_panel.dart
Normal file
127
lib/widgets/post/article_sidebar_panel.dart
Normal file
@@ -0,0 +1,127 @@
|
||||
import 'package:easy_localization/easy_localization.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||
import 'package:material_symbols_icons/material_symbols_icons.dart';
|
||||
|
||||
enum SidebarPanelType { attachments, settings }
|
||||
|
||||
class ArticleSidebarPanelWidget extends HookConsumerWidget {
|
||||
final Widget attachmentsContent;
|
||||
final Widget settingsContent;
|
||||
final VoidCallback onClose;
|
||||
final bool isWide;
|
||||
final double width;
|
||||
|
||||
const ArticleSidebarPanelWidget({
|
||||
super.key,
|
||||
required this.attachmentsContent,
|
||||
required this.settingsContent,
|
||||
required this.onClose,
|
||||
required this.isWide,
|
||||
this.width = 480,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final theme = Theme.of(context);
|
||||
final colorScheme = theme.colorScheme;
|
||||
|
||||
final activePanel = useState<SidebarPanelType>(
|
||||
SidebarPanelType.attachments,
|
||||
);
|
||||
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
_buildHeader(context, activePanel, colorScheme, onClose, theme),
|
||||
const Divider(height: 1),
|
||||
Expanded(
|
||||
child: AnimatedSwitcher(
|
||||
duration: const Duration(milliseconds: 200),
|
||||
switchInCurve: Curves.easeOutCubic,
|
||||
switchOutCurve: Curves.easeInCubic,
|
||||
child: activePanel.value == SidebarPanelType.attachments
|
||||
? Container(
|
||||
key: const ValueKey(SidebarPanelType.attachments),
|
||||
alignment: Alignment.topCenter,
|
||||
child: attachmentsContent,
|
||||
)
|
||||
: Container(
|
||||
key: const ValueKey(SidebarPanelType.settings),
|
||||
alignment: Alignment.topCenter,
|
||||
child: settingsContent,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildHeader(
|
||||
BuildContext context,
|
||||
ValueNotifier<SidebarPanelType> activePanel,
|
||||
ColorScheme colorScheme,
|
||||
VoidCallback onClose,
|
||||
ThemeData theme,
|
||||
) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
||||
child: Row(
|
||||
children: [
|
||||
_buildSegmentedTabs(activePanel, colorScheme, theme),
|
||||
const Spacer(),
|
||||
if (!isWide)
|
||||
IconButton(
|
||||
icon: const Icon(Symbols.close),
|
||||
onPressed: onClose,
|
||||
tooltip: 'close'.tr(),
|
||||
padding: const EdgeInsets.all(8),
|
||||
constraints: const BoxConstraints(minWidth: 40, minHeight: 40),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildSegmentedTabs(
|
||||
ValueNotifier<SidebarPanelType> activePanel,
|
||||
ColorScheme colorScheme,
|
||||
ThemeData theme,
|
||||
) {
|
||||
return SegmentedButton<SidebarPanelType>(
|
||||
segments: [
|
||||
ButtonSegment(
|
||||
value: SidebarPanelType.attachments,
|
||||
label: Text('attachments'.tr()),
|
||||
icon: const Icon(Symbols.attach_file, size: 18),
|
||||
),
|
||||
ButtonSegment(
|
||||
value: SidebarPanelType.settings,
|
||||
label: Text('settings'.tr()),
|
||||
icon: const Icon(Symbols.settings, size: 18),
|
||||
),
|
||||
],
|
||||
selected: {activePanel.value},
|
||||
onSelectionChanged: (Set<SidebarPanelType> selected) {
|
||||
if (selected.isNotEmpty) {
|
||||
activePanel.value = selected.first;
|
||||
}
|
||||
},
|
||||
style: ButtonStyle(
|
||||
backgroundColor: WidgetStateProperty.resolveWith((states) {
|
||||
if (states.contains(WidgetState.selected)) {
|
||||
return colorScheme.secondaryContainer;
|
||||
}
|
||||
return colorScheme.surfaceContainerHighest;
|
||||
}),
|
||||
foregroundColor: WidgetStateProperty.resolveWith((states) {
|
||||
if (states.contains(WidgetState.selected)) {
|
||||
return colorScheme.onSecondaryContainer;
|
||||
}
|
||||
return colorScheme.onSurface;
|
||||
}),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,11 +1,15 @@
|
||||
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';
|
||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||
import 'package:island/models/file.dart';
|
||||
import 'package:island/services/responsive.dart';
|
||||
import 'package:island/services/file_uploader.dart';
|
||||
import 'package:island/widgets/attachment_uploader.dart';
|
||||
import 'package:island/widgets/content/attachment_preview.dart';
|
||||
import 'package:island/widgets/post/compose_shared.dart';
|
||||
import 'package:material_symbols_icons/symbols.dart';
|
||||
|
||||
/// A reusable widget for displaying attachments in compose screens.
|
||||
/// Supports both grid and list layouts based on screen width.
|
||||
@@ -103,111 +107,256 @@ class ComposeAttachments extends ConsumerWidget {
|
||||
}
|
||||
}
|
||||
|
||||
/// A specialized attachment widget for article compose with expansion tile.
|
||||
class ArticleComposeAttachments extends ConsumerWidget {
|
||||
class ArticleComposeAttachments extends HookConsumerWidget {
|
||||
final ComposeState state;
|
||||
final EdgeInsets? padding;
|
||||
|
||||
const ArticleComposeAttachments({super.key, required this.state});
|
||||
const ArticleComposeAttachments({
|
||||
super.key,
|
||||
required this.state,
|
||||
this.padding,
|
||||
});
|
||||
|
||||
Future<void> _handleDroppedFiles(DropDoneDetails details, ComposeState state) async {
|
||||
final newFiles = <UniversalFile>[];
|
||||
|
||||
for (final xfile in details.files) {
|
||||
// Create UniversalFile with default type first
|
||||
final uf = UniversalFile(data: xfile, type: UniversalFileType.file);
|
||||
// Use FileUploader.getMimeType to get proper MIME type
|
||||
final mimeType = FileUploader.getMimeType(uf);
|
||||
final fileType = switch (mimeType.split('/').firstOrNull) {
|
||||
'image' => UniversalFileType.image,
|
||||
'video' => UniversalFileType.video,
|
||||
'audio' => UniversalFileType.audio,
|
||||
_ => UniversalFileType.file,
|
||||
};
|
||||
|
||||
// Update the file type
|
||||
final correctedUf = UniversalFile(data: xfile, type: fileType);
|
||||
newFiles.add(correctedUf);
|
||||
}
|
||||
|
||||
if (newFiles.isNotEmpty) {
|
||||
state.attachments.value = [...state.attachments.value, ...newFiles];
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
return ValueListenableBuilder<String?>(
|
||||
valueListenable: state.thumbnailId,
|
||||
builder: (context, thumbnailId, _) {
|
||||
return ValueListenableBuilder<List<UniversalFile>>(
|
||||
valueListenable: state.attachments,
|
||||
builder: (context, attachments, _) {
|
||||
if (attachments.isEmpty) return const SizedBox.shrink();
|
||||
return Theme(
|
||||
data: Theme.of(
|
||||
context,
|
||||
).copyWith(dividerColor: Colors.transparent),
|
||||
child: ExpansionTile(
|
||||
initiallyExpanded: true,
|
||||
title: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text('attachments').tr(),
|
||||
Text(
|
||||
'articleAttachmentHint'.tr(),
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
||||
return Padding(
|
||||
padding: padding ?? EdgeInsets.all(16),
|
||||
child: ValueListenableBuilder<String?>(
|
||||
valueListenable: state.thumbnailId,
|
||||
builder: (context, thumbnailId, _) {
|
||||
return ValueListenableBuilder<List<UniversalFile>>(
|
||||
valueListenable: state.attachments,
|
||||
builder: (context, attachments, _) {
|
||||
return HookBuilder(
|
||||
builder: (context) {
|
||||
final isDragging = useState(false);
|
||||
return DropTarget(
|
||||
onDragDone: (details) async =>
|
||||
await _handleDroppedFiles(details, state),
|
||||
onDragEntered: (details) => isDragging.value = true,
|
||||
onDragExited: (details) => isDragging.value = false,
|
||||
child: AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 200),
|
||||
curve: Curves.easeOut,
|
||||
decoration: isDragging.value ? BoxDecoration(
|
||||
border: Border.all(
|
||||
color: Theme.of(context).colorScheme.primary,
|
||||
width: 2,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
) : null,
|
||||
child: Padding(
|
||||
padding: isDragging.value ? const EdgeInsets.all(8) : EdgeInsets.zero,
|
||||
child: attachments.isEmpty
|
||||
? AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 200),
|
||||
curve: Curves.easeOut,
|
||||
width: double.infinity,
|
||||
height: 200,
|
||||
decoration: BoxDecoration(
|
||||
color: Theme.of(context)
|
||||
.colorScheme
|
||||
.surfaceContainerHighest
|
||||
.withOpacity(0.3),
|
||||
border: Border.all(
|
||||
color: Theme.of(
|
||||
context,
|
||||
).colorScheme.outline.withOpacity(0.5),
|
||||
width: 1,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
Symbols.upload,
|
||||
size: 48,
|
||||
color: Theme.of(
|
||||
context,
|
||||
).colorScheme.onSurfaceVariant,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
'dropFilesHere',
|
||||
style: Theme.of(context).textTheme.titleMedium
|
||||
?.copyWith(
|
||||
color: Theme.of(
|
||||
context,
|
||||
).colorScheme.onSurfaceVariant,
|
||||
),
|
||||
).tr(),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
'dragAndDropToAttach',
|
||||
style: Theme.of(context).textTheme.bodySmall
|
||||
?.copyWith(
|
||||
color: Theme.of(context)
|
||||
.colorScheme
|
||||
.onSurfaceVariant
|
||||
.withOpacity(0.7),
|
||||
),
|
||||
).tr(),
|
||||
],
|
||||
),
|
||||
)
|
||||
: ValueListenableBuilder<Map<int, double?>>(
|
||||
valueListenable: state.attachmentProgress,
|
||||
builder: (context, progressMap, _) {
|
||||
return Wrap(
|
||||
runSpacing: 8,
|
||||
spacing: 8,
|
||||
children: [
|
||||
for (var idx = 0; idx < attachments.length; idx++)
|
||||
_AnimatedAttachmentItem(
|
||||
index: idx,
|
||||
item: attachments[idx],
|
||||
progress: progressMap[idx],
|
||||
isUploading: progressMap.containsKey(idx),
|
||||
thumbnailId: thumbnailId,
|
||||
onSetThumbnail: (id) =>
|
||||
ComposeLogic.setThumbnail(state, id),
|
||||
onRequestUpload: () async {
|
||||
final config =
|
||||
await showModalBottomSheet<
|
||||
AttachmentUploadConfig
|
||||
>(
|
||||
context: context,
|
||||
isScrollControlled: true,
|
||||
useRootNavigator: true,
|
||||
builder: (context) => AttachmentUploaderSheet(
|
||||
ref: ref,
|
||||
state: state,
|
||||
index: idx,
|
||||
),
|
||||
);
|
||||
if (config != null) {
|
||||
await ComposeLogic.uploadAttachment(
|
||||
ref,
|
||||
state,
|
||||
idx,
|
||||
poolId: config.poolId,
|
||||
);
|
||||
}
|
||||
},
|
||||
onUpdate: (value) =>
|
||||
ComposeLogic.updateAttachment(state, value, idx),
|
||||
onDelete: () =>
|
||||
ComposeLogic.deleteAttachment(ref, state, idx),
|
||||
onInsert: () =>
|
||||
ComposeLogic.insertAttachment(ref, state, idx),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
children: [
|
||||
ValueListenableBuilder<Map<int, double?>>(
|
||||
valueListenable: state.attachmentProgress,
|
||||
builder: (context, progressMap, _) {
|
||||
return Wrap(
|
||||
runSpacing: 8,
|
||||
spacing: 8,
|
||||
children: [
|
||||
for (var idx = 0; idx < attachments.length; idx++)
|
||||
SizedBox(
|
||||
width: 180,
|
||||
height: 180,
|
||||
child: AttachmentPreview(
|
||||
isCompact: true,
|
||||
item: attachments[idx],
|
||||
progress: progressMap[idx],
|
||||
isUploading: progressMap.containsKey(idx),
|
||||
thumbnailId: thumbnailId,
|
||||
onSetThumbnail: (id) =>
|
||||
ComposeLogic.setThumbnail(state, id),
|
||||
onRequestUpload: () async {
|
||||
final config =
|
||||
await showModalBottomSheet<
|
||||
AttachmentUploadConfig
|
||||
>(
|
||||
context: context,
|
||||
isScrollControlled: true,
|
||||
builder: (context) =>
|
||||
AttachmentUploaderSheet(
|
||||
ref: ref,
|
||||
state: state,
|
||||
index: idx,
|
||||
),
|
||||
);
|
||||
if (config != null) {
|
||||
await ComposeLogic.uploadAttachment(
|
||||
ref,
|
||||
state,
|
||||
idx,
|
||||
poolId: config.poolId,
|
||||
);
|
||||
}
|
||||
},
|
||||
onUpdate: (value) =>
|
||||
ComposeLogic.updateAttachment(
|
||||
state,
|
||||
value,
|
||||
idx,
|
||||
),
|
||||
onDelete: () => ComposeLogic.deleteAttachment(
|
||||
ref,
|
||||
state,
|
||||
idx,
|
||||
),
|
||||
onInsert: () => ComposeLogic.insertAttachment(
|
||||
ref,
|
||||
state,
|
||||
idx,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _AnimatedAttachmentItem extends HookWidget {
|
||||
final int index;
|
||||
final UniversalFile item;
|
||||
final double? progress;
|
||||
final bool isUploading;
|
||||
final String? thumbnailId;
|
||||
final Function(String?) onSetThumbnail;
|
||||
final VoidCallback onRequestUpload;
|
||||
final Function(UniversalFile) onUpdate;
|
||||
final VoidCallback onDelete;
|
||||
final VoidCallback onInsert;
|
||||
|
||||
const _AnimatedAttachmentItem({
|
||||
required this.index,
|
||||
required this.item,
|
||||
required this.progress,
|
||||
required this.isUploading,
|
||||
required this.thumbnailId,
|
||||
required this.onSetThumbnail,
|
||||
required this.onRequestUpload,
|
||||
required this.onUpdate,
|
||||
required this.onDelete,
|
||||
required this.onInsert,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final animationController = useAnimationController(
|
||||
duration: const Duration(milliseconds: 300),
|
||||
);
|
||||
|
||||
final fadeAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
|
||||
CurvedAnimation(parent: animationController, curve: Curves.easeOut),
|
||||
);
|
||||
|
||||
final slideAnimation =
|
||||
Tween<Offset>(begin: const Offset(0, 0.1), end: Offset.zero).animate(
|
||||
CurvedAnimation(
|
||||
parent: animationController,
|
||||
curve: Curves.easeOutCubic,
|
||||
),
|
||||
);
|
||||
|
||||
useEffect(() {
|
||||
final delay = Duration(milliseconds: 50 * index);
|
||||
Future.delayed(delay, () {
|
||||
animationController.forward();
|
||||
});
|
||||
return null;
|
||||
}, [index]);
|
||||
|
||||
return FadeTransition(
|
||||
opacity: fadeAnimation,
|
||||
child: SlideTransition(
|
||||
position: slideAnimation,
|
||||
child: AttachmentPreview(
|
||||
isCompact: true,
|
||||
item: item,
|
||||
progress: progress,
|
||||
isUploading: isUploading,
|
||||
thumbnailId: thumbnailId,
|
||||
onSetThumbnail: onSetThumbnail,
|
||||
onRequestUpload: onRequestUpload,
|
||||
onUpdate: onUpdate,
|
||||
onDelete: onDelete,
|
||||
onInsert: onInsert,
|
||||
bordered: true,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -139,364 +139,350 @@ class ComposeSettingsSheet extends HookConsumerWidget {
|
||||
|
||||
final tagInputController = useTextEditingController();
|
||||
|
||||
return SheetScaffold(
|
||||
titleText: 'postSettings'.tr(),
|
||||
heightFactor: 0.6,
|
||||
child: SingleChildScrollView(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
spacing: 16,
|
||||
children: [
|
||||
// Slug field
|
||||
TextField(
|
||||
controller: state.slugController,
|
||||
decoration: InputDecoration(
|
||||
labelText: 'postSlug'.tr(),
|
||||
hintText: 'postSlugHint'.tr(),
|
||||
contentPadding: const EdgeInsets.symmetric(
|
||||
vertical: 9,
|
||||
horizontal: 16,
|
||||
),
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
return SingleChildScrollView(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
spacing: 16,
|
||||
children: [
|
||||
// Slug field
|
||||
TextField(
|
||||
controller: state.slugController,
|
||||
decoration: InputDecoration(
|
||||
labelText: 'postSlug'.tr(),
|
||||
hintText: 'postSlugHint'.tr(),
|
||||
contentPadding: const EdgeInsets.symmetric(
|
||||
vertical: 9,
|
||||
horizontal: 16,
|
||||
),
|
||||
onTapOutside: (_) =>
|
||||
FocusManager.instance.primaryFocus?.unfocus(),
|
||||
),
|
||||
|
||||
// Tags field
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
border: Border.all(
|
||||
color: Theme.of(context).colorScheme.outline,
|
||||
width: 1,
|
||||
),
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
spacing: 12,
|
||||
children: [
|
||||
Text(
|
||||
'tags'.tr(),
|
||||
style: Theme.of(context).textTheme.labelLarge,
|
||||
),
|
||||
onTapOutside: (_) => FocusManager.instance.primaryFocus?.unfocus(),
|
||||
),
|
||||
|
||||
// Tags field
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
border: Border.all(
|
||||
color: Theme.of(context).colorScheme.outline,
|
||||
width: 1,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
spacing: 12,
|
||||
children: [
|
||||
Text(
|
||||
'tags'.tr(),
|
||||
style: Theme.of(context).textTheme.labelLarge,
|
||||
),
|
||||
// Existing tags display
|
||||
if (currentTags.isNotEmpty)
|
||||
Wrap(
|
||||
spacing: 8,
|
||||
runSpacing: 8,
|
||||
children: currentTags.map((tag) {
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
color: Theme.of(context).colorScheme.primary,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 12,
|
||||
vertical: 6,
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(
|
||||
'#$tag',
|
||||
style: TextStyle(
|
||||
color: Theme.of(context).colorScheme.onPrimary,
|
||||
fontSize: 14,
|
||||
),
|
||||
),
|
||||
const Gap(4),
|
||||
InkWell(
|
||||
onTap: () {
|
||||
final newTags = List<String>.from(
|
||||
state.tags.value,
|
||||
)..remove(tag);
|
||||
state.tags.value = newTags;
|
||||
},
|
||||
child: Icon(
|
||||
Icons.close,
|
||||
size: 16,
|
||||
color: Theme.of(context).colorScheme.onPrimary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
// Existing tags display
|
||||
if (currentTags.isNotEmpty)
|
||||
Wrap(
|
||||
spacing: 8,
|
||||
runSpacing: 8,
|
||||
children: currentTags.map((tag) {
|
||||
return Container(
|
||||
// Tag input with autocomplete
|
||||
TypeAheadField<SnPostTag>(
|
||||
controller: tagInputController,
|
||||
builder: (context, controller, focusNode) {
|
||||
return TextField(
|
||||
controller: controller,
|
||||
focusNode: focusNode,
|
||||
decoration: InputDecoration(
|
||||
hintText: 'addTag'.tr(),
|
||||
border: InputBorder.none,
|
||||
isCollapsed: true,
|
||||
contentPadding: EdgeInsets.zero,
|
||||
),
|
||||
onSubmitted: (value) {
|
||||
state.tags.value = [...state.tags.value, value];
|
||||
controller.clear();
|
||||
},
|
||||
);
|
||||
},
|
||||
suggestionsCallback: (pattern) =>
|
||||
_fetchTagSuggestions(pattern, ref),
|
||||
itemBuilder: (context, suggestion) {
|
||||
return ListTile(
|
||||
shape: const RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.all(Radius.circular(8)),
|
||||
),
|
||||
title: Text('#${suggestion.slug}'),
|
||||
subtitle: Text('${suggestion.usage} posts'),
|
||||
dense: true,
|
||||
);
|
||||
},
|
||||
onSelected: (suggestion) {
|
||||
if (!state.tags.value.contains(suggestion.slug)) {
|
||||
state.tags.value = [...state.tags.value, suggestion.slug];
|
||||
}
|
||||
tagInputController.clear();
|
||||
},
|
||||
direction: VerticalDirection.down,
|
||||
hideOnEmpty: true,
|
||||
hideOnLoading: true,
|
||||
debounceDuration: const Duration(milliseconds: 300),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
// Categories field
|
||||
DropdownButtonFormField2<SnPostCategory>(
|
||||
isExpanded: true,
|
||||
decoration: InputDecoration(
|
||||
contentPadding: const EdgeInsets.symmetric(vertical: 9),
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
),
|
||||
hint: Text('categories'.tr(), style: TextStyle(fontSize: 15)),
|
||||
items: (postCategories.value?.items ?? <SnPostCategory>[]).map((
|
||||
item,
|
||||
) {
|
||||
return DropdownMenuItem(
|
||||
value: item,
|
||||
enabled: false,
|
||||
child: StatefulBuilder(
|
||||
builder: (context, menuSetState) {
|
||||
final isSelected = state.categories.value.contains(item);
|
||||
return InkWell(
|
||||
onTap: () {
|
||||
isSelected
|
||||
? state.categories.value = state.categories.value
|
||||
.where((e) => e != item)
|
||||
.toList()
|
||||
: state.categories.value = [
|
||||
...state.categories.value,
|
||||
item,
|
||||
];
|
||||
menuSetState(() {});
|
||||
},
|
||||
child: Container(
|
||||
height: double.infinity,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16.0),
|
||||
child: Row(
|
||||
children: [
|
||||
if (isSelected)
|
||||
const Icon(Icons.check_box_outlined)
|
||||
else
|
||||
const Icon(Icons.check_box_outline_blank),
|
||||
const SizedBox(width: 16),
|
||||
Expanded(
|
||||
child: Text(
|
||||
item.categoryDisplayTitle,
|
||||
style: const TextStyle(fontSize: 14),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
value: currentCategories.isEmpty ? null : currentCategories.last,
|
||||
onChanged: (_) {},
|
||||
selectedItemBuilder: (context) {
|
||||
return (postCategories.value?.items ?? []).map((item) {
|
||||
return SingleChildScrollView(
|
||||
scrollDirection: Axis.horizontal,
|
||||
child: Row(
|
||||
children: [
|
||||
for (final category in currentCategories)
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
color: Theme.of(context).colorScheme.primary,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 12,
|
||||
vertical: 6,
|
||||
vertical: 4,
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(
|
||||
'#$tag',
|
||||
style: TextStyle(
|
||||
color: Theme.of(
|
||||
context,
|
||||
).colorScheme.onPrimary,
|
||||
fontSize: 14,
|
||||
),
|
||||
),
|
||||
const Gap(4),
|
||||
InkWell(
|
||||
onTap: () {
|
||||
final newTags = List<String>.from(
|
||||
state.tags.value,
|
||||
)..remove(tag);
|
||||
state.tags.value = newTags;
|
||||
},
|
||||
child: Icon(
|
||||
Icons.close,
|
||||
size: 16,
|
||||
color: Theme.of(
|
||||
context,
|
||||
).colorScheme.onPrimary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
// Tag input with autocomplete
|
||||
TypeAheadField<SnPostTag>(
|
||||
controller: tagInputController,
|
||||
builder: (context, controller, focusNode) {
|
||||
return TextField(
|
||||
controller: controller,
|
||||
focusNode: focusNode,
|
||||
decoration: InputDecoration(
|
||||
hintText: 'addTag'.tr(),
|
||||
border: InputBorder.none,
|
||||
isCollapsed: true,
|
||||
contentPadding: EdgeInsets.zero,
|
||||
),
|
||||
onSubmitted: (value) {
|
||||
state.tags.value = [...state.tags.value, value];
|
||||
controller.clear();
|
||||
},
|
||||
);
|
||||
},
|
||||
suggestionsCallback: (pattern) =>
|
||||
_fetchTagSuggestions(pattern, ref),
|
||||
itemBuilder: (context, suggestion) {
|
||||
return ListTile(
|
||||
shape: const RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.all(Radius.circular(8)),
|
||||
),
|
||||
title: Text('#${suggestion.slug}'),
|
||||
subtitle: Text('${suggestion.usage} posts'),
|
||||
dense: true,
|
||||
);
|
||||
},
|
||||
onSelected: (suggestion) {
|
||||
if (!state.tags.value.contains(suggestion.slug)) {
|
||||
state.tags.value = [
|
||||
...state.tags.value,
|
||||
suggestion.slug,
|
||||
];
|
||||
}
|
||||
tagInputController.clear();
|
||||
},
|
||||
direction: VerticalDirection.down,
|
||||
hideOnEmpty: true,
|
||||
hideOnLoading: true,
|
||||
debounceDuration: const Duration(milliseconds: 300),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
// Categories field
|
||||
DropdownButtonFormField2<SnPostCategory>(
|
||||
isExpanded: true,
|
||||
decoration: InputDecoration(
|
||||
contentPadding: const EdgeInsets.symmetric(vertical: 9),
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
),
|
||||
hint: Text('categories'.tr(), style: TextStyle(fontSize: 15)),
|
||||
items: (postCategories.value?.items ?? <SnPostCategory>[]).map((
|
||||
item,
|
||||
) {
|
||||
return DropdownMenuItem(
|
||||
value: item,
|
||||
enabled: false,
|
||||
child: StatefulBuilder(
|
||||
builder: (context, menuSetState) {
|
||||
final isSelected = state.categories.value.contains(item);
|
||||
return InkWell(
|
||||
onTap: () {
|
||||
isSelected
|
||||
? state.categories.value = state.categories.value
|
||||
.where((e) => e != item)
|
||||
.toList()
|
||||
: state.categories.value = [
|
||||
...state.categories.value,
|
||||
item,
|
||||
];
|
||||
menuSetState(() {});
|
||||
},
|
||||
child: Container(
|
||||
height: double.infinity,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16.0),
|
||||
child: Row(
|
||||
children: [
|
||||
if (isSelected)
|
||||
const Icon(Icons.check_box_outlined)
|
||||
else
|
||||
const Icon(Icons.check_box_outline_blank),
|
||||
const SizedBox(width: 16),
|
||||
Expanded(
|
||||
child: Text(
|
||||
item.categoryDisplayTitle,
|
||||
style: const TextStyle(fontSize: 14),
|
||||
),
|
||||
),
|
||||
],
|
||||
margin: const EdgeInsets.only(right: 4),
|
||||
child: Text(
|
||||
category.categoryDisplayTitle,
|
||||
style: TextStyle(
|
||||
color: Theme.of(context).colorScheme.onPrimary,
|
||||
fontSize: 13,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
],
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
value: currentCategories.isEmpty ? null : currentCategories.last,
|
||||
onChanged: (_) {},
|
||||
selectedItemBuilder: (context) {
|
||||
return (postCategories.value?.items ?? []).map((item) {
|
||||
return SingleChildScrollView(
|
||||
scrollDirection: Axis.horizontal,
|
||||
child: Row(
|
||||
children: [
|
||||
for (final category in currentCategories)
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
color: Theme.of(context).colorScheme.primary,
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 12,
|
||||
vertical: 4,
|
||||
),
|
||||
margin: const EdgeInsets.only(right: 4),
|
||||
child: Text(
|
||||
category.categoryDisplayTitle,
|
||||
style: TextStyle(
|
||||
color: Theme.of(context).colorScheme.onPrimary,
|
||||
fontSize: 13,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}).toList();
|
||||
},
|
||||
buttonStyleData: const ButtonStyleData(
|
||||
padding: EdgeInsets.only(left: 16, right: 8),
|
||||
height: 38,
|
||||
),
|
||||
menuItemStyleData: const MenuItemStyleData(
|
||||
height: 38,
|
||||
padding: EdgeInsets.zero,
|
||||
}).toList();
|
||||
},
|
||||
buttonStyleData: const ButtonStyleData(
|
||||
padding: EdgeInsets.only(left: 16, right: 8),
|
||||
height: 38,
|
||||
),
|
||||
menuItemStyleData: const MenuItemStyleData(
|
||||
height: 38,
|
||||
padding: EdgeInsets.zero,
|
||||
),
|
||||
),
|
||||
|
||||
// Realm selection
|
||||
DropdownButtonFormField2<SnRealm?>(
|
||||
isExpanded: true,
|
||||
decoration: InputDecoration(
|
||||
contentPadding: const EdgeInsets.symmetric(vertical: 9),
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
),
|
||||
|
||||
// Realm selection
|
||||
DropdownButtonFormField2<SnRealm?>(
|
||||
isExpanded: true,
|
||||
decoration: InputDecoration(
|
||||
contentPadding: const EdgeInsets.symmetric(vertical: 9),
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
hint: Text('realm'.tr(), style: const TextStyle(fontSize: 15)),
|
||||
items: [
|
||||
DropdownMenuItem<SnRealm?>(
|
||||
value: null,
|
||||
child: Row(
|
||||
children: [
|
||||
const CircleAvatar(
|
||||
radius: 16,
|
||||
child: Icon(Symbols.link_off, fill: 1),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Text('postUnlinkRealm').tr(),
|
||||
],
|
||||
).padding(left: 16, right: 8),
|
||||
),
|
||||
hint: Text('realm'.tr(), style: const TextStyle(fontSize: 15)),
|
||||
items: [
|
||||
// Include current realm if it's not null and not in joined realms
|
||||
if (currentRealm != null &&
|
||||
!(userRealms.value ?? []).any((r) => r.id == currentRealm.id))
|
||||
DropdownMenuItem<SnRealm?>(
|
||||
value: null,
|
||||
value: currentRealm,
|
||||
child: Row(
|
||||
children: [
|
||||
const CircleAvatar(
|
||||
ProfilePictureWidget(
|
||||
file: currentRealm.picture,
|
||||
fallbackIcon: Symbols.workspaces,
|
||||
radius: 16,
|
||||
child: Icon(Symbols.link_off, fill: 1),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Text('postUnlinkRealm').tr(),
|
||||
Text(currentRealm.name),
|
||||
],
|
||||
).padding(left: 16, right: 8),
|
||||
),
|
||||
// Include current realm if it's not null and not in joined realms
|
||||
if (currentRealm != null &&
|
||||
!(userRealms.value ?? []).any(
|
||||
(r) => r.id == currentRealm.id,
|
||||
))
|
||||
DropdownMenuItem<SnRealm?>(
|
||||
value: currentRealm,
|
||||
if (userRealms.hasValue)
|
||||
...(userRealms.value ?? []).map(
|
||||
(realm) => DropdownMenuItem<SnRealm?>(
|
||||
value: realm,
|
||||
child: Row(
|
||||
children: [
|
||||
ProfilePictureWidget(
|
||||
file: currentRealm.picture,
|
||||
file: realm.picture,
|
||||
fallbackIcon: Symbols.workspaces,
|
||||
radius: 16,
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Text(currentRealm.name),
|
||||
Text(realm.name),
|
||||
],
|
||||
).padding(left: 16, right: 8),
|
||||
),
|
||||
if (userRealms.hasValue)
|
||||
...(userRealms.value ?? []).map(
|
||||
(realm) => DropdownMenuItem<SnRealm?>(
|
||||
value: realm,
|
||||
child: Row(
|
||||
children: [
|
||||
ProfilePictureWidget(
|
||||
file: realm.picture,
|
||||
fallbackIcon: Symbols.workspaces,
|
||||
radius: 16,
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Text(realm.name),
|
||||
],
|
||||
).padding(left: 16, right: 8),
|
||||
),
|
||||
),
|
||||
],
|
||||
value: currentRealm,
|
||||
onChanged: (value) {
|
||||
state.realm.value = value;
|
||||
},
|
||||
selectedItemBuilder: (context) {
|
||||
return (userRealms.value ?? []).map((_) {
|
||||
return Row(
|
||||
children: [
|
||||
if (currentRealm == null)
|
||||
const CircleAvatar(
|
||||
radius: 16,
|
||||
child: Icon(Symbols.link_off, fill: 1),
|
||||
)
|
||||
else
|
||||
ProfilePictureWidget(
|
||||
file: currentRealm.picture,
|
||||
fallbackIcon: Symbols.workspaces,
|
||||
radius: 16,
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Text(currentRealm?.name ?? 'postUnlinkRealm'.tr()),
|
||||
],
|
||||
);
|
||||
}).toList();
|
||||
},
|
||||
buttonStyleData: const ButtonStyleData(
|
||||
padding: EdgeInsets.only(left: 16, right: 8),
|
||||
height: 40,
|
||||
),
|
||||
menuItemStyleData: const MenuItemStyleData(
|
||||
height: 56,
|
||||
padding: EdgeInsets.zero,
|
||||
),
|
||||
),
|
||||
],
|
||||
value: currentRealm,
|
||||
onChanged: (value) {
|
||||
state.realm.value = value;
|
||||
},
|
||||
selectedItemBuilder: (context) {
|
||||
return (userRealms.value ?? []).map((_) {
|
||||
return Row(
|
||||
children: [
|
||||
if (currentRealm == null)
|
||||
const CircleAvatar(
|
||||
radius: 16,
|
||||
child: Icon(Symbols.link_off, fill: 1),
|
||||
)
|
||||
else
|
||||
ProfilePictureWidget(
|
||||
file: currentRealm.picture,
|
||||
fallbackIcon: Symbols.workspaces,
|
||||
radius: 16,
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Text(currentRealm?.name ?? 'postUnlinkRealm'.tr()),
|
||||
],
|
||||
);
|
||||
}).toList();
|
||||
},
|
||||
buttonStyleData: const ButtonStyleData(
|
||||
padding: EdgeInsets.only(left: 16, right: 8),
|
||||
height: 40,
|
||||
),
|
||||
menuItemStyleData: const MenuItemStyleData(
|
||||
height: 56,
|
||||
padding: EdgeInsets.zero,
|
||||
),
|
||||
),
|
||||
|
||||
// Visibility setting
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
border: Border.all(color: colorScheme.outline, width: 1),
|
||||
// Visibility setting
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
border: Border.all(color: colorScheme.outline, width: 1),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: ListTile(
|
||||
leading: Icon(getVisibilityIcon(currentVisibility)),
|
||||
title: Text('postVisibility'.tr()),
|
||||
subtitle: Text(getVisibilityText(currentVisibility).tr()),
|
||||
trailing: const Icon(Symbols.chevron_right),
|
||||
onTap: showVisibilitySheet,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: ListTile(
|
||||
leading: Icon(getVisibilityIcon(currentVisibility)),
|
||||
title: Text('postVisibility'.tr()),
|
||||
subtitle: Text(getVisibilityText(currentVisibility).tr()),
|
||||
trailing: const Icon(Symbols.chevron_right),
|
||||
onTap: showVisibilitySheet,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
contentPadding: const EdgeInsets.symmetric(
|
||||
horizontal: 16,
|
||||
vertical: 8,
|
||||
),
|
||||
contentPadding: const EdgeInsets.symmetric(
|
||||
horizontal: 16,
|
||||
vertical: 8,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user