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 #165.

Signed-off-by: Zixuan James Li <[email protected]>

Author: PIG208

assets/l10n/app_en.arb

@@ -510,5 +510,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"
   }
 }

lib/api/model/submessage.dart

@@ -3,6 +3,7 @@ import 'dart:convert';
 import 'package:json_annotation/json_annotation.dart';
 
 import '../../log.dart';
+import '../../model/store.dart';
 
 part 'submessage.g.dart';
 
@@ -374,6 +375,9 @@ class PollOption {
   final String text;
   final Set<int> voters = {};
 
+  Iterable<String> getVoterNames(PerAccountStore store, String fallback) =>
+    voters.map((userId) => store.users[userId]?.fullName ?? fallback);
+
   @override
   bool operator ==(Object other) {
     if (other is! PollOption) return false;

lib/model/content.dart

@@ -72,13 +72,17 @@ mixin UnimplementedNode on ContentNode {
   }
 }
 
+sealed class ZulipMessageContent {}
+
+class PollContent implements ZulipMessageContent {}
+
 /// A complete parse tree for a Zulip message's content,
 /// or other complete piece of Zulip HTML content.
 ///
 /// This is a parsed representation for an entire value of [Message.content],
 /// [Stream.renderedDescription], or other text from a Zulip server that comes
 /// in the same Zulip HTML format.
-class ZulipContent extends ContentNode {
+class ZulipContent extends ContentNode implements ZulipMessageContent {
   const ZulipContent({super.debugHtmlNode, required this.nodes});
 
   final List<BlockContentNode> nodes;

lib/model/message_list.dart

@@ -34,7 +34,7 @@ class MessageListDateSeparatorItem extends MessageListItem {
 /// A message to show in the message list.
 class MessageListMessageItem extends MessageListItem {
   final Message message;
-  ZulipContent content;
+  ZulipMessageContent content;
   bool showSender;
   bool isLastInBlock;
 
@@ -97,7 +97,7 @@ mixin _MessageSequence {
   ///
   /// This information is completely derived from [messages].
   /// It exists as an optimization, to memoize the work of parsing.
-  final List<ZulipContent> contents = [];
+  final List<ZulipMessageContent> contents = [];
 
   /// The messages and their siblings in the UI, in order.
   ///
@@ -133,10 +133,18 @@ mixin _MessageSequence {
     }
   }
 
+  ZulipMessageContent _parseMessage(Message message) {
+    if (message.poll != null) {
+      return PollContent();
+    } else {
+      return parseContent(message.content);
+    }
+  }
+
   /// Update data derived from the content of the index-th message.
   void _reparseContent(int index) {
     final message = messages[index];
-    final content = parseContent(message.content);
+    final content = _parseMessage(message);
     contents[index] = content;
 
     final itemIndex = findItemWithMessageId(message.id);
@@ -153,7 +161,7 @@ mixin _MessageSequence {
   void _addMessage(Message message) {
     assert(contents.length == messages.length);
     messages.add(message);
-    contents.add(parseContent(message.content));
+    contents.add(_parseMessage(message));
     assert(contents.length == messages.length);
     _processMessage(messages.length - 1);
   }
@@ -164,7 +172,7 @@ mixin _MessageSequence {
   /// If none of [messageIds] are found, this is a no-op.
   bool _removeMessagesById(Iterable<int> messageIds) {
     final messagesToRemoveById = <int>{};
-    final contentToRemove = Set<ZulipContent>.identity();
+    final contentToRemove = Set<ZulipMessageContent>.identity();
     for (final messageId in messageIds) {
       final index = _findMessageWithId(messageId);
       if (index == -1) continue;
@@ -190,7 +198,7 @@ mixin _MessageSequence {
     assert(contents.length == messages.length);
     messages.insertAll(index, toInsert);
     contents.insertAll(index, toInsert.map(
-      (message) => parseContent(message.content)));
+      (message) => _parseMessage(message)));
     assert(contents.length == messages.length);
     _reprocessAll();
   }
@@ -210,7 +218,7 @@ mixin _MessageSequence {
   void _recompute() {
     assert(contents.length == messages.length);
     contents.clear();
-    contents.addAll(messages.map((message) => parseContent(message.content)));
+    contents.addAll(messages.map((message) => _parseMessage(message)));
     assert(contents.length == messages.length);
     _reprocessAll();
   }

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().withOpacity(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,
@@ -204,6 +229,10 @@ class ContentTheme extends ThemeExtension<ContentTheme> {
       colorMathBlockBorder: Color.lerp(colorMathBlockBorder, other.colorMathBlockBorder, t)!,
       colorMessageMediaContainerBackground: Color.lerp(colorMessageMediaContainerBackground, other.colorMessageMediaContainerBackground, t)!,
       colorThematicBreak: Color.lerp(colorThematicBreak, other.colorThematicBreak, 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)!,
       textStylePlainParagraph: TextStyle.lerp(textStylePlainParagraph, other.textStylePlainParagraph, t)!,
       codeBlockTextStyles: CodeBlockTextStyles.lerp(codeBlockTextStyles, other.codeBlockTextStyles, t),
       textStyleError: TextStyle.lerp(textStyleError, other.textStyleError, t)!,
@@ -222,17 +251,20 @@ const double kBaseFontSize = 17;
 /// This does not include metadata like the sender's name and avatar, the time,
 /// or the message's status as starred or edited.
 class MessageContent extends StatelessWidget {
-  const MessageContent({super.key, required this.message, required this.content});
+  const MessageContent({super.key, required this.message, required ZulipMessageContent content}) : _content = content;
 
   final Message message;
-  final ZulipContent content;
+  final ZulipMessageContent _content;
 
   @override
   Widget build(BuildContext context) {
     return InheritedMessage(message: message,
       child: DefaultTextStyle(
         style: ContentTheme.of(context).textStylePlainParagraph,
-        child: BlockContentList(nodes: content.nodes)));
+        child: switch(_content) {
+          ZulipContent() => BlockContentList(nodes: _content.nodes),
+          PollContent() => PollWidget(poll: message.poll!),
+        }));
   }
 }
 

lib/widgets/poll.dart

@@ -0,0 +1,87 @@
+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 textStylePollPrimary = const TextStyle(fontSize: 16)
+      .merge(weightVariableTextStyle(context, wght: 600));
+    final textStylePollSecondary = TextStyle(
+      fontSize: 16, color: theme.colorPollNames);
+
+    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: textStylePollPrimary
+                      .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: textStylePollPrimary,
+                      ),
+                    ),
+                    if (option.voters.isNotEmpty)
+                      Text(
+                        '(${option.getVoterNames(store, zulipLocalizations.unknownUserName).join(', ')})',
+                        style: textStylePollSecondary,
+                      ),
+                  ]))),
+            ])),
+    ];
+
+    Text question = (poll.question.isNotEmpty)
+      ? Text(
+        poll.question,
+        style: textStylePollPrimary.copyWith(fontSize: 18))
+      : Text(
+        zulipLocalizations.pollWidgetQuestionMissing,
+        style: textStylePollPrimary.copyWith(fontSize: 18, 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: textStylePollSecondary.copyWith(fontStyle: FontStyle.italic)),
+        ...optionTiles
+      ],
+    );
+  }
+}

