Skip to content

Commit 6324bf3

Browse files
chrisbobbegnprice
chrisbobbe
authored and
gnprice
committed
emoji_reaction: Add EmojiReactionTheme, including dark variant
Related: #95
1 parent 0bae1dc commit 6324bf3

File tree

4 files changed

+155
-25
lines changed

4 files changed

+155
-25
lines changed

‎lib/widgets/emoji_reaction.dart

Lines changed: 103 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,102 @@ import 'content.dart';
88
import 'store.dart';
99
import 'text.dart';
1010

11+
/// Emoji-reaction styles that differ between light and dark themes.
12+
class EmojiReactionTheme extends ThemeExtension<EmojiReactionTheme> {
13+
EmojiReactionTheme.light() :
14+
this._(
15+
bgSelected: Colors.white,
16+
17+
// TODO shadow effect, following web, which uses `box-shadow: inset`:
18+
// https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#inset
19+
// Needs Flutter support for something like that:
20+
// https://github.com/flutter/flutter/issues/18636
21+
// https://github.com/flutter/flutter/issues/52999
22+
// Until then use a solid color; a much-lightened version of the shadow color.
23+
// Also adapt by making [borderUnselected] more transparent, so we'll
24+
// want to check that against web when implementing the shadow.
25+
bgUnselected: const HSLColor.fromAHSL(0.08, 210, 0.50, 0.875).toColor(),
26+
27+
borderSelected: Colors.black.withOpacity(0.45),
28+
29+
// TODO see TODO on [bgUnselected] about shadow effect
30+
borderUnselected: Colors.black.withOpacity(0.05),
31+
32+
textSelected: const HSLColor.fromAHSL(1, 210, 0.20, 0.20).toColor(),
33+
textUnselected: const HSLColor.fromAHSL(1, 210, 0.20, 0.25).toColor(),
34+
);
35+
36+
EmojiReactionTheme.dark() :
37+
this._(
38+
bgSelected: Colors.black.withOpacity(0.8),
39+
bgUnselected: Colors.black.withOpacity(0.3),
40+
borderSelected: Colors.white.withOpacity(0.75),
41+
borderUnselected: Colors.white.withOpacity(0.15),
42+
textSelected: Colors.white.withOpacity(0.85),
43+
textUnselected: Colors.white.withOpacity(0.75),
44+
);
45+
46+
EmojiReactionTheme._({
47+
required this.bgSelected,
48+
required this.bgUnselected,
49+
required this.borderSelected,
50+
required this.borderUnselected,
51+
required this.textSelected,
52+
required this.textUnselected,
53+
});
54+
55+
/// The [EmojiReactionTheme] from the context's active theme.
56+
///
57+
/// The [ThemeData] must include [EmojiReactionTheme] in [ThemeData.extensions].
58+
static EmojiReactionTheme of(BuildContext context) {
59+
final theme = Theme.of(context);
60+
final extension = theme.extension<EmojiReactionTheme>();
61+
assert(extension != null);
62+
return extension!;
63+
}
64+
65+
final Color bgSelected;
66+
final Color bgUnselected;
67+
final Color borderSelected;
68+
final Color borderUnselected;
69+
final Color textSelected;
70+
final Color textUnselected;
71+
72+
@override
73+
EmojiReactionTheme copyWith({
74+
Color? bgSelected,
75+
Color? bgUnselected,
76+
Color? borderSelected,
77+
Color? borderUnselected,
78+
Color? textSelected,
79+
Color? textUnselected,
80+
}) {
81+
return EmojiReactionTheme._(
82+
bgSelected: bgSelected ?? this.bgSelected,
83+
bgUnselected: bgUnselected ?? this.bgUnselected,
84+
borderSelected: borderSelected ?? this.borderSelected,
85+
borderUnselected: borderUnselected ?? this.borderUnselected,
86+
textSelected: textSelected ?? this.textSelected,
87+
textUnselected: textUnselected ?? this.textUnselected,
88+
);
89+
}
90+
91+
@override
92+
EmojiReactionTheme lerp(EmojiReactionTheme other, double t) {
93+
if (identical(this, other)) {
94+
return this;
95+
}
96+
return EmojiReactionTheme._(
97+
bgSelected: Color.lerp(bgSelected, other.bgSelected, t)!,
98+
bgUnselected: Color.lerp(bgUnselected, other.bgUnselected, t)!,
99+
borderSelected: Color.lerp(borderSelected, other.borderSelected, t)!,
100+
borderUnselected: Color.lerp(borderUnselected, other.borderUnselected, t)!,
101+
textSelected: Color.lerp(textSelected, other.textSelected, t)!,
102+
textUnselected: Color.lerp(textUnselected, other.textUnselected, t)!,
103+
);
104+
}
105+
}
106+
11107
class ReactionChipsList extends StatelessWidget {
12108
const ReactionChipsList({
13109
super.key,
@@ -32,24 +128,6 @@ class ReactionChipsList extends StatelessWidget {
32128
}
33129
}
34130

35-
final _textColorSelected = const HSLColor.fromAHSL(1, 210, 0.20, 0.20).toColor();
36-
final _textColorUnselected = const HSLColor.fromAHSL(1, 210, 0.20, 0.25).toColor();
37-
38-
const _backgroundColorSelected = Colors.white;
39-
// TODO shadow effect, following web, which uses `box-shadow: inset`:
40-
// https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#inset
41-
// Needs Flutter support for something like that:
42-
// https://github.com/flutter/flutter/issues/18636
43-
// https://github.com/flutter/flutter/issues/52999
44-
// Until then use a solid color; a much-lightened version of the shadow color.
45-
// Also adapt by making [_borderColorUnselected] more transparent, so we'll
46-
// want to check that against web when implementing the shadow.
47-
final _backgroundColorUnselected = const HSLColor.fromAHSL(0.08, 210, 0.50, 0.875).toColor();
48-
49-
final _borderColorSelected = Colors.black.withOpacity(0.45);
50-
// TODO see TODO on [_backgroundColorUnselected] about shadow effect
51-
final _borderColorUnselected = Colors.black.withOpacity(0.05);
52-
53131
class ReactionChip extends StatelessWidget {
54132
final bool showName;
55133
final int messageId;
@@ -85,10 +163,11 @@ class ReactionChip extends StatelessWidget {
85163
}).join(', ')
86164
: userIds.length.toString();
87165

88-
final borderColor = selfVoted ? _borderColorSelected : _borderColorUnselected;
89-
final labelColor = selfVoted ? _textColorSelected : _textColorUnselected;
90-
final backgroundColor = selfVoted ? _backgroundColorSelected : _backgroundColorUnselected;
91-
final splashColor = selfVoted ? _backgroundColorUnselected : _backgroundColorSelected;
166+
final reactionTheme = EmojiReactionTheme.of(context);
167+
final borderColor = selfVoted ? reactionTheme.borderSelected : reactionTheme.borderUnselected;
168+
final labelColor = selfVoted ? reactionTheme.textSelected : reactionTheme.textUnselected;
169+
final backgroundColor = selfVoted ? reactionTheme.bgSelected : reactionTheme.bgUnselected;
170+
final splashColor = selfVoted ? reactionTheme.bgUnselected : reactionTheme.bgSelected;
92171
final highlightColor = splashColor.withOpacity(0.5);
93172

94173
final borderSide = BorderSide(
@@ -349,14 +428,15 @@ class _TextEmoji extends StatelessWidget {
349428

350429
@override
351430
Widget build(BuildContext context) {
431+
final reactionTheme = EmojiReactionTheme.of(context);
352432
return Text(
353433
textAlign: TextAlign.end,
354434
textScaler: _textEmojiScalerClamped(context),
355435
textWidthBasis: TextWidthBasis.longestLine,
356436
style: TextStyle(
357437
fontSize: 14 * 0.8,
358438
height: 1, // to be denser when we have to wrap
359-
color: selected ? _textColorSelected : _textColorUnselected,
439+
color: selected ? reactionTheme.textSelected : reactionTheme.textUnselected,
360440
).merge(weightVariableTextStyle(context,
361441
wght: selected ? 600 : null)),
362442
// Encourage line breaks before "_" (common in these), but try not

‎lib/widgets/theme.dart

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
22

33
import '../api/model/model.dart';
44
import 'content.dart';
5+
import 'emoji_reaction.dart';
56
import 'stream_colors.dart';
67
import 'text.dart';
78

@@ -37,11 +38,13 @@ ThemeData zulipThemeData(BuildContext context) {
3738
switch (brightness) {
3839
case Brightness.light: {
3940
designVariables = DesignVariables.light();
40-
themeExtensions = [ContentTheme.light(context), designVariables];
41+
themeExtensions =
42+
[ContentTheme.light(context), designVariables, EmojiReactionTheme.light()];
4143
}
4244
case Brightness.dark: {
4345
designVariables = DesignVariables.dark();
44-
themeExtensions = [ContentTheme.dark(context), designVariables];
46+
themeExtensions =
47+
[ContentTheme.dark(context), designVariables, EmojiReactionTheme.dark()];
4548
}
4649
}
4750

‎test/flutter_checks.dart

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,3 +126,8 @@ extension MediaQueryDataChecks on Subject<MediaQueryData> {
126126
Subject<TextScaler> get textScaler => has((x) => x.textScaler, 'textScaler');
127127
// TODO more
128128
}
129+
130+
extension MaterialChecks on Subject<Material> {
131+
Subject<Color?> get color => has((x) => x.color, 'color');
132+
// TODO more
133+
}

‎test/widgets/emoji_reaction_test.dart

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import 'package:zulip/api/model/events.dart';
1111
import 'package:zulip/api/model/model.dart';
1212
import 'package:zulip/model/store.dart';
1313
import 'package:zulip/widgets/emoji_reaction.dart';
14+
import 'package:zulip/widgets/theme.dart';
1415

1516
import '../example_data.dart' as eg;
1617
import '../flutter_checks.dart';
@@ -216,6 +217,47 @@ void main() {
216217
}
217218
});
218219

220+
testWidgets('Smoke test for light/dark/lerped', (tester) async {
221+
await prepare();
222+
await store.addUsers([eg.selfUser, eg.otherUser]);
223+
224+
assert(!debugFollowPlatformBrightness); // to be removed with #95
225+
debugFollowPlatformBrightness = true;
226+
addTearDown(() { debugFollowPlatformBrightness = false; });
227+
tester.platformDispatcher.platformBrightnessTestValue = Brightness.light;
228+
addTearDown(tester.platformDispatcher.clearPlatformBrightnessTestValue);
229+
230+
await setupChipsInBox(tester, reactions: [
231+
Reaction.fromJson({
232+
'user_id': eg.selfUser.userId,
233+
'emoji_name': 'smile', 'emoji_code': '1f642', 'reaction_type': 'unicode_emoji'}),
234+
Reaction.fromJson({
235+
'user_id': eg.otherUser.userId,
236+
'emoji_name': 'tada', 'emoji_code': '1f389', 'reaction_type': 'unicode_emoji'}),
237+
]);
238+
239+
Color? backgroundColor(String emojiName) {
240+
final material = tester.widget<Material>(find.descendant(
241+
of: find.byTooltip(emojiName), matching: find.byType(Material)));
242+
return material.color;
243+
}
244+
245+
check(backgroundColor('smile')).equals(EmojiReactionTheme.light().bgSelected);
246+
check(backgroundColor('tada')).equals(EmojiReactionTheme.light().bgUnselected);
247+
248+
tester.platformDispatcher.platformBrightnessTestValue = Brightness.dark;
249+
await tester.pump();
250+
251+
await tester.pump(kThemeAnimationDuration * 0.4);
252+
final expectedLerped = EmojiReactionTheme.light().lerp(EmojiReactionTheme.dark(), 0.4);
253+
check(backgroundColor('smile')).equals(expectedLerped.bgSelected);
254+
check(backgroundColor('tada')).equals(expectedLerped.bgUnselected);
255+
256+
await tester.pump(kThemeAnimationDuration * 0.6);
257+
check(backgroundColor('smile')).equals(EmojiReactionTheme.dark().bgSelected);
258+
check(backgroundColor('tada')).equals(EmojiReactionTheme.dark().bgUnselected);
259+
});
260+
219261
// TODO more tests:
220262
// - Tapping a chip does the right thing
221263
// - When an image emoji fails to load, falls back to :text_emoji:

0 commit comments

Comments
 (0)