forked from zulip/zulip-flutter
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
poll: Support read-only poll widget UI
The UI follows the webapp until we get a new design.
The dark theme colors were tentatively picked. The `TextStyle`s are
the same for both light and dark theme. All the styling are based on
values taken from the webapp.
References:
- light theme:
https://github.com/zulip/zulip/blob/2011e0df760cea52c31914e7b77d9b4e38e9ee74/web/styles/widgets.css#L138-L185
https://github.com/zulip/zulip/blob/2011e0df760cea52c31914e7b77d9b4e38e9ee74/web/styles/dark_theme.css#L358
- dark theme:
https://github.com/zulip/zulip/blob/2011e0df760cea52c31914e7b77d9b4e38e9ee74/web/styles/dark_theme.css#L966-L987
Fixes zulip#165.
Signed-off-by: Zixuan James Li <[email protected]>- Loading branch information
Showing
6 changed files
with
246 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| import 'package:flutter/material.dart'; | ||
| import 'package:flutter_gen/gen_l10n/zulip_localizations.dart'; | ||
|
|
||
| import '../api/model/submessage.dart'; | ||
| import 'content.dart'; | ||
| import 'store.dart'; | ||
| import 'text.dart'; | ||
|
|
||
| class PollWidget extends StatelessWidget { | ||
| const PollWidget({super.key, required this.poll}); | ||
|
|
||
| final Poll poll; | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| final zulipLocalizations = ZulipLocalizations.of(context); | ||
| final store = PerAccountStoreWidget.of(context); | ||
| final theme = ContentTheme.of(context); | ||
|
|
||
| final textStylePollBold = const TextStyle(fontSize: 18) | ||
| .merge(weightVariableTextStyle(context, wght: 600)); | ||
| final textStylePollNames = TextStyle( | ||
| fontSize: 16, color: theme.colorPollNames); | ||
|
|
||
| Text question = (poll.question.isNotEmpty) | ||
| ? Text(poll.question, style: textStylePollBold) | ||
| : Text(zulipLocalizations.pollWidgetQuestionMissing, | ||
| style: textStylePollBold.copyWith(fontStyle: FontStyle.italic)); | ||
|
|
||
| Widget buildOptionItem(PollOption option) { | ||
| // TODO(i18n): List formatting, like you can do in JavaScript: | ||
| // new Intl.ListFormat('ja').format(['Chris', 'Greg', 'Alya', 'Zixuan']) | ||
| // // 'Chris、Greg、Alya、Zixuan' | ||
| final voterNames = option.voters | ||
| .map((userId) => | ||
| store.users[userId]?.fullName ?? zulipLocalizations.unknownUserName) | ||
| .join(', '); | ||
|
|
||
| return Padding( | ||
| padding: const EdgeInsets.only(bottom: 5), | ||
| child: Row( | ||
| spacing: 5, | ||
| crossAxisAlignment: CrossAxisAlignment.start, | ||
| children: [ | ||
| ConstrainedBox( | ||
| // The box can be stretched when there are more than 99 votes. | ||
| constraints: const BoxConstraints(minWidth: 25), | ||
| child: Container( | ||
| height: 25, | ||
| padding: const EdgeInsets.symmetric(horizontal: 4), | ||
| decoration: BoxDecoration( | ||
| color: theme.colorPollVoteCountBackground, | ||
| border: Border.all(color: theme.colorPollVoteCountBorder), | ||
| borderRadius: BorderRadius.circular(3)), | ||
| child: Center( | ||
| child: Text(option.voters.length.toString(), | ||
| textAlign: TextAlign.center, | ||
| style: textStylePollBold.copyWith( | ||
| color: theme.colorPollVoteCountText, fontSize: 13))))), | ||
| Expanded( | ||
| child: Wrap( | ||
| spacing: 5, | ||
| children: [ | ||
| Text(option.text, style: textStylePollBold.copyWith(fontSize: 16)), | ||
| if (option.voters.isNotEmpty) | ||
| // TODO(i18n): Localize parenthesis characters. | ||
| Text('($voterNames)', style: textStylePollNames), | ||
| ])), | ||
| ])); | ||
| } | ||
|
|
||
| return Column( | ||
| crossAxisAlignment: CrossAxisAlignment.start, | ||
| children: [ | ||
| Padding(padding: const EdgeInsets.only(bottom: 6), child: question), | ||
| if (poll.options.isEmpty) | ||
| Text(zulipLocalizations.pollWidgetOptionsMissing, | ||
| style: textStylePollNames.copyWith(fontStyle: FontStyle.italic)), | ||
| for (final option in poll.options) | ||
| buildOptionItem(option), | ||
| ]); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| import 'package:checks/checks.dart'; | ||
| import 'package:flutter/widgets.dart'; | ||
| import 'package:flutter_checks/flutter_checks.dart'; | ||
| import 'package:flutter_test/flutter_test.dart'; | ||
| import 'package:zulip/api/model/model.dart'; | ||
| import 'package:zulip/api/model/submessage.dart'; | ||
| import 'package:zulip/model/narrow.dart'; | ||
| import 'package:zulip/model/store.dart'; | ||
| import 'package:zulip/widgets/message_list.dart'; | ||
| import 'package:zulip/widgets/poll.dart'; | ||
|
|
||
| import '../api/fake_api.dart'; | ||
| import '../example_data.dart' as eg; | ||
| import '../model/binding.dart'; | ||
| import '../model/message_list_test.dart'; | ||
| import '../model/test_store.dart'; | ||
| import 'test_app.dart'; | ||
|
|
||
| void main() { | ||
| TestZulipBinding.ensureInitialized(); | ||
|
|
||
| late PerAccountStore store; | ||
|
|
||
| Future<void> preparePollWidget( | ||
| WidgetTester tester, | ||
| SubmessageData? submessageContent, { | ||
| Iterable<User>? users, | ||
| Iterable<(User, int)> voterIdxPairs = const [], | ||
| }) async { | ||
| addTearDown(testBinding.reset); | ||
| await testBinding.globalStore.add(eg.selfAccount, eg.initialSnapshot()); | ||
| store = await testBinding.globalStore.perAccount(eg.selfAccount.id); | ||
| await store.addUsers(users ?? [eg.selfUser, eg.otherUser]); | ||
|
|
||
| final message = eg.streamMessage(sender: eg.selfUser); | ||
| // Because the Message.toJson does not support dumping submessages, | ||
| // we need add the submessage to the JSON object directly. | ||
| (store.connection as FakeApiConnection).prepare( | ||
| json: newestResult(foundOldest: true, messages: []).toJson() | ||
| ..['messages'] = [{ | ||
| ...message.toJson(), | ||
| 'submessages': [eg.submessage(content: submessageContent).toJson()], | ||
| }]); | ||
| await tester.pumpWidget(TestZulipApp(accountId: eg.selfAccount.id, | ||
| child: MessageListPage(initNarrow: TopicNarrow.ofMessage(message)))); | ||
| await tester.pumpAndSettle(); | ||
|
|
||
| for (final (voter, idx) in voterIdxPairs) { | ||
| await store.handleEvent(eg.submessageEvent(message.id, voter.userId, | ||
| content: PollVoteEventSubmessage( | ||
| key: PollEventSubmessage.optionKey(senderId: null, idx: idx), | ||
| op: PollVoteOp.add))); | ||
| } | ||
| await tester.pump(); | ||
| } | ||
|
|
||
| Finder findInPoll(Finder matching) => | ||
| find.descendant(of: find.byType(PollWidget), matching: matching); | ||
|
|
||
| Finder findTextAtRow(String text, int index) => | ||
| find.descendant( | ||
| of: findInPoll(find.byType(Row)).at(index), matching: find.text(text)); | ||
|
|
||
| testWidgets('smoke', (tester) async { | ||
| await preparePollWidget(tester, | ||
| eg.pollWidgetData(question: 'favorite letter', options: ['A', 'B', 'C']), | ||
| voterIdxPairs: [ | ||
| (eg.selfUser, 0), | ||
| (eg.selfUser, 1), | ||
| (eg.otherUser, 1), | ||
| ]); | ||
|
|
||
| check(findInPoll(find.text('favorite letter'))).findsOne(); | ||
|
|
||
| check(findTextAtRow('A', 0)).findsOne(); | ||
| check(findTextAtRow('1', 0)).findsOne(); | ||
| check(findTextAtRow('(${eg.selfUser.fullName})', 0)).findsOne(); | ||
|
|
||
| check(findTextAtRow('B', 1)).findsOne(); | ||
| check(findTextAtRow('2', 1)).findsOne(); | ||
| check(findTextAtRow('(${eg.selfUser.fullName}, ${eg.otherUser.fullName})', 1)).findsOne(); | ||
|
|
||
| check(findTextAtRow('C', 2)).findsOne(); | ||
| check(findTextAtRow('0', 2)).findsOne(); | ||
| }); | ||
|
|
||
| final pollWidgetData = eg.pollWidgetData(question: 'poll', options: ['A', 'B']); | ||
|
|
||
| testWidgets('a lot of voters', (tester) async { | ||
| final users = List.generate(100, (i) => eg.user(fullName: 'user#$i')); | ||
| await preparePollWidget(tester, pollWidgetData, | ||
| users: users, voterIdxPairs: users.map((user) => (user, 0))); | ||
|
|
||
| final allUserNames = '(${users.map((user) => user.fullName).join(', ')})'; | ||
| check(findTextAtRow(allUserNames, 0)).findsOne(); | ||
| check(findTextAtRow('100', 0)).findsOne(); | ||
| }); | ||
|
|
||
| testWidgets('show unknown voter', (tester) async { | ||
| await preparePollWidget(tester, pollWidgetData, | ||
| users: [eg.selfUser], voterIdxPairs: [(eg.thirdUser, 1)]); | ||
| check(findInPoll(find.text('((unknown user))'))).findsOne(); | ||
| }); | ||
|
|
||
| testWidgets('poll title missing', (tester) async { | ||
| await preparePollWidget(tester, eg.pollWidgetData( | ||
| question: '', options: ['A'])); | ||
| check(findInPoll(find.text('No question.'))).findsOne(); | ||
| }); | ||
|
|
||
| testWidgets('poll options missing', (tester) async { | ||
| await preparePollWidget(tester, eg.pollWidgetData( | ||
| question: 'title', options: [])); | ||
| check(findInPoll(find.text('This poll has no options yet.'))).findsOne(); | ||
| }); | ||
| } |