Skip to content

Commit 3444df5

Browse files
sm-sayedism-sayedi
committed
action_sheet: Redesign bottom sheet
Fixes: #90
1 parent c6abaf9 commit 3444df5

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
loginOrDivider: const Color(0xffdedede),
@@ -160,6 +165,11 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
160165
mainBackground: const Color(0xff1d1d1d),
161166
title: const Color(0xffffffff),
162167
channelColorSwatches: ChannelColorSwatches.dark,
168+
actionSheetBackground: const HSLColor.fromAHSL(1, 0, 0, 0.14).toColor(),
169+
actionSheetCancelButtonBackground: const HSLColor.fromAHSL(0.15, 240, 0.05, 0.50).toColor(),
170+
actionSheetCancelButtonForeground: const HSLColor.fromAHSL(0.75, 0, 0, 1).toColor(),
171+
actionSheetMenuButtonBackground: const HSLColor.fromAHSL(0.12, 240.89, 0.98, 0.73).toColor(),
172+
actionSheetMenuButtonForeground: const HSLColor.fromAHSL(1, 237.17, 0.96, 0.78).toColor(),
163173
// TODO(#95) need proper dark-theme color (this is ad hoc)
164174
atMentionMarker: const HSLColor.fromAHSL(0.4, 0, 0, 1).toColor(),
165175
dmHeaderBg: const HSLColor.fromAHSL(1, 46, 0.15, 0.2).toColor(),
@@ -183,6 +193,11 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
183193
required this.mainBackground,
184194
required this.title,
185195
required this.channelColorSwatches,
196+
required this.actionSheetBackground,
197+
required this.actionSheetCancelButtonBackground,
198+
required this.actionSheetCancelButtonForeground,
199+
required this.actionSheetMenuButtonBackground,
200+
required this.actionSheetMenuButtonForeground,
186201
required this.atMentionMarker,
187202
required this.dmHeaderBg,
188203
required this.loginOrDivider,
@@ -216,6 +231,11 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
216231
final ChannelColorSwatches channelColorSwatches;
217232

218233
// Not named variables in Figma; taken from older Figma drafts, or elsewhere.
234+
final Color actionSheetBackground;
235+
final Color actionSheetCancelButtonBackground;
236+
final Color actionSheetCancelButtonForeground;
237+
final Color actionSheetMenuButtonBackground;
238+
final Color actionSheetMenuButtonForeground;
219239
final Color atMentionMarker;
220240
final Color dmHeaderBg;
221241
final Color loginOrDivider; // TODO(#95) need proper dark-theme color (this is ad hoc)
@@ -236,6 +256,11 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
236256
Color? mainBackground,
237257
Color? title,
238258
ChannelColorSwatches? channelColorSwatches,
259+
Color? actionSheetBackground,
260+
Color? actionSheetCancelButtonBackground,
261+
Color? actionSheetCancelButtonForeground,
262+
Color? actionSheetMenuButtonBackground,
263+
Color? actionSheetMenuButtonForeground,
239264
Color? atMentionMarker,
240265
Color? dmHeaderBg,
241266
Color? loginOrDivider,
@@ -255,6 +280,11 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
255280
mainBackground: mainBackground ?? this.mainBackground,
256281
title: title ?? this.title,
257282
channelColorSwatches: channelColorSwatches ?? this.channelColorSwatches,
283+
actionSheetBackground: actionSheetBackground ?? this.actionSheetBackground,
284+
actionSheetCancelButtonBackground: actionSheetCancelButtonBackground ?? this.actionSheetCancelButtonBackground,
285+
actionSheetCancelButtonForeground: actionSheetCancelButtonForeground ?? this.actionSheetCancelButtonForeground,
286+
actionSheetMenuButtonBackground: actionSheetMenuButtonBackground ?? this.actionSheetMenuButtonBackground,
287+
actionSheetMenuButtonForeground: actionSheetMenuButtonForeground ?? this.actionSheetMenuButtonBackground,
258288
atMentionMarker: atMentionMarker ?? this.atMentionMarker,
259289
dmHeaderBg: dmHeaderBg ?? this.dmHeaderBg,
260290
loginOrDivider: loginOrDivider ?? this.loginOrDivider,
@@ -281,6 +311,11 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
281311
mainBackground: Color.lerp(mainBackground, other.mainBackground, t)!,
282312
title: Color.lerp(title, other.title, t)!,
283313
channelColorSwatches: ChannelColorSwatches.lerp(channelColorSwatches, other.channelColorSwatches, t),
314+
actionSheetBackground: Color.lerp(actionSheetBackground, other.actionSheetBackground, t)!,
315+
actionSheetCancelButtonBackground: Color.lerp(actionSheetCancelButtonBackground, other.actionSheetCancelButtonBackground, t)!,
316+
actionSheetCancelButtonForeground: Color.lerp(actionSheetCancelButtonForeground, other.actionSheetCancelButtonForeground, t)!,
317+
actionSheetMenuButtonBackground: Color.lerp(actionSheetMenuButtonBackground, other.actionSheetMenuButtonBackground, t)!,
318+
actionSheetMenuButtonForeground: Color.lerp(actionSheetMenuButtonForeground, other.actionSheetMenuButtonBackground, t)!,
284319
atMentionMarker: Color.lerp(atMentionMarker, other.atMentionMarker, t)!,
285320
dmHeaderBg: Color.lerp(dmHeaderBg, other.dmHeaderBg, t)!,
286321
loginOrDivider: Color.lerp(loginOrDivider, other.loginOrDivider, 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)