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 += ``;
- });
- 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[]) {
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 {