Skip to content

Commit 664fce5

Browse files
sm-sayedism-sayedi
committed
action_sheet: Redesign bottom sheet
Fixes: #90
1 parent 1964388 commit 664fce5

File tree

3 files changed

+134
-14
lines changed

3 files changed

+134
-14
lines changed

‎lib/widgets/action_sheet.dart

Lines changed: 66 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@ import '../model/narrow.dart';
1111
import 'clipboard.dart';
1212
import 'compose_box.dart';
1313
import 'dialog.dart';
14-
import 'draggable_scrollable_modal_bottom_sheet.dart';
1514
import 'icons.dart';
1615
import 'message_list.dart';
1716
import 'store.dart';
17+
import 'theme.dart';
1818

1919
/// Show a sheet of actions you can take on a message in the message list.
2020
///
@@ -36,20 +36,46 @@ void showMessageActionSheet({required BuildContext context, required Message mes
3636
&& reactionWithVotes.userIds.contains(store.selfUserId))
3737
?? false;
3838

39-
showDraggableScrollableModalBottomSheet<void>(
39+
final designVariables = DesignVariables.of(context);
40+
showModalBottomSheet<void>(
4041
context: context,
42+
clipBehavior: Clip.antiAlias,
43+
backgroundColor: designVariables.actionSheetBackground,
44+
shape: const RoundedRectangleBorder(borderRadius: BorderRadius.vertical(top: Radius.circular(20.0))),
45+
useSafeArea: true,
46+
isScrollControlled: true,
4147
builder: (BuildContext _) {
42-
return Column(children: [
43-
if (!hasThumbsUpReactionVote) AddThumbsUpButton(message: message, messageListContext: context),
44-
StarButton(message: message, messageListContext: context),
45-
if (isComposeBoxOffered) QuoteAndReplyButton(
46-
message: message,
47-
messageListContext: context,
48+
return Padding(
49+
padding: const EdgeInsets.all(16.0),
50+
child: Column(
51+
crossAxisAlignment: CrossAxisAlignment.stretch,
52+
mainAxisSize: MainAxisSize.min,
53+
children: [
54+
// TODO(#217): show message text
55+
Flexible(
56+
child: SingleChildScrollView(
57+
child: ClipRRect(
58+
borderRadius: BorderRadius.circular(7),
59+
child: Column(children: [
60+
if (!hasThumbsUpReactionVote) AddThumbsUpButton(message: message, messageListContext: context),
61+
StarButton(message: message, messageListContext: context),
62+
if (isComposeBoxOffered) QuoteAndReplyButton(
63+
message: message,
64+
messageListContext: context,
65+
),
66+
CopyMessageTextButton(message: message, messageListContext: context),
67+
CopyMessageLinkButton(message: message, messageListContext: context),
68+
ShareButton(message: message, messageListContext: context),
69+
// TODO: The following line could be replaced by the [spacing]
70+
// property when https://github.com/flutter/flutter/issues/55378 is fixed.
71+
].expand((item) => [const SizedBox(height: 1), item]).skip(1).toList()),
72+
),
73+
),
74+
),
75+
const MessageActionSheetCancelButton(),
76+
],
4877
),
49-
CopyMessageTextButton(message: message, messageListContext: context),
50-
CopyMessageLinkButton(message: message, messageListContext: context),
51-
ShareButton(message: message, messageListContext: context),
52-
]);
78+
);
5379
});
5480
}
5581

@@ -69,11 +95,16 @@ abstract class MessageActionSheetMenuItemButton extends StatelessWidget {
6995

7096
@override
7197
Widget build(BuildContext context) {
98+
final designVariables = DesignVariables.of(context);
7299
final zulipLocalizations = ZulipLocalizations.of(context);
73100
return MenuItemButton(
74-
leadingIcon: Icon(icon),
101+
trailingIcon: Icon(icon, color: designVariables.actionSheetMenuButtonForeground),
102+
style: MenuItemButton.styleFrom(
103+
backgroundColor: designVariables.actionSheetMenuButtonBackground,
104+
foregroundColor: designVariables.actionSheetMenuButtonForeground,
105+
),
75106
onPressed: () => onPressed(context),
76-
child: Text(label(zulipLocalizations)));
107+
child: Text(label(zulipLocalizations), style: const TextStyle(fontSize: 16)));
77108
}
78109
}
79110

@@ -402,3 +433,24 @@ class ShareButton extends MessageActionSheetMenuItemButton {
402433
}
403434
}
404435
}
436+
437+
class MessageActionSheetCancelButton extends StatelessWidget {
438+
const MessageActionSheetCancelButton({super.key});
439+
440+
@override
441+
Widget build(BuildContext context) {
442+
final designVariables = DesignVariables.of(context);
443+
return ElevatedButton(
444+
style: ElevatedButton.styleFrom(
445+
elevation: 0,
446+
backgroundColor: designVariables.actionSheetCancelButtonBackground,
447+
foregroundColor: designVariables.actionSheetCancelButtonForeground,
448+
shadowColor: Colors.transparent,
449+
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)),
450+
),
451+
onPressed: () => Navigator.pop(context),
452+
child: Text(ZulipLocalizations.of(context).dialogCancel,
453+
style: const TextStyle(fontSize: 16)),
454+
);
455+
}
456+
}

