From f507bec2941d53972f0248f07d12bdbcb2d85116 Mon Sep 17 00:00:00 2001
From: Eduard Kuzmenko <thanwords24@gmail.com>
Date: Fri, 8 Apr 2022 02:20:13 +0300
Subject: [PATCH] Fix poll avatars

---
 src/components/poll.ts             | 16 +++++-----------
 src/components/stackedAvatars.ts   |  6 +++++-
 src/scss/partials/_chatBubble.scss |  6 ++++++
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/components/poll.ts b/src/components/poll.ts
index 1b0d2bfc..ed4c38f2 100644
--- a/src/components/poll.ts
+++ b/src/components/poll.ts
@@ -24,6 +24,7 @@ import replaceContent from "../helpers/dom/replaceContent";
 import windowSize from "../helpers/windowSize";
 import { Poll, PollResults } from "../layer";
 import toHHMMSS from "../helpers/string/toHHMMSS";
+import StackedAvatars from "./stackedAvatars";
 
 let lineTotalLength = 0;
 const tailLength = 9;
@@ -590,17 +591,10 @@ export default class PollElement extends HTMLElement {
         this.votersCountDiv.classList.toggle('hide', !!this.chosenIndexes.length);
       }
 
-      let html = '';
-      /**
-       * MACOS, ANDROID - без реверса
-       * WINDOWS DESKTOP - реверс
-       * все приложения накладывают аватарку первую на вторую, а в макете зато вторая на первую, ЛОЛ!
-       */
-      (results.recent_voters || [])/* .slice().reverse() */.forEach((userId, idx) => {
-        const style = idx === 0 ? '' : `style="transform: translateX(-${idx * 3}px);"`;
-        html += `<avatar-element class="avatar-16 poll-avatar" dialog="0" peer="${userId.toPeerId()}" ${style}></avatar-element>`;
-      });
-      this.avatarsDiv.innerHTML = html;
+      const peerIds = (results.recent_voters || []).map(userId => userId.toPeerId());
+      const stackedAvatars = new StackedAvatars({avatarSize: 16});
+      stackedAvatars.render(peerIds);
+      replaceContent(this.avatarsDiv, stackedAvatars.container);
     }
 
     if(this.isMultiple) {
diff --git a/src/components/stackedAvatars.ts b/src/components/stackedAvatars.ts
index 959cc743..82a3a773 100644
--- a/src/components/stackedAvatars.ts
+++ b/src/components/stackedAvatars.ts
@@ -28,7 +28,11 @@ export default class StackedAvatars {
 
     this.container.style.setProperty('--avatar-size', options.avatarSize + 'px');
   }
-
+  /**
+   * MACOS, ANDROID - без реверса
+   * WINDOWS DESKTOP - реверс
+   * все приложения накладывают аватарку первую на вторую, а в макете зато вторая на первую, ЛОЛ!
+   */
   public render(peerIds: PeerId[], loadPromises?: Promise<any>[]) {
     const children = this.container.children;
     peerIds = peerIds.slice().reverse();
diff --git a/src/scss/partials/_chatBubble.scss b/src/scss/partials/_chatBubble.scss
index a10327f1..71aaf75a 100644
--- a/src/scss/partials/_chatBubble.scss
+++ b/src/scss/partials/_chatBubble.scss
@@ -2636,6 +2636,12 @@ $bubble-beside-button-width: 38px;
       &-hint {
         color: var(--message-out-primary-color);
       }
+
+      &-avatars {
+        .stacked-avatars {
+          --border-color: var(--message-background-color);
+        }
+      }
     }
 
     .progress-ring__circle {