ember/fluffychat
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
parent 402801c458
commit c5b683f842
No known key found for this signature in database
GPG key ID: E067ECD60F1A0652
2 changed files with 72 additions and 57 deletions
Show stats 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: () =>
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
margin: EdgeInsets.only(
bottom: height + 16,
left: 16,
right: 16,
top: 16,
),
showCloseIcon: true,
content: Text(
L10n.of(
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')}';
return SizedBox(
height: ChatInputRow.height,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Row(
crossAxisAlignment: .center,
mainAxisAlignment: .spaceBetween,
spacing: 8,
children: [
IconButton(
child: Row(
crossAxisAlignment: .center,
mainAxisAlignment: .spaceBetween,
children: [
const SizedBox(width: 4),
Container(
alignment: .center,
width: 48,
child: IconButton(
tooltip: L10n.of(context).cancel,
icon: const Icon(Icons.delete_outlined),
color: theme.colorScheme.error,
onPressed: state.cancel,
),
if (state.isPaused)
IconButton(
),
if (state.isPaused)
Container(
alignment: .center,
width: 48,
child: IconButton(
tooltip: L10n.of(context).resume,
icon: const Icon(Icons.play_circle_outline_outlined),
onPressed: state.resume,
)
else
IconButton(
),
)
else
Container(
alignment: .center,
width: 48,
child: IconButton(
tooltip: L10n.of(context).pause,
icon: const Icon(Icons.pause_circle_outline_outlined),
onPressed: state.pause,
),
Text(time),
Expanded(
child: LayoutBuilder(
builder: (context, constraints) {
const width = 4;
return Row(
mainAxisSize: .min,
mainAxisAlignment: .end,
children: state.amplitudeTimeline.reversed
.take((constraints.maxWidth / (width + 2)).floor())
.toList()
.reversed
.map(
(amplitude) => Container(
margin: const EdgeInsets.only(left: 2),
width: width.toDouble(),
decoration: BoxDecoration(
color: theme.colorScheme.primary,
borderRadius: BorderRadius.circular(2),
),
height: maxDecibalWidth * (amplitude / 100),
),
Text(time),
Expanded(
child: LayoutBuilder(
builder: (context, constraints) {
const width = 4;
return Row(
mainAxisSize: .min,
mainAxisAlignment: .end,
children: state.amplitudeTimeline.reversed
.take((constraints.maxWidth / (width + 2)).floor())
.toList()
.reversed
.map(
(amplitude) => Container(
margin: const EdgeInsets.only(left: 2),
width: width.toDouble(),
decoration: BoxDecoration(
color: theme.colorScheme.primary,
borderRadius: BorderRadius.circular(2),
),
)
.toList(),
);
},
),
height: maxDecibalWidth * (amplitude / 100),
),
)
.toList(),
);
},
),
IconButton(
style: IconButton.styleFrom(
disabledBackgroundColor: theme.bubbleColor.withAlpha(128),
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),
),
IconButton(
style: IconButton.styleFrom(
disabledBackgroundColor: theme.bubbleColor.withAlpha(128),
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),
),
const SizedBox(width: 4),
],
),
);
}