Add polls

lib/pleroma/web/static_fe/static_fe_controller.ex

@@ -190,6 +190,13 @@ defp represent(%Activity{object: %Object{data: data}} = activity, selected) do
         nil
       end
 
+    total_votes =
+      if data["oneOf"] do
+        Enum.sum(for option <- data["oneOf"], do: option["replies"]["totalItems"])
+      else
+        0
+      end
+
     %{
       user: User.sanitize_html(user),
       title: get_title(activity.object),
@@ -204,7 +211,9 @@ defp represent(%Activity{object: %Object{data: data}} = activity, selected) do
       visibility: Visibility.get_visibility(activity.object),
       reply_to: data["inReplyTo"],
       reply_to_user: reply_to_user,
-      edited_at: data["updated"]
+      edited_at: data["updated"],
+      poll: data["oneOf"],
+      total_votes: total_votes
     }
   end
 

lib/pleroma/web/static_fe/static_fe_view.ex

@@ -45,4 +45,14 @@ def open_content? do
   def get_attachment_name(%{"name" => name}), do: name
 
   def get_attachment_name(_), do: ""
+
+  def poll_percentage(count, total_votes) do
+    case count do
+      0 ->
+        "0%"
+
+      _ ->
+        Integer.to_string(trunc(count / total_votes * 100)) <> "%"
+    end
+  end
 end

lib/pleroma/web/templates/static_fe/static_fe/_notice.html.eex

@@ -31,10 +31,10 @@
             </time>
           </a>
           <%= if @visibility == "public" do %>
-		  <img class="fa-icon" src="/static-fe/svg/globe-solid.svg">
+          <img class="fa-icon" src="/static-fe/svg/globe-solid.svg">
           <% else %>
           <%= if @visibility == "unlisted" do %>
-		  <img class="fa-icon" src="/static-fe/svg/lock-open-solid.svg">
+          <img class="fa-icon" src="/static-fe/svg/lock-open-solid.svg">
           <% end %>
           <% end %>
         </div>
@@ -42,7 +42,7 @@
       <%= if @reply_to do %>
       <div class="heading-reply-row">
         <a class="reply-to-link" href="<%= @reply_to %>">
-		  <img class="fa-icon" src="/static-fe/svg/reply-solid.svg">
+          <img class="fa-icon" src="/static-fe/svg/reply-solid.svg">
           <%= gettext("Reply to") %>
         </a>
         <span class="h-card">
@@ -66,6 +66,17 @@
       <% end %>
         <div class="status-body">
           <%= raw @content %>
+          <%= if @poll && length(@poll) > 0 do %> 
+          <div class="poll">
+            <%= for %{"name" => option, "replies" => %{"totalItems" => count}} <- @poll do %>
+            <div class="poll-option" title="<%= count %>/<%= @total_votes %>">
+              <span class="percentage"><%= poll_percentage(count, @total_votes) %></span>
+              <span><%= raw option %></span>
+              <div class="fill" style="width: <%= poll_percentage(count, @total_votes) %>"></div>
+            </div>
+            <% end %>
+          </div>
+          <% end %>
           <%= if length(@attachment) > 0 do %>
           <div class="attachments">
             <%= for attachment = %{"url" => [url | _]} <- @attachment do %>
@@ -82,15 +93,15 @@
     <!-- <div class="emoji-reactions"></div> -->
     <div class="status-actions">
       <div>
-		<img class="fa-icon" src="/static-fe/svg/reply-solid.svg">
+        <img class="fa-icon" src="/static-fe/svg/reply-solid.svg">
         <span class="action-count"><%= @counts.replies %></span>
       </div>
       <div>
-		<img class="fa-icon" src="/static-fe/svg/retweet-solid.svg">
+        <img class="fa-icon" src="/static-fe/svg/retweet-solid.svg">
         <span class="action-count"><%= @counts.announces %></span>
       </div>
       <div>
-		<img class="fa-icon" src="/static-fe/svg/star-regular.svg">
+        <img class="fa-icon" src="/static-fe/svg/star-regular.svg">
         <span class="action-count"><%= @counts.likes %></span>
       </div>
     </div>

priv/static/static-fe/static-fe.css

@@ -26,6 +26,7 @@ :root {
     --link: rgba(226, 177, 136, 1);
     --text: rgba(185, 185, 186, 1);
     --border: rgba(26, 37, 53, 1);
+    --poll: rgba(99, 84, 72, 1);
 }
 @media (prefers-color-scheme: light) {
     :root {
@@ -55,6 +56,7 @@ @media (prefers-color-scheme: light) {
         --link: rgba(245, 91, 27, 1);
         --text: rgba(48, 64, 85, 1);
         --border: rgba(216, 230, 249, 1);
+        --poll: rgba(243, 184, 160, 1);
     }
 }
 
@@ -332,6 +334,28 @@ .nsfw-banner:hover div {
     display: none;
 }
 
+.poll-option {
+    position: relative;
+    display: flex;
+    margin: 0.75em 0.5em;
+    padding: 0.1em 0.25em;
+    word-break: break-word;
+    z-index: 1;
+}
+.poll-option .percentage {
+    width: 3.5em;
+    flex-shrink: 0;
+}
+.poll-option .fill {
+    height: 100%;
+    position: absolute;
+    background-color: var(--poll);
+    border-radius: 3px;
+    top: 0;
+    left: 0;
+    z-index: -1;
+}
+
 .status-actions {
     position: relative;
     width: 100%;
@@ -564,7 +588,7 @@ .fa-icon {
     height: 0.875em;
     margin: 0 0.3em;
     filter: var(--icon-filter);
-	align-self: center;
+    align-self: center;
 }
 
 .status-actions .fa-icon {