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 {