diff --git a/src/components/appSelectPeers.ts b/src/components/appSelectPeers.ts index 94dbeb00..03441388 100644 --- a/src/components/appSelectPeers.ts +++ b/src/components/appSelectPeers.ts @@ -8,6 +8,7 @@ import rootScope from "../lib/rootScope"; import { cancelEvent, findUpAttribute, findUpClassName } from "../helpers/dom"; import Scrollable from "./scrollable"; import { FocusDirection } from "../helpers/fastSmoothScroll"; +import CheckboxField from "./checkbox"; type PeerType = 'contacts' | 'dialogs'; @@ -46,6 +47,7 @@ export default class AppSelectPeers { private renderResultsFunc?: (peerIds: number[]) => void; private chatRightsAction?: ChatRights; private multiSelect = true; + private rippleEnabled = true; constructor(options: { appendTo: AppSelectPeers['appendTo'], @@ -54,7 +56,8 @@ export default class AppSelectPeers { onFirstRender?: () => void, renderResultsFunc?: AppSelectPeers['renderResultsFunc'], chatRightsAction?: AppSelectPeers['chatRightsAction'], - multiSelect?: AppSelectPeers['multiSelect'] + multiSelect?: AppSelectPeers['multiSelect'], + rippleEnabled?: boolean }) { for(let i in options) { // @ts-ignore @@ -341,14 +344,20 @@ export default class AppSelectPeers { dialog: peerId, container: this.scrollable, drawStatus: false, - rippleEnabled: false, + rippleEnabled: true, avatarSize: 48 }); if(this.multiSelect) { const selected = this.selected.has(peerId); - dom.containerEl.insertAdjacentHTML('afterbegin', `
`); - if(selected) dom.listEl.classList.add('active'); + const checkboxField = CheckboxField(); + + if(selected) { + dom.listEl.classList.add('active'); + checkboxField.input.checked = true; + } + + dom.containerEl.prepend(checkboxField.label); } let subtitle = ''; diff --git a/src/components/checkbox.ts b/src/components/checkbox.ts index 7b0202b7..99e52ad5 100644 --- a/src/components/checkbox.ts +++ b/src/components/checkbox.ts @@ -1,13 +1,19 @@ import appStateManager from "../lib/appManagers/appStateManager"; import { getDeepProperty } from "../helpers/object"; -const CheckboxField = (text: string, name: string, round = false, stateKey?: string) => { +const CheckboxField = (text?: string, name?: string, round = false, stateKey?: string) => { const label = document.createElement('label'); - label.classList.add(round ? 'checkbox-field-round' : 'checkbox-field'); + label.classList.add('checkbox-field'); + + if(round) { + label.classList.add('checkbox-field-round'); + } const input = document.createElement('input'); input.type = 'checkbox'; - input.id = 'input-' + name; + if(name) { + input.id = 'input-' + name; + } if(stateKey) { appStateManager.getState().then(state => { @@ -19,14 +25,42 @@ const CheckboxField = (text: string, name: string, round = false, stateKey?: str }); } - const span = document.createElement('span'); - span.classList.add('checkbox-caption'); - if(round) span.classList.add('tgico-check'); + let span: HTMLSpanElement; if(text) { - span.innerText = text; + span = document.createElement('span'); + span.classList.add('checkbox-caption'); + + if(text) { + span.innerText = text; + } + } else { + label.classList.add('checkbox-without-caption'); } - label.append(input, span); + const box = document.createElement('div'); + box.classList.add('checkbox-box'); + + const checkSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); + checkSvg.classList.add('checkbox-box-check'); + checkSvg.setAttributeNS(null, 'viewBox', '0 0 24 24'); + const use = document.createElementNS("http://www.w3.org/2000/svg", "use"); + use.setAttributeNS(null, 'href', '#check'); + use.setAttributeNS(null, 'x', '-1'); + checkSvg.append(use); + + const bg = document.createElement('div'); + bg.classList.add('checkbox-box-background'); + + const border = document.createElement('div'); + border.classList.add('checkbox-box-border'); + + box.append(border, bg, checkSvg); + + label.append(input, box); + + if(span) { + label.append(span); + } return {label, input, span}; }; diff --git a/src/components/popups/forward.ts b/src/components/popups/forward.ts index ce7fe5e5..bc018f41 100644 --- a/src/components/popups/forward.ts +++ b/src/components/popups/forward.ts @@ -35,7 +35,8 @@ export default class PopupForward extends PopupElement { } }, chatRightsAction: 'send', - multiSelect: false + multiSelect: false, + rippleEnabled: false }); //this.scrollable = new Scrollable(this.body); diff --git a/src/components/sidebarLeft/tabs/includedChats.ts b/src/components/sidebarLeft/tabs/includedChats.ts index d00ccbca..9c31d324 100644 --- a/src/components/sidebarLeft/tabs/includedChats.ts +++ b/src/components/sidebarLeft/tabs/includedChats.ts @@ -10,6 +10,8 @@ import { copy } from "../../../helpers/object"; import ButtonIcon from "../../buttonIcon"; import { FocusDirection } from "../../../helpers/fastSmoothScroll"; import { fastRaf } from "../../../helpers/schedulers"; +import CheckboxField from "../../checkbox"; +import Button from "../../button"; export default class AppIncludedChatsTab extends SliderSuperTab { private confirmBtn: HTMLElement; @@ -97,7 +99,12 @@ export default class AppIncludedChatsTab extends SliderSuperTab { } checkbox(selected?: boolean) { - return `
`; + const checkboxField = CheckboxField('', '', true); + if(selected) { + checkboxField.input.checked = selected; + } + + return checkboxField.label; } renderResults = async(peerIds: number[]) => { @@ -111,12 +118,12 @@ export default class AppIncludedChatsTab extends SliderSuperTab { dialog: peerId, container: this.selector.scrollable, drawStatus: false, - rippleEnabled: false, + rippleEnabled: true, avatarSize: 46 }); const selected = this.selector.selected.has(peerId); - dom.containerEl.insertAdjacentHTML('beforeend', this.checkbox(selected)); + dom.containerEl.append(this.checkbox(selected)); if(selected) dom.listEl.classList.add('active'); let subtitle = ''; @@ -173,11 +180,14 @@ export default class AppIncludedChatsTab extends SliderSuperTab { }; } - let html = ''; + const f = document.createDocumentFragment(); for(const key in details) { - html += ``; + const button = Button('btn-primary btn-transparent folder-category-button', {icon: details[key].ico, text: details[key].text}); + button.dataset.peerId = key; + button.append(this.checkbox()); + f.append(button); } - categories.innerHTML = html; + categories.append(f); const hr = document.createElement('hr'); hr.style.margin = '7px 0 9px'; diff --git a/src/components/sidebarRight/tabs/sharedMedia.ts b/src/components/sidebarRight/tabs/sharedMedia.ts index ca33387f..d4c3956a 100644 --- a/src/components/sidebarRight/tabs/sharedMedia.ts +++ b/src/components/sidebarRight/tabs/sharedMedia.ts @@ -1,5 +1,5 @@ import appImManager from "../../../lib/appManagers/appImManager"; -import appMessagesManager, { MyInputMessagesFilter, MyMessage } from "../../../lib/appManagers/appMessagesManager"; +import appMessagesManager from "../../../lib/appManagers/appMessagesManager"; import appPeersManager from "../../../lib/appManagers/appPeersManager"; import appProfileManager from "../../../lib/appManagers/appProfileManager"; import appUsersManager from "../../../lib/appManagers/appUsersManager"; @@ -10,6 +10,7 @@ import AppSearchSuper, { SearchSuperType } from "../../appSearchSuper."; import AvatarElement from "../../avatar"; import Scrollable from "../../scrollable"; import { SliderTab } from "../../slider"; +import CheckboxField from "../../checkbox"; let setText = (text: string, el: HTMLDivElement) => { window.requestAnimationFrame(() => { @@ -72,10 +73,15 @@ export default class AppSharedMediaTab implements SliderTab { username: this.profileContentEl.querySelector('.profile-row-username'), phone: this.profileContentEl.querySelector('.profile-row-phone'), notificationsRow: this.profileContentEl.querySelector('.profile-row-notifications'), - notificationsCheckbox: this.profileContentEl.querySelector('#profile-notifications'), + notificationsCheckbox: null, notificationsStatus: this.profileContentEl.querySelector('.profile-row-notifications > p') }; + const checkboxField = CheckboxField('Notifications', 'notifications'); + this.profileElements.notificationsCheckbox = checkboxField.input; + this.profileElements.notificationsCheckbox.checked = true; + this.profileElements.notificationsRow.prepend(checkboxField.label); + this.scroll = new Scrollable(this.container, 'SR', 400); this.profileElements.notificationsCheckbox.addEventListener('change', () => { diff --git a/src/index.hbs b/src/index.hbs index 0f4dd5ab..f8e8c96a 100644 --- a/src/index.hbs +++ b/src/index.hbs @@ -89,6 +89,7 @@