Eduard Kuzmenko
3 years ago
36 changed files with 1542 additions and 505 deletions
@ -1,19 +0,0 @@ |
|||||||
import PopupElement, { addCancelButton, PopupButton, PopupOptions } from "."; |
|
||||||
import { LangPackKey, _i18n } from "../../lib/langPack"; |
|
||||||
|
|
||||||
export default class PopupConfirmAction extends PopupElement { |
|
||||||
constructor(className: string, buttons: PopupButton[], options: PopupOptions & {title: LangPackKey, text: LangPackKey}) { |
|
||||||
super('popup-peer popup-confirm-action ' + className, addCancelButton(buttons), { |
|
||||||
overlayClosable: true, |
|
||||||
...options |
|
||||||
}); |
|
||||||
|
|
||||||
_i18n(this.title, options.title); |
|
||||||
|
|
||||||
const p = document.createElement('p'); |
|
||||||
p.classList.add('popup-description'); |
|
||||||
_i18n(p, options.text); |
|
||||||
|
|
||||||
this.container.insertBefore(p, this.header.nextElementSibling); |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,32 +1,67 @@ |
|||||||
import AvatarElement from "../avatar"; |
import AvatarElement from "../avatar"; |
||||||
import PopupElement, { PopupButton } from "."; |
import PopupElement, { addCancelButton, PopupButton, PopupOptions } from "."; |
||||||
import { i18n, LangPackKey } from "../../lib/langPack"; |
import { i18n, LangPackKey } from "../../lib/langPack"; |
||||||
|
import CheckboxField, { CheckboxFieldOptions } from "../checkboxField"; |
||||||
|
|
||||||
|
export type PopupPeerButtonCallbackCheckboxes = {[text in LangPackKey]: boolean}; |
||||||
|
export type PopupPeerButtonCallback = (checkboxes?: PopupPeerButtonCallbackCheckboxes) => void; |
||||||
|
|
||||||
|
export type PopupPeerOptions = PopupOptions & Partial<{ |
||||||
|
peerId: number, |
||||||
|
title: string, |
||||||
|
titleLangKey?: LangPackKey, |
||||||
|
titleLangArgs?: any[], |
||||||
|
description: string, |
||||||
|
descriptionLangKey?: LangPackKey, |
||||||
|
descriptionLangArgs?: any[], |
||||||
|
buttons: Array<Omit<PopupButton, 'callback'> & Partial<{callback: PopupPeerButtonCallback}>>, |
||||||
|
checkboxes: Array<CheckboxFieldOptions & {checkboxField?: CheckboxField}> |
||||||
|
}>; |
||||||
export default class PopupPeer extends PopupElement { |
export default class PopupPeer extends PopupElement { |
||||||
constructor(private className: string, options: Partial<{ |
constructor(private className: string, options: PopupPeerOptions = {}) { |
||||||
peerId: number, |
super('popup-peer' + (className ? ' ' + className : ''), addCancelButton(options.buttons), {overlayClosable: true, ...options}); |
||||||
title: string, |
|
||||||
titleLangKey?: LangPackKey, |
if(options.peerId) { |
||||||
description: string, |
let avatarEl = new AvatarElement(); |
||||||
descriptionLangKey?: LangPackKey, |
avatarEl.setAttribute('dialog', '1'); |
||||||
buttons: Array<PopupButton> |
avatarEl.setAttribute('peer', '' + options.peerId); |
||||||
}> = {}) { |
avatarEl.classList.add('avatar-32'); |
||||||
super('popup-peer' + (className ? ' ' + className : ''), options.buttons, {overlayClosable: true}); |
this.header.prepend(avatarEl); |
||||||
|
} |
||||||
let avatarEl = new AvatarElement(); |
|
||||||
avatarEl.setAttribute('dialog', '1'); |
if(options.descriptionLangKey) this.title.append(i18n(options.titleLangKey, options.titleLangArgs)); |
||||||
avatarEl.setAttribute('peer', '' + options.peerId); |
|
||||||
avatarEl.classList.add('avatar-32'); |
|
||||||
|
|
||||||
if(options.descriptionLangKey) this.title.append(i18n(options.titleLangKey)); |
|
||||||
else this.title.innerText = options.title || ''; |
else this.title.innerText = options.title || ''; |
||||||
this.header.prepend(avatarEl); |
|
||||||
|
|
||||||
let p = document.createElement('p'); |
let p = document.createElement('p'); |
||||||
p.classList.add('popup-description'); |
p.classList.add('popup-description'); |
||||||
if(options.descriptionLangKey) p.append(i18n(options.descriptionLangKey)); |
if(options.descriptionLangKey) p.append(i18n(options.descriptionLangKey, options.descriptionLangArgs)); |
||||||
else p.innerHTML = options.description; |
else p.innerHTML = options.description; |
||||||
|
|
||||||
this.container.insertBefore(p, this.header.nextElementSibling); |
const fragment = document.createDocumentFragment(); |
||||||
|
fragment.append(p); |
||||||
|
|
||||||
|
if(options.checkboxes) { |
||||||
|
options.checkboxes.forEach(o => { |
||||||
|
o.withRipple = true; |
||||||
|
const checkboxField = new CheckboxField(o); |
||||||
|
o.checkboxField = checkboxField; |
||||||
|
fragment.append(checkboxField.label); |
||||||
|
}); |
||||||
|
|
||||||
|
options.buttons.forEach(button => { |
||||||
|
if(button.callback) { |
||||||
|
const original = button.callback; |
||||||
|
button.callback = () => { |
||||||
|
const c: PopupPeerButtonCallbackCheckboxes = {}; |
||||||
|
options.checkboxes.forEach(o => { |
||||||
|
c[o.text] = o.checkboxField.checked; |
||||||
|
}); |
||||||
|
original(c); |
||||||
|
}; |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
this.container.insertBefore(fragment, this.header.nextElementSibling); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,107 @@ |
|||||||
|
.peer-typing { |
||||||
|
display: inline-block; |
||||||
|
margin-right: 4px; |
||||||
|
|
||||||
|
&-text { |
||||||
|
&-dot { |
||||||
|
width: 6px; |
||||||
|
height: 6px; |
||||||
|
border-radius: 50%; |
||||||
|
background-color: $color-blue; |
||||||
|
margin: 0 1px; |
||||||
|
display: inline-block; |
||||||
|
vertical-align: middle; |
||||||
|
animation-duration: .6s; |
||||||
|
animation-iteration-count: infinite; |
||||||
|
animation-timing-function: linear; |
||||||
|
animation-name: dotMiddle; |
||||||
|
} |
||||||
|
|
||||||
|
&-dot:first-child { |
||||||
|
animation-name: dotFirst; |
||||||
|
} |
||||||
|
|
||||||
|
&-dot:last-child { |
||||||
|
animation-name: dotLast; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
$scale-max: 1; |
||||||
|
$scale-step: 1 / 6; |
||||||
|
$scale-mid: $scale-max - $scale-step; |
||||||
|
$scale-min: $scale-max - ($scale-step * 2); |
||||||
|
$opacity-max: 1; |
||||||
|
$opacity-step: .1; |
||||||
|
$opacity-mid: $opacity-max - $opacity-step; |
||||||
|
$opacity-min: $opacity-max - ($opacity-step * 2); |
||||||
|
@keyframes dotFirst { |
||||||
|
0% { |
||||||
|
transform: scale($scale-min); |
||||||
|
opacity: $opacity-min; |
||||||
|
} |
||||||
|
|
||||||
|
50% { |
||||||
|
transform: scale($scale-min); |
||||||
|
opacity: $opacity-min; |
||||||
|
} |
||||||
|
|
||||||
|
75% { |
||||||
|
transform: scale($scale-max); |
||||||
|
opacity: $opacity-max; |
||||||
|
} |
||||||
|
|
||||||
|
100% { |
||||||
|
transform: scale($scale-min); |
||||||
|
opacity: $opacity-min; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes dotMiddle { |
||||||
|
0% { |
||||||
|
transform: scale($scale-mid); |
||||||
|
opacity: $opacity-mid; |
||||||
|
} |
||||||
|
|
||||||
|
12.5% { |
||||||
|
transform: scale($scale-min); |
||||||
|
opacity: $opacity-min; |
||||||
|
} |
||||||
|
|
||||||
|
62.5% { |
||||||
|
transform: scale($scale-min); |
||||||
|
opacity: $opacity-min; |
||||||
|
} |
||||||
|
|
||||||
|
87.5% { |
||||||
|
transform: scale($scale-max); |
||||||
|
opacity: $opacity-max; |
||||||
|
} |
||||||
|
|
||||||
|
100% { |
||||||
|
transform: scale($scale-mid); |
||||||
|
opacity: $opacity-mid; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes dotLast { |
||||||
|
0% { |
||||||
|
transform: scale($scale-max); |
||||||
|
opacity: $opacity-max; |
||||||
|
} |
||||||
|
|
||||||
|
25% { |
||||||
|
transform: scale($scale-min); |
||||||
|
opacity: $opacity-min; |
||||||
|
} |
||||||
|
|
||||||
|
75% { |
||||||
|
transform: scale($scale-min); |
||||||
|
opacity: $opacity-min; |
||||||
|
} |
||||||
|
|
||||||
|
100% { |
||||||
|
transform: scale($scale-max); |
||||||
|
opacity: $opacity-max; |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue