Browse Source

Fix poll avatars

master
Eduard Kuzmenko 3 years ago
parent
commit
f507bec294
  1. 16
      src/components/poll.ts
  2. 6
      src/components/stackedAvatars.ts
  3. 6
      src/scss/partials/_chatBubble.scss

16
src/components/poll.ts

@ -24,6 +24,7 @@ import replaceContent from "../helpers/dom/replaceContent";
import windowSize from "../helpers/windowSize"; import windowSize from "../helpers/windowSize";
import { Poll, PollResults } from "../layer"; import { Poll, PollResults } from "../layer";
import toHHMMSS from "../helpers/string/toHHMMSS"; import toHHMMSS from "../helpers/string/toHHMMSS";
import StackedAvatars from "./stackedAvatars";
let lineTotalLength = 0; let lineTotalLength = 0;
const tailLength = 9; const tailLength = 9;
@ -590,17 +591,10 @@ export default class PollElement extends HTMLElement {
this.votersCountDiv.classList.toggle('hide', !!this.chosenIndexes.length); 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) { if(this.isMultiple) {

6
src/components/stackedAvatars.ts

@ -28,7 +28,11 @@ export default class StackedAvatars {
this.container.style.setProperty('--avatar-size', options.avatarSize + 'px'); this.container.style.setProperty('--avatar-size', options.avatarSize + 'px');
} }
/**
* MACOS, ANDROID - без реверса
* WINDOWS DESKTOP - реверс
* все приложения накладывают аватарку первую на вторую, а в макете зато вторая на первую, ЛОЛ!
*/
public render(peerIds: PeerId[], loadPromises?: Promise<any>[]) { public render(peerIds: PeerId[], loadPromises?: Promise<any>[]) {
const children = this.container.children; const children = this.container.children;
peerIds = peerIds.slice().reverse(); peerIds = peerIds.slice().reverse();

6
src/scss/partials/_chatBubble.scss

@ -2636,6 +2636,12 @@ $bubble-beside-button-width: 38px;
&-hint { &-hint {
color: var(--message-out-primary-color); color: var(--message-out-primary-color);
} }
&-avatars {
.stacked-avatars {
--border-color: var(--message-background-color);
}
}
} }
.progress-ring__circle { .progress-ring__circle {

Loading…
Cancel
Save