poll: Support read-only poll widget UI.

PIG208 · PIG208 · commit e0df9f046823 · 2024-09-07T00:16:16.000-04:00
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 <zixuan@zulip.com>
diff --git a/assets/l10n/app_en.arb b/assets/l10n/app_en.arb
@@ -533,5 +533,13 @@
   "manyPeopleTyping": "Several people are typing…",
   "@manyPeopleTyping": {
     "description": "Text to display when there are multiple users typing."
+  },
+  "pollWidgetQuestionMissing": "No question.",
+  "@pollWidgetQuestionMissing": {
+    "description": "Text to display for a poll when the question is missing"
+  },
+  "pollWidgetOptionsMissing": "This poll has no options yet.",
+  "@pollWidgetOptionsMissing": {
+    "description": "Text to display for a poll when it has no options"
   }
 }
diff --git a/lib/model/content.dart b/lib/model/content.dart
@@ -3,6 +3,7 @@ import 'package:flutter/foundation.dart';
 import 'package:html/dom.dart' as dom;
 import 'package:html/parser.dart';
 
+import '../api/model/submessage.dart';
 import 'code_block.dart';
 
 /// A node in a parse tree for Zulip message-style content.
@@ -74,6 +75,12 @@ mixin UnimplementedNode on ContentNode {
 
 sealed class ZulipMessageContent {}
 
+class PollContent implements ZulipMessageContent {
+  const PollContent(this.poll);
+
+  final Poll poll;
+}
+
 /// A complete parse tree for a Zulip message's content,
 /// or other complete piece of Zulip HTML content.
 ///
diff --git a/lib/model/message_list.dart b/lib/model/message_list.dart
@@ -135,6 +135,8 @@ mixin _MessageSequence {
   }
 
   ZulipMessageContent _parseMessageContent(Message message) {
+    final poll = message.poll;
+    if (poll != null) return PollContent(poll);
     return parseContent(message.content);
   }
 
diff --git a/lib/widgets/content.dart b/lib/widgets/content.dart
@@ -18,6 +18,7 @@ import 'dialog.dart';
 import 'icons.dart';
 import 'lightbox.dart';
 import 'message_list.dart';
+import 'poll.dart';
 import 'store.dart';
 import 'text.dart';
 
@@ -41,6 +42,10 @@ class ContentTheme extends ThemeExtension<ContentTheme> {
       colorGlobalTimeBorder: const HSLColor.fromAHSL(1, 0, 0, 0.8).toColor(),
       colorMathBlockBorder: const HSLColor.fromAHSL(0.15, 240, 0.8, 0.5).toColor(),
       colorMessageMediaContainerBackground: const Color.fromRGBO(0, 0, 0, 0.03),
+      colorPollNames: const HSLColor.fromAHSL(1, 0, 0, .45).toColor(),
+      colorPollVoteCountBackground: const HSLColor.fromAHSL(1, 0, 0, 1).toColor(),
+      colorPollVoteCountBorder: const HSLColor.fromAHSL(1, 156, 0.28, 0.7).toColor(),
+      colorPollVoteCountText: const HSLColor.fromAHSL(1, 156, 0.41, 0.4).toColor(),
       colorThematicBreak: const HSLColor.fromAHSL(1, 0, 0, .87).toColor(),
       textStylePlainParagraph: _plainParagraphCommon(context).copyWith(
         color: const HSLColor.fromAHSL(1, 0, 0, 0.15).toColor(),
@@ -66,6 +71,10 @@ class ContentTheme extends ThemeExtension<ContentTheme> {
       colorGlobalTimeBorder: const HSLColor.fromAHSL(0.4, 0, 0, 0).toColor(),
       colorMathBlockBorder: const HSLColor.fromAHSL(1, 240, 0.4, 0.4).toColor(),
       colorMessageMediaContainerBackground: const HSLColor.fromAHSL(0.03, 0, 0, 1).toColor(),
+      colorPollNames: const HSLColor.fromAHSL(1, 236, .15, .7).toColor(),
+      colorPollVoteCountBackground: const HSLColor.fromAHSL(0.2, 0, 0, 0).toColor(),
+      colorPollVoteCountBorder: const HSLColor.fromAHSL(1, 185, 0.35, 0.35).toColor(),
+      colorPollVoteCountText: const HSLColor.fromAHSL(1, 185, 0.35, 0.65).toColor(),
       colorThematicBreak: const HSLColor.fromAHSL(1, 0, 0, .87).toColor().withValues(alpha: 0.2),
       textStylePlainParagraph: _plainParagraphCommon(context).copyWith(
         color: const HSLColor.fromAHSL(0.75, 0, 0, 1).toColor(),
@@ -90,6 +99,10 @@ class ContentTheme extends ThemeExtension<ContentTheme> {
     required this.colorGlobalTimeBorder,
     required this.colorMathBlockBorder,
     required this.colorMessageMediaContainerBackground,
+    required this.colorPollNames,
+    required this.colorPollVoteCountBackground,
+    required this.colorPollVoteCountBorder,
+    required this.colorPollVoteCountText,
     required this.colorThematicBreak,
     required this.textStylePlainParagraph,
     required this.codeBlockTextStyles,
@@ -115,6 +128,10 @@ class ContentTheme extends ThemeExtension<ContentTheme> {
   final Color colorGlobalTimeBorder;
   final Color colorMathBlockBorder; // TODO(#46) this won't be needed
   final Color colorMessageMediaContainerBackground;
+  final Color colorPollNames;
+  final Color colorPollVoteCountBackground;
+  final Color colorPollVoteCountBorder;
+  final Color colorPollVoteCountText;
   final Color colorThematicBreak;
 
   /// The complete [TextStyle] we use for plain, unstyled paragraphs.
@@ -166,6 +183,10 @@ class ContentTheme extends ThemeExtension<ContentTheme> {
     Color? colorGlobalTimeBorder,
     Color? colorMathBlockBorder,
     Color? colorMessageMediaContainerBackground,
+    Color? colorPollNames,
+    Color? colorPollVoteCountBackground,
+    Color? colorPollVoteCountBorder,
+    Color? colorPollVoteCountText,
     Color? colorThematicBreak,
     TextStyle? textStylePlainParagraph,
     CodeBlockTextStyles? codeBlockTextStyles,
@@ -181,6 +202,10 @@ class ContentTheme extends ThemeExtension<ContentTheme> {
       colorGlobalTimeBorder: colorGlobalTimeBorder ?? this.colorGlobalTimeBorder,
       colorMathBlockBorder: colorMathBlockBorder ?? this.colorMathBlockBorder,
       colorMessageMediaContainerBackground: colorMessageMediaContainerBackground ?? this.colorMessageMediaContainerBackground,
+      colorPollNames: colorPollNames ?? this.colorPollNames,
+      colorPollVoteCountBackground: colorPollVoteCountBackground ?? this.colorPollVoteCountBackground,
+      colorPollVoteCountBorder: colorPollVoteCountBorder ?? this.colorPollVoteCountBorder,
+      colorPollVoteCountText: colorPollVoteCountText ?? this.colorPollVoteCountText,
       colorThematicBreak: colorThematicBreak ?? this.colorThematicBreak,
       textStylePlainParagraph: textStylePlainParagraph ?? this.textStylePlainParagraph,
       codeBlockTextStyles: codeBlockTextStyles ?? this.codeBlockTextStyles,
@@ -203,6 +228,10 @@ class ContentTheme extends ThemeExtension<ContentTheme> {
       colorGlobalTimeBorder: Color.lerp(colorGlobalTimeBorder, other.colorGlobalTimeBorder, t)!,
       colorMathBlockBorder: Color.lerp(colorMathBlockBorder, other.colorMathBlockBorder, t)!,
       colorMessageMediaContainerBackground: Color.lerp(colorMessageMediaContainerBackground, other.colorMessageMediaContainerBackground, t)!,
+      colorPollNames: Color.lerp(colorPollNames, other.colorPollNames, t)!,
+      colorPollVoteCountBackground: Color.lerp(colorPollVoteCountBackground, other.colorPollVoteCountBackground, t)!,
+      colorPollVoteCountBorder: Color.lerp(colorPollVoteCountBorder, other.colorPollVoteCountBorder, t)!,
+      colorPollVoteCountText: Color.lerp(colorPollVoteCountText, other.colorPollVoteCountText, t)!,
       colorThematicBreak: Color.lerp(colorThematicBreak, other.colorThematicBreak, t)!,
       textStylePlainParagraph: TextStyle.lerp(textStylePlainParagraph, other.textStylePlainParagraph, t)!,
       codeBlockTextStyles: CodeBlockTextStyles.lerp(codeBlockTextStyles, other.codeBlockTextStyles, t),
@@ -234,6 +263,7 @@ class MessageContent extends StatelessWidget {
         style: ContentTheme.of(context).textStylePlainParagraph,
         child: switch(_content) {
           ZulipContent() => BlockContentList(nodes: _content.nodes),
+          PollContent() => PollWidget(poll: _content.poll),
         }));
   }
 }
diff --git a/lib/widgets/poll.dart b/lib/widgets/poll.dart
@@ -0,0 +1,81 @@
+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);
+
+    // TODO(i18n): List formatting, like you can do in JavaScript:
+    //   new Intl.ListFormat('ja').format(['Chris', 'Greg', 'Alya', 'Zixuan'])
+    //   // 'Chris、Greg、Alya、Zixuan'
+    String getOptionVoterNames(PollOption option) => option.voters.map((userId) =>
+      store.users[userId]?.fullName
+        ?? zulipLocalizations.unknownUserName).join(', ');
+
+    final optionTiles = [
+      for (final option in poll.options)
+        Padding(
+          padding: const EdgeInsets.only(bottom: 5.0),
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Container(
+                width: 25,
+                height: 25,
+                decoration: BoxDecoration(
+                  color: theme.colorPollVoteCountBackground,
+                  border: Border.all(color: theme.colorPollVoteCountBorder),
+                  borderRadius: BorderRadius.circular(3)),
+                child: Center(
+                  child: Text(option.voters.length.toString(),
+                    style: textStylePollBold
+                      .copyWith(color: theme.colorPollVoteCountText, fontSize: 13),
+                    textAlign: TextAlign.center))),
+              Expanded(
+                child: Padding(
+                  padding: const EdgeInsetsDirectional.only(start: 5.0),
+                  child: Wrap(children: [
+                    Padding(
+                      padding: const EdgeInsetsDirectional.only(end: 5.0),
+                      child: Text(option.text,
+                        style: textStylePollBold.copyWith(fontSize: 16))),
+                    if (option.voters.isNotEmpty)
+                      // TODO(i18n): Localize parenthesis characters.
+                      Text('(${getOptionVoterNames(option)})', style: textStylePollNames),
+                  ]))),
+            ])),
+    ];
+
+    Text question = (poll.question.isNotEmpty)
+      ? Text(poll.question, style: textStylePollBold)
+      : Text(zulipLocalizations.pollWidgetQuestionMissing,
+          style: textStylePollBold.copyWith(fontStyle: FontStyle.italic));
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Padding(padding: const EdgeInsets.only(bottom: 6.0), child: question),
+        if (optionTiles.isEmpty)
+          Text(zulipLocalizations.pollWidgetOptionsMissing,
+            style: textStylePollNames.copyWith(fontStyle: FontStyle.italic)),
+        ...optionTiles
+      ]);
+  }
+}
diff --git a/test/widgets/poll_test.dart b/test/widgets/poll_test.dart
@@ -0,0 +1,126 @@
+import 'package:checks/checks.dart';
+import 'package:flutter/widgets.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> prepare({Iterable<User>? users}) 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]);
+  }
+
+  Future<void> prepareZulipWidget(WidgetTester tester,
+    SubmessageData? submessageContent, {
+    Iterable<(User, int)> voterIdxPairs = const [],
+  }) async {
+    final message = eg.streamMessage(id: 123, sender: eg.selfUser);
+    final submessage = eg.submessage(content: submessageContent);
+    (store.connection as FakeApiConnection).prepare(json:
+      newestResult(foundOldest: true, messages: []).toJson()
+        ..['messages'] = [{
+          ...message.toJson(),
+          'submessages': [submessage.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(123, 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);
+
+  final pollWidgetData = eg.pollWidgetData(
+    question: 'favorite letter', options: ['A', 'B', 'C']);
+
+  testWidgets('smoke', (tester) async {
+    await prepare();
+    await prepareZulipWidget(tester,
+      pollWidgetData,
+      voterIdxPairs: [
+        (eg.selfUser, 0),
+        (eg.selfUser, 1),
+        (eg.otherUser, 1),
+      ]);
+
+    check(findInPoll(find.text('favorite letter')).evaluate()).single;
+    int optionIndex = 0;
+    for (final (text, vote, names) in [
+      ('A', '1', '(${eg.selfUser.fullName})'),
+      ('B', '2', '(${eg.selfUser.fullName}, ${eg.otherUser.fullName})'),
+      ('C', '0', ''),
+    ]) {
+      final optionFinder = findInPoll(find.byType(Row)).at(optionIndex++);
+      check(find.descendant(of: optionFinder, matching: find.text(text)).evaluate()).single;
+      check(find.descendant(of: optionFinder, matching: find.text(vote)).evaluate()).single;
+      if (names.isNotEmpty) {
+        check(find.descendant(of: optionFinder, matching: find.text(names)).evaluate()).single;
+      }
+    }
+  });
+
+  testWidgets('a lot of voters', (tester) async {
+    final users = List.generate(100, (i) => eg.user(fullName: 'user#$i'));
+    await prepare(users: users);
+    await prepareZulipWidget(tester, pollWidgetData,
+      voterIdxPairs: users.map((user) => (user, 0)));
+    final optionFinder = findInPoll(find.byType(Row)).at(0);
+    final allUserNames = '(${users.map((user) => user.fullName).join(', ')})';
+    check(find.descendant(
+      of: optionFinder, matching: find.text(allUserNames)).evaluate()).single;
+    check(find.descendant(
+      of: optionFinder, matching: find.text('100')).evaluate()).single;
+  });
+
+  testWidgets('show unknown voter', (tester) async {
+    await prepare();
+    await prepareZulipWidget(tester, pollWidgetData);
+    await store.handleEvent(eg.submessageEvent(123, eg.thirdUser.userId,
+      content: PollVoteEventSubmessage(
+        key: PollEventSubmessage.optionKey(senderId: null, idx: 1),
+        op: PollVoteOp.add)));
+    await tester.pump();
+    check(findInPoll(find.text('((unknown user))')).evaluate()).single;
+  });
+
+  testWidgets('poll title missing', (tester) async {
+    await prepare();
+    await prepareZulipWidget(tester, PollWidgetData(
+      extraData: const PollWidgetExtraData(question: '', options: ['A', 'B'])));
+    check(findInPoll(find.text('No question.')).evaluate()).single;
+  });
+
+  testWidgets('poll options missing', (tester) async {
+    await prepare();
+    await prepareZulipWidget(tester, PollWidgetData(
+      extraData: const PollWidgetExtraData(question: 'title', options: [])));
+    check(findInPoll(find.text('This poll has no options yet.')).evaluate()).single;
+  });
+}

Original file line number	Diff line number	Diff line change
`@@ -533,5 +533,13 @@`
`533`	`533`	`"manyPeopleTyping": "Several people are typing…",`
`534`	`534`	`"@manyPeopleTyping": {`
`535`	`535`	`"description": "Text to display when there are multiple users typing."`
	`536`	`+ },`
	`537`	`+ "pollWidgetQuestionMissing": "No question.",`
	`538`	`+ "@pollWidgetQuestionMissing": {`
	`539`	`+ "description": "Text to display for a poll when the question is missing"`
	`540`	`+ },`
	`541`	`+ "pollWidgetOptionsMissing": "This poll has no options yet.",`
	`542`	`+ "@pollWidgetOptionsMissing": {`
	`543`	`+ "description": "Text to display for a poll when it has no options"`
`536`	`544`	`}`
`537`	`545`	`}`
Original file line number	Diff line number	Diff line change
`@@ -135,6 +135,8 @@ mixin _MessageSequence {`
`135`	`135`	`}`
`136`	`136`
`137`	`137`	`ZulipMessageContent _parseMessageContent(Message message) {`
	`138`	`+ final poll = message.poll;`
	`139`	`+ if (poll != null) return PollContent(poll);`
`138`	`140`	`return parseContent(message.content);`
`139`	`141`	`}`
`140`	`142`