Eduard Kuzmenko
4 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 default class PopupPeer extends PopupElement { |
export type PopupPeerButtonCallbackCheckboxes = {[text in LangPackKey]: boolean}; |
||||||
constructor(private className: string, options: Partial<{ |
export type PopupPeerButtonCallback = (checkboxes?: PopupPeerButtonCallbackCheckboxes) => void; |
||||||
|
|
||||||
|
export type PopupPeerOptions = PopupOptions & Partial<{ |
||||||
peerId: number, |
peerId: number, |
||||||
title: string, |
title: string, |
||||||
titleLangKey?: LangPackKey, |
titleLangKey?: LangPackKey, |
||||||
|
titleLangArgs?: any[], |
||||||
description: string, |
description: string, |
||||||
descriptionLangKey?: LangPackKey, |
descriptionLangKey?: LangPackKey, |
||||||
buttons: Array<PopupButton> |
descriptionLangArgs?: any[], |
||||||
}> = {}) { |
buttons: Array<Omit<PopupButton, 'callback'> & Partial<{callback: PopupPeerButtonCallback}>>, |
||||||
super('popup-peer' + (className ? ' ' + className : ''), options.buttons, {overlayClosable: true}); |
checkboxes: Array<CheckboxFieldOptions & {checkboxField?: CheckboxField}> |
||||||
|
}>; |
||||||
|
export default class PopupPeer extends PopupElement { |
||||||
|
constructor(private className: string, options: PopupPeerOptions = {}) { |
||||||
|
super('popup-peer' + (className ? ' ' + className : ''), addCancelButton(options.buttons), {overlayClosable: true, ...options}); |
||||||
|
|
||||||
|
if(options.peerId) { |
||||||
let avatarEl = new AvatarElement(); |
let avatarEl = new AvatarElement(); |
||||||
avatarEl.setAttribute('dialog', '1'); |
avatarEl.setAttribute('dialog', '1'); |
||||||
avatarEl.setAttribute('peer', '' + options.peerId); |
avatarEl.setAttribute('peer', '' + options.peerId); |
||||||
avatarEl.classList.add('avatar-32'); |
avatarEl.classList.add('avatar-32'); |
||||||
|
this.header.prepend(avatarEl); |
||||||
|
} |
||||||
|
|
||||||
if(options.descriptionLangKey) this.title.append(i18n(options.titleLangKey)); |
if(options.descriptionLangKey) this.title.append(i18n(options.titleLangKey, options.titleLangArgs)); |
||||||
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