‎lib/widgets/theme.dart

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,11 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
139139
mainBackground: const Color(0xfff0f0f0),
140140
title: const Color(0xff1a1a1a),
141141
channelColorSwatches: ChannelColorSwatches.light,
142+
actionSheetBackground: const HSLColor.fromAHSL(1, 0, 0, 0.94).toColor(),
143+
actionSheetCancelButtonBackground: const HSLColor.fromAHSL(0.15, 240, 0.05, 0.50).toColor(),
144+
actionSheetCancelButtonForeground: const HSLColor.fromAHSL(1, 0, 0, 0.13).toColor(),
145+
actionSheetMenuButtonBackground: const HSLColor.fromAHSL(0.12, 243.53, 0.69, 0.61).toColor(),
146+
actionSheetMenuButtonForeground: const HSLColor.fromAHSL(1, 251.74, 0.70, 0.38).toColor(),
142147
atMentionMarker: const HSLColor.fromAHSL(0.5, 0, 0, 0.2).toColor(),
143148
dmHeaderBg: const HSLColor.fromAHSL(1, 46, 0.35, 0.93).toColor(),
144149
errorBannerBackground: const HSLColor.fromAHSL(1, 4, 0.33, 0.90).toColor(),
@@ -167,6 +172,11 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
167172
mainBackground: const Color(0xff1d1d1d),
168173
title: const Color(0xffffffff),
169174
channelColorSwatches: ChannelColorSwatches.dark,
175+
actionSheetBackground: const HSLColor.fromAHSL(1, 0, 0, 0.14).toColor(),
176+
actionSheetCancelButtonBackground: const HSLColor.fromAHSL(0.15, 240, 0.05, 0.50).toColor(),
177+
actionSheetCancelButtonForeground: const HSLColor.fromAHSL(0.75, 0, 0, 1).toColor(),
178+
actionSheetMenuButtonBackground: const HSLColor.fromAHSL(0.12, 240.89, 0.98, 0.73).toColor(),
179+
actionSheetMenuButtonForeground: const HSLColor.fromAHSL(1, 237.17, 0.96, 0.78).toColor(),
170180
// TODO(#95) need proper dark-theme color (this is ad hoc)
171181
atMentionMarker: const HSLColor.fromAHSL(0.4, 0, 0, 1).toColor(),
172182
dmHeaderBg: const HSLColor.fromAHSL(1, 46, 0.15, 0.2).toColor(),
@@ -201,6 +211,11 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
201211
required this.mainBackground,
202212
required this.title,
203213
required this.channelColorSwatches,
214+
required this.actionSheetBackground,
215+
required this.actionSheetCancelButtonBackground,
216+
required this.actionSheetCancelButtonForeground,
217+
required this.actionSheetMenuButtonBackground,
218+
required this.actionSheetMenuButtonForeground,
204219
required this.atMentionMarker,
205220
required this.dmHeaderBg,
206221
required this.errorBannerBackground,
@@ -241,6 +256,11 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
241256
final ChannelColorSwatches channelColorSwatches;
242257

243258
// Not named variables in Figma; taken from older Figma drafts, or elsewhere.
259+
final Color actionSheetBackground;
260+
final Color actionSheetCancelButtonBackground;
261+
final Color actionSheetCancelButtonForeground;
262+
final Color actionSheetMenuButtonBackground;
263+
final Color actionSheetMenuButtonForeground;
244264
final Color atMentionMarker;
245265
final Color dmHeaderBg;
246266
final Color errorBannerBackground;
@@ -268,6 +288,11 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
268288
Color? mainBackground,
269289
Color? title,
270290
ChannelColorSwatches? channelColorSwatches,
291+
Color? actionSheetBackground,
292+
Color? actionSheetCancelButtonBackground,
293+
Color? actionSheetCancelButtonForeground,
294+
Color? actionSheetMenuButtonBackground,
295+
Color? actionSheetMenuButtonForeground,
271296
Color? atMentionMarker,
272297
Color? dmHeaderBg,
273298
Color? errorBannerBackground,
@@ -294,6 +319,11 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
294319
mainBackground: mainBackground ?? this.mainBackground,
295320
title: title ?? this.title,
296321
channelColorSwatches: channelColorSwatches ?? this.channelColorSwatches,
322+
actionSheetBackground: actionSheetBackground ?? this.actionSheetBackground,
323+
actionSheetCancelButtonBackground: actionSheetCancelButtonBackground ?? this.actionSheetCancelButtonBackground,
324+
actionSheetCancelButtonForeground: actionSheetCancelButtonForeground ?? this.actionSheetCancelButtonForeground,
325+
actionSheetMenuButtonBackground: actionSheetMenuButtonBackground ?? this.actionSheetMenuButtonBackground,
326+
actionSheetMenuButtonForeground: actionSheetMenuButtonForeground ?? this.actionSheetMenuButtonBackground,
297327
atMentionMarker: atMentionMarker ?? this.atMentionMarker,
298328
dmHeaderBg: dmHeaderBg ?? this.dmHeaderBg,
299329
errorBannerBackground: errorBannerBackground ?? this.errorBannerBackground,
@@ -327,6 +357,11 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
327357
mainBackground: Color.lerp(mainBackground, other.mainBackground, t)!,
328358
title: Color.lerp(title, other.title, t)!,
329359
channelColorSwatches: ChannelColorSwatches.lerp(channelColorSwatches, other.channelColorSwatches, t),
360+
actionSheetBackground: Color.lerp(actionSheetBackground, other.actionSheetBackground, t)!,
361+
actionSheetCancelButtonBackground: Color.lerp(actionSheetCancelButtonBackground, other.actionSheetCancelButtonBackground, t)!,
362+
actionSheetCancelButtonForeground: Color.lerp(actionSheetCancelButtonForeground, other.actionSheetCancelButtonForeground, t)!,
363+
actionSheetMenuButtonBackground: Color.lerp(actionSheetMenuButtonBackground, other.actionSheetMenuButtonBackground, t)!,
364+
actionSheetMenuButtonForeground: Color.lerp(actionSheetMenuButtonForeground, other.actionSheetMenuButtonBackground, t)!,
330365
atMentionMarker: Color.lerp(atMentionMarker, other.atMentionMarker, t)!,
331366
dmHeaderBg: Color.lerp(dmHeaderBg, other.dmHeaderBg, t)!,
332367
errorBannerBackground: Color.lerp(errorBannerBackground, other.errorBannerBackground, t)!,

‎test/widgets/action_sheet_test.dart

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -542,4 +542,37 @@ void main() {
542542
check(mockSharePlus.sharedString).isNull();
543543
});
544544
});
545+
546+
group('MessageActionSheetCancelButton', () {
547+
final zulipLocalizations = GlobalLocalizations.zulipLocalizations;
548+
549+
Finder cancelButtonFinder() => find.text(zulipLocalizations.dialogCancel);
550+
551+
void checkActionSheet(WidgetTester tester, {required bool isShown}) {
552+
// TODO(i18n) skip translation for now
553+
check(find.text('React with 👍').evaluate().length).equals(isShown ? 1 : 0);
554+
check(find.text(zulipLocalizations.actionSheetOptionStarMessage)
555+
.evaluate().length).equals(isShown ? 1 : 0);
556+
check(find.text(zulipLocalizations.actionSheetOptionQuoteAndReply)
557+
.evaluate().length).equals(isShown ? 1 : 0);
558+
check(find.text(zulipLocalizations.actionSheetOptionCopyMessageText)
559+
.evaluate().length).equals(isShown ? 1 : 0);
560+
check(find.text(zulipLocalizations.actionSheetOptionCopyMessageLink)
561+
.evaluate().length).equals(isShown ? 1 : 0);
562+
check(find.text(zulipLocalizations.actionSheetOptionShare)
563+
.evaluate().length).equals(isShown ? 1 : 0);
564+
565+
check(cancelButtonFinder().evaluate().length).equals(isShown ? 1 : 0);
566+
}
567+
568+
testWidgets('pressing the button dismisses the action sheet', (tester) async {
569+
final message = eg.streamMessage();
570+
await setupToMessageActionSheet(tester, message: message, narrow: TopicNarrow.ofMessage(message));
571+
checkActionSheet(tester, isShown: true);
572+
573+
await tester.tap(cancelButtonFinder());
574+
await tester.pumpAndSettle();
575+
checkActionSheet(tester, isShown: false);
576+
});
577+
});
545578
}

0 commit comments

Comments
 (0)