Fix poll avatars

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 = '';
+      const peerIds = (results.recent_voters || []).map(userId => userId.toPeerId());
-      /**
+      const stackedAvatars = new StackedAvatars({avatarSize: 16});
-       * MACOS, ANDROID - без реверса
+      stackedAvatars.render(peerIds);
-       * WINDOWS DESKTOP - реверс
+      replaceContent(this.avatarsDiv, stackedAvatars.container);
-       * все приложения накладывают аватарку первую на вторую, а в макете зато вторая на первую, ЛОЛ!
-       */
-      (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;
     }
 
     if(this.isMultiple) {

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();

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 {