2ndbeam/fluffychat-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: Adjust chat input row design

Browse source
This commit is contained in:
Christian Kußowski 2026-02-14 22:01:44 +01:00
commit c5b683f842
No known key found for this signature in database
GPG key ID: E067ECD60F1A0652
2 changed files with 72 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

7
lib/pages/chat/chat_input_row.dart
View file

@ -364,6 +364,13 @@ class ChatInputRow extends StatelessWidget {
onPressed: () => onPressed: () =>
ScaffoldMessenger.of(context).showSnackBar( ScaffoldMessenger.of(context).showSnackBar(
SnackBar( SnackBar(
margin: EdgeInsets.only(
bottom: height + 16,
left: 16,
right: 16,
top: 16,
),
showCloseIcon: true,
content: Text( content: Text(
L10n.of( L10n.of(
context, context,

122
lib/pages/chat/recording_input_row.dart
View file

@ -22,78 +22,86 @@ class RecordingInputRow extends StatelessWidget {
'${state.duration.inMinutes.toString().padLeft(2, '0')}:${(state.duration.inSeconds % 60).toString().padLeft(2, '0')}'; '${state.duration.inMinutes.toString().padLeft(2, '0')}:${(state.duration.inSeconds % 60).toString().padLeft(2, '0')}';
return SizedBox( return SizedBox(
height: ChatInputRow.height, height: ChatInputRow.height,
child: Padding( child: Row(
padding: const EdgeInsets.symmetric(horizontal: 8.0), crossAxisAlignment: .center,
child: Row( mainAxisAlignment: .spaceBetween,
crossAxisAlignment: .center, children: [
mainAxisAlignment: .spaceBetween, const SizedBox(width: 4),
spacing: 8, Container(
children: [ alignment: .center,
IconButton( width: 48,
child: IconButton(
tooltip: L10n.of(context).cancel, tooltip: L10n.of(context).cancel,
icon: const Icon(Icons.delete_outlined), icon: const Icon(Icons.delete_outlined),
color: theme.colorScheme.error, color: theme.colorScheme.error,
onPressed: state.cancel, onPressed: state.cancel,
), ),
if (state.isPaused) ),
IconButton( if (state.isPaused)
Container(
alignment: .center,
width: 48,
child: IconButton(
tooltip: L10n.of(context).resume, tooltip: L10n.of(context).resume,
icon: const Icon(Icons.play_circle_outline_outlined), icon: const Icon(Icons.play_circle_outline_outlined),
onPressed: state.resume, onPressed: state.resume,
) ),
else )
IconButton( else
Container(
alignment: .center,
width: 48,
child: IconButton(
tooltip: L10n.of(context).pause, tooltip: L10n.of(context).pause,
icon: const Icon(Icons.pause_circle_outline_outlined), icon: const Icon(Icons.pause_circle_outline_outlined),
onPressed: state.pause, onPressed: state.pause,
), ),
Text(time), ),
Expanded( Text(time),
child: LayoutBuilder( Expanded(
builder: (context, constraints) { child: LayoutBuilder(
const width = 4; builder: (context, constraints) {
return Row( const width = 4;
mainAxisSize: .min, return Row(
mainAxisAlignment: .end, mainAxisSize: .min,
children: state.amplitudeTimeline.reversed mainAxisAlignment: .end,
.take((constraints.maxWidth / (width + 2)).floor()) children: state.amplitudeTimeline.reversed
.toList() .take((constraints.maxWidth / (width + 2)).floor())
.reversed .toList()
.map( .reversed
(amplitude) => Container( .map(
margin: const EdgeInsets.only(left: 2), (amplitude) => Container(
width: width.toDouble(), margin: const EdgeInsets.only(left: 2),
decoration: BoxDecoration( width: width.toDouble(),
color: theme.colorScheme.primary, decoration: BoxDecoration(
borderRadius: BorderRadius.circular(2), color: theme.colorScheme.primary,
), borderRadius: BorderRadius.circular(2),
height: maxDecibalWidth * (amplitude / 100),
), ),
) height: maxDecibalWidth * (amplitude / 100),
.toList(), ),
); )
}, .toList(),
), );
},
), ),
IconButton( ),
style: IconButton.styleFrom( IconButton(
disabledBackgroundColor: theme.bubbleColor.withAlpha(128), style: IconButton.styleFrom(
backgroundColor: theme.bubbleColor, disabledBackgroundColor: theme.bubbleColor.withAlpha(128),
foregroundColor: theme.onBubbleColor, backgroundColor: theme.bubbleColor,
), foregroundColor: theme.onBubbleColor,
tooltip: L10n.of(context).sendAudio,
icon: state.isSending
? const SizedBox.square(
dimension: 24,
child: CircularProgressIndicator.adaptive(),
)
: const Icon(Icons.send_outlined),
onPressed: state.isSending
? null
: () => state.stopAndSend(onSend),
), ),
], tooltip: L10n.of(context).sendAudio,
), icon: state.isSending
? const SizedBox.square(
dimension: 24,
child: CircularProgressIndicator.adaptive(),
)
: const Icon(Icons.send_outlined),
onPressed: state.isSending ? null : () => state.stopAndSend(onSend),
),
const SizedBox(width: 4),
],
), ),
); );
} }