poll: Support read-only poll widget UI.

The UI is temporary until we get an actual design.

Fixes zulip#165.

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

Author: PIG208

assets/l10n/app_en.arb

@@ -483,5 +483,24 @@
   "notifSelfUser": "You",
   "@notifSelfUser": {
     "description": "Display name for the user themself, to show after replying in an Android notification"
+  },
+  "pollWidgetQuestionMissing": "Untitled Poll",
+  "@pollWidgetQuestionMissing": {
+    "description": "Text to display for a poll when the question is missing"
+  },
+  "pollWidgetOptionsMissing": "Empty poll",
+  "@pollWidgetOptionsMissing": {
+    "description": "Text to display for a poll when it has no options"
+  },
+  "pollWidgetVoteCountZero": "no votes",
+  "@pollWidgetVoteCountZero": {
+    "description": "Label when the number of votes on a poll option is zero"
+  },
+  "pollWidgetVoteCount": "{numVotes, plural, =1{1 vote} other{{numVotes} votes}}",
+  "@pollWidgetVoteCount": {
+    "description": "Label for the number of votes on a poll option",
+    "placeholders": {
+      "numVotes": {"type": "int", "example": "3"}
+    }
   }
 }

lib/api/model/widget.dart

@@ -1,4 +1,5 @@
 import '../../log.dart';
+import '../../model/store.dart';
 import 'submessage.dart';
 
 /// States of a poll Zulip widget.
@@ -104,6 +105,9 @@ class Option {
   final String text;
   final Set<int> voters = {};
 
+  Iterable<String> getVoterNames(PerAccountStore store) =>
+    voters.map((userId) => store.users[userId]?.fullName).whereType<String>();
+
   @override
   bool operator ==(Object other) {
     if (other is! Option) 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;
 
@@ -94,7 +94,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.
   ///
@@ -130,10 +130,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);
@@ -150,7 +158,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);
   }
@@ -161,7 +169,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;
@@ -187,7 +195,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();
   }
@@ -196,7 +204,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';
 
@@ -222,17 +223,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,86 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_gen/gen_l10n/zulip_localizations.dart';
+
+import '../api/model/widget.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 pollTextStyle = const TextStyle(
+      fontSize: 16,
+    ).merge(weightVariableTextStyle(context, wght: 600));
+
+    final optionTiles = [
+      for (final option in poll.options)
+        Padding(
+          padding: const EdgeInsets.only(bottom: 5.0),
+          child: Row(
+            children: [
+              Container(
+                width: 25,
+                height: 25,
+                decoration: BoxDecoration(
+                  border: Border.all(color: const HSLColor.fromAHSL(1, 156, 0.28, 0.7).toColor()),
+                  borderRadius: BorderRadius.circular(3),
+                ),
+                child: Center(
+                  child: Text(option.voters.length.toString(),
+                    style: pollTextStyle.merge(TextStyle(color: const HSLColor.fromAHSL(1, 156, 0.41, 0.4).toColor())),
+                    textAlign: TextAlign.center,
+                  ),
+                ),
+              ),
+              Flexible(
+                fit: FlexFit.loose,
+                child: Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 5.0),
+                  child: Text(
+                    option.text,
+                    overflow: TextOverflow.ellipsis,
+                    style: pollTextStyle,
+                  ),
+                ),
+              ),
+              if (option.voters.isNotEmpty)
+                Flexible(
+                  fit: FlexFit.loose,
+                  child: Text(
+                    '(${option.getVoterNames(store).join(', ')})',
+                    overflow: TextOverflow.ellipsis,
+                    style: const TextStyle(fontSize: 16, color: Color.fromARGB(255, 115, 115, 115)),
+                  ),
+                )
+            ],
+          ),
+        ),
+    ];
+
+    final effectiveQuestion = (poll.question.isNotEmpty)
+      ? poll.question
+      : zulipLocalizations.pollWidgetQuestionMissing;
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Padding(
+          padding: const EdgeInsets.only(bottom: 6.0),
+          child: Text(effectiveQuestion,
+            textAlign: TextAlign.start,
+            style: pollTextStyle.merge(const TextStyle(fontSize: 18))),
+        ),
+        if (optionTiles.isEmpty)
+          Text(zulipLocalizations.pollWidgetOptionsMissing),
+        ...optionTiles
+      ],
+    );
+  }
+}

test/model/message_list_test.dart

@@ -584,12 +584,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', () {
@@ -987,7 +987,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));
   }
 
@@ -1012,7 +1012,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(
@@ -1037,7 +1037,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');
 }
@@ -1046,7 +1046,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');