Skip to content

Refactor compose-box layout with error banner #861

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 13, 2024
Merged

Refactor compose-box layout with error banner #861

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8a574fc
compose_box [nfc]: Factor out _ComposeBoxContainer
gnprice Aug 2, 2024
8c862ad
compose_box [nfc]: Move blockingErrorBanner from _ComposeBoxLayout to…
gnprice Aug 2, 2024
96b4f08
compose_box [nfc]: Control width at _ComposeBoxContainer
gnprice Aug 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 52 additions & 34 deletions lib/widgets/compose_box.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -844,20 +844,40 @@ class _SendButtonState extends State<_SendButton> {
}
}

class _ComposeBoxContainer extends StatelessWidget {
const _ComposeBoxContainer({required this.child});

final Widget child;

@override
Widget build(BuildContext context) {
ColorScheme colorScheme = Theme.of(context).colorScheme;

// TODO(design): Maybe put a max width on the compose box, like we do on
// the message list itself
return SizedBox(width: double.infinity,
child: Material(
color: colorScheme.surfaceContainerHighest,
child: SafeArea(
minimum: const EdgeInsets.fromLTRB(8, 0, 8, 8),
child: Padding(
padding: const EdgeInsets.only(top: 8.0),
child: child))));
}
}

class _ComposeBoxLayout extends StatelessWidget {
const _ComposeBoxLayout({
required this.topicInput,
required this.contentInput,
required this.sendButton,
required this.contentController,
required this.contentFocusNode,
this.blockingErrorBanner,
});

final Widget? topicInput;
final Widget contentInput;
final Widget sendButton;
final Widget? blockingErrorBanner;
final ComposeContentController contentController;
final FocusNode contentFocusNode;

Expand All @@ -880,36 +900,30 @@ class _ComposeBoxLayout extends StatelessWidget {
),
);

return Material(
color: colorScheme.surfaceContainerHighest,
child: SafeArea(
minimum: const EdgeInsets.fromLTRB(8, 0, 8, 8),
child: Padding(
padding: const EdgeInsets.only(top: 8.0),
child: blockingErrorBanner != null
? SizedBox(width: double.infinity, child: blockingErrorBanner)
: Column(children: [
Row(crossAxisAlignment: CrossAxisAlignment.end, children: [
Expanded(
child: Theme(
data: inputThemeData,
child: Column(children: [
if (topicInput != null) topicInput!,
if (topicInput != null) const SizedBox(height: 8),
contentInput,
]))),
const SizedBox(width: 8),
sendButton,
]),
Theme(
data: themeData.copyWith(
iconTheme: themeData.iconTheme.copyWith(color: colorScheme.onSurfaceVariant)),
child: Row(children: [
_AttachFileButton(contentController: contentController, contentFocusNode: contentFocusNode),
_AttachMediaButton(contentController: contentController, contentFocusNode: contentFocusNode),
_AttachFromCameraButton(contentController: contentController, contentFocusNode: contentFocusNode),
])),
])))); }
return _ComposeBoxContainer(
child: Column(children: [
Row(crossAxisAlignment: CrossAxisAlignment.end, children: [
Expanded(
child: Theme(
data: inputThemeData,
child: Column(children: [
if (topicInput != null) topicInput!,
if (topicInput != null) const SizedBox(height: 8),
contentInput,
]))),
const SizedBox(width: 8),
sendButton,
]),
Theme(
data: themeData.copyWith(
iconTheme: themeData.iconTheme.copyWith(color: colorScheme.onSurfaceVariant)),
child: Row(children: [
_AttachFileButton(contentController: contentController, contentFocusNode: contentFocusNode),
_AttachMediaButton(contentController: contentController, contentFocusNode: contentFocusNode),
_AttachFromCameraButton(contentController: contentController, contentFocusNode: contentFocusNode),
])),
]));
}
}

abstract class ComposeBoxController<T extends StatefulWidget> extends State<T> {
Expand Down Expand Up @@ -1039,6 +1053,11 @@ class _FixedDestinationComposeBoxState extends State<_FixedDestinationComposeBox

@override
Widget build(BuildContext context) {
final errorBanner = _errorBanner(context);
if (errorBanner != null) {
return _ComposeBoxContainer(child: errorBanner);
}

return _ComposeBoxLayout(
contentController: _contentController,
contentFocusNode: _contentFocusNode,
Expand All @@ -1052,8 +1071,7 @@ class _FixedDestinationComposeBoxState extends State<_FixedDestinationComposeBox
topicController: null,
contentController: _contentController,
getDestination: () => widget.narrow.destination,
),
blockingErrorBanner: _errorBanner(context));
));
}
}

Expand Down