💄 Optimize compose toolbar styling

This commit is contained in:
2026-01-17 15:51:45 +08:00
parent 6840054a41
commit c36a5eaa73
2 changed files with 3 additions and 163 deletions

View File

@@ -414,7 +414,6 @@ class PostComposeCard extends HookConsumerWidget {
child: ComposeToolbar( child: ComposeToolbar(
state: composeState, state: composeState,
originalPost: originalPost, originalPost: originalPost,
isCompact: true,
useSafeArea: isContained, useSafeArea: isContained,
), ),
), ),

View File

@@ -13,14 +13,12 @@ import 'package:styled_widget/styled_widget.dart';
class ComposeToolbar extends HookConsumerWidget { class ComposeToolbar extends HookConsumerWidget {
final ComposeState state; final ComposeState state;
final SnPost? originalPost; final SnPost? originalPost;
final bool isCompact;
final bool useSafeArea; final bool useSafeArea;
const ComposeToolbar({ const ComposeToolbar({
super.key, super.key,
required this.state, required this.state,
this.originalPost, this.originalPost,
this.isCompact = false,
this.useSafeArea = false, this.useSafeArea = false,
}); });
@@ -95,163 +93,9 @@ class ComposeToolbar extends HookConsumerWidget {
final colorScheme = Theme.of(context).colorScheme; final colorScheme = Theme.of(context).colorScheme;
if (isCompact) {
return Material(
elevation: 8,
color: Theme.of(context).colorScheme.surfaceContainerHigh,
child: Center(
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 560),
child:
Row(
children: [
Expanded(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
UploadMenu(
items: uploadMenuItems,
isCompact: isCompact,
),
IconButton(
onPressed: linkAttachment,
icon: const Icon(Symbols.attach_file),
tooltip: 'linkAttachment'.tr(),
color: colorScheme.primary,
visualDensity: const VisualDensity(
horizontal: -4,
vertical: -2,
),
),
// Poll button with visual state when a poll is linked
ListenableBuilder(
listenable: state.pollId,
builder: (context, _) {
return IconButton(
onPressed: pickPoll,
icon: const Icon(Symbols.how_to_vote),
tooltip: 'poll'.tr(),
color: colorScheme.primary,
visualDensity: const VisualDensity(
horizontal: -4,
vertical: -2,
),
style: ButtonStyle(
backgroundColor: WidgetStatePropertyAll(
state.pollId.value != null
? colorScheme.primary.withOpacity(
0.15,
)
: null,
),
),
);
},
),
// Fund button with visual state when a fund is linked
ListenableBuilder(
listenable: state.fundId,
builder: (context, _) {
return IconButton(
onPressed: pickFund,
icon: const Icon(
Symbols.account_balance_wallet,
),
tooltip: 'fund'.tr(),
color: colorScheme.primary,
visualDensity: const VisualDensity(
horizontal: -4,
vertical: -2,
),
style: ButtonStyle(
backgroundColor: WidgetStatePropertyAll(
state.fundId.value != null
? colorScheme.primary.withOpacity(
0.15,
)
: null,
),
),
);
},
),
// Embed button with visual state when embed is present
ListenableBuilder(
listenable: state.embedView,
builder: (context, _) {
return IconButton(
onPressed: showEmbedSheet,
icon: const Icon(Symbols.iframe),
tooltip: 'embedView'.tr(),
color: colorScheme.primary,
visualDensity: const VisualDensity(
horizontal: -4,
vertical: -2,
),
style: ButtonStyle(
backgroundColor: WidgetStatePropertyAll(
state.embedView.value != null
? colorScheme.primary.withOpacity(
0.15,
)
: null,
),
),
);
},
),
],
),
),
),
if (originalPost == null && state.isEmpty)
IconButton(
icon: const Icon(Symbols.draft, size: 20),
color: colorScheme.primary,
onPressed: showDraftManager,
tooltip: 'drafts'.tr(),
visualDensity: const VisualDensity(
horizontal: -4,
vertical: -4,
),
constraints: const BoxConstraints(
minWidth: 32,
minHeight: 48,
),
)
else if (originalPost == null)
IconButton(
icon: const Icon(Symbols.save, size: 20),
color: colorScheme.primary,
onPressed: saveDraft,
onLongPress: showDraftManager,
tooltip: 'saveDraft'.tr(),
visualDensity: const VisualDensity(
horizontal: -4,
vertical: -4,
),
constraints: const BoxConstraints(
minWidth: 32,
minHeight: 48,
),
),
],
).padding(
horizontal: 16,
top: 4,
bottom: useSafeArea
? MediaQuery.of(context).padding.bottom + 4
: 4,
),
),
),
);
}
return Material( return Material(
elevation: 4, elevation: 8,
color: Theme.of(context).colorScheme.surfaceContainerLow, color: Theme.of(context).colorScheme.surfaceContainer,
child: Center( child: Center(
child: ConstrainedBox( child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 560), constraints: const BoxConstraints(maxWidth: 560),
@@ -263,10 +107,7 @@ class ComposeToolbar extends HookConsumerWidget {
scrollDirection: Axis.horizontal, scrollDirection: Axis.horizontal,
child: Row( child: Row(
children: [ children: [
UploadMenu( UploadMenu(items: uploadMenuItems),
items: uploadMenuItems,
isCompact: isCompact,
),
IconButton( IconButton(
onPressed: linkAttachment, onPressed: linkAttachment,
icon: const Icon(Symbols.attach_file), icon: const Icon(Symbols.attach_file),