test/model/message_list_test.dart

@@ -1084,12 +1084,12 @@ void main() {
     model.contents[0] = const ZulipContent(nodes: [
       ParagraphNode(links: null, nodes: [TextNode('something outdated')])
     ]);
-    check(model.contents[0]).not((it) => it.equalsNode(correctContent));
+    check(model.contents[0]).isA<ZulipContent>().not((it) => it.equalsNode(correctContent));
 
     model.reassemble();
     checkNotifiedOnce();
     check(model).messages.length.equals(31);
-    check(model.contents[0]).equalsNode(correctContent);
+    check(model.contents[0]).isA<ZulipContent>().equalsNode(correctContent);
   });
 
   group('stream/topic muting', () {
@@ -1528,7 +1528,7 @@ void checkInvariants(MessageListView model) {
 
   check(model).contents.length.equals(model.messages.length);
   for (int i = 0; i < model.contents.length; i++) {
-    check(model.contents[i])
+    check(model.contents[i]).isA<ZulipContent>()
       .equalsNode(parseContent(model.messages[i].content));
   }
 
@@ -1553,7 +1553,7 @@ void checkInvariants(MessageListView model) {
     }
     check(model.items[i++]).isA<MessageListMessageItem>()
       ..message.identicalTo(model.messages[j])
-      ..content.identicalTo(model.contents[j])
+      ..content.identicalTo(model.contents[j] as ZulipContent)
       ..showSender.equals(
         forcedShowSender || model.messages[j].senderId != model.messages[j-1].senderId)
       ..isLastInBlock.equals(
@@ -1578,7 +1578,7 @@ extension MessageListDateSeparatorItemChecks on Subject<MessageListDateSeparator
 
 extension MessageListMessageItemChecks on Subject<MessageListMessageItem> {
   Subject<Message> get message => has((x) => x.message, 'message');
-  Subject<ZulipContent> get content => has((x) => x.content, 'content');
+  Subject<ZulipMessageContent> get content => has((x) => x.content, 'content');
   Subject<bool> get showSender => has((x) => x.showSender, 'showSender');
   Subject<bool> get isLastInBlock => has((x) => x.isLastInBlock, 'isLastInBlock');
 }
@@ -1587,7 +1587,7 @@ extension MessageListViewChecks on Subject<MessageListView> {
   Subject<PerAccountStore> get store => has((x) => x.store, 'store');
   Subject<Narrow> get narrow => has((x) => x.narrow, 'narrow');
   Subject<List<Message>> get messages => has((x) => x.messages, 'messages');
-  Subject<List<ZulipContent>> get contents => has((x) => x.contents, 'contents');
+  Subject<List<ZulipMessageContent>> get contents => has((x) => x.contents, 'contents');
   Subject<List<MessageListItem>> get items => has((x) => x.items, 'items');
   Subject<bool> get fetched => has((x) => x.fetched, 'fetched');
   Subject<bool> get haveOldest => has((x) => x.haveOldest, 'haveOldest');